Migration of components to mds

web-app/package.json

@@ -29,6 +29,7 @@
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.7",
     "recharts": "2.7.2",
+    "styled-components": "^5.3.11",
     "superagent": "^8.0.8",
     "tough-cookie": "4.1.3",
     "yaml": "2.3.4"

web-app/src/common/LoadingComponent.tsx

@@ -15,20 +15,25 @@
 //  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Grid } from "@mui/material";
-import { Loader } from "mds";
+import { Loader, Grid } from "mds";
 
 const LoadingComponent = () => {
   return (
     <Grid
       container
-      spacing={0}
-      direction="column"
-      alignItems="center"
-      justifyContent="center"
-      style={{ minHeight: "100vh" }}
+      sx={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
     >
-      <Grid item xs={3} style={{ textAlign: "center" }}>
+      <Grid
+        item
+        xs={3}
+        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+      >
         <Loader style={{ width: 35, height: 35 }} />
       </Grid>
     </Grid>

web-app/src/screens/Console/CommandBar.tsx

@@ -15,6 +15,7 @@
 //  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { Box, MenuExpandedIcon } from "mds";
 import { useNavigate } from "react-router-dom";
 import {
   ActionId,
@@ -30,30 +31,11 @@ import {
   useRegisterActions,
 } from "kbar";
 import { Action } from "kbar/lib/types";
-import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
 import { routesAsKbarActions } from "./kbar-actions";
-import { Box } from "@mui/material";
-import { MenuExpandedIcon } from "mds";
 import { useSelector } from "react-redux";
 import { selFeatures } from "./consoleSlice";
 import { selOpMode } from "../../systemSlice";
 
-const useStyles = makeStyles((theme: Theme) => ({
-  resultItem: {
-    display: "flex",
-    gap: "8px",
-    alignItems: "center",
-    fontSize: 14,
-    flex: 1,
-    justifyContent: "space-between",
-    "& .min-icon": {
-      width: "17px",
-      height: "17px",
-    },
-  },
-}));
-
 const searchStyle = {
   padding: "12px 16px",
   width: "100%",
@@ -192,7 +174,6 @@ const ResultItem = React.forwardRef(
     },
     ref: React.Ref<HTMLDivElement>,
   ) => {
-    const classes = useStyles();
     const ancestors = React.useMemo(() => {
       if (!currentRootActionId) return action.ancestors;
       const index = action.ancestors.findIndex(
@@ -218,7 +199,20 @@ const ResultItem = React.forwardRef(
           cursor: "pointer",
         }}
       >
-        <div className={classes.resultItem}>
+        <Box
+          sx={{
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            fontSize: 14,
+            flex: 1,
+            justifyContent: "space-between",
+            "& .min-icon": {
+              width: "17px",
+              height: "17px",
+            },
+          }}
+        >
           <Box sx={{ height: "15px", width: "15px", marginRight: "36px" }}>
             {action.icon && action.icon}
           </Box>
@@ -272,7 +266,7 @@ const ResultItem = React.forwardRef(
           >
             <MenuExpandedIcon />
           </Box>
-        </div>
+        </Box>
         {action.shortcut?.length ? (
           <div
             aria-hidden

web-app/src/screens/Console/Common/ComponentsScreen.tsx

@@ -15,20 +15,19 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { DialogContentText, Grid } from "@mui/material";
-import PageLayout from "./Layout/PageLayout";
-import SectionTitle from "./SectionTitle";
-import { Button, ConfirmDeleteIcon } from "mds";
+import { Button, ConfirmDeleteIcon, PageLayout, SectionTitle, Grid } from "mds";
 import ConfirmDialog from "./ModalWrapper/ConfirmDialog";
 import PageHeaderWrapper from "./PageHeaderWrapper/PageHeaderWrapper";
 
 const ComponentsScreen = () => {
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
   return (
     <Fragment>
       <PageHeaderWrapper label={"Components"} />
+
       <PageLayout>
-        <Grid container spacing={1}>
+        <Grid container>
           <Grid item xs={12}>
             <SectionTitle>Confirm Dialogs</SectionTitle>
           </Grid>
@@ -58,10 +57,10 @@ const ComponentsScreen = () => {
                 setDialogOpen(false);
               }}
               confirmationContent={
-                <DialogContentText>
+                <Fragment>
                   Are you sure you want to delete bucket <b>bucket</b>
                   ? <br />A bucket can only be deleted if it's empty.
-                </DialogContentText>
+                </Fragment>
               }
             />
           </Grid>

web-app/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx

@@ -15,87 +15,46 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { InputAdornment, OutlinedInput } from "@mui/material";
-import withStyles from "@mui/styles/withStyles";
-import { Theme } from "@mui/material/styles";
-import { Button, CopyIcon } from "mds";
-import createStyles from "@mui/styles/createStyles";
+import { Box, Button, CopyIcon, InputLabel, ReadBox } from "mds";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { fieldBasic } from "../FormComponents/common/styleLibrary";
-import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
+import { useAppDispatch } from "../../../../store";
+import { setModalSnackMessage } from "../../../../systemSlice";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    container: {
-      display: "flex",
-      flexFlow: "column",
-      padding: "20px 0 8px 0",
-    },
-    inputWithCopy: {
-      "& .MuiInputBase-root ": {
-        width: "100%",
-        background: "#FBFAFA",
-        "& .MuiInputBase-input": {
-          height: ".8rem",
-        },
-        "& .MuiInputAdornment-positionEnd": {
-          marginRight: ".5rem",
-          "& .MuiButtonBase-root": {
-            height: "2rem",
-          },
-        },
-      },
-      "& .MuiButtonBase-root .min-icon": {
-        width: ".8rem",
-        height: ".8rem",
-      },
-    },
-    inputLabel: {
-      ...fieldBasic.inputLabel,
-      fontSize: ".8rem",
-    },
-  });
+interface ICredentialsItem {
+  label?: string;
+  value?: string;
+}
+
+const CredentialItem = ({ label = "", value = "" }: ICredentialsItem) => {
+  const dispatch = useAppDispatch();
 
-const CredentialItem = ({
-  label = "",
-  value = "",
-  classes = {},
-}: {
-  label: string;
-  value: string;
-  classes: any;
-}) => {
   return (
-    <div className={classes.container}>
-      <div className={classes.inputLabel}>{label}:</div>
-      <div className={classes.inputWithCopy}>
-        <OutlinedInput
-          value={value}
-          readOnly
-          endAdornment={
-            <InputAdornment position="end">
-              <TooltipWrapper tooltip={"Copy"}>
-                <CopyToClipboard text={value}>
-                  <Button
-                    id={"copy-clipboard"}
-                    aria-label="copy"
-                    onClick={() => {}}
-                    onMouseDown={() => {}}
-                    style={{
-                      width: "28px",
-                      height: "28px",
-                      padding: "0px",
-                    }}
-                    icon={<CopyIcon />}
-                  />
-                </CopyToClipboard>
-              </TooltipWrapper>
-            </InputAdornment>
-          }
-        />
-      </div>
-    </div>
+    <Box sx={{ marginTop: 12 }}>
+      <InputLabel>{label}</InputLabel>
+      <ReadBox
+        actionButton={
+          <CopyToClipboard text={value}>
+            <Button
+              id={"copy-path"}
+              variant="regular"
+              onClick={() => {
+                dispatch(setModalSnackMessage(`${label} copied to clipboard`));
+              }}
+              style={{
+                marginRight: "5px",
+                width: "28px",
+                height: "28px",
+                padding: "0px",
+              }}
+              icon={<CopyIcon />}
+            />
+          </CopyToClipboard>
+        }
+      >
+        {value}
+      </ReadBox>
+    </Box>
   );
 };
 
-export default withStyles(styles)(CredentialItem);
+export default CredentialItem;