Use the query parameter to search deployment

ui/package.json

@@ -19,7 +19,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^1.1.2"
   },
@@ -56,7 +56,7 @@
     "@types/react": "^17.0.8",
     "@types/react-dom": "^17.0.5",
     "@types/react-helmet": "^6.1.4",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "eslint": "^7.31.0",

ui/src/App.tsx

@@ -1,5 +1,5 @@
 import './App.less';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import Home from './views/home';
 import Repo from './views/repo';
@@ -12,29 +12,18 @@ function App(): JSX.Element {
   return (
     <div className="App">
       <Router>
-        <Switch>
-          <Route path="/:namespace/:name/deployments/:number">
-            <Deployment />
-          </Route>
-          <Route path="/:namespace/:name/:tab">
-            <Repo />
-          </Route>
-          <Route path="/:namespace/:name">
-            <Repo />
-          </Route>
-          <Route path="/settings">
-            <Settings />
-          </Route>
-          <Route path="/members">
-            <Members />
-          </Route>
-          <Route path="/activities">
-            <Activities />
-          </Route>
-          <Route path="/">
-            <Home />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route
+            path="/:namespace/:name/deployments/:number"
+            element={<Deployment />}
+          />
+          <Route path="/:namespace/:name/:tab" element={<Repo />} />
+          <Route path="/:namespace/:name" element={<Repo />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/members" element={<Members />} />
+          <Route path="/activities" element={<Activities />} />
+          <Route path="/" element={<Home />} />
+        </Routes>
       </Router>
     </div>
   );

ui/src/views/deployment/index.tsx

@@ -1,9 +1,8 @@
 import { useEffect } from 'react';
 import { shallowEqual } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { Button, PageHeader, Result, Row, Col } from 'antd';
-
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
 import {
   deploymentSlice as slice,
@@ -27,7 +26,6 @@ import {
   subscribeDeploymentStatusEvents,
   subscribeReviewEvents,
 } from '../../apis';
-
 import Main from '../main';
 import HeaderBreadcrumb, { HeaderBreadcrumbProps } from './HeaderBreadcrumb';
 import ReviewButton, { ReviewButtonProps } from './ReviewButton';
@@ -38,14 +36,15 @@ import DeploymentDescriptor, {
 import DeploymentStatusSteps from './DeploymentStatusSteps';
 import Spin from '../../components/Spin';
 
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+  number: string;
+}
+
 // It makes the view by binding the state to the deployment page.
 export default (): JSX.Element => {
-  const { namespace, name, number } = useParams<{
-    namespace: string;
-    name: string;
-    number: string;
-  }>();
-
+  const { namespace, name, number } = useParams() as ParamsType;
   const {
     display,
     deployment,

ui/src/views/repo/index.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { Menu, Breadcrumb, Result } from 'antd';
 import { shallowEqual } from 'react-redux';
 import { useEffect } from 'react';
@@ -15,14 +15,14 @@ import RepoDeploy from '../repoDeploy';
 import RepoRollabck from '../repoRollback';
 import RepoSettings from '../repoSettings';
 
-interface Params {
+interface ParamsTypes extends Params {
   namespace: string;
   name: string;
   tab: string;
 }
 
 export default (): JSX.Element => {
-  const { namespace, name, tab } = useParams<Params>();
+  const { namespace, name, tab } = useParams() as ParamsTypes;
   const { display, repo } = useAppSelector((state) => state.repo, shallowEqual);
   const dispatch = useAppDispatch();
 

ui/src/views/repoDeploy/index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { shallowEqual } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { PageHeader, Result, Button } from 'antd';
-
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
 import {
   DeploymentType,
@@ -36,11 +35,13 @@ import DynamicPayloadModal, {
 
 const { actions } = repoDeploySlice;
 
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+}
+
 export default (): JSX.Element => {
-  const { namespace, name } = useParams<{
-    namespace: string;
-    name: string;
-  }>();
+  const { namespace, name } = useParams() as ParamsType;
 
   const {
     display,

ui/src/views/repoHome/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { shallowEqual } from 'react-redux';
 import { PageHeader, Select } from 'antd';
 
@@ -17,11 +17,13 @@ import Pagination, { PaginationProps } from '../../components/Pagination';
 
 const { Option } = Select;
 
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+}
+
 export default (): JSX.Element => {
-  const { namespace, name } = useParams<{
-    namespace: string;
-    name: string;
-  }>();
+  const { namespace, name } = useParams() as ParamsType;
 
   const { loading, deployments, envs, page } = useAppSelector(
     (state) => state.repoHome,

ui/src/views/repoLock/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { shallowEqual } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { PageHeader, Button } from 'antd';
 import { Result } from 'antd';
 
@@ -15,11 +15,13 @@ import {
 } from '../../redux/repoLock';
 import LockList, { LockListProps } from './LockList';
 
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+}
+
 export default (): JSX.Element => {
-  const { namespace, name } = useParams<{
-    namespace: string;
-    name: string;
-  }>();
+  const { namespace, name } = useParams() as ParamsType;
 
   const { display, config, locks } = useAppSelector(
     (state) => state.repoLock,

ui/src/views/repoRollback/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { PageHeader, Result, Button } from 'antd';
 import { shallowEqual } from 'react-redux';
 
@@ -17,11 +17,13 @@ import RollbackForm, { RollbackFormProps } from './RollbackForm';
 
 const { actions } = repoRollbackSlice;
 
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+}
+
 export default (): JSX.Element => {
-  const { namespace, name } = useParams<{
-    namespace: string;
-    name: string;
-  }>();
+  const { namespace, name } = useParams() as ParamsType;
 
   const { display, config, envs, deployments, deploying } = useAppSelector(
     (state) => state.repoRollback,

ui/src/views/repoSettings/index.tsx

@@ -1,25 +1,23 @@
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { Params, useParams } from 'react-router-dom';
 import { shallowEqual } from 'react-redux';
 import { PageHeader } from 'antd';
-
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
 import { save, deactivate } from '../../redux/repoSettings';
 import { init } from '../../redux/repoSettings';
-
 import SettingsForm, {
   SettingFormProps,
   SettingFormValues,
 } from './SettingsForm';
 
-export default (): JSX.Element => {
-  const { namespace, name } = useParams<{
-    namespace: string;
-    name: string;
-  }>();
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+}
 
+export default (): JSX.Element => {
+  const { namespace, name } = useParams() as ParamsType;
   const { repo } = useAppSelector((state) => state.repoSettings, shallowEqual);
-
   const dispatch = useAppDispatch();
 
   useEffect(() => {