feat: service router applied (project)

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

@@ -16,6 +16,7 @@ import { useUserStore } from '@/store/user/user-store';
 
 import type { PageAccessMap } from '@/lib/access-control/config';
 import { MENU_ID } from '@/lib/menu/config';
+import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { SEARCH_TAB } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
@@ -32,7 +33,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;
@@ -133,7 +133,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(referenceRouter(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

@@ -9,14 +9,15 @@ import {
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
+import { referenceRouter } from '@/lib/reference/referenceRouter';
+
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { SEARCH_TAB } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import { topBarSearchReferenceRouter } from '@/common/modules/navigations/top-bar/modules/top-bar-search/helper';
 import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
 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;
 }
@@ -132,11 +133,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(referenceRouter(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

@@ -53,7 +53,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;
 
@@ -245,7 +245,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');

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 { useProjectReferenceStore } from '@/store/reference/project-reference-store';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 const props = defineProps<{
     projectId: string;
@@ -21,16 +20,9 @@ const props = defineProps<{
 const emit = defineEmits<{(event: 'click'): void;
 }>();
 const projectReferenceStore = useProjectReferenceStore();
-const userWorkspaceStore = useUserWorkspaceStore();
 
 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>(() => referenceRouter(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/lib/menu/menu-info.ts

@@ -14,7 +14,7 @@ import { INFO_ROUTE } from '@/services/info/routes/route-constant';
 import { MY_PAGE_ROUTE } from '@/services/my-page/routes/route-constant';
 import { ADMIN_OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/admin/route-constant';
 import { OPS_FLOW_ROUTE } from '@/services/ops-flow/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';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
 
@@ -34,7 +34,7 @@ export const MENU_INFO_MAP: Record<MenuId, MenuInfo> = Object.freeze({
     },
     [MENU_ID.PROJECT]: {
         menuId: MENU_ID.PROJECT,
-        routeName: PROJECT_ROUTE_V1._NAME,
+        routeName: PROJECT_ROUTE_V2._NAME,
         translationId: 'MENU.PROJECT',
         icon: 'ic_service_project',
     },

apps/web/src/lib/reference/referenceRouter.ts

@@ -5,18 +5,24 @@ import { concat } from 'lodash';
 
 import { QueryHelper } from '@cloudforet/core-lib/query';
 
+import { useServiceRouter } from '@/router/helpers/use-service-router';
+
 import type { Reference, ResourceType } from '@/lib/reference/type';
 
 import { ADMIN_ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/admin/route-constant';
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/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';
 import { ADMIN_SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/admin/route-constant';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
+import { MENU_ID } from '../menu/config';
+
 interface LinkFormatter {
     (baseUrl: string, data: string, reference: Reference, query: Location['query']): Location;
 }
 
+const serviceRouter = useServiceRouter();
+
 const queryHelper = new QueryHelper();
 
 const serverLinkFormatter: LinkFormatter = (name, data, reference, query) => {
@@ -34,27 +40,24 @@ const serverLinkFormatter: LinkFormatter = (name, data, reference, query) => {
 };
 
 const projectLinkFormatter: LinkFormatter = (name, data, reference, query) => {
+    const location = serviceRouter.getLocation({
+        feature: MENU_ID.PROJECT,
+        routeKey: 'detail',
+        params: { id: data },
+    });
     if (data) {
         return {
-            name,
+            ...location,
             query,
-            params: data ? {
-                id: data,
-                ...(reference.workspace_id ? { workspaceId: reference.workspace_id } : {}),
-            } : undefined,
         };
     } return {};
 };
 
-const projectGroupLinkFormatter: LinkFormatter = (name, data) => {
-    const location = {
-        name,
-        params: {
-            projectGroupId: data,
-        },
-    };
-    return location;
-};
+const projectGroupLinkFormatter: LinkFormatter = (name, data) => serviceRouter.getLocation({
+    feature: MENU_ID.PROJECT,
+    routeKey: 'projectGroup',
+    params: { id: data },
+});
 
 const collectorLinkFormatter: LinkFormatter = (name, data, reference, query) => {
     const location = { name, query };
@@ -110,12 +113,18 @@ const routerMap = (isAdminMode?: boolean): RouterMap => ({
         },
     'identity.Project':
         {
-            name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+            name: serviceRouter.getLocation({
+                feature: MENU_ID.PROJECT,
+                routeKey: 'detail',
+            }).name || PROJECT_ROUTE_V2._NAME,
             formatter: projectLinkFormatter,
         },
     'identity.ProjectGroup':
         {
-            name: PROJECT_ROUTE_V1._NAME,
+            name: serviceRouter.getLocation({
+                feature: MENU_ID.PROJECT,
+                routeKey: 'projectGroup',
+            }).name || PROJECT_ROUTE_V2._NAME,
             formatter: projectGroupLinkFormatter,
         },
     'inventory.Collector':

apps/web/src/router/helpers/route-helper.ts

@@ -10,9 +10,7 @@ import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/mod
 import {
     ERROR_ROUTE, EXTERNAL_PAGES, ROOT_ROUTE, ROUTE_SCOPE,
 } from '@/router/constant';
-import type { RouteScopeType } from '@/router/type';
-
-
+import type { RouteScopeType } from '@/router/types';
 
 import { calculateIsAccessibleRoute } from '@/lib/access-control';
 import type { MenuId } from '@/lib/menu/config';

apps/web/src/router/helpers/use-service-router.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'vue-router/composables';
-
+import type { Location } from 'vue-router/types/router';
 
 import { useGlobalConfigSchemaStore } from '@/store/global-config-schema/global-config-schema-store';
 
@@ -16,51 +16,66 @@ type NavigateOptionsType = RouterOptionsType & {
 };
 
 export const useServiceRouter = () => {
-    const router = useRouter();
     const globalConfigSchemaStore = useGlobalConfigSchemaStore();
     const globalConfigSchemaState = globalConfigSchemaStore.state;
 
-    const navigate = async (options: NavigateOptionsType) => {
+    const transformParams = (
+        paramConfig: Record<string, any>,
+        sourceParams: Record<string, any>,
+    ): Record<string, any> => {
+        const result: Record<string, any> = {};
+
+        Object.entries(paramConfig).forEach(([key, targetKey]) => {
+            if (sourceParams[key] !== undefined) {
+                result[targetKey] = sourceParams[key];
+            }
+        });
+
+        return result;
+    };
+
+    const getLocation = (options: RouterOptionsType): Location => {
         const {
-            feature, routeKey, params, method,
+            feature, routeKey, params,
         } = options;
 
         const featureMetadata = globalConfigSchemaState.routeMetadataSchema[feature.toUpperCase()];
         const convertedParams = params ? transformParams(featureMetadata[routeKey].params || {}, params) : undefined;
 
         if (!featureMetadata) {
-            return router[method]({ name: feature, params: convertedParams });
+            return { name: feature, params: convertedParams };
         }
 
         const routeConfig = featureMetadata[routeKey];
         if (!routeConfig) {
-            return router[method]({ name: feature, params: convertedParams });
+            return { name: feature, params: convertedParams };
         }
 
-        const navigationOptions = {
+        return {
             name: routeConfig.name,
             params: convertedParams,
         };
-        return router[method](navigationOptions);
     };
 
-    const transformParams = (
-        paramConfig: Record<string, any>,
-        sourceParams: Record<string, any>,
-    ): Record<string, any> => {
-        const result: Record<string, any> = {};
-
-        Object.entries(paramConfig).forEach(([key, targetKey]) => {
-            if (sourceParams[key] !== undefined) {
-                result[targetKey] = sourceParams[key];
-            }
-        });
+    const navigate = async (options: NavigateOptionsType) => {
+        const router = useRouter();
+        const { method } = options;
+        const location = getLocation(options);
+        return router[method](location);
+    };
 
-        return result;
+    const resolve = (options: RouterOptionsType) => {
+        const router = useRouter();
+        const location = getLocation(options);
+        return router.resolve(location);
     };
 
     return {
         push: (options: RouterOptionsType) => navigate({ ...options, method: 'push' }),
         replace: (options: RouterOptionsType) => navigate({ ...options, method: 'replace' }),
+        getLocation,
+
+        resolve,
     };
 };
+

apps/web/src/router/types.ts

@@ -1,3 +1,9 @@
+import type { MenuId } from '@/lib/menu/config';
+
+import type { ROUTE_SCOPE } from './constant';
+
+export type RouteScopeType = typeof ROUTE_SCOPE[keyof typeof ROUTE_SCOPE];
+
 export interface RouteVersionInfo {
     name: string;
     params?: Record<string, any>;
@@ -40,3 +46,10 @@ export class ServiceNavigationError extends Error implements ServiceRouteError {
         this.name = 'ServiceNavigationError';
     }
 }
+
+export type RouterOptionsType = {
+    feature: MenuId;
+    routeKey: string;
+    name?: string;
+    params?: Record<string, any>;
+};