From 07c80462b72dd7bf47480f6b805e098ed2a8eb7b Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Wed, 11 Oct 2023 15:59:04 -0500
Subject: [PATCH] mui Grid component replacement (#3084)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../ListBuckets/AddBucket/InvalidRule.tsx     | 11 +--
 .../Buckets/ListBuckets/AddBucket/NARule.tsx  | 11 +--
 .../ListBuckets/AddBucket/ValidRule.tsx       |  8 +-
 .../Objects/Preview/PreviewFileContent.tsx    | 94 +++++++++----------
 .../MissingIntegration/MissingIntegration.tsx | 11 ++-
 .../src/screens/Console/License/License.tsx   |  4 +-
 6 files changed, 62 insertions(+), 77 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/InvalidRule.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/InvalidRule.tsx
index 72e1fbd4f..fa5f0296f 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/InvalidRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/InvalidRule.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import Grid from "@mui/material/Grid";
-import { ConfirmDeleteIcon } from "mds";
+import { ConfirmDeleteIcon, Grid } from "mds";
 
 interface IInvalidRule {
   ruleText: string;
@@ -27,23 +26,23 @@ const InvalidRule = ({ ruleText }: IInvalidRule) => {
     <Fragment>
       <Grid
         container
-        style={{
+        sx={{
           color: "#C83B51",
           display: "flex",
           justifyContent: "flex-start",
         }}
       >
-        <Grid item xs={1} paddingRight={1}>
+        <Grid item xs={1} sx={{ paddingRight: 1 }}>
           <ConfirmDeleteIcon width={"16px"} height={"16px"} />
         </Grid>
         <Grid
           item
           xs={9}
-          paddingLeft={1}
-          style={{
+          sx={{
             color: "#C83B51",
             display: "flex",
             justifyContent: "flex-start",
+            paddingLeft: 1,
           }}
         >
           {ruleText}
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/NARule.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/NARule.tsx
index 02db0c939..abd4e2d95 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/NARule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/NARule.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import Grid from "@mui/material/Grid";
-import { CircleIcon } from "mds";
+import { CircleIcon, Grid } from "mds";
 
 interface INARule {
   ruleText: string;
@@ -25,8 +24,8 @@ interface INARule {
 const NARule = ({ ruleText }: INARule) => {
   return (
     <Fragment>
-      <Grid container style={{ display: "flex", justifyContent: "flex-start" }}>
-        <Grid item xs={1} paddingRight={1}>
+      <Grid container sx={{ display: "flex", justifyContent: "flex-start" }}>
+        <Grid item xs={1}>
           <CircleIcon
             width={"12px"}
             height={"12px"}
@@ -36,12 +35,12 @@ const NARule = ({ ruleText }: INARule) => {
         <Grid
           item
           xs={9}
-          paddingLeft={1}
-          style={{
+          sx={{
             color: "#8f949c",
             display: "flex",
             justifyContent: "flex-start",
           }}
+          style={{}}
         >
           {ruleText}
         </Grid>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/ValidRule.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/ValidRule.tsx
index 97755dc17..3ec279bad 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/ValidRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/ValidRule.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import Grid from "@mui/material/Grid";
-import { ConfirmModalIcon } from "mds";
+import { ConfirmModalIcon, Grid } from "mds";
 
 interface IValidRule {
   ruleText: string;
@@ -26,7 +25,7 @@ const ValidRule = ({ ruleText }: IValidRule) => {
   return (
     <Fragment>
       <Grid container style={{ display: "flex", justifyContent: "flex-start" }}>
-        <Grid item xs={1} paddingRight={1}>
+        <Grid item xs={1}>
           <ConfirmModalIcon
             width={"16px"}
             height={"16px"}
@@ -36,8 +35,7 @@ const ValidRule = ({ ruleText }: IValidRule) => {
         <Grid
           item
           xs={9}
-          paddingLeft={1}
-          style={{
+          sx={{
             color: "#8f949c",
             display: "flex",
             justifyContent: "flex-start",
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
index 5ad675439..1afe52458 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
@@ -15,64 +15,24 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Grid } from "@mui/material";
+import { ProgressBar, Grid, Box } from "mds";
+import get from "lodash/get";
 import { BucketObjectItem } from "../ListObjects/types";
 import { AllowedPreviews, previewObjectType } from "../utils";
 import { encodeURLString } from "../../../../../../common/utils";
-import clsx from "clsx";
-import WarningMessage from "../../../../Common/WarningMessage/WarningMessage";
 import { api } from "../../../../../../api";
-import get from "lodash/get";
-import { ProgressBar } from "mds";
-
-const styles = () =>
-  createStyles({
-    iframeContainer: {
-      border: "0px",
-      flex: "1 1 auto",
-      width: "100%",
-      height: 250,
-      backgroundColor: "transparent",
-      borderRadius: 5,
-
-      "&.image": {
-        height: 500,
-      },
-      "&.text": {
-        height: 700,
-      },
-      "&.audio": {
-        height: 150,
-      },
-      "&.video": {
-        height: 350,
-      },
-      "&.fullHeight": {
-        height: "calc(100vh - 185px)",
-      },
-    },
-    iframeBase: {
-      backgroundColor: "#fff",
-    },
-    iframeHidden: {
-      display: "none",
-    },
-  });
+import WarningMessage from "../../../../Common/WarningMessage/WarningMessage";
 
 interface IPreviewFileProps {
   bucketName: string;
   object: BucketObjectItem | null;
   isFullscreen?: boolean;
-  classes: any;
 }
 
 const PreviewFile = ({
   bucketName,
   object,
   isFullscreen = false,
-  classes,
 }: IPreviewFileProps) => {
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -135,7 +95,41 @@ const PreviewFile = ({
         </Grid>
       )}
       {isMetaDataLoaded ? (
-        <div style={{ textAlign: "center" }}>
+        <Box
+          sx={{
+            textAlign: "center",
+            "& .iframeContainer": {
+              border: "0px",
+              flex: "1 1 auto",
+              width: "100%",
+              height: 250,
+              backgroundColor: "transparent",
+              borderRadius: 5,
+
+              "&.image": {
+                height: 500,
+              },
+              "&.text": {
+                height: 700,
+              },
+              "&.audio": {
+                height: 150,
+              },
+              "&.video": {
+                height: 350,
+              },
+              "&.fullHeight": {
+                height: "calc(100vh - 185px)",
+              },
+            },
+            "& .iframeBase": {
+              backgroundColor: "#fff",
+            },
+            "& .iframeHidden": {
+              display: "none",
+            },
+          }}
+        >
           {objectType === "video" && (
             <video
               style={{
@@ -194,16 +188,12 @@ const PreviewFile = ({
             objectType !== "video" &&
             objectType !== "audio" &&
             objectType !== "image" && (
-              <div
-                className={clsx(classes.iframeBase, {
-                  [classes.iframeHidden]: loading,
-                })}
-              >
+              <div className={`iframeBase ${loading ? "iframeHidden" : ""}`}>
                 <iframe
                   src={path}
                   title="File Preview"
                   allowTransparency
-                  className={`${classes.iframeContainer} ${
+                  className={`iframeContainer ${
                     isFullscreen ? "fullHeight" : objectType
                   }`}
                   onLoad={iframeLoaded}
@@ -212,9 +202,9 @@ const PreviewFile = ({
                 </iframe>
               </div>
             )}
-        </div>
+        </Box>
       ) : null}
     </Fragment>
   );
 };
-export default withStyles(styles)(PreviewFile);
+export default PreviewFile;
diff --git a/portal-ui/src/screens/Console/Common/MissingIntegration/MissingIntegration.tsx b/portal-ui/src/screens/Console/Common/MissingIntegration/MissingIntegration.tsx
index b3698d528..a85ac0c43 100644
--- a/portal-ui/src/screens/Console/Common/MissingIntegration/MissingIntegration.tsx
+++ b/portal-ui/src/screens/Console/Common/MissingIntegration/MissingIntegration.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Grid } from "@mui/material";
-import { HelpBox } from "mds";
+import { HelpBox, Grid } from "mds";
 
 interface IMissingIntegration {
   iconComponent: any;
@@ -32,9 +31,11 @@ const MissingIntegration = ({
   return (
     <Grid
       container
-      justifyContent={"center"}
-      alignContent={"center"}
-      alignItems={"center"}
+      sx={{
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+      }}
     >
       <Grid item xs={8}>
         <HelpBox
diff --git a/portal-ui/src/screens/Console/License/License.tsx b/portal-ui/src/screens/Console/License/License.tsx
index 7aca57719..fd03751e5 100644
--- a/portal-ui/src/screens/Console/License/License.tsx
+++ b/portal-ui/src/screens/Console/License/License.tsx
@@ -15,11 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
-
-import Grid from "@mui/material/Grid";
+import { ArrowIcon, Button, PageLayout, ProgressBar, Grid } from "mds";
 import { SubnetInfo } from "./types";
 import api from "../../../common/api";
-import { ArrowIcon, Button, PageLayout, ProgressBar } from "mds";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import LicensePlans from "./LicensePlans";
 import { useNavigate } from "react-router-dom";