Migrated Site Replication Pages (#3011)

- Improved & Simplified UI elements

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

Author: bexsoft

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

@@ -32,6 +32,7 @@ import {
   PageLayout,
   RadioGroup,
   Switch,
+  SectionTitle,
 } from "mds";
 import { k8sScalarUnitsExcluding } from "../../../../../common/utils";
 import { AppState, useAppDispatch } from "../../../../../store";
@@ -44,7 +45,6 @@ import {
 } from "../../../../../systemSlice";
 import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import TooltipWrapper from "../../../Common/TooltipWrapper/TooltipWrapper";
-import SectionTitle from "../../../Common/SectionTitle";
 import {
   resetForm,
   setEnableObjectLocking,
@@ -277,7 +277,7 @@ const AddBucket = () => {
               <Box sx={{ margin: "10px 0" }}>
                 <BucketNamingRules errorList={validationResult} />
               </Box>
-              <SectionTitle>Features</SectionTitle>
+              <SectionTitle separator>Features</SectionTitle>
               <Box sx={{ marginTop: 10 }}>
                 {!distributedSetup && (
                   <Fragment>

portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx

@@ -15,13 +15,21 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import Grid from "@mui/material/Grid";
-import { Box, LinearProgress } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import { BackLink, Button, ClustersIcon, HelpBox, PageLayout } from "mds";
+import {
+  BackLink,
+  Button,
+  ClustersIcon,
+  HelpBox,
+  PageLayout,
+  Box,
+  Grid,
+  ProgressBar,
+  InputLabel,
+  SectionTitle,
+} from "mds";
 import useApi from "../../Common/Hooks/useApi";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
-import SectionTitle from "../../Common/SectionTitle";
 import {
   setErrorSnackMessage,
   setHelpName,
@@ -58,17 +66,18 @@ const isEmptyValue = (value: string): boolean => {
 const TableHeader = () => {
   return (
     <React.Fragment>
-      <Box
-        sx={{
-          fontSize: "14px",
-          marginLeft: "5px",
-        }}
-      >
-        Site Name
+      <Box>
+        <InputLabel>Site Name</InputLabel>
+      </Box>
+      <Box>
+        <InputLabel>Endpoint {"*"}</InputLabel>
+      </Box>
+      <Box>
+        <InputLabel>Access Key {"*"}</InputLabel>
+      </Box>
+      <Box>
+        <InputLabel>Secret Key {"*"}</InputLabel>
       </Box>
-      <Box sx={{ fontSize: "14px", marginLeft: "5px" }}>Endpoint {"*"}</Box>
-      <Box sx={{ fontSize: "14px", marginLeft: "5px" }}>Access Key {"*"}</Box>
-      <Box sx={{ fontSize: "14px", marginLeft: "5px" }}>Secret Key {"*"}</Box>
       <Box> </Box>
     </React.Fragment>
   );
@@ -272,10 +281,10 @@ const AddReplicationSites = () => {
       >
         <SiteTypeHeader title={"This Site"} />
         <Box
+          withBorders
           sx={{
             display: "grid",
             gridTemplateColumns: ".8fr 1.2fr .8fr .8fr .2fr",
-            border: "1px solid #eaeaea",
             padding: "15px",
             gap: "10px",
             maxHeight: "430px",
@@ -330,10 +339,10 @@ const AddReplicationSites = () => {
       >
         <SiteTypeHeader title={"Peer Sites"} />
         <Box
+          withBorders
           sx={{
             display: "grid",
             gridTemplateColumns: ".8fr 1.2fr .8fr .8fr .2fr",
-            border: "1px solid #eaeaea",
             padding: "15px",
             gap: "10px",
             maxHeight: "430px",
@@ -421,11 +430,11 @@ const AddReplicationSites = () => {
           }}
         >
           <Box>
-            <SectionTitle icon={<ClustersIcon />}>
+            <SectionTitle separator icon={<ClustersIcon />}>
               Add Sites for Replication
             </SectionTitle>
 
-            {isSiteInfoLoading || isAdding ? <LinearProgress /> : null}
+            {isSiteInfoLoading || isAdding ? <ProgressBar /> : null}
 
             <Box
               sx={{
@@ -526,17 +535,6 @@ const AddReplicationSites = () => {
                     flexFlow: "column",
                     fontSize: "14px",
                     flex: "2",
-                    "& .step-number": {
-                      color: "#ffffff",
-                      height: "25px",
-                      width: "25px",
-                      background: "#081C42",
-                      marginRight: "10px",
-                      textAlign: "center",
-                      fontWeight: 600,
-                      borderRadius: "50%",
-                    },
-
                     "& li": {
                       fontSize: "14px",
                       display: "flex",
@@ -547,15 +545,6 @@ const AddReplicationSites = () => {
                       "&.step-text": {
                         fontWeight: 400,
                       },
-                      "&:before": {
-                        content: "' '",
-                        height: "7px",
-                        width: "7px",
-                        backgroundColor: "#2781B0",
-                        marginRight: "10px",
-                        marginTop: "12px",
-                        flexShrink: 0,
-                      },
                     },
                   }}
                 >

portal-ui/src/screens/Console/Configurations/SiteReplication/EditSiteEndPoint.tsx

@@ -15,42 +15,32 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Button, EditIcon } from "mds";
-import { Box, DialogContentText } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { Box, Button, EditIcon, Grid, InputBox, InputLabel } from "mds";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import useApi from "../../Common/Hooks/useApi";
 import {
   setErrorSnackMessage,
   setSnackBarMessage,
 } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import withStyles from "@mui/styles/withStyles";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import {
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
+import styled from "styled-components";
+import get from "lodash/get";
+
+const SiteEndpointContainer = styled.div(({ theme }) => ({
+  "& .alertText": {
+    color: get(theme, "signalColors.danger", "#C51B3F"),
+  },
+}));
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalStyleUtils,
-    ...formFieldStyles,
-    ...spacingUtils,
-  });
 const EditSiteEndPoint = ({
   editSite = {},
   onClose,
   onComplete,
-  classes = {},
 }: {
   editSite: any;
   onClose: () => void;
   onComplete: () => void;
-  classes: any;
 }) => {
   const dispatch = useAppDispatch();
   const [editEndPointName, setEditEndPointName] = useState<string>("");
@@ -99,7 +89,7 @@ const EditSiteEndPoint = ({
       titleIcon={<EditIcon />}
       onClose={onClose}
     >
-      <DialogContentText>
+      <SiteEndpointContainer>
         <Box
           sx={{
             display: "flex",
@@ -118,8 +108,8 @@ const EditSiteEndPoint = ({
         </Box>
 
         <Grid item xs={12}>
-          <Box sx={{ marginBottom: "5px" }}> New Endpoint:</Box>
-          <InputBoxWrapper
+          <InputLabel sx={{ marginBottom: 5 }}>New Endpoint:</InputLabel>
+          <InputBox
             id="edit-rep-peer-endpoint"
             name="edit-rep-peer-endpoint"
             placeholder={"https://dr.minio-storage:9000"}
@@ -130,31 +120,32 @@ const EditSiteEndPoint = ({
             value={editEndPointName}
           />
         </Grid>
-        <Grid item xs={12} marginBottom={"15px"}>
-          <Box
-            sx={{
-              fontStyle: "italic",
-              display: "flex",
-              alignItems: "center",
-              fontSize: "12px",
-              marginTop: 2,
-            }}
-          >
-            <Box sx={{ fontWeight: 600 }}>Note:</Box>{" "}
-            <Box sx={{ marginLeft: 1, color: "red" }}>
-              Access Key and Secret Key should be same on the new site/endpoint.
-            </Box>
-          </Box>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            marginBottom: 15,
+            fontStyle: "italic",
+            display: "flex",
+            alignItems: "center",
+            fontSize: "12px",
+            marginTop: 2,
+          }}
+        >
+          <strong>Note:</strong>&nbsp;
+          <span className={"alertText"}>
+            Access Key and Secret Key should be same on the new site/endpoint.
+          </span>
         </Grid>
-      </DialogContentText>
+      </SiteEndpointContainer>
 
-      <Grid item xs={12} className={classes.modalButtonBar}>
+      <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
         <Button
           id={"close"}
           type="button"
           variant="regular"
           onClick={onClose}
-          label={"Close"}
+          label={"Cancel"}
         />
         <Button
           id={"update"}
@@ -168,4 +159,4 @@ const EditSiteEndPoint = ({
     </ModalWrapper>
   );
 };
-export default withStyles(styles)(EditSiteEndPoint);
+export default EditSiteEndPoint;

portal-ui/src/screens/Console/Configurations/SiteReplication/EntityReplicationLookup.tsx

@@ -15,10 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Box, Grid } from "@mui/material";
-import { Button, ClustersIcon, Loader } from "mds";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import {
+  Box,
+  breakPoints,
+  Button,
+  ClustersIcon,
+  Grid,
+  Loader,
+  Select,
+  InputBox,
+} from "mds";
 import useApi from "../../Common/Hooks/useApi";
 import { StatsResponseType } from "./SiteReplicationStatus";
 import BucketEntityStatus from "./LookupStatus/BucketEntityStatus";
@@ -67,10 +73,12 @@ const EntityReplicationLookup = () => {
         sx={{
           display: "grid",
           alignItems: "center",
-          gridTemplateColumns: {
-            md: ".7fr .9fr 1.2fr .3fr",
-            sm: "1.2fr .7fr .7fr .3fr",
-            xs: "1fr",
+          gridTemplateColumns: ".7fr .9fr 1.2fr .3fr",
+          [`@media (max-width: ${breakPoints.sm}px)`]: {
+            gridTemplateColumns: "1fr",
+          },
+          [`@media (max-width: ${breakPoints.md}px)`]: {
+            gridTemplateColumns: "1.2fr .7fr .7fr .3fr",
           },
           gap: "15px",
         }}
@@ -80,17 +88,17 @@ const EntityReplicationLookup = () => {
         </Box>
         <Box
           sx={{
-            marginLeft: {
-              md: "-25px",
-              xs: "0px",
+            marginLeft: -25,
+            [`@media (max-width: ${breakPoints.sm}px)`]: {
+              marginLeft: 0,
             },
           }}
         >
-          <SelectWrapper
+          <Select
             id="replicationEntityLookup"
             name="replicationEntityLookup"
-            onChange={(e) => {
-              setEntityType(e.target.value);
+            onChange={(value) => {
+              setEntityType(value);
               setStatsLoaded(false);
             }}
             label=""
@@ -122,7 +130,7 @@ const EntityReplicationLookup = () => {
             flex: 2,
           }}
         >
-          <InputBoxWrapper
+          <InputBox
             id="replicationLookupEntityValue"
             name="replicationLookupEntityValue"
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -159,10 +167,12 @@ const EntityReplicationLookup = () => {
         <Grid
           item
           xs={12}
-          display={"flex"}
-          alignItems={"center"}
-          justifyContent={"center"}
-          marginTop={"45px"}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginTop: 45,
+          }}
         >
           <Loader style={{ width: 25, height: 25 }} />
         </Grid>