From 4a1023a5d82f6e9cf89e86496ca2090fff95509a Mon Sep 17 00:00:00 2001
From: nayeongkim <nayeongkim@megazone.com>
Date: Mon, 2 Sep 2024 11:28:02 +0900
Subject: [PATCH 1/3] feat: revert role info

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 apps/web/src/schema/identity/token/model.ts | 1 -
 apps/web/src/store/modules/user/actions.ts  | 7 +------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/web/src/schema/identity/token/model.ts b/apps/web/src/schema/identity/token/model.ts
index 6b5b57f1bb..3134eb2670 100644
--- a/apps/web/src/schema/identity/token/model.ts
+++ b/apps/web/src/schema/identity/token/model.ts
@@ -12,5 +12,4 @@ export interface TokenGrantModel {
     role_id: string;
     domain_id: string;
     workspace_id: string;
-    page_access: string[];
 }
diff --git a/apps/web/src/store/modules/user/actions.ts b/apps/web/src/store/modules/user/actions.ts
index a5b263f6fe..c150a35f8f 100644
--- a/apps/web/src/store/modules/user/actions.ts
+++ b/apps/web/src/store/modules/user/actions.ts
@@ -129,12 +129,7 @@ export const grantRoleAndLoadReferenceData: Action<UserState, any> = async ({ co
             };
             commit('setCurrentGrantInfo', grantInfo);
 
-            const grantRoleInfo = await getGrantedRole(response.role_id, currentRoleType, response.role_type);
-            const roleInfo = {
-                roleId: grantRoleInfo ? grantRoleInfo?.roleId : response.role_id,
-                roleType: grantRoleInfo ? grantRoleInfo?.roleType : response.role_type,
-                pageAccess: response.page_access || grantRoleInfo?.pageAccess,
-            };
+            const roleInfo = await getGrantedRole(response.role_id, currentRoleType, response.role_type);
             commit('setCurrentRoleInfo', roleInfo);
 
             if (grantRequest.scope === 'DOMAIN') {

From 754c64ee536ef8d96312cca34676c0f784a700fa Mon Sep 17 00:00:00 2001
From: nayeongkim <nayeongkim@megazone.com>
Date: Mon, 2 Sep 2024 15:42:10 +0900
Subject: [PATCH 2/3] feat: apply page access permission at workspace group
 page

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../components/WorkspaceGroupHeader.vue       | 12 ++++-
 .../components/WorkspaceGroupTabGroupUser.vue | 45 ++++++++++++++----
 .../components/WorkspaceGroupTabWorkspace.vue | 47 ++++++++++++++-----
 .../components/WorkspaceGroupTable.vue        |  7 ++-
 .../pages/admin/AdminWorkspaceGroupPage.vue   | 25 +++++++++-
 5 files changed, 110 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupHeader.vue b/apps/web/src/services/advanced/components/WorkspaceGroupHeader.vue
index 75b0640bd5..5112d4cf06 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupHeader.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupHeader.vue
@@ -6,6 +6,14 @@ import { i18n } from '@/translations';
 import { WORKSPACE_GROUP_MODAL_TYPE } from '@/services/advanced/constants/workspace-group-constant';
 import { useWorkspaceGroupPageStore } from '@/services/advanced/store/workspace-group-page-store';
 
+interface Props {
+    hasReadWriteAccess: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    hasReadWriteAccess: true,
+});
+
 const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupState = workspaceGroupPageStore.state;
 
@@ -25,7 +33,9 @@ const handleCreateButtonClick = () => {
                    use-total-count
                    :total-count="workspaceGroupState.totalCount"
         >
-            <template #extra>
+            <template v-if="props.hasReadWriteAccess"
+                      #extra
+            >
                 <p-button style-type="primary"
                           icon-left="ic_plus_bold"
                           @click="handleCreateButtonClick"
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
index e994790dfd..ba2f4c9268 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
@@ -2,13 +2,15 @@
 import {
     reactive, watch, onUnmounted, computed,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-
+import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PHeading, PButton, PToolboxTable, PStatus, PSelectDropdown, PTooltip,
 } 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 { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
@@ -17,8 +19,10 @@ import type { RoleModel } from '@/schema/identity/role/model';
 import type { RoleType } from '@/schema/identity/role/type';
 import type { WorkspaceGroupUpdateRoleParameters } from '@/schema/identity/workspace-group/api-verbs/update-role';
 import type { WorkspaceUser } from '@/schema/identity/workspace-group/model';
+import { store } from '@/store';
 import { i18n } from '@/translations';
 
+import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -32,16 +36,34 @@ const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupPageState = workspaceGroupPageStore.state;
 const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
 
+const route = useRoute();
+
 const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();
 
+const storeState = reactive({
+    pageAccessPermissionMap: computed<PageAccessMap>(() => store.getters['user/pageAccessPermissionMap']),
+});
+const state = reactive({
+    selectedMenuId: computed(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        return closestRoute?.meta?.menuId;
+    }),
+    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+});
 const tableState = reactive({
-    fields: [
-        { name: 'user_id', label: 'User ID' },
-        { name: 'user_name', label: 'Name' },
-        { name: 'state', label: 'State' },
-        { name: 'role', label: 'Role' },
-        { name: 'remove_button', label: ' ', sortable: false },
-    ],
+    fields: computed<DataTableFieldType[]>(() => {
+        const defaultFields: DataTableFieldType[] = [
+            { name: 'user_id', label: 'User ID' },
+            { name: 'user_name', label: 'Name' },
+            { name: 'state', label: 'State' },
+            { name: 'role', label: 'Role' },
+        ];
+        if (state.hasReadWriteAccess) {
+            defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
+        }
+        return defaultFields;
+    }),
     roleMap: computed(() => {
         const map: Record<string, RoleModel> = {};
         workspaceGroupPageState.roles.forEach((role) => {
@@ -190,7 +212,9 @@ onUnmounted(() => {
                    :total-count="workspaceGroupPageGetters.groupUserTotalCount"
                    heading-type="sub"
         >
-            <template #extra>
+            <template v-if="state.hasReadWriteAccess"
+                      #extra
+            >
                 <div class="workspace-group-tab-group-user-button-wrapper">
                     <p-button style-type="negative-primary"
                               :disabled="!workspaceGroupPageGetters.selectedGroupUsersByIndices.length"
@@ -218,7 +242,7 @@ onUnmounted(() => {
                          :sort-desc="true"
                          :this-page.sync="workspaceGroupPageState.groupUserPage"
                          :search-text.sync="workspaceGroupPageState.groupUserSearchText"
-                         selectable
+                         :selectable="state.hasReadWriteAccess"
                          sortable
                          searchable
                          @select="handleSelect"
@@ -242,6 +266,7 @@ onUnmounted(() => {
                         use-fixed-menu-style
                         style-type="transparent"
                         class="role-select-dropdown"
+                        :disabled="!state.hasReadWriteAccess"
                         :menu="menuList"
                         :selected.sync="selectedItems"
                         :search-text.sync="searchText"
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
index 3ac8ad4bc1..58f9d6aa54 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
@@ -2,12 +2,15 @@
 import {
     reactive, watch, onUnmounted, computed,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import dayjs from 'dayjs';
+import { clone } from 'lodash';
 
 import {
     PHeading, PButton, PToolboxTable, PLink, PStatus, PTooltip, PI,
 } from '@cloudforet/mirinae';
+import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
 import { store } from '@/store';
 import { i18n } from '@/translations';
@@ -15,6 +18,8 @@ import { i18n } from '@/translations';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { WorkspaceReferenceMap } from '@/store/reference/workspace-reference-store';
 
+import type { PageAccessMap } from '@/lib/access-control/config';
+
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { gray } from '@/styles/colors';
@@ -34,6 +39,19 @@ const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWor
 
 const allReferenceStore = useAllReferenceStore();
 
+const route = useRoute();
+
+const storeState = reactive({
+    pageAccessPermissionMap: computed<PageAccessMap>(() => store.getters['user/pageAccessPermissionMap']),
+});
+const state = reactive({
+    selectedMenuId: computed(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        return closestRoute?.meta?.menuId;
+    }),
+    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+});
 const tableState = reactive({
     timezone: computed(() => store.state.user.timezone),
     workspaces: computed<WorkspaceReferenceMap>(() => allReferenceStore.getters.workspace),
@@ -41,15 +59,20 @@ const tableState = reactive({
         ...tableState.workspaces[workspace],
         remove_button: workspace,
     }))),
-    fields: [
-        { name: 'name', label: 'Name' },
-        { name: 'data.state', label: 'State' },
-        { name: 'data.user', label: 'User' },
-        { name: 'data.service_account_count', label: 'Service Account' },
-        { name: 'data.cost_info', label: 'Cost' },
-        { name: 'data.created_at', label: 'Created' },
-        { name: 'remove_button', label: ' ', sortable: false },
-    ],
+    fields: computed<DataTableFieldType[]>(() => {
+        const defaultFields: DataTableFieldType[] = [
+            { name: 'name', label: 'Name' },
+            { name: 'data.state', label: 'State' },
+            { name: 'data.user', label: 'User' },
+            { name: 'data.service_account_count', label: 'Service Account' },
+            { name: 'data.cost_info', label: 'Cost' },
+            { name: 'data.created_at', label: 'Created' },
+        ];
+        if (state.hasReadWriteAccess) {
+            defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
+        }
+        return defaultFields;
+    }),
 });
 
 const getWorkspaceRouteLocationByWorkspaceId = (item) => ({
@@ -165,7 +188,9 @@ onUnmounted(() => {
                    :total-count="workspaceGroupPageGetters.workspaceTotalCount"
                    heading-type="sub"
         >
-            <template #extra>
+            <template v-if="state.hasReadWriteAccess"
+                      #extra
+            >
                 <div class="workspace-group-tab-workspace-button-wrapper">
                     <p-button style-type="negative-primary"
                               :disabled="!workspaceGroupPageGetters.selectedWorkspacesByIndices.length"
@@ -193,7 +218,7 @@ onUnmounted(() => {
                          :sort-desc="true"
                          :this-page.sync="workspaceGroupPageState.workspacePage"
                          :search-text.sync="workspaceGroupPageState.workspaceSearchText"
-                         selectable
+                         :selectable="state.hasReadWriteAccess"
                          sortable
                          searchable
                          @select="handleSelect"
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTable.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTable.vue
index 350b6f7a28..5114b836ce 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTable.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTable.vue
@@ -21,6 +21,7 @@ import { useWorkspaceGroupPageStore } from '@/services/advanced/store/workspace-
 
 interface Props {
     tableHeight: number;
+    hasReadWriteAccess: boolean
 }
 
 const workspaceGroupPageStore = useWorkspaceGroupPageStore();
@@ -34,9 +35,9 @@ const workspaceGroupListApiQueryHelper = new ApiQueryHelper()
     .setSort('name', true);
 let workspaceGroupListApiQuery = workspaceGroupListApiQueryHelper.data;
 
-
 const props = withDefaults(defineProps<Props>(), {
     tableHeight: 400,
+    hasReadWriteAccess: true,
 });
 
 const tableState = reactive({
@@ -144,7 +145,9 @@ const handleChangeSort = (name, desc) => {
             @refresh="handleChange()"
             @changeSort="handleChangeSort"
         >
-            <template #toolbox-left>
+            <template v-if="props.hasReadWriteAccess"
+                      #toolbox-left
+            >
                 <workspace-group-table-toolbox />
             </template>
             <template #col-created_at-format="{ value }">
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
index 66cf46d7a0..3a7b64de63 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { onUnmounted } from 'vue';
+import { computed, onUnmounted, reactive } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
@@ -8,6 +11,9 @@ import { PHorizontalLayout } from '@cloudforet/mirinae';
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { WorkspaceGroupListParameters } from '@/schema/identity/workspace-group/api-verbs/list';
 import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';
+import { store } from '@/store';
+
+import type { PageAccessMap } from '@/lib/access-control/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -27,11 +33,25 @@ import type { WorkspaceGroupFetchParameters } from '@/services/advanced/types/ad
 const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupPageState = workspaceGroupPageStore.state;
 
+const route = useRoute();
+
 const workspaceGroupListApiQueryHelper = new ApiQueryHelper()
     .setPageStart(workspaceGroupPageState.pageStart).setPageLimit(workspaceGroupPageState.pageLimit)
     .setSort('name', true);
 const workspaceGroupListApiQuery = workspaceGroupListApiQueryHelper.data;
 
+const storeState = reactive({
+    pageAccessPermissionMap: computed<PageAccessMap>(() => store.getters['user/pageAccessPermissionMap']),
+});
+const state = reactive({
+    selectedMenuId: computed(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        return closestRoute?.meta?.menuId;
+    }),
+    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+});
+
 const fetchWorkspaceGroups = async (tabRefresh:WorkspaceGroupFetchParameters = { isGroupUser: false, isWorkspace: false }) => {
     workspaceGroupPageState.loading = true;
 
@@ -83,10 +103,11 @@ onUnmounted(() => {
 
 <template>
     <section class="workspace-group-page">
-        <workspace-group-header />
+        <workspace-group-header :has-read-write-access="state.hasReadWriteAccess" />
         <p-horizontal-layout class="user-group-toolbox-layout">
             <template #container="{ height }">
                 <workspace-group-table :table-height="height"
+                                       :has-read-write-access="state.hasReadWriteAccess"
                                        @confirm="fetchWorkspaceGroups"
                 />
             </template>

From 8133f6fa0cebbb9775e9dd0600f28cbb681243b2 Mon Sep 17 00:00:00 2001
From: nayeongkim <nayeongkim@megazone.com>
Date: Mon, 2 Sep 2024 15:42:27 +0900
Subject: [PATCH 3/3] feat: apply page access permission at iam page

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../iam/components/RoleManagementTable.vue    | 20 +++++++++++++---
 .../components/UserManagementTabProjects.vue  | 22 +++++++++--------
 .../components/UserManagementTabWorkspace.vue | 24 +++++++++++--------
 .../iam/components/UserManagementTable.vue    | 13 ++++------
 .../services/iam/constants/role-constant.ts   |  8 -------
 5 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/services/iam/components/RoleManagementTable.vue b/apps/web/src/services/iam/components/RoleManagementTable.vue
index 5faa99b8bf..48a08eec10 100644
--- 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
index 560db87d06..e489f857e7 100644
--- 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
index c1ecacaa98..076e450e81 100644
--- 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
index ada366f049..44a45515cc 100644
--- a/apps/web/src/services/iam/components/UserManagementTable.vue
+++ b/apps/web/src/services/iam/components/UserManagementTable.vue
@@ -3,7 +3,6 @@ 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';
@@ -11,7 +10,7 @@ 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
index b80d829539..4309d67886 100644
--- 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' },