Removed MUI dependencies from console (#3126)

- Updated DateTime Selector
- Updated last dependency functions
- Removed mui theming tools

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

portal-ui/package.json

@@ -5,19 +5,12 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.122",
-    "@mui/material": "^5.12.1",
-    "@mui/styles": "^5.12.0",
-    "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^1.9.6",
     "kbar": "^0.1.0-beta.39",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.4.3",
-    "mds": "https://github.com/minio/mds.git#v0.11.1",
+    "mds": "https://github.com/minio/mds.git#v0.12.1",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",

portal-ui/src/StyleHandler.tsx

@@ -15,24 +15,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import {
+import { GlobalStyles, ThemeHandler } from "mds";
-  StyledEngineProvider,
-  Theme,
-  ThemeProvider,
-} from "@mui/material/styles";
-import theme from "./theme/main";
 import "react-virtualized/styles.css";
 
 import { generateOverrideTheme } from "./utils/stylesUtils";
 import "./index.css";
 import { useSelector } from "react-redux";
 import { AppState } from "./store";
-import { GlobalStyles, ThemeHandler } from "mds";
-
-declare module "@mui/styles/defaultTheme" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
-}
 
 interface IStyleHandler {
   children: React.ReactNode;
@@ -53,11 +42,7 @@ const StyleHandler = ({ children }: IStyleHandler) => {
   return (
     <Fragment>
       <GlobalStyles />
-      <StyledEngineProvider injectFirst>
+      <ThemeHandler customTheme={thm}>{children}</ThemeHandler>
-        <ThemeProvider theme={theme}>
-          <ThemeHandler customTheme={thm}>{children}</ThemeHandler>
-        </ThemeProvider>
-      </StyledEngineProvider>
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx

@@ -16,16 +16,23 @@
 
 import React, { useEffect, useState } from "react";
 import { DateTime } from "luxon";
-import { Button, Grid, ProgressBar, Switch } from "mds";
+import {
+  Button,
+  DateTimeInput,
+  FormLayout,
+  Grid,
+  ProgressBar,
+  Switch,
+} from "mds";
 import { useSelector } from "react-redux";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
-import DateTimePickerWrapper from "../../../../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
 import { AppState, useAppDispatch } from "../../../../../../store";
 import {
   resetRewind,
   setReloadObjectsList,
   setRewindEnable,
 } from "../../../../ObjectBrowser/objectBrowserSlice";
+import { modalStyleUtils } from "../../../../Common/FormComponents/common/styleLibrary";
 
 interface IRewindEnable {
   closeModalAndRefresh: () => void;
@@ -88,36 +95,31 @@ const RewindEnable = ({
       }}
       title={`Rewind - ${bucketName}`}
     >
-      <Grid item xs={12}>
+      <FormLayout withBorders={false} containerPadding={false}>
-        <DateTimePickerWrapper
+        <DateTimeInput
           value={dateSelected}
           onChange={(dateTime) => (dateTime ? setDateSelected(dateTime) : null)}
           id="rewind-selector"
           label="Rewind to"
+          timeFormat={"24h"}
+          secondsSelector={false}
           disabled={!rewindEnableButton}
         />
-      </Grid>
+
-      <Grid container>
         {rewindEnabled && (
-          <Grid item xs={12} sx={{ marginBottom: "10px" }}>
+          <Switch
-            <Switch
+            value="status"
-              value="status"
+            id="status"
-              id="status"
+            name="status"
-              name="status"
+            checked={rewindEnableButton}
-              checked={rewindEnableButton}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setRewindEnableButton(e.target.checked);
-                setRewindEnableButton(e.target.checked);
+            }}
-              }}
+            label={"Current Status"}
-              label={"Current Status"}
+            indicatorLabels={["Enabled", "Disabled"]}
-              indicatorLabels={["Enabled", "Disabled"]}
+          />
-            />
-          </Grid>
         )}
-        <Grid
+        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
-          item
-          xs={12}
-          style={{ justifyContent: "flex-end", display: "flex" }}
-        >
           <Button
             type="button"
             variant="callAction"
@@ -131,12 +133,13 @@ const RewindEnable = ({
             }
           />
         </Grid>
+
         {rewindEnabling && (
           <Grid item xs={12}>
             <ProgressBar />
           </Grid>
         )}
-      </Grid>
+      </FormLayout>
     </ModalWrapper>
   );
 };

portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx

@@ -14,18 +14,17 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, { Fragment } from "react";
 import {
   Button,
-  OpenListIcon,
   SyncIcon,
   Grid,
   Box,
   breakPoints,
   TimeIcon,
+  DateTimeInput,
 } from "mds";
 import { DateTime } from "luxon";
-import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper";
 
 interface IDateRangeSelector {
   timeStart: DateTime | null;
@@ -38,23 +37,6 @@ interface IDateRangeSelector {
   endLabel?: string;
 }
 
-const DateFilterAdornIcon = () => {
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        "& .min-icon": {
-          width: "10px",
-          height: "10px",
-        },
-      }}
-    >
-      <OpenListIcon />
-    </Box>
-  );
-};
-
 const DateRangeSelector = ({
   timeStart,
   setTimeStart,
@@ -119,11 +101,13 @@ const DateRangeSelector = ({
           gap: "5px",
         }}
       >
-        <Box sx={{ fontSize: "14px", fontWeight: 500, marginRight: "5px" }}>
+        <Box
+          sx={{ fontSize: "14px", fontWeight: 500, marginRight: "5px" }}
+          className={"muted"}
+        >
           {label}
         </Box>
         <Box
-          withBorders
           customBorderPadding={"0px"}
           sx={{
             display: "grid",
@@ -139,91 +123,30 @@ const DateRangeSelector = ({
             },
           }}
         >
-          <Box
+          <DateTimeInput
-            sx={{
+            value={timeStart}
-              display: "grid",
+            onChange={setTimeStart}
-              height: 30,
+            id="stTime"
-              alignItems: "center",
+            secondsSelector={false}
-              gridTemplateColumns: "12px auto 1fr",
+            pickerStartComponent={
-              gap: 5,
+              <Fragment>
-            }}
+                <TimeIcon />
-          >
+                <span>{startLabel}</span>
-            <Box
+              </Fragment>
-              sx={{
+            }
-                display: "flex",
+          />
-                alignItems: "center",
+          <DateTimeInput
-                "& .min-icon": {
+            value={timeEnd}
-                  width: "10px",
+            onChange={setTimeEnd}
-                  height: "10px",
+            id="endTime"
-                  fill: "#B4B5B4",
+            secondsSelector={false}
-                },
+            pickerStartComponent={
-              }}
+              <Fragment>
-            >
+                <TimeIcon />
-              <TimeIcon />
+                <span>{endLabel}</span>
-            </Box>
+              </Fragment>
-            <Box
+            }
-              sx={{
+          />
-                fontSize: "12px",
-                marginLeft: "8px",
-              }}
-            >
-              {startLabel}
-            </Box>
-            <Box>
-              <DateTimePickerWrapper
-                value={timeStart}
-                onChange={setTimeStart}
-                id="stTime"
-                classNamePrefix={"filter-date-"}
-                forFilterContained
-                noInputIcon={true}
-                openPickerIcon={DateFilterAdornIcon}
-              />
-            </Box>
-          </Box>
-
-          <Box
-            sx={{
-              display: "grid",
-              height: 30,
-              alignItems: "center",
-              gridTemplateColumns: "12px auto 1fr",
-              gap: 5,
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                "& .min-icon": {
-                  width: "10px",
-                  height: "10px",
-                  fill: "#B4B5B4",
-                },
-              }}
-            >
-              <TimeIcon />
-            </Box>
-            <Box
-              sx={{
-                fontSize: "12px",
-                marginLeft: "8px",
-              }}
-            >
-              {endLabel}
-            </Box>
-            <Box>
-              <DateTimePickerWrapper
-                value={timeEnd}
-                onChange={setTimeEnd}
-                id="endTime"
-                classNamePrefix={"filter-date-"}
-                forFilterContained
-                noInputIcon={true}
-                openPickerIcon={DateFilterAdornIcon}
-              />
-            </Box>
-          </Box>
         </Box>
 
         {triggerSync && (

portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx

@@ -1,351 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2022 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import React, { Fragment } from "react";
-import { DateTime } from "luxon";
-import { HelpIcon, OpenListIcon, Grid, InputLabel, Tooltip, Box } from "mds";
-import { TextField } from "@mui/material";
-import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
-import InputAdornment from "@mui/material/InputAdornment";
-import ScheduleIcon from "@mui/icons-material/Schedule";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
-
-interface IDateTimePicker {
-  value: DateTime | null;
-  onChange: (value: DateTime | null) => void;
-  classes: any;
-  forSearchBlock?: boolean;
-  forFilterContained?: boolean;
-  label?: string;
-  required?: boolean;
-  tooltip?: string;
-  id: string;
-  disabled?: boolean;
-  noInputIcon?: boolean;
-  classNamePrefix?: string;
-  openPickerIcon?: any;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    dateSelectorOverride: {
-      height: 40,
-      border: "#EAEDEE 1px solid",
-      marginLeft: 15,
-      backgroundColor: "#fff",
-      padding: "0 16px",
-      borderRadius: 5,
-      "&.MuiInput-underline:hover:not(.Mui-disabled):before": {
-        borderBottom: 0,
-      },
-      "&:hover": {
-        borderColor: "#000",
-        "&:before, &:after": {
-          borderColor: "transparent",
-          borderBottom: 0,
-        },
-      },
-      "&:before, &:after": {
-        borderColor: "transparent",
-        borderBottom: 0,
-      },
-      "& input": {
-        fontSize: 12,
-        fontWeight: 600,
-        color: "#393939",
-      },
-    },
-    dateSelectorFilterOverride: {
-      width: 180,
-      height: 42,
-      marginLeft: 20,
-      padding: 0,
-      borderRadius: 5,
-      "&.MuiInput-underline:hover:not(.Mui-disabled):before": {
-        borderBottom: 0,
-      },
-      "&:hover": {
-        "&:before, &:after": {
-          borderColor: "transparent",
-          borderBottom: 0,
-        },
-      },
-      "&:before, &:after": {
-        borderColor: "transparent",
-        borderBottom: 0,
-      },
-      "& input": {
-        fontSize: 12,
-        fontWeight: "bold",
-        color: "#081C42",
-      },
-      "@media (max-width: 900px)": {
-        width: 103,
-      },
-    },
-    dateSelectorFormOverride: {
-      width: "100%",
-      maxWidth: 840,
-    },
-    parentDateOverride: {
-      flexGrow: 1,
-    },
-    textBoxContainer: {
-      width: "calc(100% - 190px)",
-    },
-    openListIcon: {
-      color: "#9D9E9D",
-      width: 8,
-      marginTop: 2,
-    },
-    paperOverride: {
-      "& .MuiCalendarPicker-root": {
-        padding: "0 22px",
-        "& > div": {
-          padding: 0,
-          "& > div > div.PrivatePickersFadeTransitionGroup-root:first-of-type":
-            {
-              color: "#0A224C",
-              fontWeight: "bold",
-            },
-          "& > div > div.PrivatePickersFadeTransitionGroup-root:last-of-type": {
-            color: "#9D9E9D",
-            "& +  button.MuiButtonBase-root": {
-              color: "#9D9E9D",
-            },
-          },
-          "& > div:nth-child(2)": {
-            "& > div": {
-              width: 0,
-            },
-            "& > button.MuiButtonBase-root": {
-              color: "#0A224C",
-            },
-          },
-        },
-      },
-      "& .MuiTypography-root.MuiTypography-caption": {
-        width: 26,
-        height: 26,
-        margin: 5,
-        color: "#BCBCBC",
-        fontSize: 10,
-      },
-      "& button.MuiPickersDay-root": {
-        fontWeight: "bold",
-        width: 26,
-        height: 26,
-        margin: 5,
-        textAlign: "center",
-        "&.Mui-selected": {
-          backgroundColor: theme.palette.primary.main,
-          color: "#fff",
-        },
-      },
-      "& div.MuiPickersDay-hiddenDaySpacingFiller": {
-        width: 26,
-        height: 26,
-        margin: 5,
-      },
-      "& div.PrivatePickersSlideTransition-root": {
-        minHeight: 240,
-      },
-      "& div.MuiCalendarPicker-viewTransitionContainer": {
-        borderTop: "#F0F3F5 1px solid",
-      },
-      "& .MuiClockPicker-arrowSwitcher": {
-        marginRight: 10,
-        marginTop: -1,
-        "& > div": {
-          width: 0,
-        },
-        "& > button.MuiButtonBase-root": {
-          color: "#0A224C",
-        },
-        "& + div > div": {
-          width: 255,
-          height: 255,
-          backgroundColor: "#fff",
-          marginTop: 30,
-          marginBottom: 14,
-          border: "#F0F3F5 3px solid",
-          "& > div:nth-child(2)": {
-            backgroundColor: "#B4B5B4",
-            width: 12,
-            height: 12,
-            "&::before": {
-              content: "' '",
-              width: 35,
-              height: 35,
-              display: "block",
-              position: "absolute",
-              border: "#F0F3F5 3px solid",
-              top: -12,
-              left: -12,
-              borderRadius: "100%",
-            },
-          },
-          "& > div:nth-child(3)": {
-            backgroundColor: "#B4B5B4",
-            width: 4,
-          },
-          "& > div:last-of-type": {
-            marginTop: 15,
-            "& > span": {
-              color: "#0A224C",
-              "&.Mui-selected": {
-                color: "#fff",
-              },
-              "&[aria-label='1 hours'], &[aria-label='2 hours'], &[aria-label='3 hours'], &[aria-label='4 hours'], &[aria-label='5 hours'], &[aria-label='6 hours'], &[aria-label='7 hours'], &[aria-label='8 hours'], &[aria-label='9 hours'], &[aria-label='10 hours'], &[aria-label='11 hours'], &[aria-label='12 hours']":
-                {
-                  fontWeight: "bold",
-                  fontSize: 20,
-                  marginTop: -1,
-                },
-            },
-          },
-        },
-      },
-    },
-    ...fieldBasic,
-    ...tooltipHelper,
-  });
-
-const DateTimePickerWrapper = ({
-  value,
-  onChange,
-  classes,
-  forSearchBlock = false,
-  forFilterContained = false,
-  label,
-  tooltip = "",
-  required,
-  id,
-  disabled = false,
-  noInputIcon = false,
-  classNamePrefix = "",
-  openPickerIcon,
-}: IDateTimePicker) => {
-  let adornment = {};
-
-  if (!noInputIcon) {
-    adornment = {
-      startAdornment: (
-        <InputAdornment position="start">
-          <ScheduleIcon />
-        </InputAdornment>
-      ),
-    };
-  }
-
-  if (forFilterContained) {
-    adornment = {
-      endAdornment: (
-        <InputAdornment position="end">
-          <OpenListIcon className={classes.openListIcon} />
-        </InputAdornment>
-      ),
-    };
-  }
-
-  const classOverridden = `${classNamePrefix}date-time-input  ${
-    forSearchBlock ? classes.dateSelectorOverride : ""
-  } ${
-    forFilterContained && !forSearchBlock
-      ? classes.dateSelectorFilterOverride
-      : ""
-  }`;
-
-  const clsName = forSearchBlock
-    ? classes.parentDateOverride
-    : classes.dateSelectorFormOverride;
-
-  const inputItem = (
-    <LocalizationProvider dateAdapter={AdapterLuxon}>
-      <DateTimePicker
-        value={value}
-        onChange={onChange}
-        InputProps={{
-          ...adornment,
-          className: classOverridden,
-        }}
-        components={{
-          OpenPickerIcon: openPickerIcon,
-        }}
-        label=""
-        className={clsName}
-        disabled={disabled}
-        renderInput={(props: any) => (
-          <TextField id={id} variant="standard" {...props} disabled />
-        )}
-        ampm={false}
-        PopperProps={{
-          className: classes.paperOverride,
-        }}
-        inputFormat={"LL/dd/yyyy HH:mm"}
-      />
-    </LocalizationProvider>
-  );
-
-  if (forSearchBlock) {
-    return inputItem;
-  }
-
-  const containerCls = !forFilterContained ? classes.fieldContainer : "";
-  return (
-    <Fragment>
-      <Grid
-        item
-        xs={12}
-        className={`${containerCls} ${classNamePrefix}input-field-container`}
-        sx={{
-          display: "grid",
-          gridAutoColumns: "max-content",
-        }}
-      >
-        {label !== "" && (
-          <InputLabel htmlFor={id}>
-            <span>
-              {label}
-              {required ? "*" : ""}
-            </span>
-            {tooltip !== "" && (
-              <div className={classes.tooltipContainer}>
-                <Tooltip tooltip={tooltip} placement="top">
-                  <div className={classes.tooltip}>
-                    <HelpIcon />
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </InputLabel>
-        )}
-
-        <Box
-          className={`${classes.textBoxContainer} ${classNamePrefix}input-wrapper`}
-        >
-          {inputItem}
-        </Box>
-      </Grid>
-    </Fragment>
-  );
-};
-
-export default withStyles(styles)(DateTimePickerWrapper);

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -19,55 +19,6 @@
 import { breakPoints } from "mds";
 import get from "lodash/get";
 
-const inputLabelBase = {
-  fontWeight: 600,
-  marginRight: 10,
-  fontSize: 14,
-  color: "#07193E",
-  textAlign: "left" as const,
-  overflow: "hidden",
-  alignItems: "center",
-  display: "flex",
-  "& span": {
-    display: "flex",
-    alignItems: "center",
-  },
-};
-
-export const fieldBasic: any = {
-  inputLabel: {
-    ...inputLabelBase,
-    minWidth: 160,
-  },
-  noMinWidthLabel: {
-    ...inputLabelBase,
-  },
-  fieldLabelError: {
-    paddingBottom: 22,
-  },
-  fieldContainer: {
-    marginBottom: 20,
-    position: "relative" as const,
-    display: "flex" as const,
-    flexWrap: "wrap",
-    "@media (max-width: 600px)": {
-      flexFlow: "column",
-    },
-  },
-  tooltipContainer: {
-    marginLeft: 5,
-    display: "flex",
-    alignItems: "center",
-    "& .min-icon": {
-      width: 13,
-    },
-  },
-  switchContainer: {
-    display: "flex",
-    maxWidth: 840,
-  },
-};
-
 export const modalBasic = {
   formScrollable: {
     maxHeight: "calc(100vh - 300px)" as const,
@@ -96,24 +47,7 @@ export const modalBasic = {
   },
 };
 
-export const tooltipHelper = {
-  tooltip: {
-    "& .min-icon": {
-      width: 13,
-    },
-  },
-};
-
 export const actionsTray = {
-  label: {
-    color: "#07193E",
-    fontSize: 13,
-    alignSelf: "center" as const,
-    whiteSpace: "nowrap" as const,
-    "&:not(:first-of-type)": {
-      marginLeft: 10,
-    },
-  },
   actionsTray: {
     display: "flex" as const,
     justifyContent: "space-between" as const,

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/BarChartWidget.tsx

@@ -111,7 +111,6 @@ const BarChartWidget = ({
     const handleWindowResize = () => {
       let extMD = false;
       if (window.innerWidth >= breakPoints.md) {
-        console.log("Bigger");
         extMD = true;
       }
       setBiggerThanMd(extMD);

portal-ui/src/screens/Console/License/LicensePlans.tsx

@@ -26,10 +26,7 @@ import {
   ConsoleStandard,
   LicenseDocIcon,
 } from "mds";
-import { useTheme } from "@mui/material/styles";
 import { SubnetInfo } from "./types";
-
-import useMediaQuery from "@mui/material/useMediaQuery";
 import {
   COMMUNITY_PLAN_FEATURES,
   ENTERPRISE_PLAN_FEATURES,
@@ -207,8 +204,25 @@ const PricingFeatureItem = (props: {
 };
 
 const LicensePlans = ({ licenseInfo }: IRegisterStatus) => {
-  const theme = useTheme();
+  const [isSmallScreen, setIsSmallScreen] = useState<boolean>(
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    window.innerWidth >= breakPoints.sm,
+  );
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      let extMD = false;
+      if (window.innerWidth >= breakPoints.sm) {
+        extMD = true;
+      }
+      setIsSmallScreen(extMD);
+    };
+
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
 
   let currentPlan = !licenseInfo
     ? "community"

portal-ui/src/theme/main.ts

@@ -1,144 +0,0 @@
-import { createTheme } from "@mui/material";
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      light: "#073052",
-      main: "#081C42",
-      dark: "#05122B",
-      contrastText: "#fff",
-    },
-    secondary: {
-      light: "#ff7961",
-      main: "#f44336",
-      dark: "#ba000d",
-      contrastText: "#000",
-    },
-    grey: {
-      100: "#f0f0f0",
-      200: "#e6e6e6",
-      300: "#cccccc",
-      400: "#999999",
-      500: "#8c8c8c",
-      600: "#737373",
-      700: "#666666",
-      800: "#4d4d4d",
-      900: "#333333",
-    },
-    background: {
-      default: "#fff",
-    },
-    success: {
-      main: "#4ccb92",
-    },
-    warning: {
-      main: "#FFBD62",
-    },
-    error: {
-      light: "#e03a48",
-      main: "#C83B51",
-      contrastText: "#fff",
-    },
-  },
-  typography: {
-    fontFamily: ["Inter", "sans-serif"].join(","),
-    h1: {
-      fontWeight: "bold",
-      color: "#081C42",
-    },
-    h2: {
-      fontWeight: "bold",
-      color: "#081C42",
-    },
-    h3: {
-      fontWeight: "bold",
-      color: "#081C42",
-    },
-    h4: {
-      fontWeight: "bold",
-      color: "#081C42",
-    },
-    h5: {
-      fontWeight: "bold",
-      color: "#081C42",
-    },
-    h6: {
-      fontWeight: "bold",
-      color: "#000000",
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: "none",
-          borderRadius: 3,
-          height: 40,
-          padding: "0 20px",
-          fontSize: 14,
-          fontWeight: 600,
-          boxShadow: "none",
-          "& .min-icon": {
-            maxHeight: 18,
-          },
-          "&.MuiButton-contained.Mui-disabled": {
-            backgroundColor: "#EAEDEE",
-            fontWeight: 600,
-            color: "#767676",
-          },
-          "& .MuiButton-iconSizeMedium > *:first-of-type": {
-            fontSize: 12,
-          },
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        elevation1: {
-          boxShadow: "none",
-          border: "#EAEDEE 1px solid",
-          borderRadius: 3,
-        },
-      },
-    },
-    MuiListItem: {
-      styleOverrides: {
-        root: {
-          "&.MuiListItem-root.Mui-selected": {
-            background: "inherit",
-            "& .MuiTypography-root": {
-              fontWeight: "bold",
-            },
-          },
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          textTransform: "none",
-        },
-      },
-    },
-  },
-  colors: {
-    link: "#2781B0",
-  },
-});
-
-declare module "@mui/material/styles" {
-  interface Theme {
-    colors: {
-      link: string;
-    };
-  }
-
-  // allow configuration using `createTheme`
-  interface ThemeOptions {
-    colors?: {
-      link?: string;
-    };
-  }
-}
-
-export default theme;

portal-ui/tests/permissions-9/rewind.ts

@@ -46,8 +46,10 @@ test
       .expect(elements.table.exists)
       .ok()
       .click(elements.rewindButton)
+      .click(elements.rewindToBaseInput)
       .expect(elements.rewindToInput.exists)
       .ok()
+      .click(elements.rewindToInput)
       .typeText(elements.rewindToInput, "01/01/2015 00:00")
       .click(elements.rewindDataButton);
   })

portal-ui/tests/utils/elements.ts

@@ -179,6 +179,10 @@ export const rewindButton = Selector("button").withAttribute(
   "id",
   "rewind-objects-list",
 );
+export const rewindToBaseInput = Selector("div").withAttribute(
+  "id",
+  "rewind-selector-DateTimeInput",
+);
 export const rewindToInput = Selector("input").withAttribute(
   "id",
   "rewind-selector",