Replaced MenuDropdown components with mds variables (#3113)

- Replaced menu dropdown in Files Button - Input Unit Menu dropdown replacement - Migrated Download Widget dropdown Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2023-10-30 16:46:22 -06:00
parent 7b83f4b1dc
commit 82e34a5df2
8 changed files with 97 additions and 145 deletions
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -17,7 +17,7 @@
    "local-storage-fallback": "^4.1.1",
    "lodash": "^4.17.21",
    "luxon": "^3.4.3",
-    "mds": "https://github.com/minio/mds.git#v0.10.1",
+    "mds": "https://github.com/minio/mds.git#v0.11.0",
    "react": "^18.1.0",
    "react-component-export-image": "^1.0.6",
    "react-copy-to-clipboard": "^5.0.2",
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx
@@ -15,14 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Fragment, useState } from "react";
-import { Theme } from "@mui/material/styles";
 import { CSSObject } from "styled-components";
-import { Menu, MenuItem } from "@mui/material";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import { Button, UploadFolderIcon, UploadIcon } from "mds";
+import { Button, DropdownSelector, UploadFolderIcon, UploadIcon } from "mds";
 import {
  IAM_SCOPES,
  permissionTooltipHelper,
@@ -39,30 +33,20 @@ interface IUploadFilesButton {
  forceDisable?: boolean;
  uploadFileFunction: (closeFunction: () => void) => void;
  uploadFolderFunction: (closeFunction: () => void) => void;
-  classes: any;
  overrideStyles?: CSSObject;
 }

-const styles = (theme: Theme) =>
-  createStyles({
-    listUploadIcons: {
-      height: 20,
-      "& .min-icon": {
-        width: 18,
-        fill: "rgba(0,0,0,0.87)",
-      },
-    },
-  });
-
 const UploadFilesButton = ({
  uploadPath,
  bucketName,
  forceDisable = false,
  uploadFileFunction,
  uploadFolderFunction,
-  classes,
  overrideStyles = {},
 }: IUploadFilesButton) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [uploadOptionsOpen, uploadOptionsSetOpen] = useState<boolean>(false);
+
  const anonymousMode = useSelector(
    (state: AppState) => state.system.anonymousMode,
  );
@@ -82,9 +66,9 @@ const UploadFilesButton = ({
    putObjectPermScopes,
  );

-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const openUploadMenu = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    uploadOptionsSetOpen(!uploadOptionsOpen);
    setAnchorEl(event.currentTarget);
  };
  const handleCloseUpload = () => {
@@ -104,6 +88,15 @@ const UploadFilesButton = ({
    true,
  );

+  const uploadFolderAction = (action: string) => {
+    if (action === "folder") {
+      uploadFolderFunction(handleCloseUpload);
+      return;
+    }
+
+    uploadFileFunction(handleCloseUpload);
+  };
+
  const uploadEnabled: boolean = uploadObjectAllowed || uploadFolderAllowed;

  return (
@@ -131,48 +124,34 @@ const UploadFilesButton = ({
          sx={overrideStyles}
        />
      </TooltipWrapper>
-      <Menu
-        id={`upload-main-menu`}
-        aria-labelledby={`upload-main`}
+      <DropdownSelector
+        id={"upload-main-menu"}
+        options={[
+          {
+            label: "Upload File",
+            icon: <UploadIcon />,
+            value: "file",
+            disabled: !uploadObjectAllowed || forceDisable,
+          },
+          {
+            label: "Upload Folder",
+            icon: <UploadFolderIcon />,
+            value: "folder",
+            disabled: !uploadFolderAllowed || forceDisable,
+          },
+        ]}
+        selectedOption={""}
+        onSelect={(nValue) => uploadFolderAction(nValue)}
+        hideTriggerAction={() => {
+          uploadOptionsSetOpen(false);
+        }}
+        open={uploadOptionsOpen}
        anchorEl={anchorEl}
-        open={openUploadMenu}
-        onClose={() => {
-          handleCloseUpload();
-        }}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "center",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "center",
-        }}
-      >
-        <MenuItem
-          onClick={() => {
-            uploadFileFunction(handleCloseUpload);
-          }}
-          disabled={!uploadObjectAllowed || forceDisable}
-        >
-          <ListItemIcon className={classes.listUploadIcons}>
-            <UploadIcon />
-          </ListItemIcon>
-          <ListItemText>Upload File</ListItemText>
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            uploadFolderFunction(handleCloseUpload);
-          }}
-          disabled={!uploadFolderAllowed || forceDisable}
-        >
-          <ListItemIcon className={classes.listUploadIcons}>
-            <UploadFolderIcon />
-          </ListItemIcon>
-          <ListItemText>Upload Folder</ListItemText>
-        </MenuItem>
-      </Menu>
+        anchorOrigin={"end"}
+        useAnchorWidth={false}
+      />
    </Fragment>
  );
 };

-export default withStyles(styles)(UploadFilesButton);
+export default UploadFilesButton;
--- a/portal-ui/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx
@@ -15,14 +15,11 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Fragment } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { SelectorType } from "mds";
-import { Menu, MenuItem } from "@mui/material";
+import { DropdownSelector, SelectorType } from "mds";
+import styled from "styled-components";
+import get from "lodash/get";

 interface IInputUnitBox {
-  classes: any;
  id: string;
  unitSelected: string;
  unitsList: SelectorType[];
@@ -30,19 +27,15 @@ interface IInputUnitBox {
  onUnitChange?: (newValue: string) => void;
 }

-const styles = (theme: Theme) =>
-  createStyles({
-    buttonTrigger: {
-      border: "#F0F2F2 1px solid",
-      borderRadius: 3,
-      color: "#838383",
-      backgroundColor: "#fff",
-      fontSize: 12,
-    },
-  });
+const UnitMenuButton = styled.button(({ theme }) => ({
+  border: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`,
+  borderRadius: 3,
+  color: get(theme, "secondaryText", "#5B5C5C"),
+  backgroundColor: get(theme, "boxBackground", "#FBFAFA"),
+  fontSize: 12,
+}));

 const InputUnitMenu = ({
-  classes,
  id,
  unitSelected,
  unitsList,
@@ -63,46 +56,31 @@ const InputUnitMenu = ({

  return (
    <Fragment>
-      <button
+      <UnitMenuButton
        id={`${id}-button`}
        aria-controls={`${id}-menu`}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
-        className={classes.buttonTrigger}
        disabled={disabled}
        type={"button"}
      >
        {unitSelected}
-      </button>
-      <Menu
-        id={`${id}-menu`}
-        aria-labelledby={`${id}-button`}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={() => {
+      </UnitMenuButton>
+      <DropdownSelector
+        id={"upload-main-menu"}
+        options={unitsList}
+        selectedOption={""}
+        onSelect={(value) => handleClose(value)}
+        hideTriggerAction={() => {
          handleClose("");
        }}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "center",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "center",
-        }}
-      >
-        {unitsList.map((unit) => (
-          <MenuItem
-            onClick={() => handleClose(unit.value)}
-            key={`itemUnit-${unit.value}-${unit.label}`}
-          >
-            {unit.label}
-          </MenuItem>
-        ))}
-      </Menu>
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={"end"}
+      />
    </Fragment>
  );
 };

-export default withStyles(styles)(InputUnitMenu);
+export default InputUnitMenu;
--- a/portal-ui/src/screens/Console/Dashboard/DownloadWidgetDataButton.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/DownloadWidgetDataButton.tsx
@@ -15,9 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Fragment } from "react";
-import { Box, Menu, MenuItem } from "@mui/material";
-import ListItemText from "@mui/material/ListItemText";
-import { DownloadIcon } from "mds";
+import { Box, DownloadIcon, DropdownSelector } from "mds";
 import { exportComponentAsPNG } from "react-component-export-image";
 import { ErrorResponseHandler } from "../../../common/types";
 import { useAppDispatch } from "../../../../src/store";
@@ -104,11 +102,19 @@ const DownloadWidgetDataButton = ({
    }
  };

+  const handleSelectedOption = (selectOption: string) => {
+    if (selectOption === "csv") {
+      downloadAsCSV();
+    } else if (selectOption === "png") {
+      downloadAsPNG();
+    }
+  };
+
  return (
    <Fragment>
      <Box
-        justifyItems={"center"}
        sx={{
+          justifyItems: "center",
          "& .download-icon": {
            backgroundColor: "transparent",
            border: 0,
@@ -126,33 +132,24 @@ const DownloadWidgetDataButton = ({
          },
        }}
      >
-        <button onClick={handleClick} className={"download-icon"}>
+        <button className={"download-icon"} onClick={handleClick}>
          <DownloadIcon />
        </button>
-        <Menu
-          id={`download-widget-main-menu`}
-          aria-labelledby={`download-widget-main`}
-          anchorEl={anchorEl}
-          open={openDownloadMenu}
-          onClose={() => {
+        <DropdownSelector
+          id={"download-widget-main-menu"}
+          options={[
+            { label: "Download as CSV", value: "csv" },
+            { label: "Download as PNG", value: "png" },
+          ]}
+          selectedOption={""}
+          onSelect={(value) => handleSelectedOption(value)}
+          hideTriggerAction={() => {
            handleCloseDownload();
          }}
-        >
-          <MenuItem
-            onClick={() => {
-              downloadAsCSV();
-            }}
-          >
-            <ListItemText>Download as CSV</ListItemText>
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              downloadAsPNG();
-            }}
-          >
-            <ListItemText>Download as PNG</ListItemText>
-          </MenuItem>
-        </Menu>
+          open={openDownloadMenu}
+          anchorEl={anchorEl}
+          anchorOrigin={"end"}
+        />
      </Box>
    </Fragment>
  );
--- a/portal-ui/src/screens/LoginPage/StrategyForm.tsx
+++ b/portal-ui/src/screens/LoginPage/StrategyForm.tsx
@@ -152,6 +152,7 @@ const StrategyForm = ({ redirectRules }: { redirectRules: RedirectRule[] }) => {
                }}
                open={ssoOptionsOpen}
                anchorEl={anchorEl}
+                useAnchorWidth={true}
              />
            )}
          </Box>
--- a/portal-ui/src/utils/stylesUtils.ts
+++ b/portal-ui/src/utils/stylesUtils.ts
@@ -42,6 +42,7 @@ export const generateOverrideTheme = (overrideVars: IEmbeddedCustomStyles) => {
      loaderColor: overrideVars.loaderColor,
      boxBackground: overrideVars.boxBackground,
      mutedText: "#9c9c9c",
+      secondaryText: "#9c9c9c",
      buttons: {
        regular: {
          enabled: {
--- a/portal-ui/tests/permissions-B/bucketWritePrefixOnly.ts
+++ b/portal-ui/tests/permissions-B/bucketWritePrefixOnly.ts
@@ -31,11 +31,9 @@ test
        .useRole(roles.bucketWritePrefixOnly)
        .navigateTo("http://localhost:9090/browser/testcafe")
        .click(uploadButton)
-        .expect(Selector("li").withText("Upload File").hasClass("Mui-disabled"))
+        .expect(Selector("li").withText("Upload File").hasClass("disabled"))
        .ok()
-        .expect(
-          Selector("li").withText("Upload Folder").hasClass("Mui-disabled"),
-        )
+        .expect(Selector("li").withText("Upload Folder").hasClass("disabled"))
        .notOk();
    },
  )
@@ -50,11 +48,9 @@ test
        .useRole(roles.bucketWritePrefixOnly)
        .navigateTo("http://localhost:9090/browser/testcafe/d3JpdGU=")
        .click(uploadButton)
-        .expect(Selector("li").withText("Upload File").hasClass("Mui-disabled"))
+        .expect(Selector("li").withText("Upload File").hasClass("disabled"))
        .notOk()
-        .expect(
-          Selector("li").withText("Upload Folder").hasClass("Mui-disabled"),
-        )
+        .expect(Selector("li").withText("Upload Folder").hasClass("disabled"))
        .notOk();
    },
  )
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -8412,9 +8412,9 @@ mdn-data@2.0.4:
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==

-"mds@https://github.com/minio/mds.git#v0.10.1":
-  version "0.10.1"
-  resolved "https://github.com/minio/mds.git#83a5533ce8331cc57613308c1aaf6c4b40196c1c"
+"mds@https://github.com/minio/mds.git#v0.11.0":
+  version "0.11.0"
+  resolved "https://github.com/minio/mds.git#f8f53f26977ee21d6de5c11915f34fb12a2a01ab"
  dependencies:
    "@types/styled-components" "^5.1.28"
    "@uiw/react-textarea-code-editor" "^2.1.9"