Redux Toolkit Redux Rewrite (#2003)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Author: dvaldivia

portal-ui/package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^5.4.0",
     "@mui/styled-engine-sc": "^5.3.0",
     "@mui/styles": "^5.3.0",
+    "@reduxjs/toolkit": "^1.8.1",
     "@types/history": "^4.7.3",
     "@types/jest": "27.4.0",
     "@types/lodash": "^4.14.149",
@@ -25,7 +26,7 @@
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "17.0.11",
     "@types/react-grid-layout": "^1.1.1",
-    "@types/react-redux": "^7.1.5",
+    "@types/react-redux": "^7.1.24",
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-virtualized": "^9.21.10",
@@ -92,8 +93,8 @@
     "react-app-rewire-hot-loader": "^2.0.1",
     "react-app-rewired": "^2.1.6",
     "react-scripts": "5.0.1",
-    "typescript": "^4.4.3",
-    "testcafe": "^1.18.6"
+    "testcafe": "^1.18.6",
+    "typescript": "^4.4.3"
   },
   "resolutions": {
     "nth-check": "^2.0.1",

portal-ui/src/ProtectedRoutes.tsx

@@ -16,74 +16,63 @@
 
 import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router-dom";
-import { connect } from "react-redux";
-import { AppState } from "./store";
-import {
-  consoleOperatorMode,
-  setDistributedMode,
-  setErrorSnackMessage,
-  setSiteReplicationInfo,
-  userLoggedIn,
-} from "./actions";
+
 import api from "./common/api";
-import { saveSessionResponse } from "./screens/Console/actions";
 import { ISessionResponse } from "./screens/Console/types";
 import useApi from "./screens/Console/Common/Hooks/useApi";
 import { ErrorResponseHandler } from "./common/types";
 import { ReplicationSite } from "./screens/Console/Configurations/SiteReplication/SiteReplication";
-import { SRInfoStateType } from "./types";
 import { baseUrl } from "./history";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  globalSetDistributedSetup,
+  operatorMode,
+  setSiteReplicationInfo,
+  userLogged,
+} from "./systemSlice";
+import { SRInfoStateType } from "./types";
+import { AppState } from "./store";
+import { saveSessionResponse } from "./screens/Console/consoleSlice";
 
 interface ProtectedRouteProps {
-  loggedIn: boolean;
   Component: any;
-  userLoggedIn: typeof userLoggedIn;
-  consoleOperatorMode: typeof consoleOperatorMode;
-  saveSessionResponse: typeof saveSessionResponse;
-  setDistributedMode: typeof setDistributedMode;
-  setSiteReplicationInfo: typeof setSiteReplicationInfo;
 }
 
-const ProtectedRoute = ({
-  Component,
-  loggedIn,
-  userLoggedIn,
-  consoleOperatorMode,
-  saveSessionResponse,
-  setDistributedMode,
-  setSiteReplicationInfo,
-}: ProtectedRouteProps) => {
+const ProtectedRoute = ({ Component }: ProtectedRouteProps) => {
+  const dispatch = useDispatch();
+
+  const isOperatorMode = useSelector(
+    (state: AppState) => state.system.operatorMode
+  );
+
   const [sessionLoading, setSessionLoading] = useState<boolean>(true);
+  const userLoggedIn = useSelector((state: AppState) => state.system.loggedIn);
 
   useEffect(() => {
     api
       .invoke("GET", `/api/v1/session`)
       .then((res: ISessionResponse) => {
-        saveSessionResponse(res);
-        userLoggedIn(true);
+        dispatch(saveSessionResponse(res));
+        dispatch(userLogged(true));
         setSessionLoading(false);
-        setDistributedMode(res.distributedMode || false);
+        dispatch(globalSetDistributedSetup(res.distributedMode || false));
         // check for tenants presence, that indicates we are in operator mode
         if (res.operator) {
-          consoleOperatorMode(true);
+          dispatch(operatorMode(true));
           document.title = "MinIO Operator";
         }
       })
       .catch(() => setSessionLoading(false));
-  }, [
-    saveSessionResponse,
-    consoleOperatorMode,
-    userLoggedIn,
-    setDistributedMode,
-  ]);
+  }, [dispatch]);
 
   const [, invokeSRInfoApi] = useApi(
     (res: any) => {
-      const {
-        sites: siteList = [],
-        name: curSiteName,
-        enabled = false,
-      } = res || {};
+      const { name: curSiteName, enabled = false } = res || {};
+
+      let siteList = res.site;
+      if (!siteList) {
+        siteList = [];
+      }
       const isSiteNameInList = siteList.find((si: ReplicationSite) => {
         return si.name === curSiteName;
       });
@@ -95,42 +84,31 @@ const ProtectedRoute = ({
         siteName: isCurSite ? curSiteName : "",
       };
 
-      setSiteReplicationInfo(siteReplicationDetail);
+      dispatch(setSiteReplicationInfo(siteReplicationDetail));
     },
     (err: ErrorResponseHandler) => {
-      setErrorSnackMessage(err);
+      // we will fail this call silently, but show it on the console
+      console.error(`Error loading site replication status`, err);
     }
   );
 
   useEffect(() => {
-    if (loggedIn && !sessionLoading) {
+    if (userLoggedIn && !sessionLoading && !isOperatorMode) {
       invokeSRInfoApi("GET", `api/v1/admin/site-replication`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loggedIn, sessionLoading]);
+  }, [userLoggedIn, sessionLoading]);
 
-  // if we still trying to retrieve user session render nothing
+  // if we're still trying to retrieve user session render nothing
   if (sessionLoading) {
     return null;
   }
   // redirect user to the right page based on session status
-  return loggedIn ? (
+  return userLoggedIn ? (
     <Component />
   ) : (
     <Redirect to={{ pathname: `${baseUrl}login` }} />
   );
 };
 
-const mapState = (state: AppState) => ({
-  loggedIn: state.system.loggedIn,
-});
-
-const connector = connect(mapState, {
-  userLoggedIn,
-  consoleOperatorMode,
-  saveSessionResponse,
-  setDistributedMode,
-  setSiteReplicationInfo,
-});
-
-export default connector(ProtectedRoute);
+export default ProtectedRoute;

portal-ui/src/actions.ts

@@ -16,13 +16,12 @@
 
 import hasPermission from "../accessControl";
 import { store } from "../../../store";
-import { SESSION_RESPONSE } from "../../../screens/Console/actions";
 import { IAM_PAGES, IAM_PAGES_PERMISSIONS, IAM_SCOPES } from "../permissions";
+import { saveSessionResponse } from "../../../screens/Console/consoleSlice";
 
 const setPolicy1 = () => {
-  store.dispatch({
-    type: SESSION_RESPONSE,
-    message: {
+  store.dispatch(
+    saveSessionResponse({
       distributedMode: true,
       features: ["log-search"],
       permissions: {
@@ -50,13 +49,12 @@ const setPolicy1 = () => {
       },
       operator: false,
       status: "ok",
-    },
-  });
+    })
+  );
 };
 const setPolicy2 = () => {
-  store.dispatch({
-    type: SESSION_RESPONSE,
-    message: {
+  store.dispatch(
+    saveSessionResponse({
       distributedMode: true,
       operator: false,
       features: [],
@@ -93,13 +91,12 @@ const setPolicy2 = () => {
         "console-ui": ["admin:CreateServiceAccount", "admin:CreateUser"],
       },
       status: "ok",
-    },
-  });
+    })
+  );
 };
 const setPolicy3 = () => {
-  store.dispatch({
-    type: SESSION_RESPONSE,
-    message: {
+  store.dispatch(
+    saveSessionResponse({
       distributedMode: true,
       features: [],
       permissions: {
@@ -112,14 +109,13 @@ const setPolicy3 = () => {
       },
       status: "ok",
       operator: false,
-    },
-  });
+    })
+  );
 };
 
 const setPolicy4 = () => {
-  store.dispatch({
-    type: SESSION_RESPONSE,
-    message: {
+  store.dispatch(
+    saveSessionResponse({
       distributedMode: true,
       features: [],
       permissions: {
@@ -129,8 +125,8 @@ const setPolicy4 = () => {
       },
       status: "ok",
       operator: false,
-    },
-  });
+    })
+  );
 };
 
 test("Upload button disabled", () => {