Use API in front-end to get list of applications

[OlgaLiber2]

Describe the task
Use API cached results in front-end to get list of applications

Acceptance Criteria

• Stop using the get-applications API call
• Used cached results to render application list
• Tested with user that has only FAM-ADMIN role
• Tested with user that has no role
• Tested with user that has multiple app admin roles
• Tested with user that has delegated admin access (ie; FOM_SUBMITTER)

Additional context
Refers to the endpoint done in #1144
Story: The UI should use the new get_my_FAM_access API for determining what the user has access to do as a FAM admin or app admin.

May need to do 'manual' testing and separate ticket for component testing if it gets too complicated

Test note:
In ticket #1144, we cached the user access in the local storage "famLoginUser" (this could change depends on how #1144 is implemented). When we write component tests in this ticket, we can set the local storage "famLoginUser" with the access we want (based on different test scenario), and mount the "Manage Application" component, and verify if the dropdown returns the expected applications. Like in the screenshot below, the user has access in three applications, no matter the detail, the dropdown should return three apps.

[ianliuwk1019]

Since I am replacing the way getting the applications, I also added this to be convenient/and obvious to user profile to know the user's level of admins like this. It is just a quick addition. If requires, we can have improvement ticket to make it better.
Would it be ok?
@MCatherine1994 @OlgaLiber2

[ianliuwk1019]

For this ticket, I think we won't do the last check Tested with user that has delegated admin access (ie; FOM_SUBMITTER) since current app does not have "Delegated Admin" screens built yet.
@MCatherine1994 @OlgaLiber2

However, I think we probably miss one ticket to implement backend check (for router_guard checks) for FAM frontend user who can request any action (endpoint) with regarding to their privilege(delegated admin); and probably need to adjust existing check on router_guard.authorize_by_app_id() we can evaluate this tomorrow. Thanks.
@basilv @MCatherine1994

[MCatherine1994]

Hi Ian, I wonder if we can mock the famLoginUser access to have delegated admin and test the dropdown has the application the user delegated for? Thanks!!

And I'm not sure I understand the second question, maybe we can chat more tomorrow, thanks so much!!

[MCatherine1994]

Encounter an issue when writing tests to verify the dropdown options. Somehow in our test, when we render the manage permission page and try to click and open the dropdown option panel, the dropdown panel can't be found. I submitted an issue in the Primevue GitHub, issue number 5347, will follow up if hear anything from them. Will close this ticket for now, as the main code change is merged, just left the test code, we can create a new ticket to write the test once we hear back from the Primevue team. The test code is in Ian's branch feat/1145-tests.

Also put the sample testing code here:

import { afterEach, beforeEach, describe, expect, it, vi, type SpyInstance } from 'vitest';
import type { VueWrapper } from '@vue/test-utils/dist/vueWrapper';
import { DOMWrapper, mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config';
import ManagePermissions from '@/components/managePermissions/ManagePermissions.vue';
import { routes } from '@/router';
import { routeItems } from '@/router/routeItem';
import FamLoginUserState from '@/store/FamLoginUserState';
import { fixJsdomCssErr } from '@/tests/common/fixJsdomCssErr';

fixJsdomCssErr();

// router mock setup (for mounting component properly when involving other components)
vi.mock('vue-router', async () => {
    const actual: Object = await vi.importActual("vue-router");
    return {
        ...actual,
        useRoute: () => {
            return routes.filter(
                (route) => route.name == routeItems.dashboard.name
            )[0]
        }
    };
});

describe('ManagePermissions', () => {
    let wrapper: VueWrapper;

    describe('Application dropdown selection', () => {
        let getUserAccessSpy: SpyInstance;
        let appDropdownInput: DOMWrapper<HTMLInputElement>;
        let appDropdownTrigger: DOMWrapper<HTMLInputElement>;

        beforeEach(async () => {
            getUserAccessSpy = vi.spyOn(FamLoginUserState,'getUserAccess');
            wrapper = mount(ManagePermissions, {
               global: {
                   plugins: [PrimeVue],
               },
           });
            appDropdownInput = wrapper.find(".p-dropdown.application-dropdown .p-dropdown-label");
            appDropdownTrigger = wrapper.find(".p-dropdown.application-dropdown .p-dropdown-trigger");

        });

        it("should be empty when user access state is empty", async () => {
            // mock user access empty
            getUserAccessSpy.mockImplementation(() => []);

            expect(appDropdownInput.element.textContent).toBe("Choose an application to manage permissions");
            expect(appDropdownInput.exists()).toBe(true);
            expect(appDropdownTrigger.exists()).toBe(true);
            // when dropdown is not opened, no options display
            expect(wrapper.text()).not.contains("No available options");
            expect(wrapper.find('.p-overlay-open').exists()).toBe(false);

            await appDropdownTrigger.trigger('click');

            expect(wrapper.find('.p-overlay-open').exists()).toBe(true);
            expect(wrapper.find('.p-dropdown-panel').exists()).toBe(true);   // this line failed
            expect(wrapper.text()).contains("No available options");
        });

        afterEach(async () => {
            wrapper.unmount();
        })
    });
});