Removed warnings on console (#345)

For Operator modules this will be removed after upgrading component to use redux/formik

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/Routes.tsx

@@ -15,17 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import {
-  Redirect,
-  Route,
-  Router,
-  Switch,
-  BrowserRouter,
-} from "react-router-dom";
+import { Redirect, Route, Router, Switch } from "react-router-dom";
 import history from "./history";
 import Login from "./screens/LoginPage/LoginPage";
 import Console from "./screens/Console/Console";
-import NotFoundPage from "./screens/NotFoundPage";
 import storage from "local-storage-fallback";
 import { connect } from "react-redux";
 import { AppState } from "./store";

portal-ui/src/common/utils.ts

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import storage from "local-storage-fallback";
-import { ICapacity, IStorageType, IZoneModel } from "./types";
+import { ICapacity, IZoneModel } from "./types";
 
 const minStReq = 1073741824; // Minimal Space required for MinIO
 const minMemReq = 2147483648; // Minimal Memory required for MinIO in bytes

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx

@@ -23,7 +23,6 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import api from "../../../../common/api";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import { factorForDropdown, getBytes } from "../../../../common/utils";
 import { AppState } from "../../../../store";
@@ -143,7 +142,7 @@ const AddBucket = ({
 
   useEffect(() => {
     addBucketName(value);
-  }, [value]);
+  }, [value, addBucketName]);
 
   const resetForm = () => {
     setBName("");

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

@@ -18,7 +18,6 @@ import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import { Button } from "@material-ui/core";
-import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
@@ -93,7 +92,6 @@ const ListBuckets = ({
   const [totalRecords, setTotalRecords] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
-  const [deleteError, setDeleteError] = useState<string>("");
   const [page, setPage] = useState<number>(0);
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
@@ -219,6 +217,7 @@ const ListBuckets = ({
       )}
       <PageHeader label={"Buckets"} />
       <Grid container>
+        {error !== "" && <span className={classes.error}>{error}</span>}
         <Grid item xs={12} className={classes.container}>
           <Grid item xs={12} className={classes.actionsTray}>
             <TextField

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

@@ -174,17 +174,17 @@ class ListObjects extends React.Component<
     xhr.withCredentials = false;
     xhr.onload = function (event) {
       // TODO: handle status
-      if (xhr.status == 401 || xhr.status == 403) {
+      if (xhr.status === 401 || xhr.status === 403) {
         listObjects.showSnackBarMessage(
           "An error occurred while uploading the file."
         );
       }
-      if (xhr.status == 500) {
+      if (xhr.status === 500) {
         listObjects.showSnackBarMessage(
           "An error occurred while uploading the file."
         );
       }
-      if (xhr.status == 200) {
+      if (xhr.status === 200) {
         listObjects.showSnackBarMessage("Object uploaded successfully.");
         listObjects.fetchRecords();
       }
@@ -228,7 +228,7 @@ class ListObjects extends React.Component<
     xhr.responseType = "blob";
 
     xhr.onload = function (e) {
-      if (this.status == 200) {
+      if (this.status === 200) {
         var blob = new Blob([this.response], {
           type: "octet/stream",
         });

portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.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, { useState } from "react";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
@@ -22,7 +22,6 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import { Button, LinearProgress } from "@material-ui/core";
 import api from "../../../../common/api";
 import { IRemoteBucket } from "../types";

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

@@ -94,7 +94,7 @@ class SetAccessPolicy extends React.Component<
   }
 
   render() {
-    const { classes, open, actualPolicy } = this.props;
+    const { classes, open } = this.props;
     const { addLoading, addError, accessPolicy } = this.state;
     return (
       <ModalWrapper

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

@@ -34,8 +34,7 @@ import {
   BucketReplicationRuleDeleteMarker,
   BucketVersioning,
 } from "../types";
-import { Box, Button } from "@material-ui/core";
-import Typography from "@material-ui/core/Typography";
+import { Button } from "@material-ui/core";
 import SetAccessPolicy from "./SetAccessPolicy";
 import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
 import { CreateIcon } from "../../../../icons";
@@ -363,7 +362,6 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
       selectedEvent,
       bucketSize,
       loadingSize,
-      replicationSet,
       openSetReplication,
       isVersioned,
       replicationRules,

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

@@ -105,8 +105,8 @@ const CSVMultiSelector = ({
       firstUpdate.current = false;
       return;
     }
-
     debouncedOnChange();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentElements]);
 
   // If the last input is not empty, we add a new one

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

@@ -14,20 +14,8 @@
 // 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 from "react";
-import {
-  Grid,
-  InputLabel,
-  TextField,
-  TextFieldProps,
-  Tooltip,
-} from "@material-ui/core";
-import { OutlinedInputProps } from "@material-ui/core/OutlinedInput";
-import {
-  createStyles,
-  makeStyles,
-  Theme,
-  withStyles,
-} from "@material-ui/core/styles";
+import { Grid, InputLabel, TextField, Tooltip } from "@material-ui/core";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
 import HelpIcon from "@material-ui/icons/Help";
 

portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.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 from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { InputLabel, Switch, Tooltip } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";

portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx

@@ -51,6 +51,7 @@ const WizardPage = ({ classes, page, pageChange }: IWizardPage) => {
         break;
       case "to":
         pageChange(btn.toPage || 0);
+        break;
       default:
     }
 

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

@@ -16,12 +16,7 @@
 import React from "react";
 import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
 import IconButton from "@material-ui/core/IconButton";
-import {
-  createStyles,
-  makeStyles,
-  Theme,
-  withStyles,
-} from "@material-ui/core/styles";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 
 interface IModalProps {
   classes: any;

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

@@ -20,7 +20,6 @@ import Grid from "@material-ui/core/Grid";
 import { IElementValue, KVField } from "./types";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import RadioGroupSelector from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import CSVMultiSelector from "../Common/FormComponents/CSVMultiSelector/CSVMultiSelector";
 import CommentBoxWrapper from "../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
@@ -79,6 +78,7 @@ const ConfTargetGeneric = ({
     });
 
     setValueHolder(values);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fields, defaultVals]);
 
   useEffect(() => {

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

@@ -18,7 +18,6 @@ import React, { useState } from "react";
 import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { TextField } from "@material-ui/core";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
@@ -63,7 +62,6 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
     configuration_id: "",
     configuration_label: "",
   });
-  const [error, setError] = useState("");
   const [filter, setFilter] = useState("");
 
   const tableActions = [
@@ -103,7 +101,6 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
       <PageHeader label="Configurations List" />
       <Grid container>
         <Grid item xs={12} className={classes.container}>
-          {error !== "" && <Grid container>{error}</Grid>}
           <Grid item xs={12} className={classes.actionsTray}>
             <TextField
               placeholder="Filter"

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

@@ -94,10 +94,9 @@ const panels = {
 
 const WebhookPanel = ({ match, classes }: IWebhookPanel) => {
   const [addWebhookOpen, setAddWebhookOpen] = useState<boolean>(false);
-  const [error, setError] = useState<string>("");
   const [filter, setFilter] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [webhooks, setWebhooks] = useState<IWebhook[]>([]);
+  // const [webhooks, setWebhooks] = useState<IWebhook[]>([]);
 
   const pathIn = get(match, "path", "");
   const panelToDisplay = pathIn.split("/");
@@ -107,6 +106,8 @@ const WebhookPanel = ({ match, classes }: IWebhookPanel) => {
     return null;
   }
 
+  const webhooks: IWebhook[] = [];
+
   const filteredRecords: IWebhook[] = webhooks.filter((elementItem) =>
     elementItem.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())
   );
@@ -137,7 +138,6 @@ const WebhookPanel = ({ match, classes }: IWebhookPanel) => {
         <Grid item xs={12}>
           <br />
         </Grid>
-        {error !== "" && <Grid container>{error}</Grid>}
         <Grid item xs={12} className={classes.actionsTray}>
           <TextField
             placeholder="Filter"

portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx

@@ -16,7 +16,6 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { FormControlLabel, Switch } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";

portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx

@@ -16,7 +16,6 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { FormControlLabel, Switch } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
@@ -201,6 +200,8 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
     setUser(kv.get("user") ? kv.get("user") + "" : "");
     setPassword(kv.get("password") ? kv.get("password") + "" : "");
     setSslMode(kv.get("sslmode") ? kv.get("sslmode") + "" : " ");
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [useConnectionString]);
 
   return (

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

@@ -16,27 +16,12 @@
 
 import React, { useEffect } from "react";
 import clsx from "clsx";
-import {
-  createStyles,
-  StyledProps,
-  Theme,
-  withStyles,
-} from "@material-ui/core/styles";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import Drawer from "@material-ui/core/Drawer";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
 import Container from "@material-ui/core/Container";
-import Link from "@material-ui/core/Link";
 import history from "../../history";
-import {
-  Redirect,
-  Route,
-  RouteComponentProps,
-  Router,
-  Switch,
-  withRouter,
-} from "react-router-dom";
+import { Redirect, Route, Router, Switch } from "react-router-dom";
 import { connect } from "react-redux";
 import { AppState } from "../../store";
 import {
@@ -44,7 +29,6 @@ import {
   serverNeedsRestart,
   setMenuOpen,
 } from "../../actions";
-import { ThemedComponentProps } from "@material-ui/core/styles/withTheme";
 import Buckets from "./Buckets/Buckets";
 import Policies from "./Policies/Policies";
 import Permissions from "./Permissions/Permissions";
@@ -319,7 +303,7 @@ const Console = ({
 
   return (
     <React.Fragment>
-      {session.status == "ok" ? (
+      {session.status === "ok" ? (
         <div className={classes.root}>
           <CssBaseline />
           <Drawer

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

@@ -20,9 +20,6 @@ import clsx from "clsx";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
-import NetworkCheckIcon from "@material-ui/icons/NetworkCheck";
-import PieChartIcon from "@material-ui/icons/PieChart";
-import ViewHeadlineIcon from "@material-ui/icons/ViewHeadline";
 import { Usage } from "./types";
 import api from "../../../common/api";
 import { niceBytes } from "../../../common/utils";

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

@@ -27,7 +27,6 @@ import api from "../../../common/api";
 import UsersSelectors from "./UsersSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import RadioGroupSelector from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 
 interface IGroupProps {

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

@@ -17,7 +17,6 @@
 import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";

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

@@ -20,7 +20,6 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { LinearProgress } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
-import Title from "../../../common/Title";
 import { UsersList } from "../Users/types";
 import { usersSort } from "../../../utils/sortFunctions";
 import api from "../../../common/api";
@@ -28,10 +27,7 @@ import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import {
-  actionsTray,
-  predefinedList,
-} from "../Common/FormComponents/common/styleLibrary";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 
 interface IGroupsProps {
   classes: any;

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

@@ -1,12 +1,6 @@
 import { HorizontalBar } from "react-chartjs-2";
 import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Grid,
-  Typography,
-  TextField,
-  Checkbox,
-} from "@material-ui/core";
+import { Button, Grid, TextField, Checkbox } from "@material-ui/core";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { wsProtocol } from "../../../utils/wsUtils";
@@ -171,7 +165,7 @@ const Heal = ({ classes }: IHeal) => {
         };
       }
     }
-  }, [start]);
+  }, [start, bucketName, forceStart, forceStop, prefix, recursive]);
 
   let data = {
     labels: ["Green", "Yellow", "Red", "Grey"],

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

@@ -27,12 +27,11 @@ import {
   containerForHeader,
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
-import { Button, Grid } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
-import { CreateIcon } from "../../../icons";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -122,20 +121,7 @@ const Logs = ({
         console.log("closing websockets");
       };
     }
-  }, [logMessageReceived]);
-
-  // replaces a character of a string with other at a given index
-  const replaceWeirdChar = (
-    origString: string,
-    replaceChar: string,
-    index: number
-  ) => {
-    let firstPart = origString.substr(0, index);
-    let lastPart = origString.substr(index + 1);
-
-    let newString = firstPart + replaceChar + lastPart;
-    return newString;
-  };
+  }, [logMessageReceived, logResetMessages]);
 
   const renderError = (logElement: LogMessage) => {
     let errorElems = [];

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

@@ -19,16 +19,11 @@ import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
-import WebAssetIcon from "@material-ui/icons/WebAsset";
-import HealingIcon from "@material-ui/icons/Healing";
 import DescriptionIcon from "@material-ui/icons/Description";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
 import Collapse from "@material-ui/core/Collapse";
 import ListItemText from "@material-ui/core/ListItemText";
 import List from "@material-ui/core/List";
-import { Divider, Typography, withStyles } from "@material-ui/core";
-import { ExitToApp } from "@material-ui/icons";
-import storage from "local-storage-fallback";
+import { Divider, withStyles } from "@material-ui/core";
 import { createStyles, Theme } from "@material-ui/core/styles";
 import history from "../../../history";
 import logo from "../../../icons/minio_console_logo.svg";
@@ -362,7 +357,7 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
             (menuItem: any) => menuItem.type !== "title"
           );
 
-          if (countableElements.length == 0) {
+          if (countableElements.length === 0) {
             return null;
           }
 
@@ -429,6 +424,7 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
                       );
                     }
                     default:
+                      return null;
                   }
                 })}
                 <Divider />

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

@@ -62,6 +62,7 @@ const styles = (theme: Theme) =>
       height: "80px",
     },
     lambdaNotif: {
+      backgroundColor: "#fff",
       border: "#393939 1px solid",
       borderRadius: 5,
       width: 101,
@@ -289,7 +290,7 @@ const AddNotificationEndpoint = ({
             <div className={classes.iconContainer}>
               {withLogos.map((item) => {
                 return (
-                  <a
+                  <button
                     key={`icon-${item.targetTitle}`}
                     className={classes.lambdaNotif}
                     onClick={() => {
@@ -301,7 +302,7 @@ const AddNotificationEndpoint = ({
                       className={classes.logoButton}
                       alt={item.targetTitle}
                     />
-                  </a>
+                  </button>
                 );
               })}
             </div>

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

@@ -20,7 +20,6 @@ import { TextField } from "@material-ui/core";
 import { red } from "@material-ui/core/colors";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
 import { MinTablePaginationActions } from "../../../common/MinTablePaginationActions";

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

@@ -30,7 +30,6 @@ import { MinTablePaginationActions } from "../../../common/MinTablePaginationAct
 import { Bucket, BucketList } from "../Buckets/types";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import api from "../../../common/api";
-import history from "../../../history";
 import {
   actionsTray,
   searchField,
@@ -119,7 +118,7 @@ const BrowseBuckets = ({ classes }: IBrowseBucketsProps) => {
           setError(err);
         });
     }
-  }, [loading]);
+  }, [loading, offset, rowsPerPage, page]);
 
   const closeAddModalAndRefresh = () => {
     setAddScreenOpen(false);

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

@@ -17,7 +17,7 @@
 import React from "react";
 import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { Grid, Typography } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 import BrowseBuckets from "./BrowseBuckets";
 import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";

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

@@ -19,7 +19,6 @@ import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
@@ -78,7 +77,6 @@ interface IPoliciesProps {
 
 const Policies = ({ classes }: IPoliciesProps) => {
   const [records, setRecords] = useState<Policy[]>([]);
-  const [totalRecords, setTotalRecords] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [addScreenOpen, setAddScreenOpen] = useState<boolean>(false);
@@ -100,7 +98,6 @@ const Policies = ({ classes }: IPoliciesProps) => {
         .invoke("GET", `/api/v1/policies?offset=${offset}&limit=${rowsPerPage}`)
         .then((res: PolicyList) => {
           const policies = get(res, "policies", []);
-          const total = get(res, "total", 0);
 
           policies.sort((pa, pb) => {
             if (pa.name > pb.name) {
@@ -116,7 +113,6 @@ const Policies = ({ classes }: IPoliciesProps) => {
 
           setLoading(false);
           setRecords(policies);
-          setTotalRecords(total);
           setError("");
 
           // if we get 0 results, and page > 0 , go down 1 page
@@ -137,15 +133,7 @@ const Policies = ({ classes }: IPoliciesProps) => {
           setError(err);
         });
     }
-  }, [
-    loading,
-    setLoading,
-    setRecords,
-    setTotalRecords,
-    setError,
-    setPage,
-    setError,
-  ]);
+  }, [loading, setLoading, setRecords, setError, setPage, page, rowsPerPage]);
 
   const fetchRecords = () => {
     setLoading(true);
@@ -256,6 +244,11 @@ const Policies = ({ classes }: IPoliciesProps) => {
           <Grid item xs={12}>
             <br />
           </Grid>
+          {error && (
+            <Grid item xs={12}>
+              {error}
+            </Grid>
+          )}
           <Grid item xs={12}>
             <TableWrapper
               itemActions={tableActions}

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

@@ -14,20 +14,10 @@
 // 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, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import {
-  Button,
-  LinearProgress,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from "@material-ui/core";
+import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import {
   modalBasic,
@@ -35,10 +25,7 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import { User } from "../Users/types";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import { Policy, PolicyList } from "./types";
 import api from "../../../common/api";
-import { policySort } from "../../../utils/sortFunctions";
-import { Group } from "../Groups/types";
 import PolicySelectors from "./PolicySelectors";
 
 interface ISetPolicyProps {
@@ -132,7 +119,8 @@ const SetPolicy = ({
       setActualPolicy(userPolicy);
       setSelectedPolicy(userPolicy);
     }
-  }, [open]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, selectedGroup, selectedUser]);
 
   const userName = get(selectedUser, "accessKey", "");
 
@@ -144,6 +132,7 @@ const SetPolicy = ({
       modalOpen={open}
       title="Set Policies"
     >
+      {error !== "" && <span className={classes.error}>{error}</span>}
       <Grid item xs={12}>
         <Grid item xs={12} className={classes.predefinedTitle}>
           Selected {selectedGroup !== null ? "Group" : "User"}

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

@@ -17,7 +17,7 @@
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
-import { Button, LinearProgress, Tooltip } from "@material-ui/core";
+import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";

portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx

@@ -265,6 +265,8 @@ const AddTenant = ({
   /*Calculate Allocation*/
   useEffect(() => {
     validateClusterSize();
+    setECParityChoices([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodes, volumeSize, sizeFactor]);
 
   const validateClusterSize = () => {
@@ -660,6 +662,7 @@ const AddTenant = ({
     setEncryptionValid(Object.keys(commonVal).length === 0);
 
     setValidationErrors(commonVal);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     enableEncryption,
     encryptionType,
@@ -920,6 +923,7 @@ const AddTenant = ({
           setAddError(err);
         });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [addSending]);
 
   const storeCertInObject = (certName: string, certValue: string) => {

portal-ui/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx

@@ -69,6 +69,7 @@ const DeleteTenant = ({
           setDeleteError(err);
         });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [deleteLoading]);
 
   const removeRecord = () => {

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

@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
@@ -93,7 +92,6 @@ const ListTenants = ({ classes }: ITenantsList) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [filterTenants, setFilterTenants] = useState<string>("");
   const [records, setRecords] = useState<any[]>([]);
-  const [offset, setOffset] = useState<number>(0);
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [page, setPage] = useState<number>(0);
   const [error, setError] = useState<string>("");
@@ -154,17 +152,15 @@ const ListTenants = ({ classes }: ITenantsList) => {
     setRowsPerPage(rPP);
   };
 
-  const openLink = (link: string) => {
-    window.open(link, "_blank");
-  };
-
   const tableActions = [
     { type: "view", onClick: redirectToTenantDetails },
     { type: "delete", onClick: confirmDeleteTenant },
   ];
 
+  const globalOffset = 0;
+
   const filteredRecords = records
-    .slice(offset, offset + rowsPerPage)
+    .slice(globalOffset, globalOffset + rowsPerPage)
     .filter((b: any) => {
       if (filterTenants === "") {
         return true;
@@ -291,6 +287,11 @@ const ListTenants = ({ classes }: ITenantsList) => {
               Create Tenant
             </Button>
           </Grid>
+          {error !== "" && (
+            <Grid item xs={12}>
+              {error}
+            </Grid>
+          )}
           <Grid item xs={12}>
             <br />
           </Grid>

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

@@ -3,13 +3,8 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import Grid from "@material-ui/core/Grid";
-import {
-  factorForDropdown,
-  getTotalSize,
-  niceBytes,
-} from "../../../../common/utils";
+import { niceBytes } from "../../../../common/utils";
 import { Button, LinearProgress } from "@material-ui/core";
 import api from "../../../../common/api";
 import { IAddZoneRequest, ITenant } from "../ListTenants/types";

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

@@ -31,7 +31,6 @@ import AddZoneModal from "./AddZoneModal";
 import AddBucket from "../../Buckets/ListBuckets/AddBucket";
 import ReplicationSetup from "./ReplicationSetup";
 import api from "../../../../common/api";
-import { BucketInfo } from "../../Buckets/types";
 import { ITenant, IZone } from "../ListTenants/types";
 
 interface ITenantDetailsProps {
@@ -94,8 +93,6 @@ const styles = (theme: Theme) =>
 const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const [capacity, setCapacity] = useState<number>(0);
-  const [externalIDP, setExternalIDP] = useState<boolean>(false);
-  const [externalKMS, setExternalKMS] = useState<boolean>(false);
   const [zoneCount, setZoneCount] = useState<number>(0);
   const [zones, setZones] = useState<IZone[]>([]);
   const [instances, setInstances] = useState<number>(0);
@@ -103,7 +100,6 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
   const [addZoneOpen, setAddZone] = useState<boolean>(false);
   const [addBucketOpen, setAddBucketOpen] = useState<boolean>(false);
   const [addReplicationOpen, setAddReplicationOpen] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [tenant, setTenant] = useState<ITenant | null>(null);
 
@@ -131,8 +127,6 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
     const tenantName = match.params["tenantName"];
     const tenantNamespace = match.params["tenantNamespace"];
 
-    setLoading(true);
-
     api
       .invoke(
         "GET",
@@ -140,7 +134,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
       )
       .then((res: ITenant) => {
         const resZones = !res.zones ? [] : res.zones;
-        const total = res.volume_count * res.volume_size;
+
         let totalInstances = 0;
         let totalVolumes = 0;
         let count = 1;
@@ -165,16 +159,15 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
 
         setTenant(res);
         setError("");
-        setLoading(false);
       })
       .catch((err) => {
         setError(err);
-        setLoading(false);
       });
   };
 
   useEffect(() => {
     loadInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -204,6 +197,11 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
             {`Tenant > ${match.params["tenantName"]}`}
           </Typography>
         </Grid>
+        {error !== "" && (
+          <Grid item xs={12}>
+            {error}
+          </Grid>
+        )}
         <Grid item xs={12}>
           <br />
         </Grid>

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

@@ -95,7 +95,7 @@ const Trace = ({
         console.log("closing websockets");
       };
     }
-  }, [traceMessageReceived]);
+  }, [traceMessageReceived, traceResetMessages]);
 
   return (
     <React.Fragment>

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

@@ -24,7 +24,6 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import api from "../../../common/api";
 import GroupsSelectors from "./GroupsSelectors";
-import Title from "../../../common/Title";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
 interface IAddToGroup {

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

@@ -28,7 +28,6 @@ import api from "../../../common/api";
 import GroupsSelectors from "./GroupsSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import RadioGroupSelector from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 
 const styles = (theme: Theme) =>

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

@@ -19,7 +19,6 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { LinearProgress } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
-import Title from "../../../common/Title";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
 import TextField from "@material-ui/core/TextField";

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

@@ -17,13 +17,7 @@
 import React from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../common/api";
-import {
-  Button,
-  Grid,
-  Typography,
-  TextField,
-  InputAdornment,
-} from "@material-ui/core";
+import { Button, Grid, TextField, InputAdornment } from "@material-ui/core";
 import SearchIcon from "@material-ui/icons/Search";
 import GroupIcon from "@material-ui/icons/Group";
 import { User, UsersList } from "./types";
@@ -34,7 +28,6 @@ import AddUser from "./AddUser";
 import DeleteUser from "./DeleteUser";
 import AddToGroup from "./AddToGroup";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import DescriptionIcon from "@material-ui/icons/Description";
 import SetPolicy from "../Policies/SetPolicy";
 import {
   actionsTray,
@@ -183,7 +176,6 @@ class Users extends React.Component<IUsersProps, IUsersState> {
     const { classes } = this.props;
     const {
       records,
-      totalRecords,
       addScreenOpen,
       loading,
       page,

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

@@ -14,13 +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 {
-  Button,
-  Grid,
-  Typography,
-  TextField,
-  InputBase,
-} from "@material-ui/core";
+import { Button, Grid, TextField, InputBase } from "@material-ui/core";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { AppState } from "../../../store";
 import { connect } from "react-redux";
@@ -34,13 +28,9 @@ import { FormControl, MenuItem, Select } from "@material-ui/core";
 import {
   actionsTray,
   containerForHeader,
-  fieldBasic,
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import InputAdornment from "@material-ui/core/InputAdornment";
-import SearchIcon from "@material-ui/icons/Search";
-import { CreateIcon } from "../../../icons";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 
 const styles = (theme: Theme) =>
@@ -168,7 +158,15 @@ const Watch = ({
       // reset start status
       setStart(false);
     }
-  }, [watchMessageReceived, start]);
+  }, [
+    watchMessageReceived,
+    start,
+    bucketList,
+    bucketName,
+    prefix,
+    suffix,
+    watchResetMessages,
+  ]);
 
   const bucketNames = bucketList.map((bucketName) => ({
     label: bucketName.name,

portal-ui/src/screens/LoginPage/LoginCallback.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, { FC, useEffect } from "react";
+import React, { FC, useEffect } from "react"; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { RouteComponentProps } from "react-router";
 import storage from "local-storage-fallback";
 import api from "../../common/api";
@@ -36,6 +36,7 @@ const LoginCallback: FC<RouteComponentProps> = ({ location }) => {
       .catch((res: any) => {
         window.location.href = "/login";
       });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return null;
 };

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

@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import request from "superagent";
-import storage from "local-storage-fallback";
 import { connect, ConnectedProps } from "react-redux";
 import ErrorIcon from "@material-ui/icons/Error";
 import Button from "@material-ui/core/Button";
@@ -31,7 +30,6 @@ import api from "../../common/api";
 import { ILoginDetails, loginStrategyType } from "./types";
 import { setSession } from "../../common/utils";
 import history from "../../history";
-import { Error } from "@material-ui/icons";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -154,7 +152,6 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
   const [jwt, setJwt] = useState<string>("");
   const [secretKey, setSecretKey] = useState<string>("");
   const [error, setError] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(false);
   const [loginStrategy, setLoginStrategy] = useState<ILoginDetails>({
     loginStrategy: loginStrategyType.unknown,
     redirect: "",
@@ -170,17 +167,13 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
   };
 
   const fetchConfiguration = () => {
-    setLoading(true);
-
     api
       .invoke("GET", "/api/v1/login")
       .then((loginDetails: ILoginDetails) => {
-        setLoading(false);
         setLoginStrategy(loginDetails);
         setError("");
       })
       .catch((err: any) => {
-        setLoading(false);
         setError(err);
       });
   };

portal-ui/src/screens/NotFoundPage.tsx

@@ -21,7 +21,6 @@ import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Copyright from "../common/Copyright";
-import history from "../history";
 
 const useStyles = makeStyles((theme) => ({
   "@global": {