From 2e1effaf9677d9dbb2806d4cd0eda647bd0350c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=A4=E6=9C=88?= Date: Sat, 2 Mar 2024 17:07:03 +0800 Subject: [PATCH] fix: Set index child route in workspace page (#2596) * fix: Set index child route in workspace page Signed-off-by: yazhou * fix: fix type warning and remove log Signed-off-by: yazhou --------- Signed-off-by: yazhou --- package.json | 2 +- .../platform/containers/Licenses/index.tsx | 2 +- .../src/pages/workspaces/routes/index.tsx | 2 +- .../WorkspaceLayout/IndexChild/index.tsx | 12 ++++++ .../WorkspaceLayout/ListLayout/index.tsx | 41 +++++++++++++++---- server/configs/config.yaml | 2 + yarn.lock | 41 ++++++++----------- 7 files changed, 67 insertions(+), 35 deletions(-) create mode 100644 packages/shared/src/components/WorkspaceLayout/IndexChild/index.tsx diff --git a/package.json b/package.json index 16bc583d22b..0b7c1818756 100644 --- 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 index 0c4d6831c06..3866dda8ff0 100644 --- 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 index be7ebdcff2b..1f0d61c9b3c 100644 --- 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: , + element: , }, { path: 'overview', diff --git a/packages/shared/src/components/WorkspaceLayout/IndexChild/index.tsx b/packages/shared/src/components/WorkspaceLayout/IndexChild/index.tsx new file mode 100644 index 00000000000..790a3c1588c --- /dev/null +++ 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 ; +}; + +export default IndexChild; diff --git a/packages/shared/src/components/WorkspaceLayout/ListLayout/index.tsx b/packages/shared/src/components/WorkspaceLayout/ListLayout/index.tsx index 8de629d0eeb..34893d16fa0 100644 --- 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 ( <> @@ -111,10 +136,12 @@ function ListLayout(): JSX.Element { - + ); } +ListLayout.IndexChild = IndexChild; + export default ListLayout; diff --git a/server/configs/config.yaml b/server/configs/config.yaml index 367c863a6c1..008ca7215e0 100644 --- 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 index cd6bf5e2397..d7f80398fc2 100644 --- 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"