Updated project dependencies (#571)

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

.gitignore

@@ -37,3 +37,4 @@ public.crt
 .vscode/
 *.code-workspace
 *~
+.eslintcache

portal-ui/package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@date-io/moment": "1.x",
     "@hot-loader/react-dom": "17.0.1",
-    "@material-ui/core": "^4.9.12",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
     "@material-ui/pickers": "^3.2.10",
     "@types/history": "^4.7.3",
     "@types/jest": "24.0.23",
@@ -20,7 +20,7 @@
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-virtualized": "^9.21.10",
-    "@types/recharts": "^1.8.9",
+    "@types/recharts": "^1.8.19",
     "@types/superagent": "^4.1.4",
     "@types/webpack-env": "^1.14.1",
     "@types/websocket": "^1.0.0",
@@ -41,14 +41,14 @@
     "react-dom": "17.0.1",
     "react-grid-layout": "^1.2.0",
     "react-hot-loader": "^4.13.0",
-    "react-moment": "^0.9.7",
+    "react-moment": "^1.1.1",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.1",
     "react-virtualized": "^9.22.2",
     "react-window-infinite-loader": "^1.0.5",
-    "recharts": "^1.8.5",
-    "redux": "^4.0.4",
+    "recharts": "^2.0.3",
+    "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "superagent": "^5.1.0",
     "typeface-roboto": "^0.0.75",
@@ -78,8 +78,7 @@
   },
   "proxy": "http://localhost:9090/",
   "devDependencies": {
-    "jest": "^24.9.0",
     "prettier": "2.2.1",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.3"
   }
 }

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

@@ -45,7 +45,6 @@ export default function Chart() {
           <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
           <YAxis stroke={theme.palette.text.secondary}>
             <Label
-              angle={270}
               position="left"
               style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
             >

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx

@@ -96,15 +96,15 @@ const LinearGraphWidget = ({
               />
               <XAxis
                 dataKey="name"
-                tickFormatter={xAxisFormatter}
+                tickFormatter={(value: any) => xAxisFormatter(value)}
                 interval={5}
                 tick={{ fontSize: "70%" }}
                 tickCount={10}
               />
               <YAxis
-                domain={[0, (dataMax) => dataMax * 4]}
+                domain={[0, (dataMax: number) => dataMax * 4]}
                 hide={hideYAxis}
-                tickFormatter={yAxisFormatter}
+                tickFormatter={(value: any) => yAxisFormatter(value)}
                 tick={{ fontSize: "70%" }}
               />
               {linearConfiguration.map((section, index) => {

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx

@@ -48,7 +48,7 @@ const SingleRepWidget = ({
       <div className={classes.contentContainer}>
         <ResponsiveContainer>
           <AreaChart data={data}>
-            <YAxis domain={[0, (dataMax) => dataMax * 2]} hide={true} />
+            <YAxis domain={[0, (dataMax: number) => dataMax * 2]} hide={true} />
             <Area
               type="monotone"
               dataKey={"value"}

portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.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, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import debounce from "lodash/debounce";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -309,7 +309,7 @@ const AddTenant = ({
   /*Debounce functions*/
 
   // Storage Quotas
-  const getNamespaceInformation = () => {
+  const getNamespaceInformation = useCallback(() => {
     setSelectedStorageClass("");
     setStorageClassesList([]);
     api
@@ -338,7 +338,7 @@ const AddTenant = ({
       .catch((err: any) => {
         console.log(err);
       });
-  };
+  }, [namespace]);
 
   const validateMemorySize = useCallback(() => {
     const memSize = parseInt(memoryNode) || 0;
@@ -381,9 +381,9 @@ const AddTenant = ({
     validateMemorySize();
   }, [maxAllocableMemo, validateMemorySize]);
 
-  const debounceNamespace = useCallback(
-    debounce(getNamespaceInformation, 500),
-    [namespace]
+  const debounceNamespace = useMemo(
+    () => debounce(getNamespaceInformation, 500),
+    [getNamespaceInformation]
   );
 
   useEffect(() => {

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

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useState } from "react";
 import request from "superagent";
-import { connect, ConnectedProps } from "react-redux";
+import { connect } from "react-redux";
 import ErrorIcon from "@material-ui/icons/Error";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
@@ -171,8 +171,6 @@ const connector = connect(mapState, { userLoggedIn });
 
 // The inferred type will look like:
 // {isOn: boolean, toggleOn: () => void}
-type PropsFromRedux = ConnectedProps<typeof connector>;
-type Props = PropsFromRedux & {};
 
 interface ILoginProps {
   userLoggedIn: typeof userLoggedIn;

portal-ui/tsconfig.json

@@ -14,7 +14,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }