Changed Object Browser components to use new mds components (#2796)

Author: bexsoft

portal-ui/src/StyleHandler.tsx

@@ -20,7 +20,6 @@ import {
   Theme,
   ThemeProvider,
 } from "@mui/material/styles";
-import withStyles from "@mui/styles/withStyles";
 import theme from "./theme/main";
 import "react-virtualized/styles.css";
 import "react-grid-layout/css/styles.css";
@@ -46,48 +45,19 @@ const StyleHandler = ({ children }: IStyleHandler) => {
     (state: AppState) => state.system.overrideStyles
   );
 
-  let thm = theme;
-  let globalBody: any = {};
-  let rowColor: any = { color: "#393939" };
-  let detailsListPanel: any = { backgroundColor: "#fff" };
+  let thm = undefined;
 
   if (colorVariants) {
     thm = generateOverrideTheme(colorVariants);
-
-    globalBody = {
-      backgroundColor: `${colorVariants.backgroundColor}!important`,
-    };
-    rowColor = { color: `${colorVariants.fontColor}!important` };
-    detailsListPanel = {
-      backgroundColor: colorVariants.backgroundColor,
-      color: colorVariants.fontColor,
-    };
   }
 
-  // Kept for Compatibility purposes. Once mds migration is complete then this will be removed
-  const GlobalCss = withStyles({
-    // @global is handled by jss-plugin-global.
-    "@global": {
-      body: {
-        ...globalBody,
-      },
-      ".rowLine": {
-        ...rowColor,
-      },
-      ".detailsListPanel": {
-        ...detailsListPanel,
-      },
-    },
-  })(() => null);
-
   // ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
   return (
     <Fragment>
       <GlobalStyles />
-      <GlobalCss />
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={thm}>
-          <ThemeHandler>{children}</ThemeHandler>
+        <ThemeProvider theme={theme}>
+          <ThemeHandler customTheme={thm}>{children}</ThemeHandler>
         </ThemeProvider>
       </StyledEngineProvider>
     </Fragment>

portal-ui/src/common/types.ts

@@ -48,16 +48,58 @@ export interface IBytesCalc {
 }
 
 export interface IEmbeddedCustomButton {
-  backgroundColor?: string;
-  textColor?: string;
-  hoverColor?: string;
-  hoverText?: string;
-  activeColor?: string;
-  activeText?: string;
+  backgroundColor: string;
+  textColor: string;
+  hoverColor: string;
+  hoverText: string;
+  activeColor: string;
+  activeText: string;
+  disabledColor: string;
+  disabledText: string;
+}
+
+export interface IEmbeddedCustomTable {
+  border: string;
+  disabledBorder: string;
+  disabledBG: string;
+  selected: string;
+  deletedDisabled: string;
+  hoverColor: string;
+}
+
+export interface IEmbeddedInputBox {
+  border: string;
+  hoverBorder: string;
+  textColor: string;
+  backgroundColor: string;
+}
+
+export interface IEmbeddedSwitch {
+  switchBackground: string;
+  bulletBorderColor: string;
+  bulletBGColor: string;
+  disabledBackground: string;
+  disabledBulletBorderColor: string;
+  disabledBulletBGColor: string;
 }
 
 export interface IEmbeddedCustomStyles {
   backgroundColor: string;
   fontColor: string;
+  secondaryFontColor: string;
+  borderColor: string;
+  loaderColor: string;
+  boxBackground: string;
+  okColor: string;
+  errorColor: string;
+  warnColor: string;
+  linkColor: string;
+  disabledLinkColor: string;
+  hoverLinkColor: string;
+  tableColors: IEmbeddedCustomTable;
   buttonStyles: IEmbeddedCustomButton;
+  secondaryButtonStyles: IEmbeddedCustomButton;
+  regularButtonStyles: IEmbeddedCustomButton;
+  inputBox: IEmbeddedInputBox;
+  switch: IEmbeddedSwitch;
 }

portal-ui/src/index.css

@@ -12,12 +12,15 @@ code {
 
 /* Chrome, Safari, Edge, Opera */
 input.removeArrows::-webkit-outer-spin-button,
-input.removeArrows::-webkit-inner-spin-button {
+input.removeArrows::-webkit-inner-spin-button,
+.removeArrows input::-webkit-outer-spin-button,
+.removeArrows input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 /* Firefox */
-input.removeArrows[type="number"] {
+input.removeArrows[type="number"],
+.removeArrows input[type="number"] {
   -moz-appearance: textfield;
 }

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ActionsListSection.tsx

@@ -16,10 +16,8 @@
 
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, CreateNewPathIcon } from "mds";
+import { Button, CreateNewPathIcon, InputBox, Grid } from "mds";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
-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 {
@@ -155,7 +153,7 @@ const CreatePathModal = ({
             </div>
           </Grid>
           <Grid item xs={12} className={classes.formFieldRow}>
-            <InputBoxWrapper
+            <InputBox
               value={pathUrl}
               label={"New Folder Path"}
               id={"folderPath"}

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx

@@ -15,14 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { DialogContentText } from "@mui/material";
-
 import { ErrorResponseHandler } from "../../../../../../common/types";
 import useApi from "../../../../Common/Hooks/useApi";
 import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog";
-import { ConfirmDeleteIcon } from "mds";
-import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-
+import { ConfirmDeleteIcon, Switch } from "mds";
 import { setErrorSnackMessage } from "../../../../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../../../../store";
 import { hasPermission } from "../../../../../../common/SecureComponent";
@@ -113,14 +109,14 @@ const DeleteObject = ({
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete the selected {selectedObjects.length}{" "}
           objects?{" "}
           {isVersionedDelete && (
             <Fragment>
               <br />
               <br />
-              <FormSwitchWrapper
+              <Switch
                 label={"Delete All Versions"}
                 indicatorLabels={["Yes", "No"]}
                 checked={deleteVersions}
@@ -139,7 +135,7 @@ const DeleteObject = ({
                       marginTop: 10,
                     }}
                   >
-                    <FormSwitchWrapper
+                    <Switch
                       label={"Bypass Governance Mode"}
                       indicatorLabels={["Yes", "No"]}
                       checked={bypassGovernance}
@@ -176,7 +172,7 @@ const DeleteObject = ({
               )}
             </Fragment>
           )}
-        </DialogContentText>
+        </Fragment>
       }
     />
   );

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteMultipleObjects.tsx

@@ -16,17 +16,13 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 
-import { DialogContentText } from "@mui/material";
-import Grid from "@mui/material/Grid";
 import { ErrorResponseHandler } from "../../../../../../common/types";
 import { decodeURLString } from "../../../../../../common/utils";
-import { ConfirmDeleteIcon } from "mds";
+import { ConfirmDeleteIcon, Switch, Grid, InputBox } from "mds";
 import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog";
 import api from "../../../../../../common/api";
-import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { setErrorSnackMessage } from "../../../../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../../../../store";
-import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { hasPermission } from "../../../../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
 import { useSelector } from "react-redux";
@@ -105,7 +101,7 @@ const DeleteNonCurrentVersions = ({
         disabled: typeConfirm !== "YES, PROCEED" || deleteLoading,
       }}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete all the non-current versions for:{" "}
           <b>{decodeURLString(selectedObject)}</b>? <br />
           {canBypass && (
@@ -115,7 +111,7 @@ const DeleteNonCurrentVersions = ({
                   marginTop: 10,
                 }}
               >
-                <FormSwitchWrapper
+                <Switch
                   label={"Bypass Governance Mode"}
                   indicatorLabels={["Yes", "No"]}
                   checked={bypassGovernance}
@@ -132,8 +128,10 @@ const DeleteNonCurrentVersions = ({
           )}
           <br />
           To continue please type <b>YES, PROCEED</b> in the box.
+          <br />
+          <br />
           <Grid item xs={12}>
-            <InputBoxWrapper
+            <InputBox
               id="type-confirm"
               name="retype-tenant"
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -143,7 +141,7 @@ const DeleteNonCurrentVersions = ({
               value={typeConfirm}
             />
           </Grid>
-        </DialogContentText>
+        </Fragment>
       }
     />
   );