Components cleanup (minio#3079)

Removed old component wrappers and replaced them with their mds equivalent components:

- InputBoxWrapper
- CommentBoxWrapper
- CheckboxWrapper
- PredefinedList

Signed-off-by: Benjamin Perez <[email protected]>

Author: bexsoft

portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx

@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { AddNewTagIcon, Button } from "mds";
-import { Grid } from "@mui/material";
+import { AddNewTagIcon, Box, Button, FormLayout, Grid, InputBox } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -25,7 +24,6 @@ import {
   modalStyleUtils,
   spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
@@ -96,35 +94,31 @@ const AddBucketTagModal = ({
       }}
       titleIcon={<AddNewTagIcon />}
     >
-      <Grid container>
-        <div className={classes.spacerBottom}>
+      <FormLayout withBorders={false} containerPadding={false}>
+        <Box sx={{ marginBottom: 15 }}>
           <strong>Bucket</strong>: {bucketName}
-        </div>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            value={newKey}
-            label={"New Tag Key"}
-            id={"newTagKey"}
-            name={"newTagKey"}
-            placeholder={"Enter New Tag Key"}
-            onChange={(e: any) => {
-              setNewKey(e.target.value);
-            }}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            value={newLabel}
-            label={"New Tag Label"}
-            id={"newTagLabel"}
-            name={"newTagLabel"}
-            placeholder={"Enter New Tag Label"}
-            onChange={(e: any) => {
-              setNewLabel(e.target.value);
-            }}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.modalButtonBar}>
+        </Box>
+        <InputBox
+          value={newKey}
+          label={"New Tag Key"}
+          id={"newTagKey"}
+          name={"newTagKey"}
+          placeholder={"Enter New Tag Key"}
+          onChange={(e: any) => {
+            setNewKey(e.target.value);
+          }}
+        />
+        <InputBox
+          value={newLabel}
+          label={"New Tag Label"}
+          id={"newTagLabel"}
+          name={"newTagLabel"}
+          placeholder={"Enter New Tag Label"}
+          onChange={(e: any) => {
+            setNewLabel(e.target.value);
+          }}
+        />
+        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
           <Button
             id={"clear"}
             type="button"
@@ -144,7 +138,7 @@ const AddBucketTagModal = ({
             label={"Save"}
           />
         </Grid>
-      </Grid>
+      </FormLayout>
     </ModalWrapper>
   );
 };

portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx

@@ -15,7 +15,15 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Select, InputBox, Switch, FormLayout, Tooltip, Grid } from "mds";
+import {
+  FormLayout,
+  Grid,
+  InputBox,
+  ReadBox,
+  Select,
+  Switch,
+  Tooltip,
+} from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -27,7 +35,6 @@ import {
   wizardCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
@@ -325,10 +332,12 @@ const AddBulkReplicationModal = ({
             componentRender: (
               <Fragment>
                 <Grid item xs={12}>
-                  <PredefinedList
+                  <ReadBox
+                    sx={{ width: "100%" }}
                     label="Local Buckets to replicate"
-                    content={bucketsToAlter.join(", ")}
-                  />
+                  >
+                    {bucketsToAlter.join(", ")}
+                  </ReadBox>
                 </Grid>
                 <h4>Remote Endpoint Configuration</h4>
                 <span className={classes.descriptionText}>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx

@@ -27,10 +27,10 @@ import {
   IconButton,
   Tooltip,
   Grid,
+  Checkbox,
 } from "mds";
 import { niceBytes } from "../../../../../../common/utils";
 import SpecificVersionPill from "./SpecificVersionPill";
-import CheckboxWrapper from "../../../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import { BucketObject } from "api/consoleApi";
 
 interface IFileVersionItem {
@@ -242,24 +242,19 @@ const FileVersionItem = ({
               <Grid container>
                 <Grid item xs md={4} className={"versionContainer"}>
                   {checkable && (
-                    <CheckboxWrapper
+                    <Checkbox
                       checked={isChecked}
                       id={`select-${versionInfo.version_id}`}
-                      label={""}
                       name={`select-${versionInfo.version_id}`}
                       onChange={(e) => {
                         e.stopPropagation();
-                        e.preventDefault();
                         onCheck(versionInfo.version_id || "");
                       }}
                       value={versionInfo.version_id || ""}
                       disabled={versionInfo.is_delete_marker}
-                      overrideCheckboxStyles={{
-                        paddingLeft: 0,
-                        height: 34,
-                        width: 25,
+                      sx={{
+                        width: "initial",
                       }}
-                      noTopMargin
                     />
                   )}
                   {displayFileIconName(fileName, true)} v{index.toString()}