feat: apply page access permission and revert role info

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[];
 }

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"

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"

apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue

@@ -2,19 +2,24 @@
 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';
 
 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,22 +39,40 @@ 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),
     tableItems: computed(() => workspaceGroupPageGetters.selectedWorkspaces?.map((workspace) => ({
         ...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"

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 }">

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>

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"