fix: Set index child route in workspace page (kubesphere#2596)

* fix: Set index child route in workspace page Signed-off-by: yazhou <yazhouhu@yunify.com> * fix: fix type warning and remove log Signed-off-by: yazhou <yazhouhu@yunify.com> --------- Signed-off-by: yazhou <yazhouhu@yunify.com>
Leioy · Mar 2, 2024 · 2e1effa · 2e1effa
1 parent 06ccedb
commit 2e1effa
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^3.32.1",
-    "react-router-dom": "^6.0.2",
+    "react-router-dom": "^6.22.2",
     "rimraf": "^3.0.2",
     "semver": "^7.3.8",
     "styled-components": "5.3.3"

diff --git a/packages/console/src/pages/platform/containers/Licenses/index.tsx b/packages/console/src/pages/platform/containers/Licenses/index.tsx
@@ -10,7 +10,7 @@ import { PAGE_TABS } from './constants';
 export default function License() {
   const data = PAGE_TABS.map(({ key, localeKey }) => ({ value: key, label: t(localeKey) }));
 
-  const pathMatch = useMatch<'tab'>({ path: `${LicensesConstants.PAGE_BASE_PATH}/:tab` });
+  const pathMatch = useMatch({ path: `${LicensesConstants.PAGE_BASE_PATH}/:tab` });
   const activeTab = pathMatch?.params.tab ?? PAGE_TABS[0].key;
 
   const navigate = useNavigate();

diff --git a/packages/console/src/pages/workspaces/routes/index.tsx b/packages/console/src/pages/workspaces/routes/index.tsx
@@ -33,7 +33,7 @@ export default [
         children: [
           {
             index: true,
-            element: <Navigate to="overview" replace />,
+            element: <ListLayout.IndexChild />,
           },
           {
             path: 'overview',

diff --git a/packages/shared/src/components/WorkspaceLayout/IndexChild/index.tsx b/packages/shared/src/components/WorkspaceLayout/IndexChild/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Navigate, useOutletContext } from 'react-router-dom';
+
+const IndexChild = () => {
+  const { indexPath } = useOutletContext<{ indexPath?: string }>();
+  if (!indexPath) {
+    return null;
+  }
+  return <Navigate to={indexPath} replace />;
+};
+
+export default IndexChild;
diff --git a/packages/shared/src/components/WorkspaceLayout/ListLayout/index.tsx b/packages/shared/src/components/WorkspaceLayout/ListLayout/index.tsx
@@ -1,15 +1,17 @@
-import React, { useEffect } from 'react';
+import { FavoriteHistory, ListPageSide } from '@ks-console/shared';
+import { useModal } from '@kubed/components';
+import { Enterprise } from '@kubed/icons';
+import React, { useEffect, useMemo } from 'react';
 import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { Enterprise } from '@kubed/icons';
-import { useModal } from '@kubed/components';
-import { ListPageSide, FavoriteHistory } from '@ks-console/shared';
-import { useGlobalStore, workspaceStore, permissionStore } from '../../../stores';
-import { NavMenu } from '../../Layouts/NavMenu';
+import { permissionStore, useGlobalStore, workspaceStore } from '../../../stores';
+import { NavMenu, NavMenuItem } from '../../Layouts/NavMenu';
 import NavTitle from '../../Layouts/NavTitle';
 
 import type { FormattedWorkspace } from '../../../types';
 
+import { sortBy } from 'lodash';
+import IndexChild from '../IndexChild';
 import WorkspaceSelectorModal from '../WorkspaceSelectorModal';
 
 const { useFetchWorkspaceQuery } = workspaceStore;
@@ -33,6 +35,21 @@ const TitleWrapper = styled.div`
   }
 `;
 
+const getFirstRoute = (navs: NavMenuItem[]) => {
+  let newNavs = [...navs];
+  let index;
+  do {
+    newNavs = sortBy(newNavs, 'order');
+    index = newNavs[0];
+
+    if (newNavs.length === 0 || !index?.children?.length) {
+      return index?.name;
+    }
+    newNavs = index.children!;
+  } while (Array.isArray(newNavs));
+  return index?.name;
+};
+
 function ListLayout(): JSX.Element {
   const location = useLocation();
   const navigate = useNavigate();
@@ -79,6 +96,14 @@ function ListLayout(): JSX.Element {
   const title = workspaceDetail?.aliasName
     ? `${workspaceDetail?.aliasName}（${workspaceName}）`
     : workspaceName;
+
+  const indexPath = useMemo(() => {
+    const newNavs = !navs ? [] : [...navs];
+    return {
+      indexPath: getFirstRoute(newNavs),
+    };
+  }, [navs]);
+
   return (
     <>
       <ListPageSide>
@@ -111,10 +136,12 @@ function ListLayout(): JSX.Element {
         <NavMenu navs={navs} prefix={`/workspaces/${workspaceName}`} pathname={location.pathname} />
       </ListPageSide>
       <PageMain>
-        <Outlet />
+        <Outlet context={indexPath} />
       </PageMain>
     </>
   );
 }
 
+ListLayout.IndexChild = IndexChild;
+
 export default ListLayout;
diff --git a/server/configs/config.yaml b/server/configs/config.yaml
@@ -426,11 +426,13 @@ client:
           title: OVERVIEW,
           icon: dashboard,
           authKey: "projects",
+          order: 0
         }
       - name: projects
         title: PROJECT_PL
         icon: project
         skipAuth: true
+        order: 0.1
         # children:
         #   - { name: projects, title: PROJECT_PL }
       #      - {

diff --git a/yarn.lock b/yarn.lock
@@ -1435,13 +1435,6 @@
   dependencies:
     regenerator-runtime "^0.13.10"
 
-"@babel/runtime@^7.7.6":
-  version "7.16.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
-  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime@^7.9.2":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
@@ -2282,6 +2275,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
   integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
 
+"@remix-run/router@1.15.2":
+  version "1.15.2"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz#35726510d332ba5349c6398d13259d5da184553d"
+  integrity sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==
+
 "@rollup/plugin-commonjs@^22.0.0":
   version "22.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.0.tgz#f4d87016e2fbf187a593ab9f46626fe05b59e8bd"
@@ -7662,13 +7660,6 @@ highlight.js@^9.13.1:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
   integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
 
-history@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.1.0.tgz#2e93c09c064194d38d52ed62afd0afc9d9b01ece"
-  integrity sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 hogan.js@3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
@@ -12612,20 +12603,20 @@ react-resize-detector@^8.0.4:
   dependencies:
     lodash "^4.17.21"
 
-react-router-dom@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.2.tgz#860cefa697b9d4965eced3f91e82cdbc5995f3ad"
-  integrity sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==
+react-router-dom@^6.22.2:
+  version "6.22.2"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz#8233968a8a576f3006e5549c80f3527d2598fc9c"
+  integrity sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==
   dependencies:
-    history "^5.1.0"
-    react-router "6.0.2"
+    "@remix-run/router" "1.15.2"
+    react-router "6.22.2"
 
-react-router@6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.2.tgz#bd2b0fa84fd1d152671e9f654d9c0b1f5a7c86da"
-  integrity sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==
+react-router@6.22.2:
+  version "6.22.2"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz#27e77e4c635a5697693b922d131d773451c98a5b"
+  integrity sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==
   dependencies:
-    history "^5.1.0"
+    "@remix-run/router" "1.15.2"
 
 react-simple-code-editor@^0.11.0:
   version "0.11.3"