feat: #1160 submit delegated admin form (#1220)

Co-authored-by: Nicola Saglioni <nicola.saglioni@mobeus.com>
Co-authored-by: Joao Ferreira <joao.ferreira@encora.com>

frontend/src/components/grantaccess/GrantAccess.vue

@@ -5,11 +5,11 @@ import { ref, type PropType } from 'vue';
 
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
-import { Severity, ErrorCode } from '@/enum/SeverityEnum';
+import { ErrorCode, GrantPermissionType } from '@/enum/SeverityEnum';
 import { AppActlApiService } from '@/services/ApiServiceFactory';
 import { formValidationSchema } from '@/services/utils';
 import { isLoading } from '@/store/LoadingState';
-import { setGrantAccessNotificationMsg } from '@/store/NotificationState';
+import { composeAndPushGrantPermissionNotification } from '@/store/NotificationState';
 import { FOREST_CLIENT_INPUT_MAX_LENGTH } from '@/store/Constants';
 import { selectedApplicationDisplayText } from '@/store/ApplicationState';
 import {
@@ -101,38 +101,44 @@ const areVerificationsPassed = () => {
 };
 
 const handleSubmit = async () => {
-    const successForestClientIdList: string[] = [];
-
-    // msg override the default error notification message
-    const errorNotification = {
-        code: ErrorCode.Default,
-        errorForestClientIdList: [] as string[],
-    };
+    const username = formData.value.userId.toUpperCase();
+    const role = getSelectedRole()?.role_name;
+    const successList: string[] = [];
+    const errorList: string[] = [];
+    let errorCode = ErrorCode.Default;
+
+    // when we assign a concrete a role to the user, there is no forest client number,
+    // we add an empty string to the success or error list,
+    // so the successList or errorList will be [''] for granting concrete role,
+    // or ["00001011", "00001012", ...] for granting abstract role,
+    // the composeAndPushGrantPermissionNotification method will handle both cases
     do {
         const forestClientNumber = formData.value.verifiedForestClients.pop();
         const data = toRequestPayload(formData.value, forestClientNumber);
-        await AppActlApiService.userRoleAssignmentApi
-            .createUserRoleAssignment(data)
-            .then(() => {
-                successForestClientIdList.push(forestClientNumber || '');
-            })
-            .catch((error) => {
-                if (error.response?.status === 409) {
-                    errorNotification.code = ErrorCode.Conflict;
-                } else if (
-                    error.response.data.detail.code === 'self_grant_prohibited'
-                ) {
-                    errorNotification.code = ErrorCode.SelfGrantProhibited;
-                }
-                errorNotification.errorForestClientIdList.push(
-                    forestClientNumber || ''
-                );
-            });
+        try {
+            await AppActlApiService.userRoleAssignmentApi.createUserRoleAssignment(
+                data
+            );
+            successList.push(forestClientNumber ?? '');
+        } catch (error: any) {
+            if (error.response?.status === 409) {
+                errorCode = ErrorCode.Conflict;
+            } else if (
+                error.response?.data.detail.code === 'self_grant_prohibited'
+            ) {
+                errorCode = ErrorCode.SelfGrantProhibited;
+            }
+            errorList.push(forestClientNumber ?? '');
+        }
     } while (formData.value.verifiedForestClients.length > 0);
 
-    composeAndPushNotificationMessages(
-        successForestClientIdList,
-        errorNotification
+    composeAndPushGrantPermissionNotification(
+        GrantPermissionType.Regular,
+        username,
+        successList,
+        errorList,
+        errorCode,
+        role
     );
 
     router.push('/dashboard');
@@ -154,31 +160,6 @@ function toRequestPayload(formData: any, forestClientNumber: string) {
     } as FamUserRoleAssignmentCreate;
     return request;
 }
-
-const composeAndPushNotificationMessages = (
-    successIdList: string[],
-    errorMsg: { code: string; errorForestClientIdList: string[] }
-) => {
-    const username = formData.value.userId.toUpperCase();
-    if (successIdList.length > 0) {
-        setGrantAccessNotificationMsg(
-            successIdList,
-            username,
-            Severity.Success,
-            getSelectedRole()?.role_name
-        );
-    }
-    if (errorMsg.errorForestClientIdList.length > 0) {
-        setGrantAccessNotificationMsg(
-            errorMsg.errorForestClientIdList,
-            username,
-            Severity.Error,
-            getSelectedRole()?.role_name,
-            errorMsg.code
-        );
-    }
-    return '';
-};
 </script>
 
 <template>

frontend/src/components/grantaccess/GrantApplicationAdmin.vue

@@ -57,41 +57,50 @@ const toRequestPayload = (formData: any) => {
 
 const handleSubmit = async () => {
     const data = toRequestPayload(formData.value);
-    await AdminMgmtApiService.applicationAdminApi
-        .createApplicationAdmin(data)
-        .then(() => {
+    const appEnv = formData.value.application.env
+        ? ` ${formData.value.application.env}`
+        : '';
+
+    try {
+        await AdminMgmtApiService.applicationAdminApi.createApplicationAdmin(
+            data
+        );
+        setNotificationMsg(
+            Severity.Success,
+            `Admin privilege has been added to ${formData.value.userId.toUpperCase()} for application ${
+                formData.value.application.name
+            }${appEnv}`
+        );
+    } catch (error: any) {
+        if (error.response?.status === 409) {
             setNotificationMsg(
-                Severity.Success,
-                `Admin privilege has been added to ${formData.value.userId.toUpperCase()} for application ${
+                Severity.Error,
+                `${formData.value.userId.toUpperCase()} is already a ${
                     formData.value.application.name
-                }`
+                }${appEnv} admin`
+            );
+        } else if (
+            error.response?.data.detail.code === 'self_grant_prohibited'
+        ) {
+            setNotificationMsg(
+                Severity.Error,
+                ErrorDescription.SelfGrantProhibited
             );
-        })
-        .catch((error) => {
-            if (error.response?.status === 409) {
-                setNotificationMsg(
-                    Severity.Error,
-                    `User ${formData.value.userId.toUpperCase()} is already a ${
-                        formData.value.application.name
-                    } admin`
-                );
-            } else if (
-                error.response.data.detail.code === 'self_grant_prohibited'
-            ) {
-                setNotificationMsg(
-                    Severity.Error,
-                    ErrorDescription.SelfGrantProhibited
-                );
-            } else {
-                setNotificationMsg(
-                    Severity.Error,
-                    `${ErrorDescription.Default} ${error.response.data.detail.description}`
-                );
-            }
-        })
-        .finally(() => {
-            router.push('/dashboard');
-        });
+        } else {
+            const errorMsg = error.response?.data.detail.description
+                ? ` ${error.response?.data.detail.description}`
+                : ' ';
+            setNotificationMsg(
+                Severity.Error,
+                `${
+                    ErrorDescription.Default
+                }${errorMsg} ${formData.value.userId.toUpperCase()} was not added as ${
+                    formData.value.application.name
+                }${appEnv} admin`
+            );
+        }
+    }
+    router.push('/dashboard');
 };
 </script>
 <template>

frontend/src/components/grantaccess/GrantDelegatedAdmin.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import router from '@/router';
 import { Form as VeeForm } from 'vee-validate';
+import { useConfirm } from 'primevue/useconfirm';
+import ConfirmDialog from 'primevue/confirmdialog';
+import router from '@/router';
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
+import { ErrorCode, GrantPermissionType } from '@/enum/SeverityEnum';
 import { isLoading } from '@/store/LoadingState';
 import LoginUserState from '@/store/FamLoginUserState';
+import { composeAndPushGrantPermissionNotification } from '@/store/NotificationState';
 import {
     selectedApplicationId,
     selectedApplicationDisplayText,
 } from '@/store/ApplicationState';
-import { UserType } from 'fam-app-acsctl-api';
-import type { FamRoleDto } from 'fam-admin-mgmt-api/model';
 import { formValidationSchema } from '@/services/utils';
+import { AdminMgmtApiService } from '@/services/ApiServiceFactory';
+import { UserType } from 'fam-app-acsctl-api';
+import type {
+    FamRoleDto,
+    FamAccessControlPrivilegeCreateRequest,
+} from 'fam-admin-mgmt-api/model';
+
+const confirm = useConfirm();
 
 const defaultFormData = {
     domain: UserType.I,
@@ -89,15 +99,93 @@ const areVerificationsPassed = () => {
     );
 };
 
-const handleSubmit = async () => {
-    // This will be implemented in task #1160
-    console.log('Data to send to backend', formData.value);
+const confirmSubmit = async () => {
+    const username = formData.value.userId.toUpperCase();
+    const role = getSelectedRole()?.name;
+    const successList: string[] = [];
+    let errorList: string[] = [];
+    let errorCode = ErrorCode.Default;
+    const data = toRequestPayload(formData.value);
 
+    try {
+        const returnResponse =
+            await AdminMgmtApiService.delegatedAdminApi.createAccessControlPrivilegeMany(
+                data
+            );
+        returnResponse.data.forEach((response) => {
+            const forestClientNumber =
+                response.detail.role.client_number?.forest_client_number;
+            if (response.status_code == 200) {
+                successList.push(forestClientNumber ?? '');
+            } else {
+                if (response.status_code == 409) errorCode = ErrorCode.Conflict;
+                errorList.push(forestClientNumber ?? '');
+            }
+        });
+    } catch (error: any) {
+        // error happens here will fail adding all forest client numbers
+        if (error.response?.data.detail.code === 'self_grant_prohibited') {
+            errorCode = ErrorCode.SelfGrantProhibited;
+        }
+        // if has forest clientn number, set errorList to be the verifiedForestClients list
+        // if not, set to be [''] for concrete role, the composeAndPushGrantPermissionNotification will handle both cases
+        errorList =
+            formData.value.verifiedForestClients.length > 0
+                ? formData.value.verifiedForestClients
+                : [''];
+    }
+    composeAndPushGrantPermissionNotification(
+        GrantPermissionType.DelegatedAdmin,
+        username,
+        successList,
+        errorList,
+        errorCode,
+        role,
+    );
     router.push('/dashboard');
 };
+
+function toRequestPayload(formData: any) {
+    const request = {
+        user_name: formData.userId,
+        user_type_code: formData.domain,
+        role_id: formData.roleId,
+        ...(formData.verifiedForestClients.length > 0
+            ? {
+                  forest_client_numbers: formData.verifiedForestClients,
+              }
+            : {}),
+    } as FamAccessControlPrivilegeCreateRequest;
+    return request;
+}
+
+function handleSubmit() {
+    confirm.require({
+        group: 'addDelegatedAdmin',
+        header: 'Add a delegated admin',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Submit delegated admin',
+        acceptClass: 'dialog-accept-button',
+        accept: () => {
+            confirmSubmit();
+        },
+    });
+}
 </script>
 
 <template>
+    <ConfirmDialog group="addDelegatedAdmin">
+        <template #message>
+            <p>
+                Are you sure you want to add
+                <strong>{{ formData.userId.toUpperCase() }}</strong> as a
+                delegated admin? As a delegated admin <br />
+                <strong>{{ formData.userId.toUpperCase() }}</strong> will be
+                able to add, edit or delete users
+            </p>
+        </template>
+    </ConfirmDialog>
+
     <PageTitle
         title="Add a delegated admin"
         :subtitle="`Adding a delegated admin to ${selectedApplicationDisplayText}. All fields are mandatory`"
@@ -183,3 +271,28 @@ const handleSubmit = async () => {
         </div>
     </VeeForm>
 </template>
+<style lang="scss">
+@use '@bcgov-nr/nr-theme/design-tokens/light-buttons.scss' as lightButton;
+@use 'sass:map';
+
+.dialog-accept-button {
+    border: 0.0625rem solid
+        map.get(lightButton.$light-button-token-overrides, 'button-primary') !important;
+    background-color: map.get(
+        lightButton.$light-button-token-overrides,
+        'button-primary'
+    ) !important;
+}
+
+.dialog-accept-button:hover {
+    border: 0.0625rem solid
+        map.get(
+            lightButton.$light-button-token-overrides,
+            'button-primary-hover'
+        ) !important;
+    background-color: map.get(
+        lightButton.$light-button-token-overrides,
+        'button-primary-hover'
+    ) !important;
+}
+</style>

frontend/src/components/managePermissions/table/ApplicationAdminTable.vue

@@ -68,7 +68,6 @@ const deleteAdmin = (admin: FamAppAdminGetResponse) => {
         header: 'Remove Access',
         rejectLabel: 'Cancel',
         acceptLabel: 'Remove',
-        acceptClass: 'p-button-danger',
         accept: () => {
             emit('deleteAppAdmin', admin);
         },

frontend/src/components/managePermissions/table/DelegatedAdminTable.vue

@@ -81,7 +81,7 @@ const delegatedAdminSearchChange = (newvalue: string) => {
                 :globalFilterFields="[
                     'user.user_name',
                     'user.user_type.description',
-                    'role.role_name.role_name',
+                    'role.role_name',
                     'role.parent_role.role_name',
                     'role.client_number.forest_client_number',
                 ]"

frontend/src/components/managePermissions/table/UserDataTable.vue

@@ -80,7 +80,6 @@ function deleteAssignment(assignment: FamApplicationUserRoleAssignmentGet) {
         header: 'Remove Access',
         rejectLabel: 'Cancel',
         acceptLabel: 'Remove',
-        acceptClass: 'p-button-danger',
         accept: () => {
             emit('deleteUserRoleAssignment', assignment);
         },

frontend/src/enum/SeverityEnum.ts

@@ -13,4 +13,9 @@ export enum ErrorCode {
 export const ErrorDescription = {
     SelfGrantProhibited: 'Granting admin privilege to self is not allowed.',
     Default: 'An error has occured.',
+};
+
+export enum GrantPermissionType {
+    Regular = 'GrantUserAccess',
+    DelegatedAdmin = 'GrantDelegatedAdmin',
 }