feat: apply page access permission at iam page

Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Sep 2, 2024 · 8133f6f · 8133f6f
1 parent 754c64e
commit 8133f6f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 39 deletions.
diff --git a/apps/web/src/services/iam/components/RoleManagementTable.vue b/apps/web/src/services/iam/components/RoleManagementTable.vue
@@ -7,6 +7,7 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PToolboxTable, PSelectDropdown, PButton, PBadge, PStatus,
 } from '@cloudforet/mirinae';
+import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/navigation/toolbox/type';
 import { iso8601Formatter } from '@cloudforet/utils';
@@ -31,7 +32,6 @@ import { useRoleFormatter, userStateFormatter } from '@/services/iam/composables
 import {
     EXCEL_TABLE_FIELDS,
     ROLE_SEARCH_HANDLERS,
-    ROLE_TABLE_FIELDS,
 } from '@/services/iam/constants/role-constant';
 import { IAM_ROUTE } from '@/services/iam/routes/route-constant';
 import { useRolePageStore } from '@/services/iam/store/role-page-store';
@@ -61,6 +61,20 @@ let roleListApiQuery = roleListApiQueryHelper.data;
 const storeState = reactive({
     timezone: computed(() => store.state.user.timezone ?? 'UTC'),
 });
+const state = reactive({
+    fields: computed<DataTableFieldType[]>(() => {
+        const defaultFields: DataTableFieldType[] = [
+            { name: 'name', label: 'Name' },
+            { name: 'state', label: 'State' },
+            { name: 'role_type', label: 'Role Type' },
+            { name: 'created_at', label: 'Created', sortable: false },
+        ];
+        if (props.hasReadWriteAccess) {
+            defaultFields.push({ name: 'edit_button', label: ' ', sortable: false });
+        }
+        return defaultFields;
+    }),
+});
 const modalState = reactive({
     modalVisible: false,
     stateModalVisible: false,
@@ -180,7 +194,7 @@ const handleExport = async () => {
                          disabled
                          :items="rolePageState.roles"
                          :select-index="rolePageState.selectedIndices"
-                         :fields="ROLE_TABLE_FIELDS"
+                         :fields="state.fields"
                          sort-by="name"
                          :sort-desc="true"
                          :total-count="rolePageState.totalCount"
@@ -229,7 +243,7 @@ const handleExport = async () => {
                 {{ iso8601Formatter(value, storeState.timezone) }}
             </template>
             <template #col-edit_button-format="{ item }">
-                <p-button v-if="props.hasReadWriteAccess && (!item?.is_managed && item.role_type !== ROLE_TYPE.SYSTEM_ADMIN)"
+                <p-button v-if="!item?.is_managed && item.role_type !== ROLE_TYPE.SYSTEM_ADMIN"
                           size="sm"
                           style-type="tertiary"
                           icon-left="ic_edit"

diff --git a/apps/web/src/services/iam/components/UserManagementTabProjects.vue b/apps/web/src/services/iam/components/UserManagementTabProjects.vue
@@ -5,7 +5,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PButton, PDataTable, PHeading, PI,
 } from '@cloudforet/mirinae';
-
+import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { ProjectListParameters } from '@/schema/identity/project/api-verbs/list';
@@ -22,7 +22,6 @@ import UserManagementRemoveModal from '@/services/iam/components/UserManagementR
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
 
-
 interface TableItem {
     project_id?: string;
     name?: string;
@@ -49,11 +48,16 @@ const state = reactive({
     selectedUser: computed(() => userPageStore.selectedUsers[0]),
 });
 const tableState = reactive({
-    fields: computed(() => [
-        { name: 'name', label: i18n.t('IAM.USER.MAIN.PROJECT') as string },
-        { name: 'project_id', label: i18n.t('IAM.USER.MAIN.PROJECT_ID') as string },
-        { name: 'remove_button', label: ' ' },
-    ]),
+    fields: computed<DataTableFieldType[]>(() => {
+        const defaultFields: DataTableFieldType[] = [
+            { name: 'name', label: i18n.t('IAM.USER.MAIN.PROJECT') as string },
+            { name: 'project_id', label: i18n.t('IAM.USER.MAIN.PROJECT_ID') as string },
+        ];
+        if (props.hasReadWriteAccess) {
+            defaultFields.push({ name: 'remove_button', label: ' ' });
+        }
+        return defaultFields;
+    }),
 });
 const modalState = reactive({
     visible: false,
@@ -143,9 +147,7 @@ watch([() => props.activeTab, () => state.selectedUser.user_id], async () => {
                     </router-link>
                 </span>
             </template>
-            <template v-if="props.hasReadWriteAccess"
-                      #col-remove_button-format="{item}"
-            >
+            <template #col-remove_button-format="{item}">
                 <p-button style-type="tertiary"
                           size="sm"
                           class="remove-button"

diff --git a/apps/web/src/services/iam/components/UserManagementTabWorkspace.vue b/apps/web/src/services/iam/components/UserManagementTabWorkspace.vue
@@ -9,6 +9,7 @@ import {
     PButton,
     PDataTable, PHeading, PLink, PSelectDropdown, PStatus, PTooltip,
 } from '@cloudforet/mirinae';
+import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import type {
     AutocompleteHandler,
     SelectDropdownMenuItem,
@@ -81,13 +82,18 @@ const state = reactive({
     selectedRemoveItem: '',
 });
 const tableState = reactive({
-    fields: computed(() => [
-        { name: 'workspace', label: i18n.t('IAM.USER.MAIN.WORKSPACE') as string },
-        { name: 'state', label: i18n.t('IAM.USER.MAIN.STATE') as string },
-        { name: 'role_binding', label: i18n.t('IAM.USER.MAIN.ROLE') as string, sortable: false },
-        { name: 'created_at', label: i18n.t('IAM.USER.MAIN.INVITED') as string, sortable: false },
-        { name: 'remove_button', label: ' ', sortable: false },
-    ]),
+    fields: computed<DataTableFieldType[]>(() => {
+        const defaultFields: DataTableFieldType[] = [
+            { name: 'workspace', label: i18n.t('IAM.USER.MAIN.WORKSPACE') as string },
+            { name: 'state', label: i18n.t('IAM.USER.MAIN.STATE') as string },
+            { name: 'role_binding', label: i18n.t('IAM.USER.MAIN.ROLE') as string, sortable: false },
+            { name: 'created_at', label: i18n.t('IAM.USER.MAIN.INVITED') as string, sortable: false },
+        ];
+        if (props.hasReadWriteAccess) {
+            defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
+        }
+        return defaultFields;
+    }),
 });
 const dropdownState = reactive({
     loading: false,
@@ -319,9 +325,7 @@ watch([() => props.activeTab, () => state.selectedUser.user_id], async () => {
             <template #col-created_at-format="{value}">
                 {{ iso8601Formatter(value, storeState.timezone) }}
             </template>
-            <template v-if="props.hasReadWriteAccess"
-                      #col-remove_button-format="{ item }"
-            >
+            <template #col-remove_button-format="{ item }">
                 <p-button style-type="negative-secondary"
                           size="sm"
                           class="remove-button"

diff --git a/apps/web/src/services/iam/components/UserManagementTable.vue b/apps/web/src/services/iam/components/UserManagementTable.vue
@@ -3,15 +3,14 @@ import {
     computed, reactive,
 } from 'vue';
 
-
 import { makeDistinctValueHandler, makeEnumValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import { getApiQueryWithToolboxOptions } from '@cloudforet/core-lib/component-util/toolbox';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PBadge, PStatus, PToolboxTable, PButton, PSelectDropdown, PTooltip,
 } from '@cloudforet/mirinae';
-import type { DefinitionField } from '@cloudforet/mirinae/src/data-display/tables/definition-table/type';
+import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import type { SelectDropdownMenuItem, AutocompleteHandler } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
@@ -74,8 +73,8 @@ const state = reactive({
     }))),
 });
 const tableState = reactive({
-    userTableFields: computed(() => {
-        const additionalFields: DefinitionField[] = [];
+    userTableFields: computed<DataTableFieldType[]>(() => {
+        const additionalFields: DataTableFieldType[] = [];
         if (userPageState.isAdminMode) {
             additionalFields.push(
                 { name: 'mfa_state', label: 'MFA' },
@@ -97,7 +96,7 @@ const tableState = reactive({
             { name: 'auth_type', label: 'Auth Type' },
             { name: 'last_accessed_count', label: 'Last Activity' },
         ];
-        return userPageStore.isWorkspaceOwner
+        return userPageStore.isWorkspaceOwner && props.hasReadWriteAccess
             ? [
                 ...baseFields,
                 { name: 'remove_button', label: ' ', sortable: false },
@@ -380,9 +379,7 @@ const roleBindingsContents = (roleBindings: RoleBindingModel[])
                     <span />
                 </template>
             </template>
-            <template v-if="props.hasReadWriteAccess"
-                      #col-remove_button-format="value"
-            >
+            <template #col-remove_button-format="value">
                 <p-button style-type="negative-secondary"
                           size="sm"
                           class="remove-button"

diff --git a/apps/web/src/services/iam/constants/role-constant.ts b/apps/web/src/services/iam/constants/role-constant.ts
@@ -58,14 +58,6 @@ export const ROLE_SEARCH_HANDLERS = {
     },
 } as const;
 
-export const ROLE_TABLE_FIELDS = [
-    { name: 'name', label: 'Name' },
-    { name: 'state', label: 'State' },
-    { name: 'role_type', label: 'Role Type' },
-    { name: 'created_at', label: 'Created', sortable: false },
-    { name: 'edit_button', label: ' ', sortable: false },
-] as const;
-
 export const EXCEL_TABLE_FIELDS = [
     { key: 'name', name: 'Name' },
     { key: 'role_type', name: 'Role Type' },