diff --git a/web-app/package.json b/web-app/package.json index 1878cfe46db..dc8f5614e03 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -29,6 +29,7 @@ "react-window": "^1.8.8", "react-window-infinite-loader": "^1.0.7", "recharts": "2.7.2", + "styled-components": "^5.3.11", "superagent": "^8.0.8", "tough-cookie": "4.1.3", "yaml": "2.3.4" diff --git a/web-app/src/common/LoadingComponent.tsx b/web-app/src/common/LoadingComponent.tsx index 8fee3d986f8..3e3ae5c842a 100644 --- a/web-app/src/common/LoadingComponent.tsx +++ b/web-app/src/common/LoadingComponent.tsx @@ -15,20 +15,25 @@ // along with this program. If not, see . import React from "react"; -import { Grid } from "@mui/material"; -import { Loader } from "mds"; +import { Loader, Grid } from "mds"; const LoadingComponent = () => { return ( - + diff --git a/web-app/src/screens/Console/CommandBar.tsx b/web-app/src/screens/Console/CommandBar.tsx index a0fff782aac..3da92db6404 100644 --- a/web-app/src/screens/Console/CommandBar.tsx +++ b/web-app/src/screens/Console/CommandBar.tsx @@ -15,6 +15,7 @@ // along with this program. If not, see . import * as React from "react"; import { useEffect, useState } from "react"; +import { Box, MenuExpandedIcon } from "mds"; import { useNavigate } from "react-router-dom"; import { ActionId, @@ -30,30 +31,11 @@ import { useRegisterActions, } from "kbar"; import { Action } from "kbar/lib/types"; -import { Theme } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; import { routesAsKbarActions } from "./kbar-actions"; -import { Box } from "@mui/material"; -import { MenuExpandedIcon } from "mds"; import { useSelector } from "react-redux"; import { selFeatures } from "./consoleSlice"; import { selOpMode } from "../../systemSlice"; -const useStyles = makeStyles((theme: Theme) => ({ - resultItem: { - display: "flex", - gap: "8px", - alignItems: "center", - fontSize: 14, - flex: 1, - justifyContent: "space-between", - "& .min-icon": { - width: "17px", - height: "17px", - }, - }, -})); - const searchStyle = { padding: "12px 16px", width: "100%", @@ -192,7 +174,6 @@ const ResultItem = React.forwardRef( }, ref: React.Ref, ) => { - const classes = useStyles(); const ancestors = React.useMemo(() => { if (!currentRootActionId) return action.ancestors; const index = action.ancestors.findIndex( @@ -218,7 +199,20 @@ const ResultItem = React.forwardRef( cursor: "pointer", }} > -
+ {action.icon && action.icon} @@ -272,7 +266,7 @@ const ResultItem = React.forwardRef( > -
+ {action.shortcut?.length ? (
. - -import React from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IconButtonProps } from "@mui/material"; - -const styles = (theme: Theme) => - createStyles({ - root: { - padding: 0, - margin: 0, - border: 0, - backgroundColor: "transparent", - textDecoration: "underline", - cursor: "pointer", - fontSize: "inherit", - color: theme.palette.info.main, - fontFamily: "Inter, sans-serif", - }, - }); - -interface IAButton extends IconButtonProps { - classes: any; - children: any; -} - -const AButton = ({ classes, children, ...rest }: IAButton) => { - return ( - - ); -}; - -export default withStyles(styles)(AButton); diff --git a/web-app/src/screens/Console/Common/ComponentsScreen.tsx b/web-app/src/screens/Console/Common/ComponentsScreen.tsx index e5dacd10ef1..534151acf8a 100644 --- a/web-app/src/screens/Console/Common/ComponentsScreen.tsx +++ b/web-app/src/screens/Console/Common/ComponentsScreen.tsx @@ -14,21 +14,22 @@ // 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 { DialogContentText, Grid } from "@mui/material"; -import PageLayout from "./Layout/PageLayout"; -import SectionTitle from "./SectionTitle"; -import { Button, ConfirmDeleteIcon } from "mds"; +import React, { Fragment, useEffect, useState } from "react"; +import { Button, ConfirmDeleteIcon, PageLayout, SectionTitle, Grid } from "mds"; import ConfirmDialog from "./ModalWrapper/ConfirmDialog"; import PageHeaderWrapper from "./PageHeaderWrapper/PageHeaderWrapper"; +import { useAppDispatch } from "../../../store"; const ComponentsScreen = () => { const [dialogOpen, setDialogOpen] = useState(false); + const dispatch = useAppDispatch(); + return ( + - + Confirm Dialogs @@ -58,10 +59,10 @@ const ComponentsScreen = () => { setDialogOpen(false); }} confirmationContent={ - + Are you sure you want to delete bucket bucket ?
A bucket can only be deleted if it's empty. -
+
} /> diff --git a/web-app/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx b/web-app/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx index 09cde413e3a..a93cfa1e167 100644 --- a/web-app/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx +++ b/web-app/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx @@ -15,87 +15,46 @@ // along with this program. If not, see . import React from "react"; -import { InputAdornment, OutlinedInput } from "@mui/material"; -import withStyles from "@mui/styles/withStyles"; -import { Theme } from "@mui/material/styles"; -import { Button, CopyIcon } from "mds"; -import createStyles from "@mui/styles/createStyles"; +import { Box, Button, CopyIcon, InputLabel, ReadBox } from "mds"; import CopyToClipboard from "react-copy-to-clipboard"; -import { fieldBasic } from "../FormComponents/common/styleLibrary"; -import TooltipWrapper from "../TooltipWrapper/TooltipWrapper"; +import { useAppDispatch } from "../../../../store"; +import { setModalSnackMessage } from "../../../../systemSlice"; -const styles = (theme: Theme) => - createStyles({ - container: { - display: "flex", - flexFlow: "column", - padding: "20px 0 8px 0", - }, - inputWithCopy: { - "& .MuiInputBase-root ": { - width: "100%", - background: "#FBFAFA", - "& .MuiInputBase-input": { - height: ".8rem", - }, - "& .MuiInputAdornment-positionEnd": { - marginRight: ".5rem", - "& .MuiButtonBase-root": { - height: "2rem", - }, - }, - }, - "& .MuiButtonBase-root .min-icon": { - width: ".8rem", - height: ".8rem", - }, - }, - inputLabel: { - ...fieldBasic.inputLabel, - fontSize: ".8rem", - }, - }); +interface ICredentialsItem { + label?: string; + value?: string; +} + +const CredentialItem = ({ label = "", value = "" }: ICredentialsItem) => { + const dispatch = useAppDispatch(); -const CredentialItem = ({ - label = "", - value = "", - classes = {}, -}: { - label: string; - value: string; - classes: any; -}) => { return ( -
-
{label}:
-
- - - -
-
+ + {label} + + -
- - + ); }; diff --git a/web-app/src/screens/Console/Common/SearchBox.tsx b/web-app/src/screens/Console/Common/SearchBox.tsx index 0b74ee87265..4ad4ddc2fed 100644 --- a/web-app/src/screens/Console/Common/SearchBox.tsx +++ b/web-app/src/screens/Console/Common/SearchBox.tsx @@ -15,64 +15,42 @@ // along with this program. If not, see . import React from "react"; -import InputAdornment from "@mui/material/InputAdornment"; -import { SearchIcon } from "mds"; -import TextField from "@mui/material/TextField"; -import withStyles from "@mui/styles/withStyles"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import { searchField } from "./FormComponents/common/styleLibrary"; - -const styles = (theme: Theme) => - createStyles({ - searchField: { - ...searchField.searchField, - }, - adornment: {}, - }); +import { InputBox, SearchIcon } from "mds"; +import { CSSObject } from "styled-components"; type SearchBoxProps = { placeholder?: string; value: string; - classes: any; onChange: (value: string) => void; - adornmentPosition?: "start" | "end"; overrideClass?: any; + id?: string; + label?: string; + sx?: CSSObject; }; const SearchBox = ({ placeholder = "", - classes, onChange, - adornmentPosition = "end", overrideClass, value, + id = "search-resource", + label = "", + sx, }: SearchBoxProps) => { - const inputProps = { - disableUnderline: true, - [`${adornmentPosition}Adornment`]: ( - - - - ), - }; return ( - { onChange(e.target.value); }} - variant="standard" value={value} + startIcon={} + sx={sx} /> ); }; -export default withStyles(styles)(SearchBox); +export default SearchBox; diff --git a/web-app/src/screens/Console/Common/SectionTitle.tsx b/web-app/src/screens/Console/Common/SectionTitle.tsx deleted file mode 100644 index 8a694a7150e..00000000000 --- a/web-app/src/screens/Console/Common/SectionTitle.tsx +++ /dev/null @@ -1,68 +0,0 @@ -// This file is part of MinIO Operator -// 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 . - -import React from "react"; -import Grid from "@mui/material/Grid"; - -type Props = { - separator?: boolean; - actions?: React.ReactNode; - icon?: React.ReactNode; - children: string; -}; - -const SectionTitle: React.FC = ({ - children, - separator = true, - actions, - icon, -}) => { - return ( - - -

- {icon && ( - - {icon} - {children} - - )} - {!icon && children} -

-
- {actions && {actions}} -
- ); -}; - -export default SectionTitle; diff --git a/web-app/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx b/web-app/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx index d1a9bf2a552..11f424e9351 100644 --- a/web-app/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx +++ b/web-app/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx @@ -15,25 +15,13 @@ // along with this program. If not, see . import React, { cloneElement } from "react"; -import { Tooltip } from "@mui/material"; +import { Tooltip } from "mds"; interface ITooltipWrapperProps { tooltip: string; children: any; errorProps?: any; - placement?: - | "bottom-end" - | "bottom-start" - | "bottom" - | "left-end" - | "left-start" - | "left" - | "right-end" - | "right-start" - | "right" - | "top-end" - | "top-start" - | "top"; + placement?: "bottom" | "left" | "right" | "top"; } const TooltipWrapper = ({ @@ -43,7 +31,7 @@ const TooltipWrapper = ({ placement, }: ITooltipWrapperProps) => { return ( - + {errorProps ? cloneElement(children, { ...errorProps }) : children} diff --git a/web-app/src/screens/Console/Common/WarningMessage/WarningMessage.tsx b/web-app/src/screens/Console/Common/WarningMessage/WarningMessage.tsx deleted file mode 100644 index f239aadea5d..00000000000 --- a/web-app/src/screens/Console/Common/WarningMessage/WarningMessage.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// This file is part of MinIO Operator -// 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 . - -import React from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; - -interface IWarningMessage { - classes: any; - label: any; - title: any; -} - -const styles = (theme: Theme) => - createStyles({ - headerContainer: { - backgroundColor: "#e78794", - borderRadius: 3, - marginBottom: 20, - padding: 1, - paddingBottom: 15, - }, - labelHeadline: { - color: "#000000", - fontSize: 14, - marginLeft: 20, - }, - labelText: { - color: "#000000", - fontSize: 14, - marginLeft: 20, - marginRight: 40, - }, - }); - -const WarningMessage = ({ classes, label, title }: IWarningMessage) => { - return ( -
-

{title}

-
{label}
-
- ); -}; - -export default withStyles(styles)(WarningMessage); diff --git a/web-app/src/screens/Console/License/License.tsx b/web-app/src/screens/Console/License/License.tsx index ba01438c0f1..d31cc15e33b 100644 --- a/web-app/src/screens/Console/License/License.tsx +++ b/web-app/src/screens/Console/License/License.tsx @@ -20,11 +20,10 @@ import { LinearProgress } from "@mui/material"; import Grid from "@mui/material/Grid"; import { SubnetInfo } from "./types"; import api from "../../../common/api"; -import { ArrowIcon, Button } from "mds"; +import { ArrowIcon, Button, PageLayout } from "mds"; import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; import LicensePlans from "./LicensePlans"; import { useNavigate } from "react-router-dom"; -import PageLayout from "../Common/Layout/PageLayout"; import RegistrationStatusBanner from "../Support/RegistrationStatusBanner"; import { selOpMode } from "../../../systemSlice"; import withSuspense from "../Common/Components/withSuspense"; diff --git a/web-app/src/screens/Console/Marketplace/Marketplace.tsx b/web-app/src/screens/Console/Marketplace/Marketplace.tsx index a8733b7eee9..b505903a833 100644 --- a/web-app/src/screens/Console/Marketplace/Marketplace.tsx +++ b/web-app/src/screens/Console/Marketplace/Marketplace.tsx @@ -16,7 +16,7 @@ import React, { Fragment, useEffect, useState } from "react"; import SetEmailModal from "./SetEmailModal"; -import PageLayout from "../Common/Layout/PageLayout"; +import { PageLayout } from "mds"; import { selFeatures } from "../consoleSlice"; import { useSelector } from "react-redux"; import { Navigate, useNavigate } from "react-router-dom"; diff --git a/web-app/src/screens/Console/Support/RegisterOperator.tsx b/web-app/src/screens/Console/Support/RegisterOperator.tsx index a8136f8be0e..e32e9d707ea 100644 --- a/web-app/src/screens/Console/Support/RegisterOperator.tsx +++ b/web-app/src/screens/Console/Support/RegisterOperator.tsx @@ -24,8 +24,7 @@ import { spacingUtils, } from "../Common/FormComponents/common/styleLibrary"; import withStyles from "@mui/styles/withStyles"; -import { Box } from "@mui/material"; -import PageLayout from "../Common/Layout/PageLayout"; +import { Box, PageLayout } from "mds"; import api from "../../../common/api"; import { ErrorResponseHandler } from "../../../common/types"; diff --git a/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx index d3634b33e6b..d51a15b2bb3 100644 --- a/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx +++ b/web-app/src/screens/Console/Tenants/AddTenant/AddTenant.tsx @@ -39,14 +39,13 @@ import Security from "./Steps/Security"; import Encryption from "./Steps/Encryption"; import Affinity from "./Steps/Affinity"; import Images from "./Steps/Images"; -import PageLayout from "../../Common/Layout/PageLayout"; import TenantResources from "./Steps/TenantResources/TenantResources"; import { IMkEnvs, resourcesConfigurations, } from "./Steps/TenantResources/utils"; -import { BackLink, HelpBox, StorageIcon } from "mds"; +import { BackLink, HelpBox, StorageIcon, PageLayout } from "mds"; import { selFeatures } from "../../consoleSlice"; import makeStyles from "@mui/styles/makeStyles"; import { resetAddTenantForm } from "./createTenantSlice"; diff --git a/web-app/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx b/web-app/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx index e45369e5de6..501a36d242f 100644 --- a/web-app/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx +++ b/web-app/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx @@ -22,8 +22,7 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo import Grid from "@mui/material/Grid"; import useApi from "../../Common/Hooks/useApi"; import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog"; -import { ConfirmDeleteIcon } from "mds"; -import WarningMessage from "../../Common/WarningMessage/WarningMessage"; +import { ConfirmDeleteIcon, InformativeMessage } from "mds"; import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import { setErrorSnackMessage } from "../../../../systemSlice"; import { useAppDispatch } from "../../../../store"; @@ -83,9 +82,10 @@ const DeleteTenant = ({ {deleteVolumes && ( - diff --git a/web-app/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/web-app/src/screens/Console/Tenants/ListTenants/ListTenants.tsx index d388b5c31fe..445d6038020 100644 --- a/web-app/src/screens/Console/Tenants/ListTenants/ListTenants.tsx +++ b/web-app/src/screens/Console/Tenants/ListTenants/ListTenants.tsx @@ -15,17 +15,23 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; -import { AddIcon, Button, HelpBox, RefreshIcon, TenantsIcon } from "mds"; +import { + ActionLink, + AddIcon, + Button, + HelpBox, + RefreshIcon, + TenantsIcon, + PageLayout, +} from "mds"; import Grid from "@mui/material/Grid"; import { LinearProgress, SelectChangeEvent } from "@mui/material"; import { NewServiceAccount } from "../../Common/CredentialsPrompt/types"; import TenantListItem from "./TenantListItem"; -import AButton from "../../Common/AButton/AButton"; import withSuspense from "../../Common/Components/withSuspense"; import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList"; import SearchBox from "../../Common/SearchBox"; -import PageLayout from "../../Common/Layout/PageLayout"; import { setErrorSnackMessage } from "../../../../systemSlice"; import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper"; import { useNavigate } from "react-router-dom"; @@ -318,13 +324,13 @@ const ListTenants = () => {

To get started,  - { navigate("/tenants/add"); }} > Create a Tenant. - + } /> 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 70edd118f5a..42376699242 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,12 +25,11 @@ import { import Grid from "@mui/material/Grid"; import { niceBytes } from "../../../../../../common/utils"; import { LinearProgress } from "@mui/material"; -import PageLayout from "../../../../Common/Layout/PageLayout"; 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 } from "mds"; +import { BackLink, TenantsIcon, PageLayout } from "mds"; import { AppState, useAppDispatch } from "../../../../../../store"; import { useSelector } from "react-redux"; 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 506f129dcb4..fa9c28564aa 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,10 +20,9 @@ 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 PageLayout from "../../../../Common/Layout/PageLayout"; import GenericWizard from "../../../../Common/GenericWizard/GenericWizard"; import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle"; -import { BackLink, TenantsIcon } from "mds"; +import { BackLink, TenantsIcon, PageLayout } from "mds"; import EditPoolResources from "./EditPoolResources"; import EditPoolConfiguration from "./EditPoolConfiguration"; import EditPoolPlacement from "./EditPoolPlacement"; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx index 3d0ba863aa1..df40a40fadb 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx @@ -25,6 +25,7 @@ import { RefreshIcon, TenantsIcon, TrashIcon, + PageLayout, } from "mds"; import { Link, @@ -47,7 +48,6 @@ import { import { AppState, useAppDispatch } from "../../../../store"; import { niceBytes } from "../../../../common/utils"; import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle"; -import PageLayout from "../../Common/Layout/PageLayout"; import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs"; import withSuspense from "../../Common/Components/withSuspense"; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx index 2bf2ad73bdb..8f1195398b6 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx @@ -23,7 +23,7 @@ import { Typography, } from "@mui/material"; import { Theme } from "@mui/material/styles"; -import { Button, ConfirmModalIcon, Loader } from "mds"; +import { Button, ConfirmModalIcon, Loader, SectionTitle } from "mds"; import Grid from "@mui/material/Grid"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; @@ -65,7 +65,6 @@ import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog"; import api from "../../../../common/api"; import AddIcon from "@mui/icons-material/Add"; import DeleteIcon from "@mui/icons-material/Delete"; -import SectionTitle from "../../Common/SectionTitle"; interface ITenantIdentityProvider { classes: any; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx index b1752212735..9fb702c9196 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx @@ -27,11 +27,16 @@ import { import { Box, Grid } from "@mui/material"; import UpdateTenantModal from "./UpdateTenantModal"; import { AppState, useAppDispatch } from "../../../../store"; -import AButton from "../../Common/AButton/AButton"; import SummaryUsageBar from "../../Common/UsageBarWrapper/SummaryUsageBar"; import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair"; -import SectionTitle from "../../Common/SectionTitle"; -import { Button, DisableIcon, EditIcon, TierOnlineIcon } from "mds"; +import { + ActionLink, + Button, + DisableIcon, + EditIcon, + TierOnlineIcon, + SectionTitle, +} from "mds"; import EditDomains from "./EditDomains"; import { useParams } from "react-router-dom"; import { getTenantAsync } from "../thunks/tenantDetailsAsync"; @@ -236,8 +241,8 @@ const TenantSummary = ({ classes }: ITenantsSummary) => { { }} > {tenant ? tenant.image : ""} - + } />
diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx index 7c317d0645f..1e69b0d9edc 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx @@ -19,7 +19,7 @@ import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { LinearProgress } from "@mui/material"; import { Theme } from "@mui/material/styles"; -import { Button } from "mds"; +import { Button, SectionTitle } from "mds"; import Grid from "@mui/material/Grid"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; @@ -33,7 +33,6 @@ import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/Cod import { setModalErrorSnackMessage } from "../../../../systemSlice"; import { AppState, useAppDispatch } from "../../../../store"; import { getTenantAsync } from "../thunks/tenantDetailsAsync"; -import SectionTitle from "../../Common/SectionTitle"; const styles = (theme: Theme) => createStyles({