Replaced MenuDropdown components with mds variables (#3113)

bexsoft · web-flow · commit 82e34a5df28d · 2023-10-30T16:46:22.000-06:00
- Replaced menu dropdown in Files Button
- Input Unit Menu dropdown replacement
- Migrated Download Widget dropdown

Signed-off-by: Benjamin Perez &lt;benjamin@bexsoft.net&gt;
diff --git 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",
diff --git 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`}
-        anchorEl={anchorEl}
-        open={openUploadMenu}
-        onClose={() => {
-          handleCloseUpload();
-        }}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "center",
+      <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);
         }}
-        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>
+        open={uploadOptionsOpen}
+        anchorEl={anchorEl}
+        anchorOrigin={"end"}
+        useAnchorWidth={false}
+      />
     </Fragment>
   );
 };
 
-export default withStyles(styles)(UploadFilesButton);
+export default UploadFilesButton;
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx b/portal-ui/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx
@@ -15,34 +15,27 @@
 // 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[];
   disabled?: boolean;
   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;
diff --git 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>
   );
diff --git 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>
diff --git 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: {
diff --git 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();
     },
   )
diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock
