From 99cf3b378f012b5c53bd9033fdb9c7148e173684 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:22:47 -0600 Subject: [PATCH] Removed MUI dependencies from console (#3126) - Updated DateTime Selector - Updated last dependency functions - Removed mui theming tools Signed-off-by: Benjamin Perez --- portal-ui/package.json | 9 +- portal-ui/src/StyleHandler.tsx | 19 +- .../Objects/ListObjects/RewindEnable.tsx | 53 +- .../DateRangeSelector/DateRangeSelector.tsx | 137 +- .../DateTimePickerWrapper.tsx | 351 --- .../FormComponents/common/styleLibrary.ts | 66 - .../Prometheus/Widgets/BarChartWidget.tsx | 1 - .../screens/Console/License/LicensePlans.tsx | 24 +- portal-ui/src/theme/main.ts | 144 -- portal-ui/tests/permissions-9/rewind.ts | 2 + portal-ui/tests/utils/elements.ts | 4 + portal-ui/yarn.lock | 2253 +++++++---------- 12 files changed, 1025 insertions(+), 2038 deletions(-) delete mode 100644 portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx delete mode 100644 portal-ui/src/theme/main.ts diff --git a/portal-ui/package.json b/portal-ui/package.json index 8011b0671..cb73237a8 100644 --- a/portal-ui/package.json +++ b/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", diff --git a/portal-ui/src/StyleHandler.tsx b/portal-ui/src/StyleHandler.tsx index d1285e6de..5cf2fa4c2 100644 --- a/portal-ui/src/StyleHandler.tsx +++ b/portal-ui/src/StyleHandler.tsx @@ -15,24 +15,13 @@ // along with this program. If not, see . import React, { Fragment } from "react"; -import { - StyledEngineProvider, - Theme, - ThemeProvider, -} from "@mui/material/styles"; -import theme from "./theme/main"; +import { GlobalStyles, ThemeHandler } from "mds"; 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 ( - - - {children} - - + {children} ); }; diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx index f322e0e60..5c0ad34f5 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx +++ b/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}`} > - - + (dateTime ? setDateSelected(dateTime) : null)} id="rewind-selector" label="Rewind to" + timeFormat={"24h"} + secondsSelector={false} disabled={!rewindEnableButton} /> - - + {rewindEnabled && ( - - ) => { - setRewindEnableButton(e.target.checked); - }} - label={"Current Status"} - indicatorLabels={["Enabled", "Disabled"]} - /> - + ) => { + setRewindEnableButton(e.target.checked); + }} + label={"Current Status"} + indicatorLabels={["Enabled", "Disabled"]} + /> )} - +