Skip to content

Commit

Permalink
merge(1160): merge pr for #1159, refs: #1160
Browse files Browse the repository at this point in the history
  • Loading branch information
@MCatherine1994
MCatherine1994 committed Mar 1, 2024
2 parents 6dc6c8e + c6f2a04 commit bba58ff
Show file tree
Hide file tree
Showing 14 changed files with 423 additions and 110 deletions.
34 changes: 18 additions & 16 deletions frontend/src/components/grantaccess/GrantDelegatedAdmin.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
<script setup lang="ts">
import { ref, type PropType } from 'vue';
import router from '@/router';
import { ref, computed } from 'vue';
import { Form as VeeForm } from 'vee-validate';
import ConfirmDialog from 'primevue/confirmdialog';
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 { UserType } from 'fam-app-acsctl-api';
import type { FamRoleDto } from 'fam-admin-mgmt-api/model';
import type { FamAccessControlPrivilegeCreateRequest } from 'fam-admin-mgmt-api/model/fam-access-control-privilege-create-request';
import { AdminMgmtApiService } from '@/services/ApiServiceFactory';
import {
selectedApplicationId,
selectedApplicationDisplayText,
} from '@/store/ApplicationState';
import { formValidationSchema } from '@/services/utils';
const props = defineProps({
delegatedRoleOptions: {
// options fetched from route.
type: Array as PropType<FamRoleDto[]>,
},
});
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();
Expand All @@ -32,6 +29,10 @@ const defaultFormData = {
};
const formData = ref(JSON.parse(JSON.stringify(defaultFormData))); // clone default input
const delegatedRoleOptions = computed(() => {
return LoginUserState.getCachedAppRoles(selectedApplicationId.value!);
});
/* ------------------ User information method ------------------------- */
const userDomainChange = (selectedDomain: string) => {
formData.value.domain = selectedDomain;
Expand All @@ -49,7 +50,7 @@ const setVerifyUserIdPassed = (verifiedResult: boolean) => {
/* ------------------- Role selection method -------------------------- */
const getSelectedRole = (): FamRoleDto | undefined => {
return props.delegatedRoleOptions?.find(
return delegatedRoleOptions?.value.find(
(item) => item.id === formData.value.roleId
);
};
Expand Down Expand Up @@ -180,7 +181,7 @@ function handleSubmit() {

<PageTitle
title="Add a delegated admin"
subtitle="All fields are mandatory"
:subtitle="`Adding a delegated admin to ${selectedApplicationDisplayText}. All fields are mandatory`"
/>

<VeeForm
Expand Down Expand Up @@ -266,6 +267,7 @@ function handleSubmit() {
<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;
Expand Down
15 changes: 12 additions & 3 deletions frontend/src/components/grantaccess/form/RoleSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type { FamRoleDto } from 'fam-admin-mgmt-api/model';
const props = defineProps({
roleId: { type: Number, default: 0 },
roleOptions: {
type: [Array<FamApplicationRole[]>, Array<FamRoleDto[]>],
type: [Array<FamApplicationRole>, Array<FamRoleDto>],
default: [],
},
label: { type: String, default: 'Assign a role to the user' },
Expand All @@ -25,6 +25,15 @@ const computedRoleId = computed({
emit('change', newRoleId);
},
});
// TODO: This method isFamApplicationRoleType is not going to be needed anymore
// when completing task #1147 and the roleOptions is accepting only FamRoleDto as type.
// Please remember to remove both ternary checks for 'optionLabel' and 'optionValue'
const isFamApplicationRoleType = (): boolean => {
return (
(props.roleOptions.at(0) as FamApplicationRole).role_name !== undefined
);
};
</script>

<template>
Expand All @@ -38,8 +47,8 @@ const computedRoleId = computed({
>
<Dropdown
:options="roleOptions"
optionLabel="role_name"
optionValue="role_id"
:optionLabel="isFamApplicationRoleType() ? 'role_name' : 'name'"
:optionValue="isFamApplicationRoleType() ? 'role_id' : 'id'"
:modelValue="field.value"
placeholder="Choose an option"
class="w-100 custom-height"
Expand Down
63 changes: 57 additions & 6 deletions frontend/src/components/managePermissions/ManagePermissions.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<script setup lang="ts">
import { onUnmounted, shallowRef, type PropType, computed } from 'vue';
import { onUnmounted, ref, shallowRef, type PropType, computed } from 'vue';
import Dropdown, { type DropdownChangeEvent } from 'primevue/dropdown';
import TabView 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 DelegatedAdminTable from '@/components/managePermissions/table/DelegatedAdminTable.vue';
import {
isApplicationSelected,
selectedApplication,
Expand All @@ -20,12 +21,16 @@ import {
} from '@/store/NotificationState';
import { FAM_APPLICATION_ID } from '@/store/Constants';
import type { FamApplicationUserRoleAssignmentGet } from 'fam-app-acsctl-api';
import type { FamAppAdminGetResponse } from 'fam-admin-mgmt-api/model';
import type {
FamAccessControlPrivilegeGetResponse,
FamAppAdminGetResponse,
} from 'fam-admin-mgmt-api/model';
import {
deletAndRefreshUserRoleAssignments,
deleteAndRefreshApplicationAdmin,
fetchUserRoleAssignments,
fetchApplicationAdmins,
fetchDelegatedAdmins,
} from '@/services/fetchData';
import { Severity } from '@/enum/SeverityEnum';
import { IconSize } from '@/enum/IconEnum';
Expand All @@ -39,6 +44,10 @@ const props = defineProps({
type: Array as PropType<FamAppAdminGetResponse[]>,
default: [],
},
delegatedAdmins: {
type: Array as PropType<FamAccessControlPrivilegeGetResponse[]>,
default: [],
},
});
const userRoleAssignments = shallowRef<FamApplicationUserRoleAssignmentGet[]>(
Expand All @@ -49,6 +58,12 @@ const applicationAdmins = shallowRef<FamAppAdminGetResponse[]>(
props.applicationAdmins
);
const delegatedAdmins = shallowRef<FamAccessControlPrivilegeGetResponse[]>(
props.delegatedAdmins
);
const resetActiveTab = ref(0);
const applicationsUserAdministers = computed(() => {
return LoginUserState.getApplicationsUserAdministers();
});
Expand All @@ -59,12 +74,19 @@ onUnmounted(() => {
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) {
applicationAdmins.value = await fetchApplicationAdmins();
} else {
userRoleAssignments.value = await fetchUserRoleAssignments(
selectedApplicationId.value
);
delegatedAdmins.value = await fetchDelegatedAdmins(
selectedApplicationId.value
);
}
};
Expand Down Expand Up @@ -110,7 +132,6 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {

<template>
<ManagePermissionsTitle :isApplicationSelected="isApplicationSelected" />

<div class="page-body">
<div class="application-group">
<label>You are modifying access in this application:</label>
Expand All @@ -129,6 +150,7 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
<TablePlaceholder v-if="!isApplicationSelected" />
<TabView
v-else
v-model:active-index="resetActiveTab"
:pt="{
root: {
style: 'margin-top: 1.5rem',
Expand All @@ -143,17 +165,26 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
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
header="Users"
v-else
>
<template #header>
<Icon icon="user" :size="IconSize.small" />
<Icon
icon="user"
:size="IconSize.small"
/>
</template>

<UserDataTable
Expand All @@ -162,6 +193,26 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
@deleteUserRoleAssignment="deleteUserRoleAssignment"
/>
</TabPanel>

<TabPanel
v-if="
LoginUserState.isAdminOfSelectedApplication() &&
selectedApplicationId !== FAM_APPLICATION_ID
"
header="Delegated admins"
>
<template #header>
<Icon
icon="enterprise"
:size="IconSize.small"
/>
</template>

<DelegatedAdminTable
:loading="isLoading()"
:delegatedAdmins="delegatedAdmins || []"
/>
</TabPanel>
</TabView>
</div>
</div>
Expand Down
33 changes: 26 additions & 7 deletions frontend/src/components/managePermissions/table/ApplicationAdminTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ import ConfirmDialog from 'primevue/confirmdialog';
import { IconSize } from '@/enum/IconEnum';
import { routeItems } from '@/router/routeItem';
import Button from '@/components/common/Button.vue';
import {
TABLE_CURRENT_PAGE_REPORT_TEMPLATE,
TABLE_PAGINATOR_TEMPLATE,
TABLE_ROWS_PER_PAGE,
} from '@/store/Constants';
import ConfirmDialogtext from '@/components/managePermissions/ConfirmDialogText.vue';
import DataTableHeader from '@/components/managePermissions/table/DataTableHeader.vue';
import type { FamAppAdminGetResponse } from 'fam-admin-mgmt-api/model';
Expand Down Expand Up @@ -92,7 +97,7 @@ const deleteAdmin = (admin: FamAppAdminGetResponse) => {
:value="props.applicationAdmins"
paginator
:rows="50"
:rowsPerPageOptions="[5, 10, 15, 20, 50, 100]"
:rowsPerPageOptions="TABLE_ROWS_PER_PAGE"
filterDisplay="menu"
:loading="props.loading"
:globalFilterFields="[
Expand All @@ -102,13 +107,17 @@ const deleteAdmin = (admin: FamAppAdminGetResponse) => {
'role.role_name',
'application.app_environment',
]"
paginatorTemplate="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink"
currentPageReportTemplate="{first} - {last} of {totalRecords} items"
:paginatorTemplate="TABLE_PAGINATOR_TEMPLATE"
:currentPageReportTemplate="TABLE_CURRENT_PAGE_REPORT_TEMPLATE"
stripedRows
>
<template #empty> No user found. </template>
<template #loading> Loading users data. Please wait. </template>
<Column header="User Name" sortable field="user.user_name">
<Column
header="User Name"
sortable
field="user.user_name"
>
<template #body="{ data }">
<span>
{{ data.user.user_name }}
Expand All @@ -130,7 +139,11 @@ const deleteAdmin = (admin: FamAppAdminGetResponse) => {
header="Environment"
sortable
></Column>
<Column field="role.role_name" header="Role" sortable>
<Column
field="role.role_name"
header="Role"
sortable
>
<template #body="{ data }"> Admin </template></Column
>
<Column header="Action">
Expand All @@ -141,8 +154,14 @@ const deleteAdmin = (admin: FamAppAdminGetResponse) => {
>
<Icon icon="edit" :size="IconSize.small"/>
</button> -->
<button class="btn btn-icon" @click="deleteAdmin(data)">
<Icon icon="trash-can" :size="IconSize.small" />
<button
class="btn btn-icon"
@click="deleteAdmin(data)"
>
<Icon
icon="trash-can"
:size="IconSize.small"
/>
</button>
</template>
</Column>
Expand Down
Loading

0 comments on commit bba58ff

Please sign in to comment.