Updated React router to V6 (#2107)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
minio · Jun 9, 2022 · e3d96b5 · e3d96b5
1 parent 51afc33
commit e3d96b5
Show file tree

Hide file tree

Showing 94 changed files with 1,286 additions and 1,549 deletions.
diff --git a/portal-ui/package.json b/portal-ui/package.json
@@ -24,8 +24,8 @@
     "@types/react-dom": "18.0.5",
     "@types/react-grid-layout": "^1.1.1",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router": "^5.1.3",
-    "@types/react-router-dom": "^5.1.2",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.21.21",
     "@types/superagent": "^4.1.12",
     "@types/webpack-env": "^1.14.1",
@@ -46,7 +46,7 @@
     "react-grid-layout": "^1.2.0",
     "react-moment": "^1.1.1",
     "react-redux": "^7.1.3",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "6",
     "react-virtualized": "^9.22.3",
     "react-window": "^1.8.7",
     "react-window-infinite-loader": "^1.0.7",

diff --git a/portal-ui/src/Routes.tsx → portal-ui/src/MainRouter.tsx b/portal-ui/src/Routes.tsx → portal-ui/src/MainRouter.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Suspense } from "react";
-import { Route, Router, Switch } from "react-router-dom";
-import history from "./history";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import ProtectedRoute from "./ProtectedRoutes";
 import LoadingComponent from "./common/LoadingComponent";
 import AppConsole from "./screens/Console/ConsoleKBar";
@@ -26,23 +25,21 @@ const LoginCallback = React.lazy(
   () => import("./screens/LoginPage/LoginCallback")
 );
 
-const Routes = () => {
+const MainRouter = () => {
   return (
-    <Router history={history}>
-      <Switch>
+    <BrowserRouter>
+      <Routes>
         <Route
-          exact
           path="/oauth_callback"
-          children={(routerProps) => (
+          element={
             <Suspense fallback={<LoadingComponent />}>
               <LoginCallback />
             </Suspense>
-          )}
+          }
         />
         <Route
-          exact
           path="/login"
-          children={(routerProps) => (
+          element={
             <div
               style={{
                 backgroundImage: `url('images/background-wave-orig2.svg'), url('images/background.svg')`,
@@ -61,12 +58,15 @@ const Routes = () => {
                 <Login />
               </Suspense>
             </div>
-          )}
+          }
         />
-        <ProtectedRoute Component={AppConsole} />
-      </Switch>
-    </Router>
+        <Route
+          path={"/*"}
+          element={<ProtectedRoute Component={AppConsole} />}
+        />
+      </Routes>
+    </BrowserRouter>
   );
 };
 
-export default Routes;
+export default MainRouter;
diff --git a/portal-ui/src/ProtectedRoutes.tsx b/portal-ui/src/ProtectedRoutes.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Redirect, useLocation } from "react-router-dom";
+import { Navigate, useLocation } from "react-router-dom";
 import api from "./common/api";
 import { ISessionResponse } from "./screens/Console/types";
 import useApi from "./screens/Console/Common/Hooks/useApi";
@@ -50,7 +50,7 @@ const ProtectedRoute = ({ Component }: ProtectedRouteProps) => {
 
   const StorePathAndRedirect = () => {
     localStorage.setItem("redirect-path", pathname);
-    return <Redirect to={{ pathname: `${baseUrl}login` }} />;
+    return <Navigate to={{ pathname: `${baseUrl}login` }} />;
   };
 
   useEffect(() => {

diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts
@@ -113,20 +113,20 @@ export const IAM_SCOPES = {
 export const IAM_PAGES = {
   /* Buckets */
   BUCKETS: "/buckets",
-  ADD_BUCKETS: "/buckets/add-bucket",
-  BUCKETS_ADMIN_VIEW: "/buckets/:bucketName/admin*",
-  BUCKETS_BROWSE_VIEW: "/buckets/:bucketName/browse*",
+  ADD_BUCKETS: "add-bucket",
+  BUCKETS_ADMIN_VIEW: ":bucketName/admin/*",
+  BUCKETS_BROWSE_VIEW: ":bucketName/browse/*",
   /* Identity */
   IDENTITY: "/identity",
   USERS: "/identity/users",
   USERS_VIEW: "/identity/users/:userName",
   USER_ADD: "/identity/users/add-user",
   GROUPS: "/identity/groups",
   GROUPS_ADD: "/identity/groups/create-group",
-  GROUPS_VIEW: "/identity/groups/:groupName+",
+  GROUPS_VIEW: "/identity/groups/:groupName",
   ACCOUNT: "/identity/account",
   ACCOUNT_ADD: "/identity/account/new-account",
-  USER_SA_ACCOUNT_ADD: "/identity/users/new-user-sa/:userName+",
+  USER_SA_ACCOUNT_ADD: "/identity/users/new-user-sa/:userName",
 
   /* Access */
   POLICIES: "/access/policies",

diff --git a/portal-ui/src/index.tsx b/portal-ui/src/index.tsx
@@ -17,7 +17,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
-import Routes from "./Routes";
 import { store } from "./store";
 import * as serviceWorker from "./serviceWorker";
 import {
@@ -32,6 +31,7 @@ import "react-resizable/css/styles.css";
 
 import "./index.css";
 import theme from "./theme/main";
+import MainRouter from "./MainRouter";
 
 declare module "@mui/styles/defaultTheme" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -137,7 +137,7 @@ root.render(
       <GlobalCss />
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <Routes />
+          <MainRouter />
         </ThemeProvider>
       </StyledEngineProvider>
     </Provider>

diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import Grid from "@mui/material/Grid";
@@ -76,12 +77,10 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-interface IServiceAccountsProps {
-  history: any;
-}
-
-const Account = ({ history }: IServiceAccountsProps) => {
+const Account = () => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   const classes = useStyles();
   const features = useSelector(selFeatures);
 
@@ -248,7 +247,7 @@ const Account = ({ history }: IServiceAccountsProps) => {
             </SecureComponent>
             <RBIconButton
               onClick={(e) => {
-                history.push(`${IAM_PAGES.ACCOUNT_ADD}`);
+                navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
               }}
               text={`Create service account`}
               icon={<AddIcon />}

diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
@@ -32,7 +33,6 @@ import {
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
-import history from "../../../../src/history";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import AddServiceAccountHelpBox from "./AddServiceAccountHelpBox";
@@ -76,6 +76,8 @@ const styles = (theme: Theme) =>
 
 const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   const [addSending, setAddSending] = useState<boolean>(false);
   const [accessKey, setAccessKey] = useState<string>(getRandomString(16));
   const [secretKey, setSecretKey] = useState<string>(getRandomString(32));
@@ -133,7 +135,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
 
   const closeCredentialsModal = () => {
     setNewServiceAccount(null);
-    history.push(`${IAM_PAGES.ACCOUNT}`);
+    navigate(`${IAM_PAGES.ACCOUNT}`);
   };
 
   return (

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
 import { Paper } from "@mui/material";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -26,7 +27,6 @@ import { User } from "../../Users/types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import api from "../../../../common/api";
-import history from "../../../../history";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_PAGES,
@@ -48,12 +48,10 @@ function a11yProps(index: any) {
   };
 }
 
-interface IAccessDetailsProps {
-  match: any;
-}
-
-const AccessDetails = ({ match }: IAccessDetailsProps) => {
+const AccessDetails = () => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const params = useParams();
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
 
@@ -63,7 +61,7 @@ const AccessDetails = ({ match }: IAccessDetailsProps) => {
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
   const [bucketUsers, setBucketUsers] = useState<User[]>([]);
 
-  const bucketName = match.params["bucketName"];
+  const bucketName = params.bucketName || "";
 
   const displayPoliciesList = hasPermission(bucketName, [
     IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
@@ -100,7 +98,7 @@ const AccessDetails = ({ match }: IAccessDetailsProps) => {
       type: "view",
       disableButtonFunction: () => !viewPolicy,
       onClick: (policy: any) => {
-        history.push(`${IAM_PAGES.POLICIES}/${encodeURLString(policy.name)}`);
+        navigate(`${IAM_PAGES.POLICIES}/${encodeURLString(policy.name)}`);
       },
     },
   ];
@@ -110,7 +108,7 @@ const AccessDetails = ({ match }: IAccessDetailsProps) => {
       type: "view",
       disableButtonFunction: () => !viewUser,
       onClick: (user: any) => {
-        history.push(`${IAM_PAGES.USERS}/${encodeURLString(user)}`);
+        navigate(`${IAM_PAGES.USERS}/${encodeURLString(user)}`);
       },
     },
   ];

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import { Paper } from "@mui/material";
@@ -73,13 +74,10 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-interface IAccessRuleProps {
-  match: any;
-}
-
-const AccessRule = ({ match }: IAccessRuleProps) => {
+const AccessRule = () => {
   const dispatch = useDispatch();
   const classes = useStyles();
+  const params = useParams();
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
 
@@ -93,7 +91,7 @@ const AccessRule = ({ match }: IAccessRuleProps) => {
   const [accessRuleToEdit, setAccessRuleToEdit] = useState<string>("");
   const [initialAccess, setInitialAccess] = useState<string>("");
 
-  const bucketName = match.params["bucketName"];
+  const bucketName = params.bucketName || "";
 
   const displayAccessRules = hasPermission(bucketName, [
     IAM_SCOPES.S3_GET_BUCKET_POLICY,

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -48,14 +49,11 @@ const styles = (theme: Theme) =>
     ...containerForHeader(theme.spacing(4)),
   });
 
-interface IBrowserHandlerProps {
-  match: any;
-  history: any;
-  classes: any;
-}
-
-const BrowserHandler = ({ match, history, classes }: IBrowserHandlerProps) => {
+const BrowserHandler = () => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const params = useParams();
+
   const versionsMode = useSelector(
     (state: AppState) => state.objectBrowser.versionsMode
   );
@@ -69,15 +67,15 @@ const BrowserHandler = ({ match, history, classes }: IBrowserHandlerProps) => {
     (state: AppState) => state.objectBrowser.searchVersions
   );
 
-  const bucketName = match.params["bucketName"];
-  const internalPaths = get(match.params, "subpaths", "");
+  const bucketName = params.bucketName || "";
+  const internalPaths = get(params, "subpaths", "");
 
   useEffect(() => {
     dispatch(setVersionsModeEnabled({ status: false }));
   }, [internalPaths, dispatch]);
 
   const openBucketConfiguration = () => {
-    history.push(`/buckets/${bucketName}/admin`);
+    navigate(`/buckets/${bucketName}/admin`);
   };
 
   return (