-
-
+
);
};
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 (
-
-
-
-
- {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({