mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed MUI dependencies from console (#3126)

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

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-11-14 10:22:47 -06:00
committed by GitHub
parent 78293eab62
commit 99cf3b378f
12 changed files with 1025 additions and 2038 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
portal-ui/package.json
View File

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

19
portal-ui/src/StyleHandler.tsx
View File

@@ -15,24 +15,13 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
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 (
<Fragment>
<GlobalStyles />
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<ThemeHandler customTheme={thm}>{children}</ThemeHandler>
</ThemeProvider>
</StyledEngineProvider>
<ThemeHandler customTheme={thm}>{children}</ThemeHandler>
</Fragment>
);
};

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

@@ -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}>
<DateTimePickerWrapper
<FormLayout withBorders={false} containerPadding={false}>
<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
value="status"
id="status"
name="status"
checked={rewindEnableButton}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setRewindEnableButton(e.target.checked);
}}
label={"Current Status"}
indicatorLabels={["Enabled", "Disabled"]}
/>
</Grid>
<Switch
value="status"
id="status"
name="status"
checked={rewindEnableButton}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setRewindEnableButton(e.target.checked);
}}
label={"Current Status"}
indicatorLabels={["Enabled", "Disabled"]}
/>
)}
<Grid
item
xs={12}
style={{ justifyContent: "flex-end", display: "flex" }}
>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
type="button"
variant="callAction"
@@ -131,12 +133,13 @@ const RewindEnable = ({
}
/>
</Grid>
{rewindEnabling && (
<Grid item xs={12}>
<ProgressBar />
</Grid>
)}
</Grid>
</FormLayout>
</ModalWrapper>
);
};

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

@@ -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
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",
}}
>
{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>
<DateTimeInput
value={timeStart}
onChange={setTimeStart}
id="stTime"
secondsSelector={false}
pickerStartComponent={
<Fragment>
<TimeIcon />
<span>{startLabel}</span>
</Fragment>
}
/>
<DateTimeInput
value={timeEnd}
onChange={setTimeEnd}
id="endTime"
secondsSelector={false}
pickerStartComponent={
<Fragment>
<TimeIcon />
<span>{endLabel}</span>
</Fragment>
}
/>
</Box>
{triggerSync && (

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

@@ -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);

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

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

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

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

24
portal-ui/src/screens/Console/License/LicensePlans.tsx
View File

@@ -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 = useMediaQuery(theme.breakpoints.down("sm"));
const [isSmallScreen, setIsSmallScreen] = useState<boolean>(
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"

144
portal-ui/src/theme/main.ts
View File

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

2
portal-ui/tests/permissions-9/rewind.ts
View File

@@ -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);
})

4
portal-ui/tests/utils/elements.ts
View File

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

2253
portal-ui/yarn.lock
View File

File diff suppressed because it is too large Load Diff