Fix all react warnings (#507)

portal-ui/src/ProtectedRoutes.tsx

@@ -63,7 +63,7 @@ const ProtectedRoute = ({
         }
       })
       .catch(() => setSessionLoading(false));
-  }, [saveSessionResponse]);
+  }, [saveSessionResponse, consoleOperatorMode, userLoggedIn]);
 
   // if we still trying to retrieve user session render nothing
   if (sessionLoading) {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
@@ -33,7 +33,6 @@ import {
   searchField,
 } from "../../../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../../../Common/PageHeader/PageHeader";
-import storage from "local-storage-fallback";
 import { isNullOrUndefined } from "util";
 import { Button, Input } from "@material-ui/core";
 import * as reactMoment from "react-moment";
@@ -166,6 +165,29 @@ const ListObjects = ({
     const bucketName = match.params["bucket"];
     const internalPaths = match.params[0];
 
+    const verifyIfIsFile = () => {
+      const bucketName = match.params["bucket"];
+      const internalPaths = match.params[0];
+
+      api
+        .invoke(
+          "GET",
+          `/api/v1/buckets/${bucketName}/objects?prefix=${internalPaths}`
+        )
+        .then((res: BucketObjectsList) => {
+          //It is a file since it has elements in the object, setting file flag and waiting for component mount
+          if (res.objects !== null) {
+            setLastAsFile();
+          } else {
+            // It is a folder, we remove loader
+            setLoading(false);
+          }
+        })
+        .catch((err: any) => {
+          setLoading(false);
+        });
+    };
+
     let extraPath = "";
     if (internalPaths) {
       extraPath = `?prefix=${internalPaths}/`;
@@ -186,7 +208,7 @@ const ListObjects = ({
       .catch((err: any) => {
         setLoading(false);
       });
-  }, [loading, match]);
+  }, [loading, match, setLastAsFile]);
 
   useEffect(() => {
     const url = get(match, "url", "/object-browser");
@@ -195,29 +217,6 @@ const ListObjects = ({
     }
   }, [match, routesList, setAllRoutes]);
 
-  const verifyIfIsFile = () => {
-    const bucketName = match.params["bucket"];
-    const internalPaths = match.params[0];
-
-    api
-      .invoke(
-        "GET",
-        `/api/v1/buckets/${bucketName}/objects?prefix=${internalPaths}`
-      )
-      .then((res: BucketObjectsList) => {
-        //It is a file since it has elements in the object, setting file flag and waiting for component mount
-        if (res.objects !== null) {
-          setLastAsFile();
-        } else {
-          // It is a folder, we remove loader
-          setLoading(false);
-        }
-      })
-      .catch((err: any) => {
-        setLoading(false);
-      });
-  };
-
   const closeDeleteModalAndRefresh = (refresh: boolean) => {
     setDeleteOpen(false);
 
@@ -245,7 +244,6 @@ const ListObjects = ({
     if (isNullOrUndefined(e) || isNullOrUndefined(e.target)) {
       return;
     }
-    const token: string = storage.getItem("token")!;
     e.preventDefault();
     let file = e.target.files[0];
     const fileName = file.name;

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx

@@ -194,7 +194,7 @@ const ObjectDetails = ({
           setLoadObjectData(false);
         });
     }
-  }, [loadObjectData]);
+  }, [loadObjectData, bucketName, pathInBucket]);
 
   let tagKeys: string[] = [];
 
@@ -341,6 +341,11 @@ const ObjectDetails = ({
       )}
       <Grid container>
         <Grid item xs={12} className={classes.container}>
+          {error !== "" && (
+            <Grid item xs={12}>
+              {error}
+            </Grid>
+          )}
           <Grid item xs={12} className={classes.obTitleSection}>
             <div>
               <BrowserBreadcrumbs />

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx

@@ -50,7 +50,7 @@ const SetLegalHoldModal = ({
   useEffect(() => {
     const status = get(actualInfo, "legal_hold_status", "OFF");
     setLegalHoldEnabled(status === "ON");
-  }, []);
+  }, [actualInfo]);
 
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx

@@ -77,7 +77,7 @@ const SetRetention = ({
       setType(objectInfo.retention_mode.toLowerCase());
       setAlreadyConfigured(true);
     }
-  }, []);
+  }, [objectInfo]);
 
   const dateElement = useRef<IRefObject>(null);
 

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx

@@ -42,13 +42,13 @@ const ShareFile = ({
   bucketName,
   dataObject,
 }: IShareFileProps) => {
-  const [shareURL, setShareURL] = useState("");
+  const [shareURL, setShareURL] = useState<string>("");
-  const [isLoadingFile, setIsLoadingFile] = useState(false);
+  const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
-  const [error, setError] = useState("");
+  const [error, setError] = useState<string>("");
-  const [selectedDate, setSelectedDate] = useState("");
+  const [selectedDate, setSelectedDate] = useState<string>("");
-  const [dateValid, setDateValid] = useState(true);
+  const [dateValid, setDateValid] = useState<boolean>(true);
-  const [openSnack, setOpenSnack] = useState(false);
+  const [openSnack, setOpenSnack] = useState<boolean>(false);
-  const [snackBarMessage, setSnackbarMessage] = useState("");
+  const [snackBarMessage, setSnackbarMessage] = useState<string>("");
 
   const showSnackBarMessage = (text: string) => {
     setSnackbarMessage(text);
@@ -66,13 +66,13 @@ const ShareFile = ({
       setSelectedDate(newDate);
       return;
     }
-    setShareURL("");
     setSelectedDate("");
   };
 
   useEffect(() => {
     if (dateValid) {
       setIsLoadingFile(true);
+      setShareURL("");
 
       const slDate = new Date(`${selectedDate}T23:59:59`);
       const currDate = new Date();
@@ -116,9 +116,7 @@ const ShareFile = ({
         });
       return;
     }
-
+  }, [dataObject, selectedDate, bucketName, dateValid, setShareURL]);
-    setShareURL("");
-  }, [dataObject, selectedDate]);
 
   const snackBarAction = (
     <Button

portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx

@@ -72,7 +72,7 @@ const SetAccessPolicy = ({
 
   useEffect(() => {
     setAccessPolicy(actualPolicy);
-  }, []);
+  }, [setAccessPolicy, actualPolicy]);
 
   return (
     <ModalWrapper

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

@@ -229,7 +229,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
   const [isVersioned, setIsVersioned] = useState<boolean>(false);
   const [encryptionEnabled, setEncryptionEnabled] = useState<boolean>(false);
 
-  const fetchEvents = () => {
+  const fetchEvents = useCallback(() => {
     setLoadingBucket(true);
     const bucketName = match.params["bucketName"];
     api
@@ -263,7 +263,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       .catch((err: any) => {
         setError(err);
       });
-  };
+  }, [match]);
 
   const fetchBucketsSize = useCallback(() => {
     const bucketName = match.params["bucketName"];
@@ -287,7 +287,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
         setLoadingSize(false);
         setErrorSize(err);
       });
-  }, []);
+  }, [match]);
 
   const loadInfo = useCallback(() => {
     const bucketName = match.params["bucketName"];
@@ -305,7 +305,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       });
   }, [match]);
 
-  const fetchBucketEncryptionInfo = () => {
+  const fetchBucketEncryptionInfo = useCallback(() => {
     const bucketName = match.params["bucketName"];
     api
       .invoke("GET", `/api/v1/buckets/${bucketName}/encryption/info`)
@@ -317,7 +317,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       .catch((err) => {
         console.log(err);
       });
-  };
+  }, [match]);
 
   const closeAddModalAndRefresh = () => {
     setAccessPolicyScreenOpen(false);
@@ -336,7 +336,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
     fetchEvents();
     fetchBucketsSize();
     fetchBucketEncryptionInfo();
-  }, [loadInfo]);
+  }, [loadInfo, fetchEvents, fetchBucketsSize, fetchBucketEncryptionInfo]);
 
   const bucketName = match.params["bucketName"];
 
@@ -439,6 +439,16 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
             {error}
           </Grid>
         )}
+        {errBucket !== "" && (
+          <Grid item xs={12}>
+            {errBucket}
+          </Grid>
+        )}
+        {errorSize !== "" && (
+          <Grid item xs={12}>
+            {errorSize}
+          </Grid>
+        )}
         <Grid item xs={12} className={classes.container}>
           <Grid item xs={12}>
             <div className={classes.headerContainer}>

portal-ui/src/screens/Console/Common/FormComponents/DateSelector/DateSelector.tsx

@@ -113,7 +113,7 @@ const DateSelector = forwardRef(
     useEffect(() => {
       const [isValid, dateString] = validDate(year, month, day);
       onDateChange(dateString, isValid);
-    }, [month, day, year]);
+    }, [month, day, year, onDateChange]);
 
     const resetDate = () => {
       setMonth("");

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx

@@ -69,11 +69,9 @@ const initialConfiguration = {
 };
 
 const ConfigurationsList = ({ classes }: IListConfiguration) => {
-  const [editScreenOpen, setEditScreenOpen] = useState(false);
   const [selectedConfiguration, setSelectedConfiguration] = useState(
     initialConfiguration
   );
-  const [filter, setFilter] = useState("");
   const [currentConfiguration, setCurrentConfiguration] = useState<number>(0);
 
   const tableActions = [
@@ -92,13 +90,6 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
     },
   ];
 
-  const filteredRecords: IConfigurationElement[] = configurationElements.filter(
-    (elementItem) =>
-      elementItem.configuration_id
-        .toLocaleLowerCase()
-        .includes(filter.toLocaleLowerCase())
-  );
-
   const backToInitialConfig = () => {
     setCurrentConfiguration(0);
     setSelectedConfiguration(initialConfiguration);
@@ -125,7 +116,7 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
                         },
                       ]}
                       isLoading={false}
-                      records={filteredRecords}
+                      records={configurationElements}
                       entityName="Configurations"
                       idField="configuration_id"
                       customPaperHeight={classes.customConfigurationPage}

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

@@ -39,7 +39,6 @@ import api from "../../common/api";
 import Account from "./Account/Account";
 import Users from "./Users/Users";
 import Groups from "./Groups/Groups";
-import ListNotificationEndpoints from "./Configurations/NotificationEndpoints/ListNotificationEndpoints";
 import ConfigurationMain from "./Configurations/ConfigurationMain";
 import WebhookPanel from "./Configurations/ConfigurationPanels/WebhookPanel";
 import ListTenants from "./Tenants/ListTenants/ListTenants";

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

@@ -40,12 +40,11 @@ import {
   DashboardIcon,
   GroupsIcon,
   IAMPoliciesIcon,
-  LambdaNotificationsIcon,
   MirroringIcon,
   ServiceAccountsIcon,
+  TraceIcon,
   UsersIcon,
   WarpIcon,
-  TraceIcon,
 } from "../../../icons";
 import { clearSession } from "../../../common/utils";
 import LicenseIcon from "../../../icons/LicenseIcon";

portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx

@@ -122,7 +122,7 @@ const BrowseBuckets = ({
 
   useEffect(() => {
     resetRoutesList(true);
-  }, [match]);
+  }, [match, resetRoutesList]);
 
   useEffect(() => {
     if (loading) {

portal-ui/src/screens/Console/Policies/AddPolicy.tsx

@@ -100,7 +100,7 @@ const AddPolicy = ({
         policyEdit ? JSON.stringify(JSON.parse(policyEdit.policy), null, 4) : ""
       );
     }
-  }, []);
+  }, [policyEdit]);
 
   const resetForm = () => {
     setPolicyName("");

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import {
@@ -22,7 +22,7 @@ import {
   modalBasic,
 } from "../../Common/FormComponents/common/styleLibrary";
 import Grid from "@material-ui/core/Grid";
-import { Button, IconButton } from "@material-ui/core";
+import { Button } from "@material-ui/core";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import { CreateIcon } from "../../../../icons";
@@ -33,7 +33,7 @@ import AddPoolModal from "./AddPoolModal";
 import AddBucket from "../../Buckets/ListBuckets/AddBucket";
 import ReplicationSetup from "./ReplicationSetup";
 import api from "../../../../common/api";
-import { ITenant, IPool } from "../ListTenants/types";
+import { IPool, ITenant } from "../ListTenants/types";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
 import UpdateTenantModal from "./UpdateTenantModal";

portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, Fragment, useEffect } from "react";
+import React, { useState, Fragment, useEffect, useCallback } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { Button, Grid } from "@material-ui/core";
@@ -33,7 +33,6 @@ const UpdateTenantModal = ({
   idTenant,
   classes,
 }: IUpdateTenantModal) => {
-  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isSending, setIsSending] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [minioImage, setMinioImage] = useState<string>("");
@@ -51,13 +50,29 @@ const UpdateTenantModal = ({
   const [validMinioImage, setValidMinioImage] = useState<boolean>(true);
   const [validConsoleImage, setValidConsoleImage] = useState<boolean>(true);
 
+  const validateImage = useCallback(
+    (fieldToCheck: string) => {
+      const pattern = new RegExp("^$|^((.*?)/(.*?):(.+))$");
+
+      switch (fieldToCheck) {
+        case "consoleImage":
+          setValidConsoleImage(pattern.test(consoleImage));
+          break;
+        case "minioImage":
+          setValidMinioImage(pattern.test(minioImage));
+          break;
+      }
+    },
+    [consoleImage, minioImage]
+  );
+
   useEffect(() => {
     validateImage("minioImage");
-  }, [minioImage]);
+  }, [minioImage, validateImage]);
 
   useEffect(() => {
     validateImage("consoleImage");
-  }, [consoleImage]);
+  }, [consoleImage, validateImage]);
 
   const closeAction = () => {
     closeModalAndRefresh(false);
@@ -111,19 +126,6 @@ const UpdateTenantModal = ({
       });
   };
 
-  const validateImage = (fieldToCheck: string) => {
-    const pattern = new RegExp("^$|^((.*?)/(.*?):(.+))$");
-
-    switch (fieldToCheck) {
-      case "consoleImage":
-        setValidConsoleImage(pattern.test(consoleImage));
-        break;
-      case "minioImage":
-        setValidMinioImage(pattern.test(minioImage));
-        break;
-    }
-  };
-
   return (
     <ModalWrapper
       title={"Update MinIO Version"}

portal-ui/src/screens/Console/Users/AddUser.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
@@ -66,6 +66,27 @@ const AddUserContent = ({
   const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
   const [currentGroups, setCurrentGroups] = useState<string[]>([]);
 
+  const getUserInformation = useCallback(() => {
+    if (!selectedUser) {
+      return null;
+    }
+
+    api
+      .invoke("GET", `/api/v1/users/${selectedUser.accessKey}`)
+      .then((res) => {
+        setAddLoading(false);
+        setAddError("");
+        setAccessKey(res.accessKey);
+        setSelectedGroups(res.memberOf || []);
+        setCurrentGroups(res.memberOf || []);
+        setEnabled(res.status === "enabled");
+      })
+      .catch((err) => {
+        setAddLoading(false);
+        setAddError(err);
+      });
+  }, [selectedUser]);
+
   useEffect(() => {
     if (selectedUser == null) {
       setAccessKey("");
@@ -74,7 +95,7 @@ const AddUserContent = ({
     } else {
       getUserInformation();
     }
-  }, []);
+  }, [selectedUser, getUserInformation]);
 
   const saveRecord = (event: React.FormEvent) => {
     event.preventDefault();
@@ -119,27 +140,6 @@ const AddUserContent = ({
     }
   };
 
-  const getUserInformation = () => {
-    if (!selectedUser) {
-      return null;
-    }
-
-    api
-      .invoke("GET", `/api/v1/users/${selectedUser.accessKey}`)
-      .then((res) => {
-        setAddLoading(false);
-        setAddError("");
-        setAccessKey(res.accessKey);
-        setSelectedGroups(res.memberOf || []);
-        setCurrentGroups(res.memberOf || []);
-        setEnabled(res.status === "enabled");
-      })
-      .catch((err) => {
-        setAddLoading(false);
-        setAddError(err);
-      });
-  };
-
   const resetForm = () => {
     if (selectedUser !== null) {
       setSelectedGroups([]);