feat: #1150 navigation to grant delegated admin screen (#1228)

Co-authored-by: Nicola Saglioni <nicola.saglioni@encora.com>
Co-authored-by: catherine meng <mcatherine1994@gmail.com>

frontend/src/components/grantaccess/GrantAccess.vue

@@ -21,6 +21,8 @@ import UserNameInput from '@/components/grantaccess/form/UserNameInput.vue';
 import ForestClientInput from '@/components/grantaccess/form/ForestClientInput.vue';
 import FamLoginUserState from '@/store/FamLoginUserState';
 import type { FamRoleDto } from 'fam-admin-mgmt-api/model';
+import { setCurrentTabState } from '@/store/CurrentTabState';
+import { TabKey } from '@/enum/TabEnum';
 
 const defaultFormData = {
     domain: UserType.I,
@@ -144,7 +146,7 @@ const handleSubmit = async () => {
         errorCode,
         role
     );
-
+    setCurrentTabState(TabKey.UserAccess);
     router.push('/dashboard');
 };
 

frontend/src/components/grantaccess/GrantApplicationAdmin.vue

@@ -13,6 +13,8 @@ import { setNotificationMsg } from '@/store/NotificationState';
 import LoginUserState from '@/store/FamLoginUserState';
 import { computed, ref } from 'vue';
 import { UserType } from 'fam-app-acsctl-api/model';
+import { setCurrentTabState } from '@/store/CurrentTabState';
+import { TabKey } from '@/enum/TabEnum';
 
 const defaultFormData = {
     userId: '',
@@ -100,6 +102,7 @@ const handleSubmit = async () => {
             );
         }
     }
+    setCurrentTabState(TabKey.AdminAccess);
     router.push('/dashboard');
 };
 </script>

frontend/src/components/grantaccess/GrantDelegatedAdmin.vue

@@ -21,6 +21,8 @@ import type {
     FamRoleDto,
     FamAccessControlPrivilegeCreateRequest,
 } from 'fam-admin-mgmt-api/model';
+import { setCurrentTabState } from '@/store/CurrentTabState';
+import { TabKey } from '@/enum/TabEnum';
 
 const confirm = useConfirm();
 
@@ -140,8 +142,9 @@ const confirmSubmit = async () => {
         successList,
         errorList,
         errorCode,
-        role,
+        role
     );
+    setCurrentTabState(TabKey.DelegatedAdminAccess);
     router.push('/dashboard');
 };
 

frontend/src/components/managePermissions/ManagePermissions.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { onUnmounted, ref, shallowRef, type PropType, computed } from 'vue';
 import Dropdown, { type DropdownChangeEvent } from 'primevue/dropdown';
-import TabView from 'primevue/tabview';
+import TabView, { type TabViewChangeEvent } from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import ManagePermissionsTitle from '@/components/managePermissions/ManagePermissionsTitle.vue';
 import UserDataTable from '@/components/managePermissions/table/UserDataTable.vue';
 import ApplicationAdminTable from '@/components/managePermissions/table/ApplicationAdminTable.vue';
 import LoginUserState from '@/store/FamLoginUserState';
+import {
+    getCurrentTabState,
+    setCurrentTabState,
+} from '@/store/CurrentTabState';
 import DelegatedAdminTable from '@/components/managePermissions/table/DelegatedAdminTable.vue';
 import {
     isApplicationSelected,
@@ -35,6 +39,7 @@ import {
 } from '@/services/fetchData';
 import { Severity } from '@/enum/SeverityEnum';
 import { IconSize } from '@/enum/IconEnum';
+import { TabKey } from '@/enum/TabEnum';
 
 const props = defineProps({
     userRoleAssignments: {
@@ -63,28 +68,29 @@ const delegatedAdmins = shallowRef<FamAccessControlPrivilegeGetResponse[]>(
     props.delegatedAdmins
 );
 
-const resetActiveTab = ref(0);
-
 const applicationsUserAdministers = computed(() => {
     return LoginUserState.getApplicationsUserAdministers();
 });
 
+const tabViewRef = ref();
+
 onUnmounted(() => {
     resetNotification();
 });
 
 const onApplicationSelected = async (e: DropdownChangeEvent) => {
     setSelectedApplication(e.value ? JSON.stringify(e.value) : null);
 
-    // make the first tab active
-    resetActiveTab.value = 0;
     if (e.value.id === FAM_APPLICATION_ID) {
+        setCurrentTabState(TabKey.AdminAccess);
         applicationAdmins.value = await fetchApplicationAdmins();
     } else {
+        if (!LoginUserState.isAdminOfSelectedApplication()) {
+            setCurrentTabState(TabKey.UserAccess);
+        }
         userRoleAssignments.value = await fetchUserRoleAssignments(
             selectedApplicationId.value
         );
-
         delegatedAdmins.value = await fetchDelegatedAdmins(
             selectedApplicationId.value
         );
@@ -149,6 +155,20 @@ const deleteDelegatedAdminAssignment = async (
         );
     }
 };
+
+// Tabs methods
+const setCurrentTab = (event: TabViewChangeEvent) => {
+    setCurrentTabState(tabViewRef.value?.tabs[event.index].key);
+};
+
+const getCurrentTab = () => {
+    const tabIndex = tabViewRef.value?.tabs
+        .map((item: any) => {
+            return item.key;
+        })
+        .indexOf(getCurrentTabState());
+    return tabIndex > 0 ? tabIndex : 0;
+};
 </script>
 
 <template>
@@ -171,7 +191,9 @@ const deleteDelegatedAdminAssignment = async (
             <TablePlaceholder v-if="!isApplicationSelected" />
             <TabView
                 v-else
-                v-model:active-index="resetActiveTab"
+                ref="tabViewRef"
+                :active-index="getCurrentTab()"
+                @tab-change="setCurrentTab($event)"
                 :pt="{
                     root: {
                         style: 'margin-top: 1.5rem',
@@ -182,30 +204,22 @@ const deleteDelegatedAdminAssignment = async (
                 }"
             >
                 <TabPanel
+                    :key="TabKey.AdminAccess"
                     header="Application admins"
                     v-if="selectedApplicationId === FAM_APPLICATION_ID"
                 >
                     <template #header>
-                        <Icon
-                            icon="enterprise"
-                            :size="IconSize.small"
-                        />
+                        <Icon icon="enterprise" :size="IconSize.small" />
                     </template>
                     <ApplicationAdminTable
                         :loading="isLoading()"
                         :applicationAdmins="applicationAdmins || []"
                         @deleteAppAdmin="deleteAppAdmin"
                     />
                 </TabPanel>
-                <TabPanel
-                    header="Users"
-                    v-else
-                >
+                <TabPanel :key="TabKey.UserAccess" header="Users" v-else>
                     <template #header>
-                        <Icon
-                            icon="user"
-                            :size="IconSize.small"
-                        />
+                        <Icon icon="user" :size="IconSize.small" />
                     </template>
 
                     <UserDataTable
@@ -216,17 +230,15 @@ const deleteDelegatedAdminAssignment = async (
                 </TabPanel>
 
                 <TabPanel
+                    :key="TabKey.DelegatedAdminAccess"
                     v-if="
                         LoginUserState.isAdminOfSelectedApplication() &&
                         selectedApplicationId !== FAM_APPLICATION_ID
                     "
                     header="Delegated admins"
                 >
                     <template #header>
-                        <Icon
-                            icon="enterprise"
-                            :size="IconSize.small"
-                        />
+                        <Icon icon="enterprise" :size="IconSize.small" />
                     </template>
 
                     <DelegatedAdminTable

frontend/src/enum/TabEnum.ts

@@ -0,0 +1,5 @@
+export enum TabKey {
+    AdminAccess = 'adminAccess',
+    UserAccess = 'userAccess',
+    DelegatedAdminAccess = 'delegatedAdminAccess'
+}

frontend/src/layouts/ProtectedLayout.vue

@@ -27,6 +27,8 @@ const setSideNavOptions = () => {
 
         if (LoginUserState.isAdminOfSelectedApplication()) {
             disableSideNavOption('Add delegated admin', false);
+        } else {
+            disableSideNavOption('Add delegated admin', true);
         }
     }
 };
@@ -52,10 +54,7 @@ const disableSideNavOption = (optionName: string, disabled: boolean) => {
 };
 </script>
 <template>
-    <Header
-        title="FAM"
-        subtitle="Forests Access Management"
-    />
+    <Header title="FAM" subtitle="Forests Access Management" />
 
     <SideNav :data="navigationData" />
     <div class="main">

frontend/src/static/sideNav.json

@@ -23,7 +23,7 @@
             {
                 "name": "Add delegated admin",
                 "icon": "enterprise",
-                "link": "#",
+                "link": "/grant-delegated-admin",
                 "disabled": true
             }
         ]

frontend/src/store/CurrentTabState.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue';
+
+const currentTabState = ref<string>("");
+
+export const setCurrentTabState = (status: string) => {
+    currentTabState.value = status;
+}
+
+export const getCurrentTabState = (): string => {
+    return currentTabState.value;
+}