Logs, Watch Slices to replace old reducers, Split Tenant Add slice (#2035)

Logs, Watch Slices to replace old reducers

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

Author: dvaldivia

portal-ui/src/ProtectedRoutes.tsx

@@ -26,6 +26,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   globalSetDistributedSetup,
   operatorMode,
+  selOpMode,
   setSiteReplicationInfo,
   userLogged,
 } from "./systemSlice";
@@ -40,9 +41,7 @@ interface ProtectedRouteProps {
 const ProtectedRoute = ({ Component }: ProtectedRouteProps) => {
   const dispatch = useDispatch();
 
-  const isOperatorMode = useSelector(
-    (state: AppState) => state.system.operatorMode
-  );
+  const isOperatorMode = useSelector(selOpMode);
 
   const [sessionLoading, setSessionLoading] = useState<boolean>(true);
   const userLoggedIn = useSelector((state: AppState) => state.system.loggedIn);

portal-ui/src/screens/Console/Account/Account.tsx

@@ -15,10 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { connect, useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import api from "../../../common/api";
 import { Box } from "@mui/material";
@@ -55,14 +54,15 @@ import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import { selectSAs } from "../Configurations/utils";
 import DeleteMultipleServiceAccounts from "../Users/DeleteMultipleServiceAccounts";
 import ServiceAccountPolicy from "./ServiceAccountPolicy";
-import { AppState } from "../../../store";
 import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
+import makeStyles from "@mui/styles/makeStyles";
+import { selFeatures } from "../consoleSlice";
 
 const DeleteServiceAccount = withSuspense(
   React.lazy(() => import("./DeleteServiceAccount"))
 );
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     ...actionsTray,
     ...searchField,
@@ -73,16 +73,18 @@ const styles = (theme: Theme) =>
     },
     ...tableStyles,
     ...containerForHeader(theme.spacing(4)),
-  });
+  })
+);
 
 interface IServiceAccountsProps {
-  classes: any;
   history: any;
-  features: any;
 }
 
-const Account = ({ classes, history, features }: IServiceAccountsProps) => {
+const Account = ({ history }: IServiceAccountsProps) => {
   const dispatch = useDispatch();
+  const classes = useStyles();
+  const features = useSelector(selFeatures);
+
   const [records, setRecords] = useState<string[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [filter, setFilter] = useState<string>("");
@@ -302,10 +304,4 @@ const Account = ({ classes, history, features }: IServiceAccountsProps) => {
   );
 };
 
-const mapState = (state: AppState) => ({
-  features: state.console.session.features,
-});
-
-const connector = connect(mapState, null);
-
-export default withStyles(styles)(connector(Account));
+export default Account;

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx

@@ -15,21 +15,18 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { connect, useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Paper } from "@mui/material";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
-import { AppState } from "../../../../store";
 
 import { TabPanel } from "../../../shared/tabs";
 import { Policy } from "../../Policies/types";
-import { ISessionResponse } from "../../types";
 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 { BucketInfo } from "../types";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_PAGES,
@@ -43,17 +40,10 @@ import {
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import { tableStyles } from "../../Common/FormComponents/common/styleLibrary";
-import withStyles from "@mui/styles/withStyles";
 import { encodeURLString } from "../../../../common/utils";
 import { setErrorSnackMessage } from "../../../../systemSlice";
-
-const mapState = (state: AppState) => ({
-  session: state.console.session,
-  loadingBucket: state.buckets.bucketDetails.loadingBucket,
-  bucketInfo: state.buckets.bucketDetails.bucketInfo,
-});
-
-const connector = connect(mapState, null);
+import makeStyles from "@mui/styles/makeStyles";
+import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 
 function a11yProps(index: any) {
   return {
@@ -63,25 +53,20 @@ function a11yProps(index: any) {
 }
 
 interface IAccessDetailsProps {
-  session: ISessionResponse;
-
-  classes: any;
   match: any;
-  loadingBucket: boolean;
-  bucketInfo: BucketInfo | null;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     ...tableStyles,
-  });
-const AccessDetails = ({
-  match,
-
-  loadingBucket,
-  classes,
-}: IAccessDetailsProps) => {
+  })
+);
+const AccessDetails = ({ match }: IAccessDetailsProps) => {
   const dispatch = useDispatch();
+  const classes = useStyles();
+
+  const loadingBucket = useSelector(selBucketDetailsLoading);
+
   const [curTab, setCurTab] = useState<number>(0);
   const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
   const [bucketPolicy, setBucketPolicy] = useState<Policy[]>([]);
@@ -241,4 +226,4 @@ const AccessDetails = ({
   );
 };
 
-export default withStyles(styles)(connector(AccessDetails));
+export default AccessDetails;

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx

@@ -15,13 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { connect, useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { Paper } from "@mui/material";
-import { AppState } from "../../../../store";
-import { ISessionResponse } from "../../types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import api from "../../../../common/api";
@@ -35,7 +32,6 @@ import {
   searchField,
   tableStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { BucketInfo } from "../types";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import {
@@ -46,6 +42,8 @@ import {
 import withSuspense from "../../Common/Components/withSuspense";
 import RBIconButton from "./SummaryItems/RBIconButton";
 import { setErrorSnackMessage } from "../../../../systemSlice";
+import makeStyles from "@mui/styles/makeStyles";
+import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 
 const AddAccessRuleModal = withSuspense(
   React.lazy(() => import("./AddAccessRule"))
@@ -57,7 +55,7 @@ const EditAccessRuleModal = withSuspense(
   React.lazy(() => import("./EditAccessRule"))
 );
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     "@global": {
       ".rowLine:hover  .iconFileElm": {
@@ -72,31 +70,19 @@ const styles = (theme: Theme) =>
     ...searchField,
     ...objectBrowserCommon,
     ...containerForHeader(theme.spacing(4)),
-  });
-
-const mapState = (state: AppState) => ({
-  session: state.console.session,
-  loadingBucket: state.buckets.bucketDetails.loadingBucket,
-  bucketInfo: state.buckets.bucketDetails.bucketInfo,
-});
-
-const connector = connect(mapState, null);
+  })
+);
 
 interface IAccessRuleProps {
-  session: ISessionResponse;
-  classes: any;
   match: any;
-  loadingBucket: boolean;
-  bucketInfo: BucketInfo | null;
 }
 
-const AccessRule = ({
-  classes,
-  match,
-  loadingBucket,
-  bucketInfo,
-}: IAccessRuleProps) => {
+const AccessRule = ({ match }: IAccessRuleProps) => {
   const dispatch = useDispatch();
+  const classes = useStyles();
+
+  const loadingBucket = useSelector(selBucketDetailsLoading);
+
   const [loadingAccessRules, setLoadingAccessRules] = useState<boolean>(true);
   const [accessRules, setAccessRules] = useState([]);
   const [addAccessRuleOpen, setAddAccessRuleOpen] = useState<boolean>(false);
@@ -254,4 +240,4 @@ const AccessRule = ({
   );
 };
 
-export default withStyles(styles)(connector(AccessRule));
+export default AccessRule;

portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx

@@ -51,9 +51,8 @@ import {
 import { LifecycleConfigIcon } from "../../../../icons";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { BucketVersioning } from "../types";
-import { AppState } from "../../../../store";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import { setModalErrorSnackMessage } from "../../../../systemSlice";
+import { selDistSet, setModalErrorSnackMessage } from "../../../../systemSlice";
 
 interface IReplicationModal {
   open: boolean;
@@ -100,9 +99,7 @@ const AddLifecycleModal = ({
   bucketName,
 }: IReplicationModal) => {
   const dispatch = useDispatch();
-  const distributedSetup = useSelector(
-    (state: AppState) => state.system.distributedSetup
-  );
+  const distributedSetup = useSelector(selDistSet);
   const [loadingTiers, setLoadingTiers] = useState<boolean>(true);
   const [tiersList, setTiersList] = useState<ITiersDropDown[]>([]);
   const [addLoading, setAddLoading] = useState(false);

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx

@@ -30,8 +30,6 @@ import {
   pageContentStyles,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
-
-import { AppState } from "../../../../store";
 import { ErrorResponseHandler } from "../../../../common/types";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 
@@ -51,8 +49,17 @@ import {
 import withSuspense from "../../Common/Components/withSuspense";
 import RBIconButton from "./SummaryItems/RBIconButton";
 import { TrashIcon } from "../../../../icons";
-import { setErrorSnackMessage } from "../../../../systemSlice";
-import { setBucketDetailsLoad, setBucketInfo } from "../bucketsSlice";
+import {
+  selDistSet,
+  selSiteRep,
+  setErrorSnackMessage,
+} from "../../../../systemSlice";
+import {
+  selBucketDetailsInfo,
+  selBucketDetailsLoading,
+  setBucketDetailsLoad,
+  setBucketInfo,
+} from "./bucketDetailsSlice";
 
 const BucketsIcon = React.lazy(() => import("../../../../icons/BucketsIcon"));
 const FolderIcon = React.lazy(() => import("../../../../icons/FolderIcon"));
@@ -107,18 +114,10 @@ interface IBucketDetailsProps {
 const BucketDetails = ({ classes, match, history }: IBucketDetailsProps) => {
   const dispatch = useDispatch();
 
-  const distributedSetup = useSelector(
-    (state: AppState) => state.system.distributedSetup
-  );
-  const loadingBucket = useSelector(
-    (state: AppState) => state.buckets.bucketDetails.loadingBucket
-  );
-  const bucketInfo = useSelector(
-    (state: AppState) => state.buckets.bucketDetails.bucketInfo
-  );
-  const siteReplicationInfo = useSelector(
-    (state: AppState) => state.system.siteReplicationInfo
-  );
+  const distributedSetup = useSelector(selDistSet);
+  const loadingBucket = useSelector(selBucketDetailsLoading);
+  const bucketInfo = useSelector(selBucketDetailsInfo);
+  const siteReplicationInfo = useSelector(selSiteRep);
 
   const [iniLoad, setIniLoad] = useState<boolean>(false);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx

@@ -24,8 +24,6 @@ import Grid from "@mui/material/Grid";
 import AddIcon from "../../../../icons/AddIcon";
 import LambdaIcon from "../../../../icons/LambdaIcon";
 import { BucketEvent, BucketEventList } from "../types";
-
-import { AppState } from "../../../../store";
 import {
   actionsTray,
   searchField,
@@ -45,6 +43,7 @@ import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 import withSuspense from "../../Common/Components/withSuspense";
 import RBIconButton from "./SummaryItems/RBIconButton";
 import { setErrorSnackMessage } from "../../../../systemSlice";
+import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 
 const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
 const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
@@ -66,9 +65,7 @@ interface IBucketEventsProps {
 const BucketEventsPanel = ({ classes, match }: IBucketEventsProps) => {
   const dispatch = useDispatch();
 
-  const loadingBucket = useSelector(
-    (state: AppState) => state.buckets.bucketDetails.loadingBucket
-  );
+  const loadingBucket = useSelector(selBucketDetailsLoading);
 
   const [addEventScreenOpen, setAddEventScreenOpen] = useState<boolean>(false);
   const [loadingEvents, setLoadingEvents] = useState<boolean>(true);

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx

@@ -27,8 +27,6 @@ import {
   actionsTray,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
-
-import { AppState } from "../../../../store";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import EditLifecycleConfiguration from "./EditLifecycleConfiguration";
@@ -43,6 +41,7 @@ import {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 import RBIconButton from "./SummaryItems/RBIconButton";
 import DeleteBucketLifecycleRule from "./DeleteBucketLifecycleRule";
+import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -62,9 +61,7 @@ const BucketLifecyclePanel = ({
   classes,
   match,
 }: IBucketLifecyclePanelProps) => {
-  const loadingBucket = useSelector(
-    (state: AppState) => state.buckets.bucketDetails.loadingBucket
-  );
+  const loadingBucket = useSelector(selBucketDetailsLoading);
 
   const [loadingLifecycle, setLoadingLifecycle] = useState<boolean>(true);
   const [lifecycleRecords, setLifecycleRecords] = useState<LifeCycleItem[]>([]);