Bump UI Dependencies (#2497)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
minio · Dec 12, 2022 · 871789a · 871789a
1 parent ba6fb53
commit 871789a
Show file tree

Hide file tree

Showing 9 changed files with 503 additions and 358 deletions.
diff --git a/portal-ui/package.json b/portal-ui/package.json
@@ -4,34 +4,34 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/lab": "^5.0.0-alpha.83",
-    "@mui/material": "^5.8.1",
-    "@mui/styles": "^5.8.0",
-    "@mui/x-date-pickers": "^5.0.0",
-    "@reduxjs/toolkit": "^1.8.1",
-    "@types/lodash": "^4.14.149",
-    "@types/minio": "^7.0.11",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.10.16",
+    "@mui/lab": "^5.0.0-alpha.111",
+    "@mui/material": "^5.10.17",
+    "@mui/styles": "^5.10.16",
+    "@mui/x-date-pickers": "^5.0.10",
+    "@reduxjs/toolkit": "^1.9.1",
+    "@types/lodash": "^4.14.191",
+    "@types/minio": "^7.0.15",
     "@types/node": "17.0.14",
-    "@types/react": "18.0.9",
+    "@types/react": "18.0.26",
     "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "18.0.5",
+    "@types/react-dom": "18.0.9",
     "@types/react-grid-layout": "^1.1.1",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.21.21",
-    "@types/superagent": "^4.1.12",
+    "@types/superagent": "^4.1.16",
     "@types/webpack-env": "^1.14.1",
     "@types/websocket": "^1.0.0",
-    "@uiw/react-textarea-code-editor": "^2.0.2",
+    "@uiw/react-textarea-code-editor": "^2.0.6",
     "chart.js": "^2.9.3",
-    "kbar": "^0.1.0-beta.34",
+    "kbar": "^0.1.0-beta.39",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "mds": "https://github.com/minio/mds.git#v0.0.7",
-    "minio": "^7.0.28",
+    "minio": "^7.0.32",
     "moment": "^2.29.4",
     "react": "^18.1.0",
     "react-chartjs-2": "^2.9.0",
@@ -41,13 +41,13 @@
     "react-dropzone": "^11.4.2",
     "react-grid-layout": "^1.2.0",
     "react-moment": "^1.1.1",
-    "react-redux": "^7.1.3",
-    "react-router-dom": "6",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "6.4.5",
     "react-virtualized": "^9.22.3",
-    "react-window": "^1.8.7",
+    "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.7",
-    "recharts": "^2.1.1",
-    "superagent": "^6.1.0",
+    "recharts": "^2.2.0",
+    "superagent": "^8.0.6",
     "tinycolor2": "^1.4.2",
     "websocket": "^1.0.31"
   },
@@ -76,7 +76,7 @@
   "devDependencies": {
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@types/recharts": "^1.8.22",
+    "@types/recharts": "^1.8.24",
     "prettier": "2.7.1",
     "react-scripts": "5.0.1",
     "testcafe": "^1.18.6",
@@ -91,6 +91,7 @@
     "react-scripts/webpack-dev-server/portfinder/async": "^2.6.4",
     "react-scripts/**/glob-parent": "^6.0.1",
     "react-scripts/**/minimatch": "^3.0.5",
-    "react-scripts/**/loader-utils": "^2.0.4"
+    "react-scripts/**/loader-utils": "^2.0.4",
+    "recharts/**/d3-color": "^3.1.0"
   }
 }
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx
@@ -22,7 +22,6 @@ import { Grid } from "@mui/material";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import {
   formFieldStyles,
   modalStyleUtils,
@@ -34,32 +33,33 @@ import { BucketObjectItem } from "./types";
 import { CreateNewPathIcon } from "../../../../../../icons";
 import { AppState, useAppDispatch } from "../../../../../../store";
 import { setModalErrorSnackMessage } from "../../../../../../systemSlice";
+import makeStyles from "@mui/styles/makeStyles";
 
 interface ICreatePath {
-  classes: any;
   modalOpen: boolean;
   bucketName: string;
   folderName: string;
   onClose: () => any;
   simplePath: string | null;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     ...modalStyleUtils,
     ...formFieldStyles,
-  });
+  })
+);
 
 const CreatePathModal = ({
   modalOpen,
   folderName,
   bucketName,
   onClose,
-  classes,
   simplePath,
 }: ICreatePath) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const classes = useStyles();
 
   const [pathUrl, setPathUrl] = useState("");
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
@@ -197,4 +197,4 @@ const mapStateToProps = ({ objectBrowser }: AppState) => ({
 
 const connector = connect(mapStateToProps);
 
-export default connector(withStyles(styles)(CreatePathModal));
+export default connector(CreatePathModal);
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
@@ -231,15 +231,16 @@ const ObjectDetailPanel = ({
             distributedSetup ? "&with_versions=true" : ""
           }`
         )
-        .then((res: IFileInfo[]) => {
-          const result = get(res, "objects", []);
+        .then((res: { objects: IFileInfo[] }) => {
+          const result: IFileInfo[] = res.objects || [];
           if (distributedSetup) {
             setAllInfoElements(result);
             setVersions(result);
+
             const tVersionSize = result.reduce(
-              (acc: number, currValue: IFileInfo) => {
+              (acc: number, currValue: IFileInfo): number => {
                 if (currValue?.size) {
-                  return acc + currValue.size;
+                  return acc + parseInt(currValue.size);
                 }
                 return acc;
               },

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import get from "lodash/get";
 import { useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import { Button } from "mds";
@@ -128,15 +127,15 @@ const ShareFile = ({
               dataObject.name
             )}${distributedSetup ? "&with_versions=true" : ""}`
           )
-          .then((res: IFileInfo[]) => {
-            const result = get(res, "objects", []);
+          .then((res: { objects: IFileInfo[] }) => {
+            const result: IFileInfo[] = res.objects || [];
 
-            const latestVersion = result.find(
+            const latestVersion: IFileInfo | undefined = result.find(
               (elem: IFileInfo) => elem.is_latest
             );
 
             if (latestVersion) {
-              setVersionID(latestVersion.version_id);
+              setVersionID(`${latestVersion.version_id}`);
               return;
             }
 

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
@@ -146,8 +146,9 @@ const CSVMultiSelector = ({
     e.persist();
 
     let updatedElement = [...currentElements];
-    const index = get(e.target, "dataset.index", 0);
-    updatedElement[index] = e.target.value;
+    const index = get(e.target, "dataset.index", "0");
+    const indexNum = parseInt(index);
+    updatedElement[indexNum] = e.target.value;
 
     setCurrentElements(updatedElement);
   };

diff --git a/...al-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx b/...al-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
@@ -155,8 +155,9 @@ const QueryMultiSelector = ({
     e.persist();
 
     let updatedElement = [...currentKeys];
-    const index = get(e.target, "dataset.index", 0);
-    updatedElement[index] = e.target.value;
+    const index = get(e.target, "dataset.index", "0");
+    const indexNum = parseInt(index);
+    updatedElement[indexNum] = e.target.value;
 
     setCurrentKeys(updatedElement);
   };
@@ -165,8 +166,9 @@ const QueryMultiSelector = ({
     e.persist();
 
     let updatedElement = [...currentValues];
-    const index = get(e.target, "dataset.index", 0);
-    updatedElement[index] = e.target.value;
+    const index = get(e.target, "dataset.index", "0");
+    const indexNum = parseInt(index);
+    updatedElement[indexNum] = e.target.value;
 
     setCurrentValues(updatedElement);
   };

diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx
@@ -113,7 +113,8 @@ const messageForError = (log: LogMessage) => {
       <div>
         <b style={labelStyle}>Backtrace:&nbsp;</b>
       </div>
-      {(getLogEntryKey("error.source") || []).map((e: any, i: number) => {
+
+      {(log.error.source || []).map((e: any, i: number) => {
         return (
           <div>
             <b style={labelStyle}>{i}:&nbsp;</b>

diff --git a/portal-ui/src/screens/Console/Speedtest/STResults.tsx b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
@@ -19,7 +19,6 @@ import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
 import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { Grid } from "@mui/material";
 import { IndvServerMetric, SpeedTestResponse, STServer } from "./types";
 import { calculateBytes, prettyNumber } from "../../../common/utils";
@@ -36,8 +35,9 @@ import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMi
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
 import { cleanMetrics } from "./utils";
 import SpeedTestUnit from "./SpeedTestUnit";
+import makeStyles from "@mui/styles/makeStyles";
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     actionButtons: {
       textAlign: "right",
@@ -130,15 +130,21 @@ const styles = (theme: Theme) =>
         color: "rgb(66,127,172)",
       },
     },
-  });
+    versionIcon: {
+      color: "#07193E",
+      marginRight: 20,
+    },
+  })
+);
 
 interface ISTResults {
-  classes: any;
   results: SpeedTestResponse[];
   start: boolean;
 }
 
-const STResults = ({ classes, results, start }: ISTResults) => {
+const STResults = ({ results, start }: ISTResults) => {
+  const classes = useStyles();
+
   const [jsonView, setJsonView] = useState<boolean>(false);
 
   const finalRes = results[results.length - 1] || [];
@@ -233,7 +239,7 @@ const STResults = ({ classes, results, start }: ISTResults) => {
                   </div>
                 }
                 title={"GET"}
-                throughput={getThroughput}
+                throughput={`${getThroughput}`}
                 objects={getObjects}
               />
             </Grid>
@@ -245,7 +251,7 @@ const STResults = ({ classes, results, start }: ISTResults) => {
                   </div>
                 }
                 title={"PUT"}
-                throughput={putThroughput}
+                throughput={`${putThroughput}`}
                 objects={putObjects}
               />
             </Grid>
@@ -447,4 +453,4 @@ const STResults = ({ classes, results, start }: ISTResults) => {
   );
 };
 
-export default withStyles(styles)(STResults);
+export default STResults;