diff --git a/web-app/src/StyleHandler.tsx b/web-app/src/StyleHandler.tsx index c6ad1274ab3..32ea9dd2343 100644 --- a/web-app/src/StyleHandler.tsx +++ b/web-app/src/StyleHandler.tsx @@ -48,18 +48,11 @@ const StyleHandler = ({ children }: IStyleHandler) => { let thm = theme; let globalBody: any = {}; - let rowColor: any = { color: "#393939" }; - let detailsListPanel: any = { backgroundColor: "#fff" }; if (colorVariants) { thm = generateOverrideTheme(colorVariants); globalBody = { backgroundColor: colorVariants.backgroundColor }; - rowColor = { color: colorVariants.fontColor }; - detailsListPanel = { - backgroundColor: colorVariants.backgroundColor, - color: colorVariants.fontColor, - }; } // Kept for Compatibility purposes. Once mds migration is complete then this will be removed @@ -69,12 +62,6 @@ const StyleHandler = ({ children }: IStyleHandler) => { body: { ...globalBody, }, - ".rowLine": { - ...rowColor, - }, - ".detailsListPanel": { - ...detailsListPanel, - }, }, })(() => null); diff --git a/web-app/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx b/web-app/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx deleted file mode 100644 index 76932787d28..00000000000 --- a/web-app/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx +++ /dev/null @@ -1,131 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . -import React from "react"; -import { Checkbox, Grid, InputLabel, Tooltip } from "@mui/material"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { - checkboxIcons, - fieldBasic, - tooltipHelper, -} from "../common/styleLibrary"; -import { HelpIcon } from "mds"; - -interface CheckBoxProps { - label: string; - classes: any; - onChange: (e: React.ChangeEvent) => void; - value: string | boolean; - id: string; - name: string; - disabled?: boolean; - tooltip?: string; - overrideLabelClasses?: string; - overrideCheckboxStyles?: React.CSSProperties; - index?: number; - noTopMargin?: boolean; - checked: boolean; - className?: string; -} - -const styles = (theme: Theme) => - createStyles({ - ...fieldBasic, - ...tooltipHelper, - ...checkboxIcons, - fieldContainer: { - ...fieldBasic.fieldContainer, - display: "flex", - justifyContent: "flex-start", - alignItems: "center", - margin: "15px 0", - marginBottom: 0, - flexBasis: "initial", - flexWrap: "nowrap", - }, - noTopMargin: { - marginTop: 0, - }, - }); - -const CheckboxWrapper = ({ - label, - onChange, - value, - id, - name, - checked = false, - disabled = false, - noTopMargin = false, - tooltip = "", - overrideLabelClasses = "", - overrideCheckboxStyles, - classes, - className, -}: CheckBoxProps) => { - return ( - - -
- } - icon={} - disabled={disabled} - disableRipple - disableFocusRipple - focusRipple={false} - centerRipple={false} - disableTouchRipple - style={overrideCheckboxStyles || {}} - /> -
- {label !== "" && ( - - {label} - {tooltip !== "" && ( -
- -
- -
-
-
- )} -
- )} -
-
- ); -}; - -export default withStyles(styles)(CheckboxWrapper); diff --git a/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx b/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx index 04b3966d374..59fb08c6047 100644 --- a/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx +++ b/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx @@ -15,34 +15,27 @@ // along with this program. If not, see . import React, { Fragment } from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { selectorTypes } from "../SelectWrapper/SelectWrapper"; -import { Menu, MenuItem } from "@mui/material"; +import { DropdownSelector, SelectorType } from "mds"; +import styled from "styled-components"; +import get from "lodash/get"; interface IInputUnitBox { - classes: any; id: string; unitSelected: string; - unitsList: selectorTypes[]; + unitsList: SelectorType[]; disabled?: boolean; onUnitChange?: (newValue: string) => void; } -const styles = (theme: Theme) => - createStyles({ - buttonTrigger: { - border: "#F0F2F2 1px solid", - borderRadius: 3, - color: "#838383", - backgroundColor: "#fff", - fontSize: 12, - }, - }); +const UnitMenuButton = styled.button(({ theme }) => ({ + border: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`, + borderRadius: 3, + color: get(theme, "secondaryText", "#5B5C5C"), + backgroundColor: get(theme, "boxBackground", "#FBFAFA"), + fontSize: 12, +})); const InputUnitMenu = ({ - classes, id, unitSelected, unitsList, @@ -63,46 +56,31 @@ const InputUnitMenu = ({ return ( - - { + + handleClose(value)} + hideTriggerAction={() => { handleClose(""); }} - anchorOrigin={{ - vertical: "bottom", - horizontal: "center", - }} - transformOrigin={{ - vertical: "top", - horizontal: "center", - }} - > - {unitsList.map((unit) => ( - handleClose(unit.value)} - key={`itemUnit-${unit.value}-${unit.label}`} - > - {unit.label} - - ))} - + open={open} + anchorEl={anchorEl} + anchorOrigin={"end"} + /> ); }; -export default withStyles(styles)(InputUnitMenu); +export default InputUnitMenu; diff --git a/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index eede6ea0220..4870f20f4db 100644 --- a/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -101,43 +101,6 @@ export const tooltipHelper = { }, }; -const checkBoxBasic = { - width: 16, - height: 16, - borderRadius: 2, -}; - -export const checkboxIcons = { - unCheckedIcon: { - ...checkBoxBasic, - border: "1px solid #c3c3c3", - boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)", - }, - checkedIcon: { - ...checkBoxBasic, - border: "1px solid #FFFFFF", - backgroundColor: "#4CCB92", - boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)", - width: 14, - height: 14, - marginLeft: 1, - "&:before": { - content: "''", - display: "block", - marginLeft: -2, - marginTop: -2, - width: 16, - height: 16, - top: 0, - bottom: 0, - left: 0, - right: 0, - borderRadius: 2, - border: "1px solid #ccc", - }, - }, -}; - const radioBasic = { width: 16, height: 16, @@ -244,65 +207,6 @@ export const searchField = { }, }; -export const predefinedList = { - prefinedContainer: { - display: "flex", - width: "100%", - alignItems: "center" as const, - margin: "15px 0 0", - }, - predefinedTitle: { - color: "rgba(0, 0, 0, 0.87)", - display: "flex" as const, - overflow: "hidden" as const, - fontSize: 14, - maxWidth: 160, - textAlign: "left" as const, - marginRight: 10, - flexGrow: 0, - fontWeight: "normal" as const, - }, - predefinedList: { - backgroundColor: "#fbfafa", - border: "#e5e5e5 1px solid", - padding: "12px 10px", - color: "#696969", - fontSize: 12, - fontWeight: 600, - minHeight: 41, - borderRadius: 4, - }, - innerContent: { - width: "100%", - overflowX: "auto" as const, - whiteSpace: "nowrap" as const, - scrollbarWidth: "none" as const, - "&::-webkit-scrollbar": { - display: "none", - }, - }, - innerContentMultiline: { - width: "100%", - maxHeight: 100, - overflowY: "auto" as const, - scrollbarWidth: "none" as const, - "&::-webkit-scrollbar": { - display: "none", - }, - }, - includesActionButton: { - paddingRight: 45, - position: "relative" as const, - }, - overlayShareOption: { - position: "absolute" as const, - width: 45, - right: 0, - top: "50%", - transform: "translate(0, -50%)", - }, -}; - // ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width. // "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)" @@ -501,13 +405,6 @@ export const inputFieldStyles = { }, }; -export const inlineCheckboxes = { - inlineCheckboxes: { - display: "flex", - justifyContent: "flex-start", - }, -}; - export const pageContentStyles = { contentSpacer: { padding: "2rem", @@ -670,14 +567,3 @@ export const modalStyleUtils: any = { paddingTop: 10, }, }; - -// These classes are meant to be used as React.CSSProperties for TableWrapper -export const TableRowPredefStyles: any = { - deleted: { - color: "#707070", - backgroundColor: "#f1f0f0", - "&.selected": { - color: "#b2b2b2", - }, - }, -}; diff --git a/web-app/src/screens/Console/Common/GenericWizard/GenericWizard.tsx b/web-app/src/screens/Console/Common/GenericWizard/GenericWizard.tsx deleted file mode 100644 index 812a7a67e9f..00000000000 --- a/web-app/src/screens/Console/Common/GenericWizard/GenericWizard.tsx +++ /dev/null @@ -1,256 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . - -import React, { Fragment, useState } from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IWizardMain } from "./types"; -import WizardPage from "./WizardPage"; -import { Grid, List } from "@mui/material"; -import ListItem from "@mui/material/ListItem"; -import ListItemText from "@mui/material/ListItemText"; - -const styles = (theme: Theme) => - createStyles({ - wizFromContainer: {}, - wizFromModal: { - position: "relative", - }, - modalWizardSteps: { - padding: 5, - borderBottom: "#eaeaea 1px solid", - "& ul": { - padding: 0, - marginTop: 0, - display: "flex", - justifyContent: "space-evenly", - - "& li": { - listStyle: "lower-roman", - "&::marker": { - paddingLeft: 15, - }, - }, - }, - }, - buttonList: { - backgroundColor: "transparent", - border: "none", - cursor: "pointer", - "&:not(:disabled):hover": { - textDecoration: "underline", - }, - "&:selected, &:active, &:focus, &:focus:active": { - border: "none", - outline: 0, - boxShadow: "none", - }, - }, - paddedContentGrid: { - marginTop: 8, - padding: "0 10px", - minHeight: 400, - }, - stepsLabel: { - fontSize: 20, - color: "#393939", - fontWeight: 600, - margin: "15px 12px", - "&.stepsModalTitle": { - textAlign: "center", - width: "100%", - marginTop: 0, - marginBottom: 10, - }, - }, - stepsMasterContainer: { - position: "sticky", - top: 0, - backgroundColor: "#FFFFFF", - width: "100%", - maxHeight: 90, - }, - verticalSteps: { - borderRight: "1px solid #E5E5E5", - background: "#F8F8F8", - }, - stepsContainer: { - paddingTop: 0, - "& .MuiButtonBase-root.Mui-selected": { - background: "#E5E5E5", - }, - }, - stepItem: { - minHeight: 60, - borderBottom: "1px solid #E5E5E5", - "&:hover": { - background: "rgba(247,247,247,0.7)", - }, - }, - }); - -const GenericWizard = ({ - classes, - wizardSteps, - loadingStep, - forModal, -}: IWizardMain) => { - const [currentStep, setCurrentStep] = useState(0); - - const pageChange = (toElement: string | number) => { - const lastPage = wizardSteps.length - 1; - - if (toElement === "++") { - let nextPage = currentStep + 1; - - if (nextPage > lastPage) { - nextPage = lastPage; - } - - setCurrentStep(nextPage); - } - - if (toElement === "--") { - let prevPage = currentStep - 1; - - if (prevPage < 0) { - prevPage = 0; - } - - setCurrentStep(prevPage); - } - - if (typeof toElement === "number") { - let pg = toElement; - if (toElement < 0) { - pg = 0; - } - - if (toElement > lastPage) { - pg = lastPage; - } - - setCurrentStep(pg); - } - }; - - if (wizardSteps.length === 0) { - return null; - } - - const stepsList = () => { - return ( - - - {wizardSteps.map((step, index) => { - return ( - pageChange(index)} - key={`wizard-${index.toString()}`} - selected={currentStep === index} - classes={{ - root: classes.stepItem, - }} - > - - - ); - })} - - - ); - }; - const stepsListModal = () => { - return ( -
    - {wizardSteps.map((step, index) => { - return ( -
  • - -
  • - ); - })} -
- ); - }; - - return ( - - {forModal ? ( - -
-
Steps
-
{stepsListModal()}
-
-
- ) : ( - - - {stepsList()} - - - )} - - - - -
- ); -}; - -export default withStyles(styles)(GenericWizard); diff --git a/web-app/src/screens/Console/Common/GenericWizard/WizardPage.tsx b/web-app/src/screens/Console/Common/GenericWizard/WizardPage.tsx deleted file mode 100644 index b530936df2a..00000000000 --- a/web-app/src/screens/Console/Common/GenericWizard/WizardPage.tsx +++ /dev/null @@ -1,130 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . - -import React from "react"; -import { Theme } from "@mui/material/styles"; -import { Button } from "mds"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IWizardButton, IWizardPage } from "./types"; -import { LinearProgress } from "@mui/material"; - -const styles = (theme: Theme) => - createStyles({ - wizardStepContainer: { - display: "flex", - flexDirection: "column", - flex: 1, - }, - wizardComponent: { - overflowY: "auto", - marginBottom: 10, - height: "calc(100vh - 100px - 80px)", - minHeight: 400, - flex: 1, - width: "100%", - }, - wizardModal: { - overflowY: "auto", - marginBottom: 10, - height: "calc(100vh - 515px)", - }, - buttonsContainer: { - display: "flex", - flexDirection: "row", - justifyContent: "flex-start" as const, - padding: "10px 0", - borderTop: "#EAEAEA 1px solid", - "& button": { - marginLeft: 10, - }, - "&.forModal": { - paddingBottom: 0, - }, - }, - buttonInnerContainer: { - width: "100%", - display: "flex", - justifyContent: "flex-end", - marginRight: 15, - }, - }); - -const WizardPage = ({ - classes, - page, - pageChange, - loadingStep, - forModal, -}: IWizardPage) => { - const buttonAction = (btn: IWizardButton) => { - switch (btn.type) { - case "next": - pageChange("++"); - break; - case "back": - pageChange("--"); - break; - case "to": - pageChange(btn.toPage || 0); - break; - case "custom": - default: - } - - if (btn.action) { - btn.action(pageChange); - } - }; - - return ( -
-
- {page.componentRender} -
- {loadingStep && ( -
- -
- )} -
-
- {page.buttons.map((btn) => { - if (btn.componentRender) { - return btn.componentRender; - } - return ( -
-
-
- ); -}; - -export default withStyles(styles)(WizardPage); diff --git a/web-app/src/screens/Console/Common/GenericWizard/types.ts b/web-app/src/screens/Console/Common/GenericWizard/types.ts deleted file mode 100644 index 863193bec90..00000000000 --- a/web-app/src/screens/Console/Common/GenericWizard/types.ts +++ /dev/null @@ -1,47 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . - -export interface IWizardButton { - label?: string; - type?: string; - action?: (nextFunction: (to: string | number) => void) => void; - enabled?: boolean; - toPage?: number; - componentRender?: React.ReactNode; -} - -export interface IWizardElement { - label: string; - componentRender: any; - buttons: IWizardButton[]; - advancedOnly?: boolean; - loadingStep?: boolean; -} - -export interface IWizardMain { - classes: any; - loadingStep?: boolean; - wizardSteps: IWizardElement[]; - forModal?: boolean; -} - -export interface IWizardPage { - classes: any; - page: IWizardElement; - pageChange: (to: string | number) => void; - loadingStep?: boolean; - forModal?: boolean; -} diff --git a/web-app/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx b/web-app/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx index 4befdc99441..a79ac218ffd 100644 --- a/web-app/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx +++ b/web-app/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx @@ -15,32 +15,23 @@ // along with this program. If not, see . import React from "react"; -import { - Dialog, - DialogActions, - DialogContent, - DialogTitle, -} from "@mui/material"; -import { Button } from "mds"; -import IconButton from "@mui/material/IconButton"; -import CloseIcon from "@mui/icons-material/Close"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { deleteDialogStyles } from "../FormComponents/common/styleLibrary"; -import { ButtonProps } from "../../types"; +import { Box, Button, ModalBox } from "mds"; -const styles = (theme: Theme) => - createStyles({ - ...deleteDialogStyles, - }); +interface ButtonProps { + label?: string; + variant?: "regular" | "callAction" | "secondary"; + icon?: React.ReactNode; + iconLocation?: "start" | "end"; + fullWidth?: boolean; + disabled?: boolean; + onClick?: React.MouseEventHandler; +} type ConfirmDialogProps = { isOpen?: boolean; onClose: () => void; onCancel?: () => void; onConfirm: () => void; - classes?: any; title: string; isLoading?: boolean; confirmationContent: React.ReactNode | React.ReactNode[]; @@ -59,7 +50,6 @@ const ConfirmDialog = ({ onClose, onCancel, onConfirm, - classes = {}, title = "", isLoading, confirmationContent, @@ -71,41 +61,22 @@ const ConfirmDialog = ({ confirmationButtonSimple = false, }: ConfirmDialogProps) => { return ( - { - if (reason !== "backdropClick") { - onClose(); // close on Esc but not on click outside - } - }} - className={classes.root} - sx={{ - "& .MuiPaper-root": { - padding: "1rem 2rem 2rem 1rem", - }, - }} + customMaxWidth={510} > - -
- {titleIcon} {title} -
-
- - - -
-
- - - {confirmationContent} - - + {confirmationContent} +
+ + ); }; -export default withStyles(styles)(ConfirmDialog); +export default ConfirmDialog; diff --git a/web-app/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx b/web-app/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx index 16c65dc531e..09c2e551fd4 100644 --- a/web-app/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx +++ b/web-app/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx @@ -15,55 +15,32 @@ // along with this program. If not, see . import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; -import IconButton from "@mui/material/IconButton"; -import Snackbar from "@mui/material/Snackbar"; -import { Dialog, DialogContent, DialogTitle } from "@mui/material"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { - deleteDialogStyles, - snackBarCommon, -} from "../FormComponents/common/styleLibrary"; +import { ModalBox, Snackbar } from "mds"; +import { CSSObject } from "styled-components"; import { AppState, useAppDispatch } from "../../../../store"; -import CloseIcon from "@mui/icons-material/Close"; -import MainError from "../MainError/MainError"; import { setModalSnackMessage } from "../../../../systemSlice"; +import MainError from "../MainError/MainError"; interface IModalProps { - classes: any; onClose: () => void; modalOpen: boolean; title: string | React.ReactNode; children: any; wideLimit?: boolean; - noContentPadding?: boolean; titleIcon?: React.ReactNode; + iconColor?: "default" | "delete" | "accept"; + sx?: CSSObject; } -const styles = (theme: Theme) => - createStyles({ - ...deleteDialogStyles, - content: { - padding: 25, - paddingBottom: 0, - }, - customDialogSize: { - width: "100%", - maxWidth: 765, - }, - ...snackBarCommon, - }); - const ModalWrapper = ({ onClose, modalOpen, title, children, - classes, wideLimit = true, - noContentPadding, titleIcon = null, + iconColor = "default", + sx, }: IModalProps) => { const dispatch = useAppDispatch(); const [openSnackbar, setOpenSnackbar] = useState(false); @@ -94,14 +71,6 @@ const ModalWrapper = ({ dispatch(setModalSnackMessage("")); }; - const customSize = wideLimit - ? { - classes: { - paper: classes.customDialogSize, - }, - } - : { maxWidth: "lg" as const, fullWidth: true }; - let message = ""; if (modalSnackMessage) { @@ -115,60 +84,28 @@ const ModalWrapper = ({ } return ( - { - if (reason !== "backdropClick") { - onClose(); // close on Esc but not on click outside - } - }} - className={classes.root} + title={title} + titleIcon={titleIcon} + widthLimit={wideLimit} + sx={sx} + iconColor={iconColor} > - -
- {titleIcon} {title} -
-
- - - -
-
- { - closeSnackBar(); - }} message={message} - ContentProps={{ - className: `${classes.snackBar} ${ - modalSnackMessage && modalSnackMessage.type === "error" - ? classes.errorSnackBar - : "" - }`, - }} - autoHideDuration={ - modalSnackMessage && modalSnackMessage.type === "error" ? 10000 : 5000 - } + mode={"inline"} + variant={modalSnackMessage.type === "error" ? "error" : "default"} + autoHideDuration={modalSnackMessage.type === "error" ? 10 : 5} + condensed /> - - {children} - -
+ {children} + ); }; -export default withStyles(styles)(ModalWrapper); +export default ModalWrapper; diff --git a/web-app/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx b/web-app/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx deleted file mode 100644 index 9614ba8a44e..00000000000 --- a/web-app/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . - -import React from "react"; -import Grid from "@mui/material/Grid"; -import { Theme } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -interface IScreenTitle { - icon?: any; - title?: any; - subTitle?: any; - actions?: any; - className?: any; -} - -const useStyles = makeStyles((theme: Theme) => ({ - headerBarIcon: { - marginRight: ".7rem", - color: theme.palette.primary.main, - "& .min-icon": { - width: 44, - height: 44, - }, - "@media (max-width: 600px)": { - display: "none", - }, - }, - headerBarSubheader: { - color: "grey", - "@media (max-width: 900px)": { - maxWidth: 200, - }, - }, - stContainer: { - display: "flex", - alignItems: "center", - justifyContent: "space-between", - padding: 8, - - borderBottom: "1px solid #EAEAEA", - "@media (max-width: 600px)": { - flexFlow: "column", - }, - }, - titleColumn: { - height: "auto", - justifyContent: "center", - display: "flex", - flexFlow: "column", - alignItems: "flex-start", - "& h1": { - fontSize: 19, - }, - }, - leftItems: { - display: "flex", - alignItems: "center", - "@media (max-width: 600px)": { - flexFlow: "column", - width: "100%", - }, - }, - rightItems: { - display: "flex", - alignItems: "center", - "& button": { - marginLeft: 8, - }, - "@media (max-width: 600px)": { - width: "100%", - }, - }, -})); - -const ScreenTitle = ({ - icon, - title, - subTitle, - actions, - className, -}: IScreenTitle) => { - const classes = useStyles(); - return ( - - -
- {icon ?
{icon}
: null} -
-

{title}

- {subTitle} -
-
- -
{actions}
-
-
- ); -}; - -export default ScreenTitle; diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableActionButton.tsx b/web-app/src/screens/Console/Common/TableWrapper/TableActionButton.tsx deleted file mode 100644 index d5e7e91d4e8..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableActionButton.tsx +++ /dev/null @@ -1,161 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . -import React from "react"; -import isString from "lodash/isString"; -import { Link } from "react-router-dom"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IconButton, Tooltip } from "@mui/material"; -import CloudIcon from "./TableActionIcons/CloudIcon"; -import ConsoleIcon from "./TableActionIcons/ConsoleIcon"; -import DisableIcon from "./TableActionIcons/DisableIcon"; -import FormatDriveIcon from "./TableActionIcons/FormatDriveIcon"; -import { - DownloadIcon, - EditIcon, - IAMPoliciesIcon, - PreviewIcon, - ShareIcon, - TrashIcon, -} from "mds"; - -const styles = () => - createStyles({ - spacing: { - margin: "0 8px", - }, - buttonDisabled: { - "&.MuiButtonBase-root.Mui-disabled": { - cursor: "not-allowed", - filter: "grayscale(100%)", - opacity: "30%", - }, - }, - }); - -interface IActionButton { - label?: string; - type: string | React.ReactNode; - onClick?: (id: string) => any; - to?: string; - valueToSend: any; - selected: boolean; - sendOnlyId?: boolean; - idField: string; - disabled: boolean; - classes: any; -} - -const defineIcon = (type: string, selected: boolean) => { - switch (type) { - case "view": - return ; - case "edit": - return ; - case "delete": - return ; - case "description": - return ; - case "share": - return ; - case "cloud": - return ; - case "console": - return ; - case "download": - return ; - case "disable": - return ; - case "format": - return ; - case "preview": - return ; - } - - return null; -}; - -const TableActionButton = ({ - type, - onClick, - valueToSend, - idField, - selected, - to, - sendOnlyId = false, - disabled = false, - classes, - label, -}: IActionButton) => { - const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend; - - const icon = typeof type === "string" ? defineIcon(type, selected) : type; - let buttonElement = ( - { - e.stopPropagation(); - if (!disabled) { - onClick(valueClick); - } else { - e.preventDefault(); - } - } - : () => null - } - sx={{ - width: "30px", - height: "30px", - }} - > - {icon} - - ); - - if (label && label !== "") { - buttonElement = {buttonElement}; - } - - if (onClick) { - return buttonElement; - } - - if (isString(to)) { - if (!disabled) { - return ( - { - e.stopPropagation(); - }} - > - {buttonElement} - - ); - } - - return buttonElement; - } - - return null; -}; - -export default withStyles(styles)(TableActionButton); diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx b/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx deleted file mode 100644 index 167ee39b9f9..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { IIcon, selected, unSelected } from "./common"; - -const CloudIcon = ({ active = false }: IIcon) => { - return ( - - - - ); -}; - -export default CloudIcon; diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx b/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx deleted file mode 100644 index 22e3872d25e..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { IIcon, selected, unSelected } from "./common"; - -const ConsoleIcon = ({ active = false }: IIcon) => { - return ( - - - - ); -}; - -export default ConsoleIcon; diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx b/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx deleted file mode 100644 index 40d8ba4e45e..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { IIcon, selected, unSelected } from "./common"; - -const DescriptionIcon = ({ active = false }: IIcon) => { - return ( - - - - ); -}; - -export default DescriptionIcon; diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx b/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx deleted file mode 100644 index d5b038223da..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { SVGProps } from "react"; - -const FormatDriveIcon = (props: SVGProps) => ( - - - -); - -export default FormatDriveIcon; diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts b/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts deleted file mode 100644 index a21aba53087..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface IIcon { - active: boolean; -} - -export const unSelected = "#081C42"; -export const selected = "#081C42"; diff --git a/web-app/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/web-app/src/screens/Console/Common/TableWrapper/TableWrapper.tsx deleted file mode 100644 index 5d3792c427f..00000000000 --- a/web-app/src/screens/Console/Common/TableWrapper/TableWrapper.tsx +++ /dev/null @@ -1,822 +0,0 @@ -// This file is part of MinIO Operator -// Copyright (c) 2021 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 . -import React, { Fragment, useState } from "react"; -import { - Checkbox, - Grid, - IconButton, - LinearProgress, - Paper, - Popover, - Typography, -} from "@mui/material"; -import { useNavigate } from "react-router-dom"; -import { AutoSizer, Column, InfiniteLoader, Table } from "react-virtualized"; -import get from "lodash/get"; -import isString from "lodash/isString"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import ViewColumnIcon from "@mui/icons-material/ViewColumn"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; -import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; -import TableActionButton from "./TableActionButton"; -import CheckboxWrapper from "../FormComponents/CheckboxWrapper/CheckboxWrapper"; -import { - checkboxIcons, - radioIcons, - TableRowPredefStyles, -} from "../FormComponents/common/styleLibrary"; -import { Loader } from "mds"; -import TooltipWrapper from "../TooltipWrapper/TooltipWrapper"; - -//Interfaces for table Items - -export interface ItemActions { - label?: string; - type: string | any; - to?: string; - sendOnlyId?: boolean; - disableButtonFunction?: (itemValue: any) => boolean; - showLoaderFunction?: (itemValue: any) => boolean; - - onClick?(valueToSend: any): any; -} - -interface IColumns { - label: string; - elementKey?: string; - renderFunction?: (input: any) => any; - renderFullObject?: boolean; - globalClass?: any; - rowClass?: any; - width?: number; - headerTextAlign?: string; - contentTextAlign?: string; - enableSort?: boolean; -} - -interface IInfiniteScrollConfig { - loadMoreRecords: (indexElements: { - startIndex: number; - stopIndex: number; - }) => Promise; - recordsCount: number; -} - -interface ISortConfig { - triggerSort: (val: any) => any; - currentSort: string; - currentDirection: "ASC" | "DESC" | undefined; -} - -interface TableWrapperProps { - itemActions?: ItemActions[] | null; - columns: IColumns[]; - onSelect?: (e: React.ChangeEvent) => any; - idField: string; - isLoading: boolean; - loadingMessage?: React.ReactNode; - records: any[]; - classes: any; - entityName: string; - selectedItems?: string[]; - radioSelection?: boolean; - customEmptyMessage?: string; - customPaperHeight?: string; - noBackground?: boolean; - columnsSelector?: boolean; - textSelectable?: boolean; - columnsShown?: string[]; - onColumnChange?: (column: string, state: boolean) => any; - autoScrollToBottom?: boolean; - infiniteScrollConfig?: IInfiniteScrollConfig; - sortConfig?: ISortConfig; - disabled?: boolean; - onSelectAll?: () => void; - rowStyle?: ({ - index, - }: { - index: number; - }) => "deleted" | "" | React.CSSProperties; - parentClassName?: string; - tooltip?: any; -} - -const borderColor = "#9c9c9c80"; - -const styles = () => - createStyles({ - paper: { - display: "flex", - overflow: "auto", - flexDirection: "column", - padding: "0 16px 8px", - boxShadow: "none", - border: "#EAEDEE 1px solid", - borderRadius: 3, - minHeight: 200, - overflowY: "scroll", - position: "relative", - "&::-webkit-scrollbar": { - width: 0, - height: 3, - }, - }, - noBackground: { - backgroundColor: "transparent", - border: 0, - }, - disabled: { - backgroundColor: "#fbfafa", - color: "#cccccc", - }, - defaultPaperHeight: { - height: "calc(100vh - 205px)", - }, - loadingBox: { - paddingTop: "100px", - paddingBottom: "100px", - }, - overlayColumnSelection: { - position: "absolute", - right: 0, - top: 0, - }, - popoverContent: { - maxHeight: 250, - overflowY: "auto", - padding: "0 10px 10px", - }, - shownColumnsLabel: { - color: "#9c9c9c", - fontSize: 12, - padding: 10, - borderBottom: "#eaeaea 1px solid", - width: "100%", - }, - checkAllWrapper: { - marginTop: -16, - }, - "@global": { - ".rowLine": { - borderBottom: `1px solid ${borderColor}`, - height: 40, - fontSize: 14, - transitionDuration: 0.3, - "&:focus": { - outline: "initial", - }, - "&:hover:not(.ReactVirtualized__Table__headerRow)": { - userSelect: "none", - backgroundColor: "#ececec", - fontWeight: 600, - "&.canClick": { - cursor: "pointer", - }, - "&.canSelectText": { - userSelect: "text", - }, - }, - "& .selected": { - fontWeight: 600, - }, - "&:not(.deleted) .selected": { - color: "#081C42", - }, - "&.deleted .selected": { - color: "#C51B3F", - }, - }, - ".headerItem": { - userSelect: "none", - fontWeight: 700, - fontSize: 14, - fontStyle: "initial", - display: "flex", - alignItems: "center", - outline: "none", - }, - ".ReactVirtualized__Table__row": { - width: "100% !important", - }, - ".ReactVirtualized__Table__headerRow": { - fontWeight: 700, - fontSize: 14, - borderColor: "#39393980", - textTransform: "initial", - }, - ".optionsAlignment": { - textAlign: "center", - "& .min-icon": { - width: 16, - height: 16, - }, - }, - ".text-center": { - textAlign: "center", - }, - ".text-right": { - textAlign: "right", - }, - ".progress-enabled": { - paddingTop: 3, - display: "inline-block", - margin: "0 10px", - position: "relative", - width: 18, - height: 18, - }, - ".progress-enabled > .MuiCircularProgress-root": { - position: "absolute", - left: 0, - top: 3, - }, - }, - ...checkboxIcons, - ...radioIcons, - }); - -const selectWidth = 45; - -// Function to render elements in table -const subRenderFunction = ( - rowData: any, - column: IColumns, - isSelected: boolean, -) => { - const itemElement = isString(rowData) - ? rowData - : get(rowData, column.elementKey!, null); // If the element is just a string, we render it as it is - const renderConst = column.renderFullObject ? rowData : itemElement; - - const renderElement = column.renderFunction - ? column.renderFunction(renderConst) - : renderConst; // If render function is set, we send the value to the function. - - return ( - - {renderElement} - - ); -}; - -// Function to calculate common column width for elements with no with size -const calculateColumnRest = ( - columns: IColumns[], - containerWidth: number, - actionsWidth: number, - hasSelect: boolean, - hasActions: boolean, - columnsSelector: boolean, - columnsShown: string[], -) => { - let colsItems = [...columns]; - - if (columnsSelector) { - colsItems = columns.filter((column) => - columnsShown.includes(column.elementKey!), - ); - } - - let initialValue = containerWidth; - - if (hasSelect) { - initialValue -= selectWidth; - } - - if (hasActions) { - initialValue -= actionsWidth; - } - - let freeSpacing = colsItems.reduce((total, currValue) => { - return currValue.width ? total - currValue.width : total; - }, initialValue); - - return freeSpacing / colsItems.filter((el) => !el.width).length; -}; - -// Function that renders Columns in table -const generateColumnsMap = ( - columns: IColumns[], - containerWidth: number, - actionsWidth: number, - hasSelect: boolean, - hasActions: boolean, - selectedItems: string[], - idField: string, - columnsSelector: boolean, - columnsShown: string[], - sortColumn: string, - sortDirection: "ASC" | "DESC" | undefined, -) => { - const commonRestWidth = calculateColumnRest( - columns, - containerWidth, - actionsWidth, - hasSelect, - hasActions, - columnsSelector, - columnsShown, - ); - return columns.map((column: IColumns, index: number) => { - if (columnsSelector && !columnsShown.includes(column.elementKey!)) { - return null; - } - - const disableSort = column.enableSort ? !column.enableSort : true; - - return ( - // @ts-ignore - ( - - {sortColumn === column.elementKey && ( - - {sortDirection === "ASC" ? ( - - ) : ( - - )} - - )} - {column.label} - - )} - className={ - column.contentTextAlign ? `text-${column.contentTextAlign}` : "" - } - cellRenderer={({ rowData }) => { - const isSelected = selectedItems - ? selectedItems.includes( - isString(rowData) ? rowData : rowData[idField], - ) - : false; - return subRenderFunction(rowData, column, isSelected); - }} - width={column.width || commonRestWidth} - disableSort={disableSort} - defaultSortDirection={"ASC"} - /> - ); - }); -}; - -// Function to render the action buttons -const elementActions = ( - actions: ItemActions[], - valueToSend: any, - selected: boolean, - idField: string, -) => { - return actions.map((action: ItemActions, index: number) => { - if (action.type === "view") { - return null; - } - - const vlSend = - typeof valueToSend === "string" ? valueToSend : valueToSend[idField]; - - let disabled = false; - - if (action.disableButtonFunction) { - if (action.disableButtonFunction(vlSend)) { - disabled = true; - } - } - - if (action.showLoaderFunction) { - if (action.showLoaderFunction(vlSend)) { - return ( -
- -
- ); - } - } - - return ( - - ); - }); -}; - -// Function to calculate the options column width according elements inside -const calculateOptionsSize = (containerWidth: number, totalOptions: number) => { - const minContainerSize = 80; - const sizeOptions = totalOptions * 45 + 15; - - if (sizeOptions < minContainerSize) { - return minContainerSize; - } - - if (sizeOptions > containerWidth) { - return containerWidth; - } - - return sizeOptions; -}; - -// Main function to render the Table Wrapper -const TableWrapper = ({ - itemActions, - columns, - onSelect, - records, - isLoading, - loadingMessage = Loading..., - entityName, - selectedItems, - idField, - classes, - radioSelection = false, - customEmptyMessage = "", - customPaperHeight = "", - noBackground = false, - columnsSelector = false, - textSelectable = false, - columnsShown = [], - onColumnChange = (column: string, state: boolean) => {}, - infiniteScrollConfig, - sortConfig, - autoScrollToBottom = false, - disabled = false, - onSelectAll, - rowStyle, - parentClassName = "", - tooltip, -}: TableWrapperProps) => { - const navigate = useNavigate(); - - const [columnSelectorOpen, setColumnSelectorOpen] = useState(false); - const [anchorEl, setAnchorEl] = React.useState(null); - - const findView = itemActions - ? itemActions.find((el) => el.type === "view") - : null; - - const clickAction = (rowItem: any) => { - if (findView) { - const valueClick = findView.sendOnlyId ? rowItem[idField] : rowItem; - - let disabled = false; - - if (findView.disableButtonFunction) { - if (findView.disableButtonFunction(valueClick)) { - disabled = true; - } - } - - if (findView.to && !disabled) { - navigate(`${findView.to}/${valueClick}`); - return; - } - - if (findView.onClick && !disabled) { - findView.onClick(valueClick); - } - } - }; - - const openColumnsSelector = (event: { currentTarget: any }) => { - setColumnSelectorOpen(!columnSelectorOpen); - setAnchorEl(event.currentTarget); - }; - - const closeColumnSelector = () => { - setColumnSelectorOpen(false); - setAnchorEl(null); - }; - - const columnsSelection = (columns: IColumns[]) => { - return ( - - - - - -
Shown Columns
-
- {columns.map((column: IColumns) => { - return ( - { - onColumnChange(column.elementKey!, e.target.checked); - }} - id={`chbox-${column.label}`} - name={`chbox-${column.label}`} - value={column.label} - /> - ); - })} -
-
-
- ); - }; - - return ( - - - - {isLoading && ( - - - {loadingMessage} - - - - - - )} - {columnsSelector && !isLoading && records.length > 0 && ( -
- {columnsSelection(columns)} -
- )} - {records && !isLoading && records.length > 0 ? ( - // @ts-ignore - !!records[index]} - loadMoreRows={ - infiniteScrollConfig - ? infiniteScrollConfig.loadMoreRecords - : () => new Promise(() => true) - } - rowCount={ - infiniteScrollConfig - ? infiniteScrollConfig.recordsCount - : records.length - } - > - {({ onRowsRendered, registerChild }) => ( - // @ts-ignore - - {({ width, height }: any) => { - const optionsWidth = calculateOptionsSize( - width, - itemActions - ? itemActions.filter((el) => el.type !== "view").length - : 0, - ); - const hasSelect: boolean = !!(onSelect && selectedItems); - const hasOptions: boolean = !!( - (itemActions && itemActions.length > 1) || - (itemActions && - itemActions.length === 1 && - itemActions[0].type !== "view") - ); - return ( - // @ts-ignore - ( - - {customEmptyMessage !== "" - ? customEmptyMessage - : `There are no ${entityName} yet.`} - - )} - overscanRowCount={10} - rowHeight={40} - width={width} - rowCount={records.length} - rowGetter={({ index }) => records[index]} - onRowClick={({ rowData }) => { - clickAction(rowData); - }} - rowClassName={(r) => - `rowLine ${findView ? "canClick" : ""} ${ - !findView && textSelectable ? "canSelectText" : "" - } ${rowStyle ? rowStyle(r) : ""}` - } - onRowsRendered={onRowsRendered} - sort={sortConfig ? sortConfig.triggerSort : undefined} - sortBy={sortConfig ? sortConfig.currentSort : undefined} - sortDirection={ - sortConfig ? sortConfig.currentDirection : undefined - } - scrollToIndex={ - autoScrollToBottom ? records.length - 1 : -1 - } - rowStyle={(r) => { - if (rowStyle) { - const returnElement = rowStyle(r); - - if (typeof returnElement === "string") { - return get( - TableRowPredefStyles, - returnElement, - {}, - ); - } - - return returnElement; - } - - return {}; - }} - > - {hasSelect && ( - // @ts-ignore - ( - - {onSelectAll ? ( -
- -
- ) : ( - Select - )} -
- )} - dataKey={`select-${idField}`} - width={selectWidth} - disableSort - cellRenderer={({ rowData }) => { - const isSelected = selectedItems - ? selectedItems.includes( - isString(rowData) - ? rowData - : rowData[idField], - ) - : false; - - return ( - { - e.stopPropagation(); - }} - checkedIcon={ - - } - icon={ - - } - /> - ); - }} - /> - )} - {generateColumnsMap( - columns, - width, - optionsWidth, - hasSelect, - hasOptions, - selectedItems || [], - idField, - columnsSelector, - columnsShown, - sortConfig ? sortConfig.currentSort : "", - sortConfig ? sortConfig.currentDirection : undefined, - )} - {hasOptions && ( - // @ts-ignore - { - const isSelected = selectedItems - ? selectedItems.includes( - isString(rowData) - ? rowData - : rowData[idField], - ) - : false; - return elementActions( - itemActions || [], - rowData, - isSelected, - idField, - ); - }} - /> - )} -
- ); - }} -
- )} -
- ) : ( - - {!isLoading && ( -
- {customEmptyMessage !== "" - ? customEmptyMessage - : `There are no ${entityName} yet.`} -
- )} -
- )} -
-
-
- ); -}; - -export default withStyles(styles)(TableWrapper); diff --git a/web-app/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx b/web-app/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx deleted file mode 100644 index 7694d6cd494..00000000000 --- a/web-app/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { Stack } from "@mui/material"; - -type LabelValuePairProps = { - label?: any; - value?: any; - orientation?: any; - stkProps?: any; - lblProps?: any; - valProps?: any; -}; - -const LabelValuePair = ({ - label = null, - value = "-", - orientation = "column", - stkProps = {}, - lblProps = {}, - valProps = {}, -}: LabelValuePairProps) => { - return ( - - - - - ); -}; - -export default LabelValuePair; diff --git a/web-app/src/screens/Console/Common/UsageBarWrapper/StackRow.tsx b/web-app/src/screens/Console/Common/UsageBarWrapper/StackRow.tsx deleted file mode 100644 index 285ec6589d0..00000000000 --- a/web-app/src/screens/Console/Common/UsageBarWrapper/StackRow.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { Stack } from "@mui/material"; - -const StackRow = ({ - children = null, - ...restProps -}: { - children?: any; - [x: string]: any; -}) => { - return ( - - {children} - - ); -}; -export default StackRow; diff --git a/web-app/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx b/web-app/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx index 3e5682ece01..99f167232bd 100644 --- a/web-app/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx +++ b/web-app/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx @@ -2,11 +2,10 @@ import React, { Fragment } from "react"; import { Stack } from "@mui/material"; import Grid from "@mui/material/Grid"; import { CapacityValues, ValueUnit } from "../../Tenants/ListTenants/types"; -import { CircleIcon, Loader } from "mds"; +import { CircleIcon, Loader, ValuePair } from "mds"; import { niceBytes, niceBytesInt } from "../../../../common/utils"; import TenantCapacity from "../../Tenants/ListTenants/TenantCapacity"; import ErrorBlock from "../../../shared/ErrorBlock"; -import LabelValuePair from "./LabelValuePair"; import { Tenant } from "../../../../api/operatorApi"; interface ISummaryUsageBar { @@ -100,30 +99,30 @@ const SummaryUsageBar = ({ > {(!tenant.tiers || tenant.tiers.length === 0) && ( - )} {tenant.tiers && tenant.tiers.length > 0 && ( - - )} {healthStatus && ( - diff --git a/web-app/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx b/web-app/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx deleted file mode 100644 index aa5c63524b7..00000000000 --- a/web-app/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { Box, Tab, TabProps } from "@mui/material"; -import { TabContext, TabList, TabPanel } from "@mui/lab"; -import withStyles from "@mui/styles/withStyles"; -import { Theme, useTheme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import useMediaQuery from "@mui/material/useMediaQuery"; -import { useLocation } from "react-router-dom"; - -export type TabItemProps = { - tabConfig: TabProps | any; - content?: JSX.Element | JSX.Element[]; -}; - -type VerticalTabsProps = { - classes: any; - children: TabItemProps[]; - selectedTab?: string; - routes?: any; - isRouteTabs?: boolean; -}; - -const styles = (theme: Theme) => - createStyles({ - tabsContainer: { - display: "flex", - height: "100%", - width: "100%", - }, - tabsHeaderContainer: { - width: "300px", - background: "#F8F8F8", - borderRight: "1px solid #EAEAEA", - "& .MuiTabs-root": { - "& .MuiTabs-indicator": { - display: "none", - }, - "& .MuiTab-root": { - display: "flex", - flexFlow: "row", - alignItems: "center", - justifyContent: "flex-start", - borderBottom: "1px solid #EAEAEA", - "& .MuiSvgIcon-root": { - marginRight: 8, - marginBottom: 0, - }, - "&.Mui-selected": { - background: "#E5E5E5", - fontWeight: 600, - }, - }, - - "&. MuiTabs-scroller": { - display: "none", - }, - }, - }, - tabContentContainer: { - width: "100%", - "& .MuiTabPanel-root": { - height: "100%", - }, - }, - tabPanel: { - height: "100%", - }, - /*Below md breakpoint make it horizontal and style it for scrolling tabs*/ - "@media (max-width: 900px)": { - tabsContainer: { - flexFlow: "column", - flexDirection: "column", - }, - tabsHeaderContainer: { - width: "100%", - borderBottom: " 1px solid #EAEAEA", - "& .MuiTabs-root .MuiTabs-scroller .MuiButtonBase-root": { - borderBottom: " 0px", - }, - }, - }, - }); - -const tabStripStyle = { - minHeight: 60, -}; - -const VerticalTabs = ({ - children, - classes, - selectedTab = "0", - routes, - isRouteTabs, -}: VerticalTabsProps) => { - const theme = useTheme(); - const { pathname = "" } = useLocation(); - - const isSmallScreen = useMediaQuery(theme.breakpoints.down("md")); - - const [value, setValue] = useState(selectedTab); - - const headerList: TabProps[] = []; - const contentList: React.ReactNode[] = []; - - useEffect(() => { - if (isRouteTabs) { - const tabConfigElement = children.find( - (item) => item.tabConfig.to === pathname, - ); - - if (tabConfigElement) { - setValue(tabConfigElement.tabConfig.value); - } - } - }, [isRouteTabs, children, pathname]); - - if (!children) return null; - - children.forEach((child) => { - headerList.push(child.tabConfig); - contentList.push(child.content); - }); - - const handleChange = (event: React.SyntheticEvent, newValue: string) => { - setValue(newValue); - }; - - return ( - - - - - {headerList.map((item, index) => { - if (item) { - return ( - - ); - } - return null; - })} - - - - - {!isRouteTabs - ? contentList.map((item, index) => { - return ( - - {item ? item : null} - - ); - }) - : null} - {isRouteTabs ? ( -
{routes}
- ) : null} -
-
-
- ); -}; - -export default withStyles(styles)(VerticalTabs); diff --git a/web-app/src/screens/Console/License/LicenseConsentModal.tsx b/web-app/src/screens/Console/License/LicenseConsentModal.tsx index 10d03a0cbe4..b374a180ad8 100644 --- a/web-app/src/screens/Console/License/LicenseConsentModal.tsx +++ b/web-app/src/screens/Console/License/LicenseConsentModal.tsx @@ -16,8 +16,7 @@ import React from "react"; import ModalWrapper from "../Common/ModalWrapper/ModalWrapper"; -import { Box } from "@mui/material"; -import { AGPLV3DarkLogo, Button } from "mds"; +import { AGPLV3DarkLogo, Button, Box } from "mds"; import { setLicenseConsent } from "./utils"; import LicenseLink from "./LicenseLink"; import LicenseFAQ from "./LicenseFAQ"; diff --git a/web-app/src/screens/Console/License/LicensePlans.tsx b/web-app/src/screens/Console/License/LicensePlans.tsx index feca58aabb8..09229c1ad61 100644 --- a/web-app/src/screens/Console/License/LicensePlans.tsx +++ b/web-app/src/screens/Console/License/LicensePlans.tsx @@ -23,10 +23,11 @@ import { ConsoleEnterprise, ConsoleStandard, LicenseDocIcon, + Box, + breakPoints, } from "mds"; import { useTheme } from "@mui/material/styles"; import { SubnetInfo } from "./types"; -import { Box } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; import { COMMUNITY_PLAN_FEATURES, @@ -369,9 +370,10 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => { margin: "0 1.5rem 0 1.5rem", - gridTemplateColumns: { - sm: "1fr 1fr 1fr 1fr", - xs: "1fr 1fr 1fr", + gridTemplateColumns: "1fr 1fr 1fr 1fr", + + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr 1fr 1fr", }, "&.paid-plans-only": { diff --git a/web-app/src/screens/Console/License/utils.tsx b/web-app/src/screens/Console/License/utils.tsx index 6b90d623746..c146fcbd2d9 100644 --- a/web-app/src/screens/Console/License/utils.tsx +++ b/web-app/src/screens/Console/License/utils.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { Box } from "@mui/material"; +import { Box } from "mds"; import LicenseLink from "./LicenseLink"; import { openFAQModal } from "./licenseSlice"; import store from "../../../store"; diff --git a/web-app/src/screens/Console/Support/ApiKeyRegister.tsx b/web-app/src/screens/Console/Support/ApiKeyRegister.tsx index c1fa5217c78..3395f030b7d 100644 --- a/web-app/src/screens/Console/Support/ApiKeyRegister.tsx +++ b/web-app/src/screens/Console/Support/ApiKeyRegister.tsx @@ -15,8 +15,7 @@ // along with this program. If not, see . import React, { Fragment, useCallback, useEffect, useState } from "react"; -import { Box } from "@mui/material"; -import { Button, OnlineRegistrationIcon } from "mds"; +import { Button, OnlineRegistrationIcon, Box, breakPoints } from "mds"; import { FormTitle } from "./utils"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import GetApiKeyModal from "./GetApiKeyModal"; @@ -105,9 +104,10 @@ const ApiKeyRegister = ({ classes, registerEndpoint }: IApiKeyRegister) => { diff --git a/web-app/src/screens/Console/Support/GetApiKeyModal.tsx b/web-app/src/screens/Console/Support/GetApiKeyModal.tsx index 0b1181981eb..0f0f67fcb39 100644 --- a/web-app/src/screens/Console/Support/GetApiKeyModal.tsx +++ b/web-app/src/screens/Console/Support/GetApiKeyModal.tsx @@ -27,12 +27,11 @@ import { import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog"; import useApi from "../Common/Hooks/useApi"; import React, { useState } from "react"; -import { InfoIcon, UsersIcon } from "mds"; +import { InfoIcon, UsersIcon, Box } from "mds"; import { ErrorResponseHandler } from "../../../common/types"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import { useAppDispatch } from "../../../store"; import { setErrorSnackMessage } from "../../../systemSlice"; -import { Box } from "@mui/material"; const styles = (theme: Theme) => createStyles({ diff --git a/web-app/src/screens/Console/Support/RegistrationStatusBanner.tsx b/web-app/src/screens/Console/Support/RegistrationStatusBanner.tsx index 513ce534e43..18171f6fa58 100644 --- a/web-app/src/screens/Console/Support/RegistrationStatusBanner.tsx +++ b/web-app/src/screens/Console/Support/RegistrationStatusBanner.tsx @@ -1,6 +1,5 @@ import React from "react"; -import { Box } from "@mui/material"; -import { VerifiedIcon } from "mds"; +import { VerifiedIcon, Box, breakPoints } from "mds"; const RegistrationStatusBanner = ({ email = "" }: { email?: string }) => { return ( @@ -51,9 +50,10 @@ const RegistrationStatusBanner = ({ email = "" }: { email?: string }) => { sx={{ alignItems: "center", justifyContent: "flex-start", - display: { - sm: "flex", - xs: "none", + display: "flex", + + [`@media (max-width: ${breakPoints.sm}px)`]: { + display: "none", }, }} > diff --git a/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx index d51a15b2bb3..16711ca2f65 100644 --- a/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx +++ b/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx @@ -27,11 +27,6 @@ import { settingsCommon, wizardCommon, } from "../../Common/FormComponents/common/styleLibrary"; -import GenericWizard from "../../Common/GenericWizard/GenericWizard"; -import { - IWizardButton, - IWizardElement, -} from "../../Common/GenericWizard/types"; import { AppState, useAppDispatch } from "../../../../store"; import Configure from "./Steps/Configure"; import IdentityProvider from "./Steps/IdentityProvider"; @@ -45,7 +40,15 @@ import { IMkEnvs, resourcesConfigurations, } from "./Steps/TenantResources/utils"; -import { BackLink, HelpBox, StorageIcon, PageLayout } from "mds"; +import { + BackLink, + HelpBox, + StorageIcon, + PageLayout, + Wizard, + WizardElement, + WizardButton, +} from "mds"; import { selFeatures } from "../../consoleSlice"; import makeStyles from "@mui/styles/makeStyles"; import { resetAddTenantForm } from "./createTenantSlice"; @@ -100,7 +103,7 @@ const AddTenant = () => { const cancelButton = { label: "Cancel", - type: "other", + type: "custom" as "to" | "custom" | "next" | "back", enabled: true, action: () => { dispatch(resetAddTenantForm()); @@ -108,11 +111,11 @@ const AddTenant = () => { }, }; - const createButton: IWizardButton = { + const createButton: WizardButton = { componentRender: , }; - const wizardSteps: IWizardElement[] = [ + const wizardSteps: WizardElement[] = [ { label: "Setup", componentRender: , @@ -180,7 +183,7 @@ const AddTenant = () => { )} - + {formRender === IMkEnvs.aws && ( diff --git a/web-app/src/screens/Console/Tenants/HelpBox/TLSHelpBox.tsx b/web-app/src/screens/Console/Tenants/HelpBox/TLSHelpBox.tsx index fc439dd04a3..b5ad7528816 100644 --- a/web-app/src/screens/Console/Tenants/HelpBox/TLSHelpBox.tsx +++ b/web-app/src/screens/Console/Tenants/HelpBox/TLSHelpBox.tsx @@ -15,8 +15,7 @@ // along with this program. If not, see . import React from "react"; import { useSelector } from "react-redux"; -import { Box } from "@mui/material"; -import { CertificateIcon } from "mds"; +import { CertificateIcon, Box, breakPoints } from "mds"; import { useParams } from "react-router-dom"; import { AppState } from "../../../../store"; @@ -82,8 +81,8 @@ const TLSHelpBox = () => { display: "flex", flexFlow: "column", padding: "20px", - marginTop: { - xs: "0px", + [`@media (max-width: ${breakPoints.sm}px)`]: { + marginTop: 0, }, }} > diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx index 67fbc6cd08d..d9e7eb90cd1 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx @@ -29,12 +29,11 @@ import { niceDays } from "../../../../common/utils"; import { IPodListElement } from "../ListTenants/types"; import api from "../../../../common/api"; -import TableWrapper from "../../Common/TableWrapper/TableWrapper"; import { AppState, useAppDispatch } from "../../../../store"; import { ErrorResponseHandler } from "../../../../common/types"; import DeletePod from "./DeletePod"; import { Grid, InputAdornment, TextField } from "@mui/material"; -import { SearchIcon, Button } from "mds"; +import { SearchIcon, Button, DataTable } from "mds"; import { setErrorSnackMessage } from "../../../../systemSlice"; import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper"; @@ -244,7 +243,7 @@ const PodsSummary = ({ classes }: IPodsSummary) => { /> - { itemActions={podTableActions} entityName="Pods" idField="name" + customPaperHeight={"calc(100vh - 400px)"} /> diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx index 42376699242..ac33fe6bf0d 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx @@ -25,11 +25,15 @@ import { import Grid from "@mui/material/Grid"; import { niceBytes } from "../../../../../../common/utils"; import { LinearProgress } from "@mui/material"; -import GenericWizard from "../../../../Common/GenericWizard/GenericWizard"; -import { IWizardElement } from "../../../../Common/GenericWizard/types"; import PoolResources from "./PoolResources"; -import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle"; -import { BackLink, TenantsIcon, PageLayout } from "mds"; +import { + BackLink, + TenantsIcon, + PageLayout, + ScreenTitle, + Wizard, + WizardElement, +} from "mds"; import { AppState, useAppDispatch } from "../../../../../../store"; import { useSelector } from "react-redux"; @@ -92,7 +96,7 @@ const AddPool = () => { const cancelButton = { label: "Cancel", - type: "other", + type: "custom" as "to" | "custom" | "next" | "back", enabled: true, action: () => { dispatch(resetPoolForm()); @@ -104,7 +108,7 @@ const AddPool = () => { componentRender: , }; - const wizardSteps: IWizardElement[] = [ + const wizardSteps: WizardElement[] = [ { label: "Setup", componentRender: , @@ -148,6 +152,7 @@ const AddPool = () => { {niceBytes((tenant?.total_size || 0).toString(10))} } + actions={null} /> {sending && ( @@ -156,7 +161,7 @@ const AddPool = () => { )} - + diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolDetails.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolDetails.tsx index 54de643c8ce..0cf11ed0034 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolDetails.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolDetails.tsx @@ -18,12 +18,16 @@ import React, { Fragment } from "react"; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { AppState } from "../../../../../../store"; -import { Box } from "@mui/material"; import Grid from "@mui/material/Grid"; -import LabelValuePair from "../../../../Common/UsageBarWrapper/LabelValuePair"; import { niceBytesInt } from "../../../../../../common/utils"; -import StackRow from "../../../../Common/UsageBarWrapper/StackRow"; -import { Button, EditTenantIcon } from "mds"; +import { + Box, + breakPoints, + Button, + EditTenantIcon, + SectionTitle, + ValuePair, +} from "mds"; import { NodeSelectorTerm } from "../../../../../../api/operatorApi"; const stylingLayout = { @@ -35,10 +39,14 @@ const stylingLayout = { const twoColCssGridLayoutConfig = { display: "grid", - gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" }, - gridAutoFlow: { xs: "dense", sm: "row" }, + gridTemplateColumns: "2fr 1fr", + gridAutoFlow: "row", gap: 2, padding: "15px", + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr", + gridAutoFlow: "dense", + }, }; const PoolDetails = () => { @@ -69,49 +77,39 @@ const PoolDetails = () => { } } - const HeaderSection = ({ title }: { title: string }) => { - return ( - -

{title}

-
- ); - }; - return ( -
-
- + } + onClick={() => { + navigate( + `/namespaces/${tenant?.namespace || ""}/tenants/${ + tenant?.name || "" + }/edit-pool`, + ); + }} + label={"Edit Pool"} + id={"editPool"} + /> + } + > + Pool Configuration + - - + - - { poolInformation.volume_configuration.size, )} /> - - + Resources {poolInformation.resources && ( - - { /> )} - - @@ -155,11 +153,11 @@ const PoolDetails = () => { poolInformation.securityContext.runAsGroup || poolInformation.securityContext.fsGroup) && ( - + Security Context {poolInformation.securityContext.runAsNonRoot !== null && ( - { )} {poolInformation.securityContext.runAsUser && ( - )} {poolInformation.securityContext.runAsGroup && ( - )} {poolInformation.securityContext.fsGroup && ( - @@ -201,20 +208,20 @@ const PoolDetails = () => { )} - + Affinity - + {poolInformation.affinity?.nodeAffinity && poolInformation.affinity?.podAntiAffinity ? ( - + ) : ( )} {poolInformation.affinity?.nodeAffinity && ( - + Labels
    {poolInformation.affinity?.nodeAffinity?.requiredDuringSchedulingIgnoredDuringExecution?.nodeSelectorTerms.map( (term: NodeSelectorTerm) => { @@ -234,7 +241,7 @@ const PoolDetails = () => { {poolInformation.tolerations && poolInformation.tolerations.length > 0 && ( - + Tolerations
      {poolInformation.tolerations.map((tolItem) => { diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx index ced7edbaa8b..2cab053bf99 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx @@ -21,8 +21,7 @@ import { useNavigate } from "react-router-dom"; import Grid from "@mui/material/Grid"; import { TextField } from "@mui/material"; import InputAdornment from "@mui/material/InputAdornment"; -import { AddIcon, Button, SearchIcon } from "mds"; -import TableWrapper from "../../../../Common/TableWrapper/TableWrapper"; +import { AddIcon, Button, DataTable, SearchIcon } from "mds"; import { Theme } from "@mui/material/styles"; import { actionsTray, @@ -127,7 +126,7 @@ const PoolsListing = ({ setPoolDetailsView }: IPoolsSummary) => { - { entityName="Servers" idField="name" customEmptyMessage="No Pools found" + customPaperHeight={"calc(100vh - 400px)"} /> diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx index fa9c28564aa..794536cdb06 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx @@ -20,13 +20,17 @@ import { useNavigate } from "react-router-dom"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import Grid from "@mui/material/Grid"; -import GenericWizard from "../../../../Common/GenericWizard/GenericWizard"; -import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle"; -import { BackLink, TenantsIcon, PageLayout } from "mds"; +import { + BackLink, + TenantsIcon, + PageLayout, + ScreenTitle, + Wizard, + WizardElement, +} from "mds"; import EditPoolResources from "./EditPoolResources"; import EditPoolConfiguration from "./EditPoolConfiguration"; import EditPoolPlacement from "./EditPoolPlacement"; -import { IWizardElement } from "../../../../Common/GenericWizard/types"; import { LinearProgress } from "@mui/material"; import { niceBytes } from "../../../../../../common/utils"; import { @@ -114,7 +118,7 @@ const EditPool = () => { const cancelButton = { label: "Cancel", - type: "other", + type: "custom" as "to" | "custom" | "next" | "back", enabled: true, action: () => { dispatch(resetEditPoolForm()); @@ -126,7 +130,7 @@ const EditPool = () => { componentRender: , }; - const wizardSteps: IWizardElement[] = [ + const wizardSteps: WizardElement[] = [ { label: "Pool Resources", componentRender: , @@ -171,6 +175,7 @@ const EditPool = () => { {tenant?.name || ""} } + actions={null} /> @@ -180,7 +185,7 @@ const EditPool = () => { )} - + diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx index df40a40fadb..8832606d9c2 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx @@ -18,17 +18,19 @@ import React, { Fragment, useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { BackLink, + Box, Button, CircleIcon, EditIcon, MinIOTierIconXs, + PageLayout, RefreshIcon, + ScreenTitle, + Tabs, TenantsIcon, TrashIcon, - PageLayout, } from "mds"; import { - Link, Navigate, Route, Routes, @@ -47,9 +49,6 @@ import { } from "../../Common/FormComponents/common/styleLibrary"; import { AppState, useAppDispatch } from "../../../../store"; import { niceBytes } from "../../../../common/utils"; -import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle"; - -import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs"; import withSuspense from "../../Common/Components/withSuspense"; import { IAM_PAGES } from "../../../../common/SecureComponent/permissions"; import { setSnackBarMessage } from "../../../../systemSlice"; @@ -191,19 +190,6 @@ const TenantDetails = ({ classes }: ITenantDetailsProps) => { tenantNamespace, ]); - const splitSections = pathname.split("/"); - - let highlightedTab = splitSections[splitSections.length - 1] || "summary"; - if (highlightedTab === ":podName" || highlightedTab === "pods") { - // It has SUB Route - highlightedTab = "pods"; - } - const [activeTab, setActiveTab] = useState(highlightedTab); - - useEffect(() => { - setActiveTab(highlightedTab); - }, [highlightedTab]); - const editYaml = () => { navigate(getRoutePath("summary/yaml")); }; @@ -289,7 +275,9 @@ const TenantDetails = ({ classes }: ITenantDetailsProps) => { } actions={ -
      +
      + } /> - navigate(route)} routes={
      @@ -380,106 +369,94 @@ const TenantDetails = ({ classes }: ITenantDetailsProps) => {
      } - > - {{ - tabConfig: { - label: "Summary", - value: "summary", - component: Link, - to: getRoutePath("summary"), + options={[ + { + tabConfig: { + label: "Summary", + id: `details-summary`, + to: getRoutePath("summary"), + }, }, - }} - {{ - tabConfig: { - label: "Configuration", - value: "configuration", - component: Link, - to: getRoutePath("configuration"), + { + tabConfig: { + label: "Configuration", + id: `details-configuration`, + to: getRoutePath("configuration"), + }, }, - }} - {{ - tabConfig: { - label: "Metrics", - value: "metrics", - component: Link, - to: getRoutePath("metrics"), + { + tabConfig: { + label: "Metrics", + id: `details-metrics`, + to: getRoutePath("metrics"), + }, }, - }} - {{ - tabConfig: { - label: "Identity Provider", - value: "identity-provider", - component: Link, - to: getRoutePath("identity-provider"), + { + tabConfig: { + label: "Identity Provider", + id: `details-idp`, + to: getRoutePath("identity-provider"), + }, }, - }} - {{ - tabConfig: { - label: "Security", - value: "security", - component: Link, - to: getRoutePath("security"), + { + tabConfig: { + label: "Security", + id: `details-security`, + to: getRoutePath("security"), + }, }, - }} - {{ - tabConfig: { - label: "Encryption", - value: "encryption", - component: Link, - to: getRoutePath("encryption"), + { + tabConfig: { + label: "Encryption", + id: `details-encryption`, + to: getRoutePath("encryption"), + }, }, - }} - {{ - tabConfig: { - label: "Pools", - value: "pools", - component: Link, - to: getRoutePath("pools"), + { + tabConfig: { + label: "Pools", + id: `details-pools`, + to: getRoutePath("pools"), + }, }, - }} - {{ - tabConfig: { - label: "Pods", - value: "pods", - component: Link, - id: "tenant-pod-tab", - to: getRoutePath("pods"), + { + tabConfig: { + label: "Pods", + id: "tenant-pod-tab", + to: getRoutePath("pods"), + }, }, - }} - {{ - tabConfig: { - label: "Volumes", - value: "volumes", - component: Link, - to: getRoutePath("volumes"), + { + tabConfig: { + label: "Volumes", + id: `details-volumes`, + to: getRoutePath("volumes"), + }, }, - }} - {{ - tabConfig: { - label: "Events", - value: "events", - component: Link, - to: getRoutePath("events"), + { + tabConfig: { + label: "Events", + id: `details-events`, + to: getRoutePath("events"), + }, }, - }} - {{ - tabConfig: { - label: "Certificate Requests", - value: "csr", - component: Link, - to: getRoutePath("csr"), + { + tabConfig: { + label: "Certificate Requests", + id: `details-csr`, + to: getRoutePath("csr"), + }, }, - }} - {{ - tabConfig: { - label: "License", - value: "license", - component: Link, - to: getRoutePath("license"), + { + tabConfig: { + label: "License", + id: `details-license`, + to: getRoutePath("license"), + }, }, - }} -
      + ]} + /> ); diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx index 9fb702c9196..fbac3078f46 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx @@ -28,7 +28,6 @@ import { Box, Grid } from "@mui/material"; import UpdateTenantModal from "./UpdateTenantModal"; import { AppState, useAppDispatch } from "../../../../store"; import SummaryUsageBar from "../../Common/UsageBarWrapper/SummaryUsageBar"; -import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair"; import { ActionLink, Button, @@ -36,6 +35,7 @@ import { EditIcon, TierOnlineIcon, SectionTitle, + ValuePair, } from "mds"; import EditDomains from "./EditDomains"; import { useParams } from "react-router-dom"; @@ -235,10 +235,10 @@ const TenantSummary = ({ classes }: ITenantsSummary) => { - + - { - @@ -310,7 +310,7 @@ const TenantSummary = ({ classes }: ITenantsSummary) => { /> - { - + - - - { /> - - @@ -426,28 +418,28 @@ const TenantSummary = ({ classes }: ITenantsSummary) => { Features - - - - { /> - { records={filteredRecords} entityName="PVCs" idField="name" - customPaperHeight={classes.tableWrapper} + customPaperHeight={"calc(100vh - 400px)"} /> diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx index 70bd9867d32..5a0a247713b 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx @@ -15,7 +15,7 @@ // along with this program. If not, see . import React, { useEffect, useState } from "react"; -import { Box } from "@mui/material"; +import { Box, breakPoints, ValuePair } from "mds"; import Grid from "@mui/material/Grid"; import Chip from "@mui/material/Chip"; import Table from "@mui/material/Table"; @@ -29,7 +29,6 @@ import TableContainer from "@mui/material/TableContainer"; import Paper from "@mui/material/Paper"; import { ErrorResponseHandler } from "../../../../../common/types"; import api from "../../../../../common/api"; -import LabelValuePair from "../../../Common/UsageBarWrapper/LabelValuePair"; import { useSelector } from "react-redux"; import { AppState, useAppDispatch } from "../../../../../store"; import { setErrorSnackMessage } from "../../../../../systemSlice"; @@ -158,10 +157,14 @@ interface IPodDescribeTableProps { const twoColCssGridLayoutConfig = { display: "grid", - gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" }, - gridAutoFlow: { xs: "dense", sm: "row" }, + gridTemplateColumns: "2fr 1fr", + gridAutoFlow: "row", gap: 2, padding: "15px", + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr", + gridAutoFlow: "dense", + }, }; const HeaderSection = ({ title }: { title: string }) => { @@ -184,13 +187,13 @@ const PodDescribeSummary = ({ describeInfo }: IPodDescribeSummaryProps) => {
      - - - - - - - + + + + + + +
      @@ -275,11 +278,8 @@ const PodDescribeVolumes = ({ volumes }: IPodDescribeVolumesProps) => { {volume.pvc && ( - - + @@ -287,7 +287,7 @@ const PodDescribeVolumes = ({ volumes }: IPodDescribeVolumesProps) => { )} {/* TODO Add component to display projected data (Maybe change API response) */} {volume.projected && ( - + )} @@ -345,35 +345,26 @@ const PodDescribeContainers = ({ containers }: IPodDescribeContainersProps) => { style={{ wordBreak: "break-all" }} sx={{ ...twoColCssGridLayoutConfig }} > - - - - + + + - - - + + - - + + const twoColCssGridLayoutConfig = { display: "grid", - gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" }, - gridAutoFlow: { xs: "dense", sm: "row" }, + gridTemplateColumns: "2fr 1fr", + gridAutoFlow: "row", gap: 2, - padding: "15px", + padding: 15, + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr", + gridAutoFlow: "dense", + }, }; const HeaderSection = ({ title }: { title: string }) => { @@ -77,27 +80,24 @@ const PVCDescribeSummary = ({ describeInfo }: IPVCDescribeSummaryProps) => {
      - - - - - + + + + - - - - + +
      diff --git a/web-app/src/screens/Console/types.ts b/web-app/src/screens/Console/types.ts index 5839383e05c..61b73757cd5 100644 --- a/web-app/src/screens/Console/types.ts +++ b/web-app/src/screens/Console/types.ts @@ -42,13 +42,3 @@ export interface ISessionResponse { envConstants?: IEnvironmentContants | null; serverEndPoint?: string | undefined; } - -export interface ButtonProps { - label?: string; - variant?: "regular" | "callAction" | "secondary"; - icon?: React.ReactNode; - iconLocation?: "start" | "end"; - fullWidth?: boolean; - disabled?: boolean; - onClick?: React.MouseEventHandler; -} diff --git a/web-app/tests/constants/timestamp.txt b/web-app/tests/constants/timestamp.txt index 5702a513659..152206fb722 100644 --- a/web-app/tests/constants/timestamp.txt +++ b/web-app/tests/constants/timestamp.txt @@ -1 +1 @@ -1657924012 +1700241930