mui Grid component replacement (#3084)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

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}

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>

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",

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;

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

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";