Bump UI Dependencies (#2497)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2022-12-12 14:44:51 -08:00
parent ba6fb53594
commit 871789a236
9 changed files with 503 additions and 358 deletions
--- 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"
  }
 }
--- 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,9 +33,9 @@ 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;
@@ -44,22 +43,23 @@ interface ICreatePath {
  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);
--- 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;
              },
--- 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;
            }

--- 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);
  };
--- a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
+++ b/portal-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);
  };
--- 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>
--- 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;
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock