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/redux/repoHome.ts

@@ -38,10 +38,10 @@ export const fetchEnvs = createAsyncThunk<
 
 export const fetchDeployments = createAsyncThunk<
   Deployment[],
-  void,
+  { env: string; page: number },
   { state: { repoHome: RepoHomeState } }
->('repoHome/fetchDeployments', async (_, { getState }) => {
-  const { namespace, name, env, page } = getState().repoHome;
+>('repoHome/fetchDeployments', async ({ env, page }, { getState }) => {
+  const { namespace, name } = getState().repoHome;
 
   const deployments = await listDeployments(
     namespace,
@@ -65,15 +65,6 @@ export const repoHomeSlice = createSlice({
       state.namespace = action.payload.namespace;
       state.name = action.payload.name;
     },
-    setEnv: (state, action: PayloadAction<string>) => {
-      state.env = action.payload;
-    },
-    increasePage: (state) => {
-      state.page = state.page + 1;
-    },
-    decreasePage: (state) => {
-      state.page = state.page - 1;
-    },
   },
   extraReducers: (builder) => {
     builder

ui/src/views/activities/index.tsx

@@ -40,6 +40,7 @@ export default (): JSX.Element => {
   }: SearchActivitiesValues) => {
     if (period) {
       console.debug('Set search options.', period, productionOnly);
+      // TODO: Replace the state of the query into the URL query parameter.
       dispatch(
         actions.setSearchOptions({
           startDate: period[0].toDate(),

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, useNavigate, 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,
@@ -169,8 +168,10 @@ function DeploymentPage({
   onClickReject,
   onClickDeploy,
 }: DeploymentPageProps): JSX.Element {
+  const navigate = useNavigate();
+
   const onBack = () => {
-    window.location.href = `/${namespace}/${name}`;
+    navigate(-1);
   };
 
   return (

ui/src/views/home/index.tsx

@@ -29,6 +29,7 @@ export default (): JSX.Element => {
   }, [dispatch]);
 
   const search = (q: string) => {
+    // TODO: Replace the state of the query into the URL query parameter.
     dispatch(actions.setQ(q));
     dispatch(actions.setFirstPage());
     dispatch(listRepos());

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,6 +1,6 @@
 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 { RedoOutlined } from '@ant-design/icons';
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
@@ -36,11 +36,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,62 +1,86 @@
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { Params, useParams, useSearchParams } from 'react-router-dom';
 import { shallowEqual } from 'react-redux';
 import { PageHeader, Select } from 'antd';
-
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
 import {
   repoHomeSlice as slice,
   fetchEnvs,
   fetchDeployments,
   perPage,
 } from '../../redux/repoHome';
-
 import ActivityLogs, { ActivityLogsProps } from './ActivityLogs';
 import Spin from '../../components/Spin';
 import Pagination, { PaginationProps } from '../../components/Pagination';
 
 const { Option } = Select;
 
-export default (): JSX.Element => {
-  const { namespace, name } = useParams<{
-    namespace: string;
-    name: string;
-  }>();
+interface ParamsType extends Params {
+  namespace: string;
+  name: string;
+}
+
+const parseSearchParams = (
+  searchParams: URLSearchParams
+): { env: string; page: number } => {
+  return {
+    env: searchParams.get('env') as string,
+    page: parseInt(searchParams.get('page') as string, 10),
+  };
+};
 
-  const { loading, deployments, envs, page } = useAppSelector(
+export default (): JSX.Element => {
+  const { namespace, name } = useParams() as ParamsType;
+  const [searchParams, setSearchParams] = useSearchParams({
+    env: '',
+    page: '1',
+  });
+  const { env, page } = parseSearchParams(searchParams);
+  const { loading, deployments, envs } = useAppSelector(
     (state) => state.repoHome,
     shallowEqual
   );
-
   const dispatch = useAppDispatch();
 
   useEffect(() => {
     const f = async () => {
       await dispatch(slice.actions.init({ namespace, name }));
       await dispatch(fetchEnvs());
-      await dispatch(fetchDeployments());
+      await dispatch(fetchDeployments({ env, page }));
     };
     f();
-  }, [dispatch]);
+  }, []);
+
+  // Fetch deployments when search parameters change.
+  useEffect(() => {
+    dispatch(fetchDeployments({ env, page }));
+  }, [env, page]);
 
   const onChangeEnv = (env: string) => {
-    dispatch(slice.actions.setEnv(env));
-    dispatch(fetchDeployments());
+    // When the environment is changed,
+    // unconditionally return to the first page.
+    setSearchParams({ env, page: '1' });
   };
 
   const onClickPrev = () => {
-    dispatch(slice.actions.decreasePage());
-    dispatch(fetchDeployments());
+    // Subtract one for the page param.
+    const prevPage = page != 1 ? page - 1 : 1;
+    searchParams.set('page', prevPage.toString());
+    setSearchParams(searchParams);
   };
 
   const onClickNext = () => {
-    dispatch(slice.actions.increasePage());
-    dispatch(fetchDeployments());
+    // Plus one for the page param.
+    const nextPage = page + 1;
+    searchParams.set('page', nextPage.toString());
+    setSearchParams(searchParams);
   };
+
   return (
     <RepoHome
       loading={loading}
       deployments={deployments}
+      env={env}
       envs={envs}
       onChangeEnv={onChangeEnv}
       disabledPrev={page <= 1}
@@ -69,6 +93,7 @@ export default (): JSX.Element => {
 
 interface RepoHomeProps extends ActivityLogsProps, PaginationProps {
   loading: boolean;
+  env: string;
   envs: string[];
   onChangeEnv(env: string): void;
 }
@@ -78,6 +103,7 @@ export function RepoHome({
   loading,
   deployments,
   // Environment Selector
+  env,
   envs,
   onChangeEnv,
   // Pagination
@@ -95,7 +121,7 @@ export function RepoHome({
             <Select
               key="1"
               style={{ width: 150 }}
-              defaultValue=""
+              defaultValue={env}
               onChange={onChangeEnv}
             >
               <Option value="">All Environments</Option>

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,