Feature optimizing console preset

apps/web/src/App.vue

@@ -17,6 +17,7 @@ import { EXTERNAL_PAGE_ROUTE } from '@/router/constant';
 import { getRouteScope } from '@/router/helpers/route-helper';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 import { SIDEBAR_TYPE } from '@/store/display/constant';
 import { useDisplayStore } from '@/store/display/display-store';
 import { useErrorStore } from '@/store/error/error-store';
@@ -70,6 +71,7 @@ const state = reactive({
 });
 
 const userStore = useUserStore();
+const authorizationStore = useAuthorizationStore();
 const appContextStore = useAppContextStore();
 const errorStore = useErrorStore();
 const globalUIStore = useGlobalUIStore();
@@ -88,7 +90,7 @@ const goToSignIn = async () => {
         name: AUTH_ROUTE.SIGN_OUT._NAME,
         query: { previousPath: route.fullPath },
     };
-    userStore.setCurrentGrantInfo(undefined);
+    authorizationStore.setCurrentGrantInfo(undefined);
     errorStore.setVisibleSessionExpiredError(false);
 
     await router.push(to);

apps/web/src/common/components/bookmark/BookmarkFolderFormModal.vue

@@ -10,7 +10,7 @@ import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserStore } from '@/store/user/user-store';
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 
 import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
 import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
@@ -38,13 +38,13 @@ const bookmarkStore = useBookmarkStore();
 const bookmarkState = bookmarkStore.state;
 const appContextStore = useAppContextStore();
 const appContextGetters = appContextStore.getters;
-const userStore = useUserStore();
+const authorizationStore = useAuthorizationStore();
 
 const emit = defineEmits<{(e: 'confirm', isEdit?: boolean, name?: string): void; }>();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextGetters.isAdminMode),
-    isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
+    isWorkspaceMember: computed<boolean>(() => authorizationStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
 
     modal: computed<BookmarkModalStateType>(() => bookmarkState.modal),
     bookmarkType: computed<BookmarkType|undefined>(() => bookmarkState.bookmarkType),

apps/web/src/common/components/bookmark/BookmarkLinkFormModal.vue

@@ -15,7 +15,7 @@ import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useUserStore } from '@/store/user/user-store';
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -47,14 +47,14 @@ const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceStoreGetters = userWorkspaceStore.getters;
 const appContextStore = useAppContextStore();
 const appContextGetters = appContextStore.getters;
-const userStore = useUserStore();
+const authorizationStore = useAuthorizationStore();
 
 const emit = defineEmits<{(e: 'confirm', selectedFolder?: BookmarkItem, scope?: BookmarkType): void; }>();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextGetters.isAdminMode),
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStoreGetters.currentWorkspaceId),
-    isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
+    isWorkspaceMember: computed<boolean>(() => authorizationStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
 
     modal: computed<BookmarkModalStateType>(() => bookmarkState.modal),
     selectedBookmark: computed<BookmarkItem|undefined>(() => bookmarkState.selectedBookmark),

apps/web/src/common/composables/contents-accessibility/index.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue';
 import { computed, reactive, toRef } from 'vue';
 
-import { useGlobalConfigSchemaStore } from '@/store/global-config-schema/global-config-schema-store';
+import { useMenuStore } from '@/store/menu/menu-store';
 
 import type { MenuId } from '@/lib/menu/config';
 
@@ -10,10 +10,10 @@ interface UseContentsAccessibilityReturnType {
 }
 
 export const useContentsAccessibility = (menuId: MenuId): UseContentsAccessibilityReturnType => {
-    const globalConfigSchemaStore = useGlobalConfigSchemaStore();
+    const menuStore = useMenuStore();
 
     const state = reactive({
-        visibleContents: computed<boolean>(() => globalConfigSchemaStore.getters.menuList.findIndex((menu) => menu.id === menuId) !== -1),
+        visibleContents: computed<boolean>(() => menuStore.getters.menuList.findIndex((menu) => menu.id === menuId) !== -1),
     });
 
     return {

apps/web/src/common/composables/grant-scope-guard/index.ts

@@ -3,8 +3,8 @@ import { computed, reactive, watch } from 'vue';
 import type { GrantScope } from '@/api-clients/identity/token/schema/type';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import type { GrantInfo } from '@/store/user/type';
-import { useUserStore } from '@/store/user/user-store';
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
+import type { GrantInfo } from '@/store/authorization/type';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -14,10 +14,10 @@ interface GrantScopeGuardReturnType {
 }
 export const useGrantScopeGuard = (requiredScopes: GrantScope[], apiFunction: () => Promise<void>): GrantScopeGuardReturnType => {
     const appContextStore = useAppContextStore();
-    const userStore = useUserStore();
+    const authorizationStore = useAuthorizationStore();
 
     const state = reactive({
-        currentGrantInfo: computed<GrantInfo>(() => userStore.state.currentGrantInfo || { scope: 'USER' }),
+        currentGrantInfo: computed<GrantInfo>(() => authorizationStore.state.currentGrantInfo || { scope: 'USER' }),
         isLoading: computed(() => appContextStore.getters.globalGrantLoading),
         isValidScope: computed(() => requiredScopes.includes(state.currentGrantInfo.scope)),
     });

apps/web/src/common/composables/page-editable-status/index.ts

@@ -1,9 +1,7 @@
 import type { Ref } from 'vue';
 import { computed, reactive, toRef } from 'vue';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
 
@@ -12,17 +10,11 @@ interface UsePageEditableStatusReturnType {
 }
 
 export const usePageEditableStatus = (): UsePageEditableStatusReturnType => {
-    const userStore = useUserStore();
-    const userGetters = userStore.getters;
-
+    const authorizationStore = useAuthorizationStore();
     const { currentMenuId } = useCurrentMenuId();
 
-    const storeState = reactive({
-        pageAccessPermissionMap: computed<PageAccessMap>(() => userGetters.pageAccessPermissionMap),
-    });
-
     const state = reactive({
-        hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[currentMenuId.value]?.write),
+        hasReadWriteAccess: computed<boolean|undefined>(() => authorizationStore.getters.pageAccessPermissionMap[currentMenuId.value]?.write),
     });
 
     return {

apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue

@@ -2,7 +2,7 @@
 import {
     computed, reactive,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
+import { useRoute, useRouter } from 'vue-router/composables';
 
 import { PI } from '@cloudforet/mirinae';
 
@@ -12,7 +12,6 @@ import type { MetricExampleModel } from '@/schema/inventory/metric-example/model
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDisplayStore } from '@/store/display/display-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-service-type-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
@@ -34,6 +33,7 @@ import {
     convertWorkspaceConfigToReferenceData,
     convertServiceConfigToReferenceData,
 } from '@/lib/helper/config-data-helper';
+import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
 
 import { useGlobalDashboardQuery } from '@/common/composables/global-dashboard/use-global-dashboard-query';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
@@ -57,6 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const route = useRoute();
+const router = useRouter();
 
 const allReferenceStore = useAllReferenceStore();
 const userWorkspaceStore = useUserWorkspaceStore();
@@ -66,7 +67,8 @@ const favoriteStore = useFavoriteStore();
 const favoriteStoreGetters = favoriteStore.getters;
 const gnbStore = useGnbStore();
 const gnbStoreGetters = gnbStore.getters;
-const displayStore = useDisplayStore();
+const { getAllMenuList } = useAllMenuList();
+
 
 /* Query */
 const {
@@ -152,7 +154,7 @@ const convertFavoriteToReferenceData = (favoriteConfig: FavoriteConfig): Referen
     if (itemType === FAVORITE_TYPE.SERVICE) {
         return convertServiceConfigToReferenceData([favoriteConfig], storeState.service)[0];
     }
-    const allMenuList = displayStore.getAllMenuList(route);
+    const allMenuList = getAllMenuList(route, router);
     return convertMenuConfigToReferenceData([favoriteConfig], allMenuList)[0];
 };
 </script>

apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { computed, reactive, watch } from 'vue';
 
 import { defineStore } from 'pinia';
@@ -62,6 +60,10 @@ export const useFavoriteStore = defineStore('favorite', () => {
 
     const actions = {
         fetchFavorite: async () => {
+            if (!_getters.userId) {
+                console.error('userId is not found');
+                return;
+            }
             favoriteListApiQuery.setFilters([
                 { k: 'user_id', v: _getters.userId, o: '=' },
                 { k: 'name', v: 'console:favorite:', o: '' },
@@ -79,6 +81,10 @@ export const useFavoriteStore = defineStore('favorite', () => {
             }
         },
         fetchWorkspaceFavorite: async () => {
+            if (!_getters.userId) {
+                console.error('userId is not found');
+                return;
+            }
             favoriteListApiQuery.setFilters([
                 { k: 'user_id', v: _getters.userId, o: '=' },
                 { k: 'name', v: `console:favorite:${FAVORITE_TYPE.WORKSPACE}`, o: '' },

apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue

@@ -14,13 +14,13 @@ import type { ContextMenuType } from '@cloudforet/mirinae/types/controls/context
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDisplayStore } from '@/store/display/display-store';
-import type { DisplayMenu } from '@/store/display/type';
+import type { DisplayMenu } from '@/store/menu/type';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
+import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
 
 import BetaMark from '@/common/components/marks/BetaMark.vue';
 import NewMark from '@/common/components/marks/NewMark.vue';
@@ -44,7 +44,7 @@ const gnbStore = useGnbStore();
 const gnbGetters = gnbStore.getters;
 const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceGetters = userWorkspaceStore.getters;
-const displayStore = useDisplayStore();
+const { getAllMenuList } = useAllMenuList();
 
 const route = useRoute();
 const router = useRouter();
@@ -69,7 +69,7 @@ const state = reactive({
     isMenuDescription: undefined as boolean | undefined,
     gnbMenuList: computed<GNBMenuType[]|undefined>(() => {
         let results = [] as GNBMenuType[];
-        const allMenuList = displayStore.getAllMenuList(route);
+        const allMenuList = getAllMenuList(route, router);
         const menuList = allMenuList.filter((d) => !d.hideOnGNB);
         if (state.isInit && isEmpty(storeState.costDataSource)) {
             results = removeCostExplorerFromMenuList(menuList);

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue

@@ -13,10 +13,9 @@ import type { ValueItem } from '@cloudforet/mirinae/types/controls/search/query-
 
 import { useReferenceRouter } from '@/router/composables/use-reference-router';
 
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { MENU_ID } from '@/lib/menu/config';
 
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
@@ -54,8 +53,8 @@ const BOTTOM_MARGIN = 5.5 * 16;
 
 const topBarSearchStore = useTopBarSearchStore();
 const recentStore = useRecentStore();
-const userStore = useUserStore();
 const windowSize = useWindowSize();
+const authorizationStore = useAuthorizationStore();
 
 const { getReferenceLocation } = useReferenceRouter();
 
@@ -73,7 +72,6 @@ const getTabHeaderHeight = () => {
 const storeState = reactive({
     activeTab: computed(() => topBarSearchStore.state.activeTab),
     cloudServiceTypeMap: computed(() => allReferenceStore.getters.cloudServiceType),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 
 const state = reactive({
@@ -86,7 +84,7 @@ const state = reactive({
     tabs: computed(() => {
         const accessMenuList: ValueItem[] = [];
         state.defaultServiceTabs.forEach((i) => {
-            if (storeState.pageAccessPermissionMap[i.id]) {
+            if (authorizationStore.getters.pageAccessPermissionMap[i.id]) {
                 accessMenuList.push({ label: i.label, name: i.name });
             }
         });