Migration of components to mds (#1873)

- Migrated DataTable - Migrated Modal Boxes - Migrated ScreenTitle - Migrated Wizard components - Migrated vertical tabs - Updated Pool Details page - Migrated LabelValuePair components - Migrated InputUnitMenu component Signed-off-by: Benjamin Perez <[email protected]>
minio · Nov 17, 2023 · 8a3cb76 · 8a3cb76
1 parent febee24
commit 8a3cb76
Show file tree

Hide file tree

Showing 41 changed files with 375 additions and 2,633 deletions.
diff --git a/web-app/src/StyleHandler.tsx b/web-app/src/StyleHandler.tsx
@@ -48,18 +48,11 @@ const StyleHandler = ({ children }: IStyleHandler) => {
 
   let thm = theme;
   let globalBody: any = {};
-  let rowColor: any = { color: "#393939" };
-  let detailsListPanel: any = { backgroundColor: "#fff" };
 
   if (colorVariants) {
     thm = generateOverrideTheme(colorVariants);
 
     globalBody = { backgroundColor: colorVariants.backgroundColor };
-    rowColor = { color: colorVariants.fontColor };
-    detailsListPanel = {
-      backgroundColor: colorVariants.backgroundColor,
-      color: colorVariants.fontColor,
-    };
   }
 
   // Kept for Compatibility purposes. Once mds migration is complete then this will be removed
@@ -69,12 +62,6 @@ const StyleHandler = ({ children }: IStyleHandler) => {
       body: {
         ...globalBody,
       },
-      ".rowLine": {
-        ...rowColor,
-      },
-      ".detailsListPanel": {
-        ...detailsListPanel,
-      },
     },
   })(() => null);
 

diff --git a/web-app/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx b/web-app/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx
diff --git a/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx b/web-app/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 { selectorTypes } from "../SelectWrapper/SelectWrapper";
-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: selectorTypes[];
+  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;