feat: service router applied (project)

apps/web/src/common/modules/monitoring/Monitoring.vue

@@ -123,9 +123,9 @@ import {
 
 import { MONITORING_TYPE } from '@/schema/monitoring/data-source/constant';
 
-import { useUserStore } from '@/store/user/user-store';
+import { useReferenceRouter } from '@/router/composables/use-reference-router';
 
-import { referenceRouter } from '@/lib/reference/referenceRouter';
+import { useUserStore } from '@/store/user/user-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import type { StatisticsType } from '@/common/modules/monitoring/config';
@@ -182,6 +182,9 @@ export default {
     setup(props) {
         const router = useRouter();
         const userStore = useUserStore();
+        const { getReferenceLocation } = useReferenceRouter();
+
+
         const state = reactive({
             showLoader: computed(() => props.loading || state.metricsLoading),
             timezone: computed(() => userStore.state.timezone),
@@ -213,7 +216,7 @@ export default {
             resources = resources.map((resource, idx) => ({
                 ...resource,
                 color: COLORS[idx],
-                link: router.resolve(referenceRouter(resource.id, { resource_type: 'inventory.Server' })).href,
+                link: router.resolve(getReferenceLocation(resource.id, { resource_type: 'inventory.Server' })).href,
             }));
             state.availableResources = sortBy(resources, (m) => m.name);
         };

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/helper.ts

@@ -7,7 +7,6 @@ import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top
 
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
 const queryHelper = new QueryHelper();
@@ -19,11 +18,6 @@ export const topBarSearchReferenceRouter = (type: Exclude<SearchTab, 'service'>,
             name: SERVICE_ACCOUNT_ROUTE.DETAIL._NAME,
             params: { serviceAccountId: resourceId, workspaceId },
         };
-    case SEARCH_TAB.PROJECT:
-        return {
-            name: PROJECT_ROUTE_V1.DETAIL._NAME,
-            params: { id: resourceId, workspaceId },
-        };
     case SEARCH_TAB.DASHBOARD:
         return {
             name: DASHBOARDS_ROUTE.DETAIL._NAME,

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

@@ -11,6 +11,8 @@ import {
 } from '@cloudforet/mirinae';
 import type { ValueItem } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
+import { useReferenceRouter } from '@/router/composables/use-reference-router';
+
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
@@ -32,7 +34,6 @@ import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modul
 import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
-
 interface Props {
     isFocused: boolean;
     focusingDirection: string;
@@ -56,6 +57,8 @@ const recentStore = useRecentStore();
 const userStore = useUserStore();
 const windowSize = useWindowSize();
 
+const { getReferenceLocation } = useReferenceRouter();
+
 const dropdownRef = ref<null | HTMLElement>(null);
 const dropdownSize = useElementSize(dropdownRef);
 const tabRef = ref<null | Vue>(null);
@@ -133,7 +136,13 @@ const handleSelect = (item) => {
                 label: item?.name,
             },
         });
-    } else if (topBarSearchStore.state.activeTab !== SEARCH_TAB.SERVICE) router.push(topBarSearchReferenceRouter(topBarSearchStore.state.activeTab, item.resource_id, item.workspace_id));
+    } else if (topBarSearchStore.state.activeTab !== SEARCH_TAB.SERVICE) {
+        if (topBarSearchStore.state.activeTab === SEARCH_TAB.PROJECT) {
+            router.push(getReferenceLocation(item.resource_id, { resource_type: 'identity.Project' })).catch(() => {});
+        } else {
+            router.push(topBarSearchReferenceRouter(topBarSearchStore.state.activeTab, item.resource_id, item.workspace_id));
+        }
+    }
 
     topBarSearchStore.setIsActivated(false);
 };

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

@@ -7,6 +7,8 @@ import {
     PI, PIconButton, PLazyImg, PTooltip,
 } from '@cloudforet/mirinae';
 
+import { useReferenceRouter } from '@/router/composables/use-reference-router';
+
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
@@ -16,7 +18,6 @@ import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modul
 import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 import type { RecentItem } from '@/common/modules/navigations/type';
 
-
 interface Props {
     recentItem?: RecentItem;
 }
@@ -29,6 +30,8 @@ const allReferenceStore = useAllReferenceStore();
 const recentStore = useRecentStore();
 const router = useRouter();
 
+const { getReferenceLocation } = useReferenceRouter();
+
 const storeState = reactive({
     workspaceMap: computed(() => topBarSearchStore.storeState.workspaceMap),
     currentWorkspaceId: computed(() => topBarSearchStore.storeState.currentWorkspaceId),
@@ -132,11 +135,15 @@ const handleClick = () => {
     if (topBarSearchStore.state.activeTab === SEARCH_TAB.CLOUD_SERVICE) {
         router.push(topBarSearchReferenceRouter(topBarSearchStore.state.activeTab, state.convertResourceId, storeState.currentWorkspaceId, props.recentItem?.data));
     } else if (topBarSearchStore.state.activeTab !== SEARCH_TAB.SERVICE) {
-        router.push(topBarSearchReferenceRouter(
-            topBarSearchStore.state.activeTab,
-            state.convertResourceId,
-            storeState.currentWorkspaceId,
-        ));
+        if (topBarSearchStore.state.activeTab === SEARCH_TAB.PROJECT) {
+            router.push(getReferenceLocation(state.convertResourceId, { resource_type: 'identity.Project' })).catch(() => {});
+        } else {
+            router.push(topBarSearchReferenceRouter(
+                topBarSearchStore.state.activeTab,
+                state.convertResourceId,
+                storeState.currentWorkspaceId,
+            ));
+        }
     }
     topBarSearchStore.setIsActivated(false);
 };

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue

@@ -16,6 +16,8 @@ import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-s
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 import { i18n } from '@/translations';
 
+import { useReferenceRouter } from '@/router/composables/use-reference-router';
+
 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';
@@ -40,7 +42,6 @@ import {
 import type { MenuInfo } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
-import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
@@ -53,7 +54,7 @@ import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-c
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 const FAVORITE_LIMIT = 5;
 
@@ -80,6 +81,8 @@ const gnbStoreGetters = gnbStore.getters;
 const userStore = useUserStore();
 const displayStore = useDisplayStore();
 
+const { getReferenceLocation } = useReferenceRouter();
+
 /* Query */
 const {
     publicDashboardList,
@@ -245,7 +248,7 @@ const handleClickMenuButton = (type: FavoriteType) => {
     // Dashboard and Cost Analysis are added after (Planning).
     if (type === FAVORITE_TYPE.PROJECT) {
         router.replace({
-            name: PROJECT_ROUTE_V1._NAME,
+            name: PROJECT_ROUTE_V2._NAME,
         });
     }
     emit('close');
@@ -273,9 +276,9 @@ const handleSelect = (item: FavoriteMenuItem) => {
             },
         }).catch(() => {});
     } else if (item.itemType === FAVORITE_TYPE.PROJECT) {
-        router.push(referenceRouter(itemName, { resource_type: 'identity.Project' })).catch(() => {});
+        router.push(getReferenceLocation(itemName, { resource_type: 'identity.Project' })).catch(() => {});
     } else if (item.itemType === FAVORITE_TYPE.PROJECT_GROUP) {
-        router.push(referenceRouter(itemName, { resource_type: 'identity.ProjectGroup' })).catch(() => {});
+        router.push(getReferenceLocation(itemName, { resource_type: 'identity.ProjectGroup' })).catch(() => {});
     } else if (item.itemType === FAVORITE_TYPE.METRIC) {
         router.push({
             name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,

apps/web/src/common/modules/project/ProjectLinkButton.vue

@@ -6,11 +6,10 @@ import {
     PTextButton, PI, PLink, PSkeleton,
 } from '@cloudforet/mirinae';
 
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
 
+import { useReferenceRouter } from '@/router/composables/use-reference-router';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
 
 const props = defineProps<{
     projectId: string;
@@ -21,16 +20,11 @@ const props = defineProps<{
 const emit = defineEmits<{(event: 'click'): void;
 }>();
 const projectReferenceStore = useProjectReferenceStore();
-const userWorkspaceStore = useUserWorkspaceStore();
+
+const { getReferenceLocation } = useReferenceRouter();
 
 const hasProjectReferenceLoaded = computed<boolean>(() => !!projectReferenceStore.getters.projectItems);
-const projectPageLocation = computed<Location>(() => ({
-    name: PROJECT_ROUTE_V1.DETAIL._NAME,
-    params: {
-        workspaceId: userWorkspaceStore.getters.currentWorkspaceId as string,
-        id: props.projectId,
-    },
-}));
+const projectPageLocation = computed<Location>(() => getReferenceLocation(props.projectId, { resource_type: 'identity.Project' }));
 const getProjectName = (projectId: string): string|undefined => projectReferenceStore.getters.projectItems[projectId]?.label;
 </script>
 

apps/web/src/common/modules/project/ProjectSelectDropdown.vue

@@ -27,8 +27,7 @@ import { useProjectTree } from '@/common/modules/project/use-project-tree';
 
 import { indigo, peacock } from '@/styles/colors';
 
-
-import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface ProjectGroupSelectOptions {
     id: string;
@@ -82,6 +81,7 @@ const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
 }>();
 
 const allReferenceStore = useAllReferenceStore();
+
 const storeState = reactive({
     projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
     projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
@@ -255,7 +255,7 @@ const refreshProjectTree = async () => {
 
 const handleClickCreateButton = () => {
     window.open(SpaceRouter.router.resolve({
-        name: PROJECT_ROUTE_V1._NAME,
+        name: PROJECT_ROUTE_V2._NAME,
         ...(props.workspaceId ? { params: { workspaceId: props.workspaceId } } : {}),
     }).href);
     state.visibleMenu = false;

apps/web/src/common/modules/widgets/_widgets/table/Table.vue

@@ -12,6 +12,7 @@ import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-t
 import { i18n } from '@/translations';
 
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
 import { useWidgetLoadQuery, useWidgetLoadSumQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
@@ -41,8 +42,6 @@ import type {
 } from '@/common/modules/widgets/types/widget-display-type';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
-import { useWidgetDataTableQuery } from '../../_composables/use-widget-data-table-query';
-
 const REFERENCE_FIELDS = ['Project', 'Workspace', 'Region', 'Service Account'];
 
 const props = defineProps<WidgetProps>();

apps/web/src/lib/access-control/page-access-helper.ts

@@ -1,7 +1,5 @@
 import type { RoleType } from '@/api-clients/identity/role/type';
 
-import { useGlobalConfigSchemaStore } from '@/store/global-config-schema/global-config-schema-store';
-
 import type {
     PageAccessMap,
 } from '@/lib/access-control/config';
@@ -46,11 +44,18 @@ export const flattenMenu = (menuList: Menu[]): Menu[] => menuList.flatMap((menu)
     ...(menu.subMenuList ? flattenMenu(menu.subMenuList) : []),
 ]);
 
-export const getPageAccessMapFromRawData = (pageAccessPermissions?: string[], isRolePage?: boolean): PageAccessMap => {
+export const getPageAccessMapFromRawData = ({
+    pageAccessPermissions,
+    isRolePage,
+    menuList,
+}: {
+    pageAccessPermissions?: string[],
+    isRolePage?: boolean,
+    menuList?: Menu[],
+}): PageAccessMap => {
     const globalConfig = config.get('SERVICES') || {};
-    const globalConfigSchemaStore = useGlobalConfigSchemaStore();
     const result: PageAccessMap = {};
-    const menuListByVersion = !isRolePage ? globalConfigSchemaStore.getters.menuList : getEnabledMenus(globalConfig);
+    const menuListByVersion = !isRolePage ? (menuList || []) : getEnabledMenus(globalConfig);
     const flattenedMenuList = flattenMenu(menuListByVersion);
     const setPermissions = (id: string, read = true, write = true, access = true) => {
         result[id] = { read, write, access };

apps/web/src/lib/access-control/redirect-route-helper.ts

@@ -4,6 +4,7 @@ import type { Location } from 'vue-router/types/router';
 import { ERROR_ROUTE } from '@/router/constant';
 
 import { useGlobalConfigSchemaStore, type FlattenedMenuMap } from '@/store/global-config-schema/global-config-schema-store';
+import { pinia } from '@/store/pinia';
 
 import type { PageAccessMap } from '@/lib/access-control/config';
 import type { MenuId } from '@/lib/menu/config';
@@ -18,7 +19,7 @@ export const getRedirectRouteByPagePermission = (route: Route, pagePermissionsMa
     const menuId = route.meta?.menuId;
     if (!menuId) return { name: ERROR_ROUTE._NAME, params: { statusCode: '404' } };
 
-    const globalConfigSchemaStore = useGlobalConfigSchemaStore();
+    const globalConfigSchemaStore = useGlobalConfigSchemaStore(pinia);
     const generateFlattenedMenuMap = globalConfigSchemaStore.getters.generateFlattenedMenuMap;
     const subMenuIdList = getSubMenuListByMenuId(menuId, generateFlattenedMenuMap);
     let redirectMenuId: MenuId|undefined;