Ark/openmaxio-object-browser
1
0
Fork 0
mirror of https://github.com/OpenMaxIO/openmaxio-object-browser synced 2026-07-01 07:41:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Replacing all buttons from console with mds (#2303)

Browse Source 
Replaces buttons in console to start using MinIO Design System (mds)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2022-09-09 17:42:30 -05:00
committed by GitHub
parent 1108cee626
commit f7b142e74a
137 changed files with 4099 additions and 4726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
portal-ui/package.json
View File

@@ -10,6 +10,7 @@
"@mui/lab": "^5.0.0-alpha.83",
"@mui/material": "^5.8.1",
"@mui/styles": "^5.8.0",
"@mui/x-date-pickers": "^5.0.0",
"@reduxjs/toolkit": "^1.8.1",
"@types/lodash": "^4.14.149",
"@types/minio": "^7.0.11",
@@ -29,6 +30,7 @@
"kbar": "^0.1.0-beta.34",
"local-storage-fallback": "^4.1.1",
"lodash": "^4.17.21",
"mds": "https://github.com/minio/mds.git#v0.0.2",
"minio": "^7.0.28",
"moment": "^2.29.4",
"react": "^18.1.0",

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

@@ -30,6 +30,7 @@ import { generateOverrideTheme } from "./utils/stylesUtils";
import "./index.css";
import { useSelector } from "react-redux";
import { AppState } from "./store";
import { ThemeHandler } from "mds";
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -85,10 +86,6 @@ const StyleHandler = ({ children }: IStyleHandler) => {
width: 16,
},
},
// You should target [class*="MuiButton-root"] instead if you nest themes.
".MuiButton-root:not(.noDefaultHeight)": {
height: 38,
},
".MuiButton-contained": {
fontSize: "14px",
textTransform: "capitalize",
@@ -155,11 +152,14 @@ const StyleHandler = ({ children }: IStyleHandler) => {
},
})(() => null);
// ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
return (
<Fragment>
<GlobalCss />
<StyledEngineProvider injectFirst>
<ThemeProvider theme={thm}>{children}</ThemeProvider>
<ThemeProvider theme={thm}>
<ThemeHandler>{children}</ThemeHandler>
</ThemeProvider>
</StyledEngineProvider>
</Fragment>
);

45
portal-ui/src/screens/Console/Account/Account.tsx
View File

@@ -15,6 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Button } from "mds";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { Theme } from "@mui/material/styles";
@@ -51,7 +52,7 @@ import {
IAM_SCOPES,
} from "../../../common/SecureComponent/permissions";
import { SecureComponent } from "../../../common/SecureComponent";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { selectSAs } from "../Configurations/utils";
import DeleteMultipleServiceAccounts from "../Users/DeleteMultipleServiceAccounts";
import ServiceAccountPolicy from "./ServiceAccountPolicy";
@@ -59,6 +60,7 @@ import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
import makeStyles from "@mui/styles/makeStyles";
import { selFeatures } from "../consoleSlice";
import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
const DeleteServiceAccount = withSuspense(
React.lazy(() => import("./DeleteServiceAccount"))
@@ -220,40 +222,41 @@ const Account = () => {
}}
>
{" "}
<RBIconButton
tooltip={"Delete Selected"}
onClick={() => {
setDeleteMultipleOpen(true);
}}
text={"Delete Selected"}
icon={<DeleteIcon />}
color="secondary"
disabled={selectedSAs.length === 0}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Delete Selected"}>
<Button
id={"delete-selected-accounts"}
onClick={() => {
setDeleteMultipleOpen(true);
}}
label={"Delete Selected"}
icon={<DeleteIcon />}
disabled={selectedSAs.length === 0}
variant={"secondary"}
/>
</TooltipWrapper>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_CREATE_USER]}
resource={CONSOLE_UI_RESOURCE}
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
<Button
id={"change-password"}
onClick={() => setChangePasswordModalOpen(true)}
text={`Change Password`}
label={`Change Password`}
icon={<PasswordKeyIcon />}
color={"primary"}
variant={"outlined"}
variant={"regular"}
disabled={userIDP}
/>
</SecureComponent>
<RBIconButton
onClick={(e) => {
<Button
id={"create-service-account"}
onClick={() => {
navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
}}
text={`Create service account`}
label={`Create service account`}
icon={<AddIcon />}
color={"primary"}
variant={"contained"}
variant={"callAction"}
/>
</Box>
</Grid>

22
portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
View File

@@ -17,6 +17,7 @@
import React, { Fragment, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
@@ -24,7 +25,7 @@ import {
modalStyleUtils,
} from "../Common/FormComponents/common/styleLibrary";
import Grid from "@mui/material/Grid";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import {
IAMPoliciesIcon,
PasswordKeyIcon,
@@ -287,17 +288,20 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button type="submit" variant="contained" color="primary">
Create
</Button>
<Button
id={"create-sa"}
type="submit"
variant="callAction"
color="primary"
label={"Create"}
/>
</Grid>
</Grid>
</form>

12
portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
View File

@@ -15,14 +15,14 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import Grid from "@mui/material/Grid";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import {
containerForHeader,
formFieldStyles,
@@ -193,8 +193,9 @@ const ChangePassword = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"save-password-modal"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={
loading ||
@@ -204,9 +205,8 @@ const ChangePassword = ({
reNewPassword.length > 0
)
}
>
Save
</Button>
label="Save"
/>
</Grid>
{loading && (
<Grid item xs={12}>

12
portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
View File

@@ -15,14 +15,14 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import Grid from "@mui/material/Grid";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import {
containerForHeader,
formFieldStyles,
@@ -156,16 +156,16 @@ const ChangeUserPassword = ({
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
id={"save-user-password"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={
loading ||
!(reNewPassword.length > 0 && newPassword === reNewPassword)
}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{loading && (
<Grid item xs={12}>

19
portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
View File

@@ -16,7 +16,7 @@
import React, { useEffect, useState } from "react";
import { Button } from "@mui/material";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -139,24 +139,23 @@ const ServiceAccountPolicy = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel-sa-policy"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={() => {
closeModalAndRefresh();
}}
disabled={loading}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save-sa-policy"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={loading}
>
Set
</Button>
label={"Set"}
/>
</Grid>
</Grid>
</form>

26
portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
View File

@@ -18,8 +18,9 @@ import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import { Button } from "mds";
import { Paper } from "@mui/material";
import createStyles from "@mui/styles/createStyles";
import { ErrorResponseHandler } from "../../../../common/types";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import api from "../../../../common/api";
@@ -41,11 +42,11 @@ import {
} from "../../../../common/SecureComponent";
import withSuspense from "../../Common/Components/withSuspense";
import RBIconButton from "./SummaryItems/RBIconButton";
import { setErrorSnackMessage } from "../../../../systemSlice";
import makeStyles from "@mui/styles/makeStyles";
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const AddAccessRuleModal = withSuspense(
React.lazy(() => import("./AddAccessRule"))
@@ -203,16 +204,17 @@ const AccessRule = () => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Add Access Rule"}
onClick={() => {
setAddAccessRuleOpen(true);
}}
text={"Add Access Rule"}
icon={<AddIcon />}
color="primary"
variant={"contained"}
/>
<TooltipWrapper tooltip={"Add Access Rule"}>
<Button
id={"add-bucket-access-rule"}
onClick={() => {
setAddAccessRuleOpen(true);
}}
label={"Add Access Rule"}
icon={<AddIcon />}
variant={"callAction"}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
<Paper className={classes.tableBlock}>

22
portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
View File

@@ -16,7 +16,8 @@
import React, { useState } from "react";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import { Button } from "mds";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -121,22 +122,21 @@ const AddAccessRule = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
color="primary"
variant="outlined"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"add-access-save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={prefix.trim() === ""}
onClick={createProcess}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</ModalWrapper>

21
portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
View File

@@ -15,8 +15,8 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { Button, Grid } from "@mui/material";
import { Button } from "mds";
import { Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -127,24 +127,23 @@ const AddBucketTagModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"save-add-bucket-tag"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={
newLabel.trim() === "" || newKey.trim() === "" || isSending
}
onClick={addTagProcess}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</ModalWrapper>

20
portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
View File

@@ -17,7 +17,7 @@
import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import { Button } from "@mui/material";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -247,24 +247,22 @@ const AddEvent = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel-add-event"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save-event"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={addLoading}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</form>

19
portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
View File

@@ -16,6 +16,7 @@
import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import { Button } from "mds";
import { useSelector } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -24,7 +25,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Button,
LinearProgress,
SelectChangeEvent,
Typography,
@@ -403,24 +403,23 @@ const AddLifecycleModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"reset"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh(false);
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save-lifecycle"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading || !isFormValid}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{addLoading && (
<Grid item xs={12}>

20
portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
View File

@@ -16,9 +16,10 @@
import React, { useEffect, useState } 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 { Button, SelectChangeEvent } from "@mui/material";
import { SelectChangeEvent } from "@mui/material";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import {
@@ -451,24 +452,23 @@ const AddReplicationModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"submit"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</form>

25
portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
View File

@@ -20,7 +20,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Grid, IconButton, Tooltip } from "@mui/material";
import { Grid } from "@mui/material";
import { AppState, useAppDispatch } from "../../../../store";
import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
@@ -44,6 +44,8 @@ import {
import SearchBox from "../../Common/SearchBox";
import { selFeatures } from "../../consoleSlice";
import AutoColorIcon from "../../Common/Components/AutoColorIcon";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import { Button } from "mds";
const styles = (theme: Theme) =>
createStyles({
@@ -127,17 +129,22 @@ const BrowserHandler = () => {
resource={bucketName}
errorProps={{ disabled: true }}
>
<Tooltip title={"Configure Bucket"}>
<IconButton
<TooltipWrapper tooltip={"Configure Bucket"}>
<Button
id={"configure-bucket-main"}
color="primary"
aria-label="Configure Bucket"
component="span"
onClick={openBucketConfiguration}
size="large"
>
<SettingsIcon />
</IconButton>
</Tooltip>
icon={
<SettingsIcon
style={{ width: 20, height: 20, marginTop: -3 }}
/>
}
style={{
padding: "0 10px",
}}
/>
</TooltipWrapper>
</SecureComponent>
}
middleComponent={searchBar}

58
portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
View File

@@ -23,6 +23,7 @@ import {
useNavigate,
useParams,
} from "react-router-dom";
import { Button } from "mds";
import { useSelector } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -41,7 +42,7 @@ import { ErrorResponseHandler } from "../../../../common/types";
import PageHeader from "../../Common/PageHeader/PageHeader";
import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
import { Box, IconButton, Tooltip } from "@mui/material";
import { Box } from "@mui/material";
import RefreshIcon from "../../../../icons/RefreshIcon";
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
@@ -54,7 +55,6 @@ import {
} from "../../../../common/SecureComponent";
import withSuspense from "../../Common/Components/withSuspense";
import RBIconButton from "./SummaryItems/RBIconButton";
import { TrashIcon } from "../../../../icons";
import {
selDistSet,
@@ -68,6 +68,7 @@ import {
setBucketInfo,
} from "./bucketDetailsSlice";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const BucketsIcon = React.lazy(() => import("../../../../icons/BucketsIcon"));
const FolderIcon = React.lazy(() => import("../../../../icons/FolderIcon"));
@@ -208,19 +209,19 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
<PageHeader
label={<BackLink to={"/buckets"} label={"Buckets"} />}
actions={
<Fragment>
<Tooltip title={"Browse Bucket"}>
<IconButton
color="primary"
aria-label="Browse Bucket"
component="span"
onClick={openBucketBrowser}
size="large"
>
<FolderIcon />
</IconButton>
</Tooltip>
</Fragment>
<TooltipWrapper tooltip={"Browse Bucket"}>
<Button
id={"switch-browse-view"}
aria-label="Browse Bucket"
onClick={openBucketBrowser}
icon={
<FolderIcon style={{ width: 20, height: 20, marginTop: -3 }} />
}
style={{
padding: "0 10px",
}}
/>
</TooltipWrapper>
}
/>
<PageLayout className={classes.pageContainer}>
@@ -259,24 +260,25 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
resource={bucketName}
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Delete Bucket"}
onClick={() => {
setDeleteOpen(true);
}}
text={"Delete Bucket"}
icon={<TrashIcon />}
color={"secondary"}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Delete Bucket"}>
<Button
id={"delete-bucket-button"}
onClick={() => {
setDeleteOpen(true);
}}
label={"Delete Bucket"}
icon={<TrashIcon />}
variant={"secondary"}
/>
</TooltipWrapper>
</SecureComponent>
<RBIconButton
<Button
id={"refresh-bucket-info"}
onClick={() => {
dispatch(setBucketDetailsLoad(true));
}}
text={`Refresh`}
label={"Refresh"}
icon={<RefreshIcon />}
color={"primary"}
/>
</Fragment>
}

24
portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
View File

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import get from "lodash/get";
@@ -42,10 +43,10 @@ import {
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
import withSuspense from "../../Common/Components/withSuspense";
import RBIconButton from "./SummaryItems/RBIconButton";
import { setErrorSnackMessage } from "../../../../systemSlice";
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
@@ -160,16 +161,17 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Subscribe to Event"}
onClick={() => {
setAddEventScreenOpen(true);
}}
text={"Subscribe to Event"}
icon={<AddIcon />}
color="primary"
variant={"contained"}
/>
<TooltipWrapper tooltip={"Subscribe to Event"}>
<Button
id={"Subscribe-bucket-event"}
onClick={() => {
setAddEventScreenOpen(true);
}}
label={"Subscribe to Event"}
icon={<AddIcon />}
variant={"callAction"}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item xs={12}>

24
portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
View File

@@ -39,10 +39,11 @@ import {
SecureComponent,
} from "../../../../common/SecureComponent";
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
import RBIconButton from "./SummaryItems/RBIconButton";
import DeleteBucketLifecycleRule from "./DeleteBucketLifecycleRule";
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
import { useParams } from "react-router-dom";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import { Button } from "mds";
const styles = (theme: Theme) =>
createStyles({
@@ -282,16 +283,17 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Add Lifecycle Rule"}
onClick={() => {
setAddLifecycleOpen(true);
}}
text={"Add Lifecycle Rule"}
icon={<AddIcon />}
color="primary"
variant={"contained"}
/>
<TooltipWrapper tooltip={"Add Lifecycle Rule"}>
<Button
id={"add-bucket-lifecycle-rule"}
onClick={() => {
setAddLifecycleOpen(true);
}}
label={"Add Lifecycle Rule"}
icon={<AddIcon />}
variant={"callAction"}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item xs={12}>

50
portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
View File

@@ -17,6 +17,7 @@
import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
@@ -42,12 +43,12 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import HelpBox from "../../../../common/HelpBox";
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
import withSuspense from "../../Common/Components/withSuspense";
import RBIconButton from "./SummaryItems/RBIconButton";
import EditReplicationModal from "./EditReplicationModal";
import { setErrorSnackMessage } from "../../../../systemSlice";
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
import { useParams } from "react-router-dom";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const AddReplicationModal = withSuspense(
React.lazy(() => import("./AddReplicationModal"))
@@ -250,24 +251,26 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
<Grid container>
<Grid item xs={12} className={classes.actionsTray}>
<PanelTitle>Replication</PanelTitle>
<div>
<div style={{ display: "flex" }}>
<SecureComponent
scopes={[IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION]}
resource={bucketName}
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Remove Selected Replication Rules"}
onClick={() => {
confirmDeleteSelectedReplicationRules();
}}
text={"Remove Selected Rules"}
icon={<TrashIcon />}
color={"secondary"}
variant={"outlined"}
disabled={selectedRepRules.length === 0}
/>
<TooltipWrapper tooltip={"Remove Selected Replication Rules"}>
<Button
id={"remove-bucket-replication-rule"}
onClick={() => {
confirmDeleteSelectedReplicationRules();
}}
label={"Remove Selected Rules"}
icon={<TrashIcon />}
color={"secondary"}
disabled={selectedRepRules.length === 0}
variant={"secondary"}
/>
</TooltipWrapper>
</SecureComponent>
<SecureComponent
scopes={[IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION]}
@@ -275,16 +278,17 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Add Replication Rule"}
onClick={() => {
setOpenReplicationOpen(true);
}}
text={"Add Replication Rule"}
icon={<AddIcon />}
color="primary"
variant={"contained"}
/>
<TooltipWrapper tooltip={"Add Replication Rule"}>
<Button
id={"add-bucket-replication-rule"}
onClick={() => {
setOpenReplicationOpen(true);
}}
label={"Add Replication Rule"}
icon={<AddIcon />}
variant={"callAction"}
/>
</TooltipWrapper>
</SecureComponent>
</div>
</Grid>

21
portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
View File

@@ -16,8 +16,9 @@
import React, { useState } from "react";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
@@ -107,21 +108,19 @@ const EditAccessRule = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
color="primary"
variant="outlined"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
onClick={createProcess}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</ModalWrapper>

19
portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
View File

@@ -19,12 +19,12 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Button,
LinearProgress,
SelectChangeEvent,
Typography,
} from "@mui/material";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import createStyles from "@mui/styles/createStyles";
@@ -542,24 +542,23 @@ const EditLifecycleConfiguration = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh(false);
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading || !isFormValid}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{addLoading && (
<Grid item xs={12}>

20
portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx
View File

@@ -17,7 +17,7 @@
import React, { useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import { Button } from "@mui/material";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -321,24 +321,22 @@ const EditReplicationModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel-edit-replication"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={editLoading || saveEdit}
onClick={() => {
closeModalAndRefresh(false);
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save-replication"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={editLoading || saveEdit}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</form>

21
portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
View File

@@ -16,7 +16,8 @@
import React, { useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
import { LinearProgress, SelectChangeEvent } from "@mui/material";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -166,24 +167,22 @@ const EnableBucketEncryption = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="submit"
variant="outlined"
color="primary"
variant="regular"
onClick={() => {
closeModalAndRefresh();
}}
disabled={loading}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={loading}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{loading && (
<Grid item xs={12}>

21
portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
View File

@@ -15,8 +15,9 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState } from "react";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
@@ -190,25 +191,23 @@ const EnableQuota = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={loading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={loading || !validInput}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{loading && (
<Grid item xs={12}>

3
portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
View File

@@ -70,8 +70,7 @@ const EnableVersioningModal = ({
titleIcon={<ConfirmModalIcon />}
onConfirm={enableVersioning}
confirmButtonProps={{
color: "primary",
variant: "contained",
variant: "callAction",
}}
onClose={() => {
closeVersioningModalAndRefresh(false);

21
portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
View File

@@ -15,8 +15,9 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState } from "react";
import { Button, SelectChangeEvent } from "@mui/material";
import { SelectChangeEvent } from "@mui/material";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
@@ -157,26 +158,24 @@ const SetAccessPolicy = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={() => {
closeModalAndRefresh();
}}
disabled={addLoading}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"set"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={
addLoading || (accessPolicy === "CUSTOM" && !policyDefinition)
}
>
Set
</Button>
label={"Set"}
/>
</Grid>
</Grid>
</form>

21
portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
View File

@@ -15,8 +15,8 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState } from "react";
import { Button, LinearProgress } from "@mui/material";
import { Button } from "mds";
import { LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -184,24 +184,23 @@ const SetRetentionConfig = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
id={"set"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading || !valid}
>
Set
</Button>
label={"Set"}
/>
</Grid>
{addLoading && (
<Grid item xs={12}>

2
portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx
View File

@@ -25,6 +25,8 @@ type ActionLinkProps = {
label: any;
[x: string]: any;
};
// TODO: Create an mds version of this.
const ActionLink = ({
isLoading,
onClick,

119
portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
View File

@@ -1,119 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2022 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment } from "react";
import BoxIconButton from "../../../Common/BoxIconButton/BoxIconButton";
import { IconButtonProps } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
import { Theme } from "@mui/material/styles";
type DeleteButtonProps = {
onClick: (e: any) => void;
text?: string;
disabled?: boolean;
size?: string;
tooltip?: string;
classes?: any;
icon?: React.ReactNode;
showLabelAlways?: boolean;
[x: string]: any;
};
type RBIconProps = Partial<IconButtonProps> & DeleteButtonProps;
const useStyles = makeStyles((theme: Theme) => {
const getButtonColor = (props: RBIconProps) => {
const { variant, color } = props;
let tgtColor = theme.palette.primary.main;
if (color === "primary" && variant === "contained") {
tgtColor = theme.palette.primary.contrastText;
} else if (color === "primary" && variant === "outlined") {
tgtColor = theme.palette.primary.main;
} else if (color === "secondary") {
tgtColor = theme.palette.secondary.main;
}
return tgtColor;
};
return {
root: {
padding: "7px",
color: (props: RBIconProps) => getButtonColor(props),
borderColor: (props: RBIconProps) =>
props.color === "secondary"
? theme.palette.secondary.main
: theme.palette.primary.main,
"& svg.min-icon": {
width: 12,
marginLeft: (props: RBIconProps) => (props.text ? "5px" : "0px"),
"@media (max-width: 900px)": {
width: 16,
marginLeft: "0px !important",
},
},
},
};
});
const RBIconButton = (props: RBIconProps) => {
const classes = useStyles(props);
const {
onClick,
text = "",
disabled = false,
tooltip,
icon = null,
className = "",
showLabelAlways = false,
...restProps
} = props;
return (
<BoxIconButton
className={className}
classes={classes}
tooltip={tooltip || text}
variant="outlined"
onClick={onClick}
disabled={disabled}
size="medium"
sx={{
"& span": {
fontSize: 14,
"@media (max-width: 900px)": {
"&:not(.MuiBadge-root, .MuiBadge-badge)": {
display: showLabelAlways ? "inline" : "none",
marginRight: showLabelAlways ? "7px" : "",
},
},
},
}}
{...restProps}
>
{text !== "" && (
<Fragment>
<span>{text}</span>
</Fragment>
)}
{icon}
</BoxIconButton>
);
};
export default RBIconButton;

24
portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
View File

@@ -16,9 +16,10 @@
import React, { Fragment, useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary";
@@ -63,8 +64,9 @@ const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
marginTop: 24,
textAlign: "right",
"& .MuiButton-root": {
display: "flex",
justifyContent: "flex-end",
"& button": {
marginLeft: 8,
},
},
@@ -461,21 +463,21 @@ const AddBucket = ({ classes }: IsetProps) => {
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
id={"clear"}
type="button"
variant={"outlined"}
variant={"regular"}
className={classes.clearButton}
onClick={resForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"create-bucket"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading || invalidFields.length > 0 || hasErrors}
>
Create Bucket
</Button>
label={"Create Bucket"}
/>
</Grid>
{addLoading && (
<Grid item xs={12}>

46
portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
View File

@@ -16,6 +16,7 @@
import React, { Fragment } from "react";
import get from "lodash/get";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
@@ -39,8 +40,8 @@ import {
IAM_ROLES,
} from "../../../../common/SecureComponent/permissions";
import { SecureComponent } from "../../../../common/SecureComponent";
import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
import clsx from "clsx";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -53,7 +54,6 @@ const styles = (theme: Theme) =>
"& .min-icon": {
height: 14,
width: 14,
marginRight: 4,
},
"& .MuiTypography-body2": {
fontSize: 14,
@@ -151,6 +151,10 @@ const styles = (theme: Theme) =>
alignItems: "center",
justifyContent: "flex-end",
"& button": {
marginLeft: 8,
},
"@media (max-width: 900px)": {
marginTop: "-33px",
},
@@ -245,26 +249,28 @@ const BucketListItem = ({
scopes={IAM_PERMISSIONS[IAM_ROLES.BUCKET_ADMIN]}
resource={bucket.name}
>
<RBIconButton
tooltip={"Manage"}
onClick={() => navigate(`/buckets/${bucket.name}/admin`)}
text={"Manage"}
icon={<SettingsIcon />}
color={"primary"}
variant={"outlined"}
id={`manage-${bucket.name}`}
/>
<TooltipWrapper tooltip={"Manage"}>
<Button
onClick={() => navigate(`/buckets/${bucket.name}/admin`)}
label={"Manage"}
icon={<SettingsIcon />}
color={"primary"}
variant={"regular"}
id={`manage-${bucket.name}`}
/>
</TooltipWrapper>
</SecureComponent>
)}
<RBIconButton
tooltip={"Browse"}
onClick={() => navigate(`/buckets/${bucket.name}/browse`)}
text={"Browse"}
icon={<ArrowRightIcon />}
color={"primary"}
variant={"contained"}
id={`browse-${bucket.name}`}
/>
<TooltipWrapper tooltip={"Browse"}>
<Button
onClick={() => navigate(`/buckets/${bucket.name}/browse`)}
label={"Browse"}
icon={<ArrowRightIcon />}
color={"primary"}
variant={"callAction"}
id={`browse-${bucket.name}`}
/>
</TooltipWrapper>
<Box display={{ xs: "none", sm: "block" }}>
<div style={{ marginBottom: 10 }} />
</Box>

135
portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
View File

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { LinearProgress } from "@mui/material";
@@ -40,7 +41,6 @@ import BucketListItem from "./BucketListItem";
import BulkReplicationModal from "./BulkReplicationModal";
import HelpBox from "../../../../common/HelpBox";
import RefreshIcon from "../../../../icons/RefreshIcon";
import AButton from "../../Common/AButton/AButton";
import MultipleBucketsIcon from "../../../../icons/MultipleBucketsIcon";
import SelectMultipleIcon from "../../../../icons/SelectMultipleIcon";
import { SecureComponent } from "../../../../common/SecureComponent";
@@ -52,7 +52,6 @@ import {
import PageLayout from "../../Common/Layout/PageLayout";
import SearchBox from "../../Common/SearchBox";
import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
import BulkLifecycleModal from "./BulkLifecycleModal";
import hasPermission from "../../../../common/SecureComponent/accessControl";
import { setErrorSnackMessage } from "../../../../systemSlice";
@@ -60,6 +59,8 @@ import { useAppDispatch } from "../../../../store";
import { useSelector } from "react-redux";
import { selFeatures } from "../../consoleSlice";
import AutoColorIcon from "../../Common/Components/AutoColorIcon";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import AButton from "../../Common/AButton/AButton";
const styles = (theme: Theme) =>
createStyles({
@@ -239,87 +240,97 @@ const ListBuckets = ({ classes }: IListBucketsProps) => {
display={"flex"}
alignItems={"center"}
justifyContent={"flex-end"}
sx={{
"& button": {
marginLeft: "8px",
},
}}
>
{!obOnly && (
<Fragment>
<RBIconButton
<TooltipWrapper
tooltip={
bulkSelect ? "Unselect Buckets" : "Select Multiple Buckets"
}
onClick={() => {
setBulkSelect(!bulkSelect);
setSelectedBuckets([]);
}}
text={""}
icon={<SelectMultipleIcon />}
color={"primary"}
variant={bulkSelect ? "contained" : "outlined"}
/>
>
<Button
id={"multiple-bucket-seection"}
onClick={() => {
setBulkSelect(!bulkSelect);
setSelectedBuckets([]);
}}
icon={<SelectMultipleIcon />}
variant={bulkSelect ? "callAction" : "regular"}
/>
</TooltipWrapper>
{bulkSelect && (
<RBIconButton
<TooltipWrapper
tooltip={
selectedBuckets.length === filteredRecords.length
? "Unselect All Buckets"
: "Select All Buckets"
}
onClick={selectAllBuckets}
text={""}
icon={<SelectAllIcon />}
color={"primary"}
variant={"outlined"}
/>
>
<Button
id={"select-all-buckets"}
onClick={selectAllBuckets}
icon={<SelectAllIcon />}
variant={"regular"}
/>
</TooltipWrapper>
)}
<RBIconButton
tooltip={"Set Lifecycle"}
onClick={() => {
setLifecycleModalOpen(true);
}}
text={""}
icon={<LifecycleConfigIcon />}
disabled={selectedBuckets.length === 0}
color={"primary"}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Set Lifecycle"}>
<Button
id={"set-lifecycle"}
onClick={() => {
setLifecycleModalOpen(true);
}}
icon={<LifecycleConfigIcon />}
variant={"regular"}
disabled={selectedBuckets.length === 0}
/>
</TooltipWrapper>
<RBIconButton
tooltip={"Set Replication"}
onClick={() => {
setReplicationModalOpen(true);
}}
text={""}
icon={<MultipleBucketsIcon />}
disabled={selectedBuckets.length === 0}
color={"primary"}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Set Replication"}>
<Button
id={"set-replication"}
onClick={() => {
setReplicationModalOpen(true);
}}
icon={<MultipleBucketsIcon />}
variant={"regular"}
disabled={selectedBuckets.length === 0}
/>
</TooltipWrapper>
</Fragment>
)}
<RBIconButton
tooltip={"Refresh"}
onClick={() => {
setLoading(true);
}}
text={""}
icon={<RefreshIcon />}
color={"primary"}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Refresh"}>
<Button
id={"refresh-buckets"}
onClick={() => {
setLoading(true);
}}
icon={<RefreshIcon />}
variant={"regular"}
/>
</TooltipWrapper>
{!obOnly && (
<RBIconButton
tooltip={"Create Bucket"}
onClick={() => {
navigate(IAM_PAGES.ADD_BUCKETS);
}}
text={"Create Bucket"}
icon={<AddIcon />}
color={"primary"}
variant={"contained"}
disabled={!canCreateBucket}
/>
<TooltipWrapper tooltip={"Create Bucket"}>
<Button
id={"create-bucket"}
onClick={() => {
navigate(IAM_PAGES.ADD_BUCKETS);
}}
icon={<AddIcon />}
variant={"callAction"}
disabled={!canCreateBucket}
label={"Create Bucket"}
/>
</TooltipWrapper>
)}
</Grid>
</Grid>

20
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx
View File

@@ -16,8 +16,9 @@
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "mds";
import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -168,22 +169,21 @@ const CreatePathModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
color="primary"
variant="outlined"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"create"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={!isFormValid}
onClick={createProcess}
>
Create
</Button>
label={"Create"}
/>
</Grid>
</Grid>
</ModalWrapper>

11
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/InspectObject.tsx
View File

@@ -15,7 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { Button } from "mds";
import withStyles from "@mui/styles/withStyles";
import {
decodeURLString,
@@ -27,7 +27,6 @@ import {
import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
import { InspectMenuIcon } from "../../../../../../icons/SidebarMenus";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -156,13 +155,13 @@ const InspectObject = ({
/>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"inspect"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
onClick={performInspect}
>
Inspect
</Button>
label={"Inspect"}
/>
</Grid>
</form>
</ModalWrapper>

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

@@ -26,6 +26,7 @@ import { useSelector } from "react-redux";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useDropzone } from "react-dropzone";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import Grid from "@mui/material/Grid";
import get from "lodash/get";
@@ -86,7 +87,6 @@ import {
import UploadFilesButton from "../../UploadFilesButton";
import DetailsListPanel from "./DetailsListPanel";
import ObjectDetailPanel from "./ObjectDetailPanel";
import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
import ActionsListSection from "./ActionsListSection";
import { listModeColumns, rewindModeColumns } from "./ListObjectsHelpers";
import VersionsNavigator from "../ObjectDetails/VersionsNavigator";
@@ -128,6 +128,7 @@ import {
} from "../../../BucketDetails/bucketDetailsSlice";
import RenameLongFileName from "../../../../ObjectBrowser/RenameLongFilename";
import { selFeatures } from "../../../../consoleSlice";
import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper";
const HistoryIcon = React.lazy(
() => import("../../../../../../icons/HistoryIcon")
@@ -1396,58 +1397,60 @@ const ListObjects = () => {
actions={
<Fragment>
<div className={classes.actionsSection}>
<RBIconButton
id={"rewind-objects-list"}
tooltip={"Rewind Bucket"}
text={"Rewind"}
icon={
<Badge
badgeContent=" "
color="secondary"
variant="dot"
invisible={!rewindEnabled}
className={classes.badgeOverlap}
sx={{ height: 16 }}
>
<HistoryIcon
style={{
minWidth: 16,
minHeight: 16,
width: 16,
height: 16,
}}
/>
</Badge>
}
color="primary"
variant={"outlined"}
onClick={() => {
setRewindSelect(true);
}}
disabled={
!isVersioned ||
!hasPermission(bucketName, [IAM_SCOPES.S3_GET_OBJECT])
}
/>
<RBIconButton
id={"refresh-objects-list"}
tooltip={"Reload List"}
text={"Refresh"}
icon={<RefreshIcon />}
color="primary"
variant={"outlined"}
onClick={() => {
if (versionsMode) {
dispatch(setLoadingVersions(true));
} else {
dispatch(setLoadingObjectsList(true));
<TooltipWrapper tooltip={"Rewind Bucket"}>
<Button
id={"rewind-objects-list"}
label={"Rewind"}
icon={
<Badge
badgeContent=" "
color="secondary"
variant="dot"
invisible={!rewindEnabled}
className={classes.badgeOverlap}
sx={{ height: 16 }}
>
<HistoryIcon
style={{
minWidth: 16,
minHeight: 16,
width: 16,
height: 16,
marginTop: -3,
}}
/>
</Badge>
}
}}
disabled={
!hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) ||
rewindEnabled
}
/>
variant={"regular"}
onClick={() => {
setRewindSelect(true);
}}
disabled={
!isVersioned ||
!hasPermission(bucketName, [IAM_SCOPES.S3_GET_OBJECT])
}
/>
</TooltipWrapper>
<TooltipWrapper tooltip={"Reload List"}>
<Button
id={"refresh-objects-list"}
label={"Refresh"}
icon={<RefreshIcon />}
variant={"regular"}
onClick={() => {
if (versionsMode) {
dispatch(setLoadingVersions(true));
} else {
dispatch(setLoadingObjectsList(true));
}
}}
disabled={
!hasPermission(bucketName, [
IAM_SCOPES.S3_LIST_BUCKET,
]) || rewindEnabled
}
/>
</TooltipWrapper>
<input
type="file"
multiple

1
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectActionButton.tsx
View File

@@ -55,6 +55,7 @@ const styles = (theme: Theme) =>
},
});
// TODO: Create an mds version of this.
const ObjectActionButton = ({
disabled,
onClick,

24
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
View File

@@ -16,8 +16,9 @@
import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import { withStyles } from "@mui/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
@@ -620,7 +621,7 @@ const ObjectDetailPanel = ({
items={multiActionButtons}
/>
<Grid item xs={12} sx={{ textAlign: "center" }}>
<Grid item xs={12} sx={{ justifyContent: "center", display: "flex" }}>
<SecureComponent
resource={[
bucketName,
@@ -631,24 +632,21 @@ const ObjectDetailPanel = ({
errorProps={{ disabled: true }}
>
<Button
startIcon={<DeleteIcon />}
color="secondary"
variant={"outlined"}
id={"delete-element-click"}
icon={<DeleteIcon />}
iconLocation={"start"}
fullWidth
variant={"secondary"}
onClick={() => {
setDeleteOpen(true);
}}
disabled={selectedVersion === "" && actualInfo.is_delete_marker}
sx={{
style={{
width: "calc(100% - 44px)",
margin: "8px 0",
"& svg.min-icon": {
width: 14,
height: 14,
},
}}
>
Delete{selectedVersion !== "" ? " version" : ""}
</Button>
label={`Delete${selectedVersion !== "" ? " version" : ""}`}
/>
</SecureComponent>
</Grid>
<Grid item xs={12} className={classes.headerForSection}>

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

@@ -16,7 +16,8 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import { Button } from "mds";
import Grid from "@mui/material/Grid";
import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
import DateTimePickerWrapper from "../../../../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
@@ -96,7 +97,7 @@ const RewindEnable = ({
</Grid>
<Grid container>
{rewindEnabled && (
<Grid item xs={12}>
<Grid item xs={12} sx={{ marginBottom: "10px" }}>
<FormSwitchWrapper
value="status"
id="status"
@@ -110,19 +111,23 @@ const RewindEnable = ({
/>
</Grid>
)}
<Grid item xs={12} style={{ textAlign: "right" }}>
<Grid
item
xs={12}
style={{ justifyContent: "flex-end", display: "flex" }}
>
<Button
type="button"
variant="contained"
color="primary"
variant="callAction"
disabled={rewindEnabling || (!dateSelected && rewindEnableButton)}
onClick={rewindApply}
id={"rewind-apply-button"}
>
{!rewindEnableButton && rewindEnabled
? "Show Current Data"
: "Show Rewind Data"}
</Button>
label={
!rewindEnableButton && rewindEnabled
? "Show Current Data"
: "Show Rewind Data"
}
/>
</Grid>
{rewindEnabling && (
<Grid item xs={12}>

3
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx
View File

@@ -84,8 +84,7 @@ const RestoreFileVersion = ({
titleIcon={<RecoverIcon />}
onConfirm={restoreVersion}
confirmButtonProps={{
color: "secondary",
variant: "outlined",
variant: "secondary",
disabled: restoreLoading,
}}
onClose={() => {

20
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
View File

@@ -20,7 +20,7 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import { Button } from "mds";
import {
formFieldStyles,
modalStyleUtils,
@@ -135,21 +135,19 @@ const SetLegalHoldModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
color="primary"
variant="outlined"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={isSaving}
>
Save
</Button>
label={" Save"}
/>
</Grid>
</form>
</ModalWrapper>

20
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
View File

@@ -20,7 +20,7 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import { Button } from "mds";
import {
formFieldStyles,
modalStyleUtils,
@@ -265,26 +265,24 @@ const SetRetention = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"reset"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={resetForm}
>
Reset
</Button>
label={"Reset"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={
(statusEnabled && type === "") ||
(statusEnabled && !isDateValid) ||
isSaving
}
onClick={saveNewRetentionPolicy}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</form>
</ModalWrapper>

14
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
View File

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import { useSelector } from "react-redux";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import CopyToClipboard from "react-copy-to-clipboard";
@@ -36,7 +37,6 @@ import PredefinedList from "../../../../Common/FormComponents/PredefinedList/Pre
import DaysSelector from "../../../../Common/FormComponents/DaysSelector/DaysSelector";
import { encodeURLString } from "../../../../../../common/utils";
import { ShareIcon } from "../../../../../../icons";
import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";
import {
selDistSet,
setModalErrorSnackMessage,
@@ -248,8 +248,9 @@ const ShareFile = ({
content={shareURL}
actionButton={
<CopyToClipboard text={shareURL}>
<BoxIconButton
variant="outlined"
<Button
id={"copy-path"}
variant="regular"
onClick={() => {
dispatch(
setModalSnackMessage(
@@ -258,15 +259,14 @@ const ShareFile = ({
);
}}
disabled={shareURL === "" || isLoadingFile}
sx={{
style={{
marginRight: "5px",
width: "28px",
height: "28px",
padding: "0px",
}}
>
<CopyIcon />
</BoxIconButton>
icon={<CopyIcon />}
/>
</CopyToClipboard>
}
/>

36
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx
View File

@@ -17,7 +17,8 @@
import React, { Fragment, useState } from "react";
import get from "lodash/get";
import { useSelector } from "react-redux";
import { Box, Button, Grid } from "@mui/material";
import { Box, Grid } from "@mui/material";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -219,22 +220,19 @@ const AddTagModal = ({
?
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"cancel"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={cancelDelete}
>
Cancel
</Button>
label={"Cancel"}
/>
<Button
type="submit"
variant="outlined"
color="secondary"
variant="secondary"
onClick={deleteTagProcess}
id={"deleteTag"}
>
Delete Tag
</Button>
label={"Delete Tag"}
/>
</Grid>
</Grid>
</Fragment>
@@ -335,17 +333,16 @@ const AddTagModal = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear"}
type="button"
variant="outlined"
variant="regular"
color="primary"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={
newLabel.trim() === "" ||
newKey.trim() === "" ||
@@ -353,9 +350,8 @@ const AddTagModal = ({
}
onClick={addTagProcess}
id="saveTag"
>
Save
</Button>
label={"Save"}
/>
</Grid>
</Grid>
</SecureComponent>

68
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
View File

@@ -57,7 +57,6 @@ import {
import FileVersionItem from "./FileVersionItem";
import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/SelectWrapper";
import PreviewFileModal from "../Preview/PreviewFileModal";
import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
import DeleteNonCurrent from "../ListObjects/DeleteNonCurrent";
import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
import DeleteSelectedVersions from "./DeleteSelectedVersions";
@@ -80,6 +79,8 @@ import {
updateProgress,
} from "../../../../ObjectBrowser/objectBrowserSlice";
import { List, ListRowProps } from "react-virtualized";
import { Button } from "mds";
import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -548,44 +549,43 @@ const VersionsNavigator = ({
}
actions={
<Fragment>
<RBIconButton
id={"select-multiple-versions"}
tooltip={"Select Multiple Versions"}
onClick={() => {
setSelectEnabled(!selectEnabled);
}}
text={""}
icon={<SelectMultipleIcon />}
color="primary"
variant={selectEnabled ? "contained" : "outlined"}
style={{ marginRight: 8 }}
/>
{selectEnabled && (
<RBIconButton
id={"delete-multiple-versions"}
tooltip={"Delete Selected Versions"}
<TooltipWrapper tooltip={"Select Multiple Versions"}>
<Button
id={"select-multiple-versions"}
onClick={() => {
setDelSelectedVOpen(true);
setSelectEnabled(!selectEnabled);
}}
text={""}
icon={<DeleteIcon />}
color="secondary"
icon={<SelectMultipleIcon />}
variant={selectEnabled ? "callAction" : "regular"}
style={{ marginRight: 8 }}
disabled={selectedItems.length === 0}
/>
</TooltipWrapper>
{selectEnabled && (
<TooltipWrapper tooltip={"Delete Selected Versions"}>
<Button
id={"delete-multiple-versions"}
onClick={() => {
setDelSelectedVOpen(true);
}}
icon={<DeleteIcon />}
variant={"secondary"}
style={{ marginRight: 8 }}
disabled={selectedItems.length === 0}
/>
</TooltipWrapper>
)}
<RBIconButton
id={"delete-non-current"}
tooltip={"Delete Non Current Versions"}
onClick={() => {
setDeleteNonCurrentOpen(true);
}}
text={""}
icon={<DeleteNonCurrentIcon />}
color="secondary"
style={{ marginRight: 15 }}
disabled={versions.length <= 1}
/>
<TooltipWrapper tooltip={"Delete Non Current Versions"}>
<Button
id={"delete-non-current"}
onClick={() => {
setDeleteNonCurrentOpen(true);
}}
icon={<DeleteNonCurrentIcon />}
variant={"secondary"}
style={{ marginRight: 15 }}
disabled={versions.length <= 1}
/>
</TooltipWrapper>
<span className={classes.sortByLabel}>Sort by</span>
<SelectWrapper
id={"sort-by"}

29
portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx
View File

@@ -22,9 +22,10 @@ import withStyles from "@mui/styles/withStyles";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import { UploadFolderIcon, UploadIcon } from "../../../../icons";
import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
import { hasPermission } from "../../../../common/SecureComponent";
import { Button } from "mds";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
interface IUploadFilesButton {
uploadPath: string;
@@ -77,19 +78,19 @@ const UploadFilesButton = ({
return (
<Fragment>
<RBIconButton
id={"upload-main"}
tooltip={"Upload Files"}
aria-controls={`upload-main-menu`}
aria-haspopup="true"
aria-expanded={openUploadMenu ? "true" : undefined}
onClick={handleClick}
text={"Upload"}
icon={<UploadIcon />}
color="primary"
variant={"contained"}
disabled={forceDisable || !uploadEnabled}
/>
<TooltipWrapper tooltip={"Upload Files"}>
<Button
id={"upload-main"}
aria-controls={`upload-main-menu`}
aria-haspopup="true"
aria-expanded={openUploadMenu ? "true" : undefined}
onClick={handleClick}
label={"Upload"}
icon={<UploadIcon />}
variant={"callAction"}
disabled={forceDisable || !uploadEnabled}
/>
</TooltipWrapper>
<Menu
id={`upload-main-menu`}
aria-labelledby={`upload-main`}

43
portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx
View File

@@ -1,43 +0,0 @@
// This file is part of MinIO Console Server
// 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 <http://www.gnu.org/licenses/>.
import React, { Fragment } from "react";
import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material";
import BoxIconButton from "../BoxIconButton/BoxIconButton";
interface IBoxButton extends ButtonProps {
label?: string;
}
const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => {
const altRest = rest as IconButtonProps;
return (
<Fragment>
<Box sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
<Button {...rest} endIcon={children}>
{label}
</Button>
</Box>
<Box sx={{ display: { xs: "block", sm: "block", md: "none" } }}>
<BoxIconButton {...altRest} tooltip={label}>
{children}
</BoxIconButton>
</Box>
</Fragment>
);
};
export default BoxButton;

101
portal-ui/src/screens/Console/Common/BoxIconButton/BoxIconButton.tsx
View File

@@ -1,101 +0,0 @@
// This file is part of MinIO Console Server
// 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 <http://www.gnu.org/licenses/>.
import React from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { IconButton, IconButtonProps, Tooltip } from "@mui/material";
import clsx from "clsx";
const styles = (theme: Theme) =>
createStyles({
root: {
padding: 8,
marginLeft: 8,
borderWidth: 1,
borderStyle: "solid",
borderRadius: 3,
"& .min-icon": {
// height: 20,
width: 20,
},
"& .MuiTouchRipple-root span": {
backgroundColor: theme.palette.primary.main,
borderRadius: 3,
opacity: 0.3,
},
"&:disabled": {
color: "#EBEBEB",
borderColor: "#EBEBEB",
},
"& > span:not(.BaseBadge-root)": {
paddingRight: 8,
},
},
contained: {
borderColor: theme.palette.primary.main,
background: theme.palette.primary.main,
color: "white",
"& .MuiTouchRipple-root span": {
backgroundColor: theme.palette.primary.dark,
borderRadius: 3,
opacity: 0.3,
},
"&:hover": {
backgroundColor: theme.palette.primary.light,
color: "#FFF",
},
},
});
interface IBoxIconButton extends IconButtonProps {
classes: any;
children: any;
variant?: "outlined" | "contained";
tooltip?: string;
}
const BoxIconButton = ({
classes,
children,
variant = "outlined",
tooltip,
...rest
}: IBoxIconButton) => {
const button = (
<IconButton
{...rest}
className={clsx(classes.root, {
[classes.contained]: variant === "contained",
})}
>
{children}
</IconButton>
);
if (tooltip && tooltip !== "") {
return (
<Tooltip title={tooltip}>
<span>{button}</span>
</Tooltip>
);
}
return button;
};
export default withStyles(styles)(BoxIconButton);

170
portal-ui/src/screens/Console/Common/ComponentsScreen.tsx
View File

@@ -19,17 +19,12 @@ import { containerForHeader } from "../Common/FormComponents/common/styleLibrary
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, DialogContentText, Grid } from "@mui/material";
import { DialogContentText, Grid } from "@mui/material";
import PageHeader from "./PageHeader/PageHeader";
import PageLayout from "./Layout/PageLayout";
import SectionTitle from "./SectionTitle";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import {
ArrowIcon,
ConfirmDeleteIcon,
EditIcon,
TrashIcon,
} from "../../../icons";
import { Button } from "mds";
import { ConfirmDeleteIcon } from "../../../icons";
import ConfirmDialog from "./ModalWrapper/ConfirmDialog";
interface IComponentsScreen {
@@ -62,157 +57,6 @@ const ComponentsScreen = ({ classes }: IComponentsScreen) => {
<PageHeader label={"Components"} />
<PageLayout>
<Grid container spacing={1}>
<Grid item xs={12}>
<SectionTitle>Buttons</SectionTitle>
</Grid>
<Grid item xs={12}>
<p>Buttons should always be of one of the following four types:</p>
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item>
<Button
type="button"
variant={"contained"}
className={classes.clearButton}
onClick={() => {}}
>
Primary
</Button>
</Grid>
<Grid item>
<Button
type="submit"
variant="contained"
color="primary"
onClick={() => {}}
disabled={true}
>
Primary Disabled
</Button>
</Grid>
<Grid item>
<Button type="button" variant={"outlined"} onClick={() => {}}>
Generic
</Button>
</Grid>
<Grid item>
<Button
type="button"
variant={"outlined"}
onClick={() => {}}
disabled={true}
>
Generic Disabled
</Button>
</Grid>
<Grid item>
<Button
type="button"
variant={"outlined"}
color={"secondary"}
onClick={() => {}}
>
Dangerous
</Button>
</Grid>
<Grid item>
<Button
type="button"
variant={"outlined"}
color={"secondary"}
onClick={() => {}}
disabled={true}
>
Dangerous Disabled
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<ul>
<li>
<b>Primary:</b> A call to action.
</li>
<li>
<b>Generic:</b> An optional action.
</li>
<li>
<b>Dangerous:</b> An irreversible action.
</li>
</ul>
</Grid>
<Grid item xs={12}>
<SectionTitle>Icon Buttons</SectionTitle>
</Grid>
<Grid item xs={12}>
<p>Icon Buttons should always be of one of the following types:</p>
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item>
<RBIconButton
tooltip={"Primary"}
onClick={() => {}}
text={"Primary"}
icon={<ArrowIcon />}
color={"primary"}
variant={"outlined"}
/>
</Grid>
<Grid item>
<RBIconButton
tooltip={"Primary Disabled"}
onClick={() => {}}
text={"Primary Disabled"}
icon={<ArrowIcon />}
color={"primary"}
variant={"outlined"}
disabled={true}
/>
</Grid>
<Grid item>
<RBIconButton
tooltip={"Delete Bucket"}
onClick={() => {}}
text={"Generic"}
icon={<EditIcon />}
variant={"outlined"}
/>
</Grid>
<Grid item>
<RBIconButton
tooltip={"Delete Bucket"}
onClick={() => {}}
text={"Generic Disabled"}
icon={<EditIcon />}
variant={"outlined"}
disabled={true}
/>
</Grid>
<Grid item>
<RBIconButton
tooltip={"Dangerous"}
onClick={() => {}}
text={"Dangerous"}
icon={<TrashIcon />}
color={"secondary"}
variant={"outlined"}
/>
</Grid>
<Grid item>
<RBIconButton
tooltip={"Dangerous"}
onClick={() => {}}
text={"Dangerous Disabled"}
icon={<TrashIcon />}
color={"secondary"}
variant={"outlined"}
disabled={true}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<SectionTitle>Confirm Dialogs</SectionTitle>
</Grid>
@@ -221,14 +65,14 @@ const ComponentsScreen = ({ classes }: IComponentsScreen) => {
</Grid>
<Grid item xs={12}>
<Button
id={"open-dialog-test"}
type="button"
variant={"outlined"}
variant={"regular"}
onClick={() => {
setDialogOpen(true);
}}
>
Open Dialog
</Button>
label={"Open Dialog"}
/>
<ConfirmDialog
title={`Delete Bucket`}
confirmText={"Delete"}

30
portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx
View File

@@ -16,13 +16,14 @@
import React from "react";
import { InputAdornment, OutlinedInput } from "@mui/material";
import BoxIconButton from "../BoxIconButton/BoxIconButton";
import withStyles from "@mui/styles/withStyles";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import CopyToClipboard from "react-copy-to-clipboard";
import { CopyIcon } from "../../../../icons";
import { fieldBasic } from "../FormComponents/common/styleLibrary";
import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -74,17 +75,22 @@ const CredentialItem = ({
readOnly
endAdornment={
<InputAdornment position="end">
<CopyToClipboard text={value}>
<BoxIconButton
aria-label="copy"
tooltip={"Copy"}
onClick={() => {}}
onMouseDown={() => {}}
edge="end"
>
<CopyIcon />
</BoxIconButton>
</CopyToClipboard>
<TooltipWrapper tooltip={"Copy"}>
<CopyToClipboard text={value}>
<Button
id={"copy-clipboard"}
aria-label="copy"
onClick={() => {}}
onMouseDown={() => {}}
style={{
width: "28px",
height: "28px",
padding: "0px",
}}
icon={<CopyIcon />}
/>
</CopyToClipboard>
</TooltipWrapper>
</InputAdornment>
}
/>

170
portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx
View File

@@ -17,6 +17,7 @@
import React from "react";
import get from "lodash/get";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { NewServiceAccount } from "./types";
@@ -25,8 +26,7 @@ import Grid from "@mui/material/Grid";
import CredentialItem from "./CredentialItem";
import WarnIcon from "../../../../icons/WarnIcon";
import { DownloadIcon, ServiceAccountCredentialsIcon } from "../../../../icons";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -48,7 +48,8 @@ const styles = (theme: Theme) =>
fontSize: ".9rem",
},
buttonContainer: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
marginTop: "1rem",
},
credentialsPanel: {
@@ -97,6 +98,71 @@ const CredentialsPrompt = ({
const consoleCreds = get(newServiceAccount, "console", null);
const idp = get(newServiceAccount, "idp", false);
const downloadImport = () => {
let consoleExtras = {};
if (consoleCreds) {
if (!Array.isArray(consoleCreds)) {
consoleExtras = {
url: consoleCreds.url,
accessKey: consoleCreds.accessKey,
secretKey: consoleCreds.secretKey,
api: "s3v4",
path: "auto",
};
} else {
const cCreds = consoleCreds.map((itemMap) => {
return {
url: itemMap.url,
accessKey: itemMap.accessKey,
secretKey: itemMap.secretKey,
api: "s3v4",
path: "auto",
};
});
consoleExtras = cCreds[0];
}
} else {
consoleExtras = {
url: newServiceAccount.url,
accessKey: newServiceAccount.accessKey,
secretKey: newServiceAccount.secretKey,
api: "s3v4",
path: "auto",
};
}
download(
"credentials.json",
JSON.stringify({
...consoleExtras,
})
);
};
const downloaddAllCredentials = () => {
let allCredentials = {};
if (
consoleCreds &&
Array.isArray(consoleCreds) &&
consoleCreds.length > 1
) {
const cCreds = consoleCreds.map((itemMap) => {
return {
accessKey: itemMap.accessKey,
secretKey: itemMap.secretKey,
};
});
allCredentials = cCreds;
}
download(
"all_credentials.json",
JSON.stringify({
...allCredentials,
})
);
};
return (
<ModalWrapper
modalOpen={open}
@@ -178,89 +244,37 @@ const CredentialsPrompt = ({
<Grid item xs={12} className={classes.buttonContainer}>
{!idp && (
<>
<RBIconButton
id={"download-button"}
<TooltipWrapper
tooltip={
"Download credentials in a JSON file formatted for import using mc alias import. This will only include the default login credentials."
}
text={"Download for import"}
className={classes.buttonSpacer}
onClick={() => {
let consoleExtras = {};
if (consoleCreds) {
if (!Array.isArray(consoleCreds)) {
consoleExtras = {
url: consoleCreds.url,
accessKey: consoleCreds.accessKey,
secretKey: consoleCreds.secretKey,
api: "s3v4",
path: "auto",
};
} else {
const cCreds = consoleCreds.map((itemMap) => {
return {
url: itemMap.url,
accessKey: itemMap.accessKey,
secretKey: itemMap.secretKey,
api: "s3v4",
path: "auto",
};
});
consoleExtras = cCreds[0];
}
} else {
consoleExtras = {
url: newServiceAccount.url,
accessKey: newServiceAccount.accessKey,
secretKey: newServiceAccount.secretKey,
api: "s3v4",
path: "auto",
};
}
download(
"credentials.json",
JSON.stringify({
...consoleExtras,
})
);
}}
icon={<DownloadIcon />}
variant="contained"
color="primary"
/>
>
<Button
id={"download-button"}
label={"Download for import"}
className={classes.buttonSpacer}
onClick={downloadImport}
icon={<DownloadIcon />}
variant="callAction"
/>
</TooltipWrapper>
{Array.isArray(consoleCreds) && consoleCreds.length > 1 && (
<RBIconButton
id={"download-all-button"}
<TooltipWrapper
tooltip={
"Download all access credentials to a JSON file. NOTE: This file is not formatted for import using mc alias import. If you plan to import this alias from the file, please use the Download for Import button. "
}
text={"Download all access credentials"}
className={classes.buttonSpacer}
onClick={() => {
let allCredentials = {};
if (consoleCreds) {
const cCreds = consoleCreds.map((itemMap) => {
return {
accessKey: itemMap.accessKey,
secretKey: itemMap.secretKey,
};
});
allCredentials = cCreds;
}
download(
"all_credentials.json",
JSON.stringify({
...allCredentials,
})
);
}}
icon={<DownloadIcon />}
variant="contained"
color="primary"
/>
>
<Button
id={"download-all-button"}
label={"Download all access credentials"}
className={classes.buttonSpacer}
onClick={downloaddAllCredentials}
icon={<DownloadIcon />}
variant="callAction"
color="primary"
/>
</TooltipWrapper>
)}
</>
)}

24
portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
View File

@@ -23,9 +23,10 @@ import withStyles from "@mui/styles/withStyles";
import HelpIcon from "../../../../../icons/HelpIcon";
import { fieldBasic } from "../common/styleLibrary";
import { CopyIcon } from "../../../../../icons";
import RBIconButton from "../../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { Button } from "mds";
import CopyToClipboard from "react-copy-to-clipboard";
import CodeEditor from "@uiw/react-textarea-code-editor";
import TooltipWrapper from "../../TooltipWrapper/TooltipWrapper";
interface ICodeWrapper {
value: string;
@@ -124,16 +125,17 @@ const CodeMirrorWrapper = ({
},
}}
>
<CopyToClipboard text={value}>
<RBIconButton
tooltip={"Copy to Clipboard"}
onClick={() => {}}
text={""}
icon={<CopyIcon />}
color={"primary"}
variant={"outlined"}
/>
</CopyToClipboard>
<TooltipWrapper tooltip={"Copy to Clipboard"}>
<CopyToClipboard text={value}>
<Button
type={"button"}
id={"copy-code-mirror"}
icon={<CopyIcon />}
color={"primary"}
variant={"regular"}
/>
</CopyToClipboard>
</TooltipWrapper>
</Box>
</Grid>
</React.Fragment>

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

@@ -16,9 +16,10 @@
import React from "react";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import { Box, Grid } from "@mui/material";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, Button, Grid } from "@mui/material";
import ScheduleIcon from "@mui/icons-material/Schedule";
import WatchLaterIcon from "@mui/icons-material/WatchLater";
import { actionsTray, widgetContainerCommon } from "../common/styleLibrary";
@@ -42,11 +43,6 @@ const styles = (theme: Theme) =>
createStyles({
...actionsTray,
...widgetContainerCommon,
syncButton: {
"&.MuiButton-root .MuiButton-iconSizeMedium > *:first-of-type": {
fontSize: 18,
},
},
schedulerIcon: {
opacity: 0.4,
fontSize: 10,
@@ -272,15 +268,13 @@ const DateRangeSelector = ({
}}
>
<Button
id={"sync"}
type="button"
variant="contained"
color="primary"
variant="callAction"
onClick={triggerSync}
endIcon={<SyncIcon />}
className={classes.syncButton}
>
Sync
</Button>
icon={<SyncIcon />}
label={"Sync"}
/>
</Box>
)}
</Box>

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

@@ -16,9 +16,9 @@
import React, { Fragment } from "react";
import { Grid, InputLabel, TextField, Tooltip } from "@mui/material";
import DateTimePicker from "@mui/lab/DateTimePicker";
import AdapterMoment from "@mui/lab/AdapterMoment";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { DateTimePicker } from "@mui/x-date-pickers";
import InputAdornment from "@mui/material/InputAdornment";
import ScheduleIcon from "@mui/icons-material/Schedule";
import { Theme } from "@mui/material/styles";
@@ -293,7 +293,7 @@ const DateTimePickerWrapper = ({
label=""
className={clsName}
disabled={disabled}
renderInput={(props) => (
renderInput={(props: any) => (
<TextField id={id} variant="standard" {...props} disabled />
)}
ampm={false}

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

@@ -493,7 +493,8 @@ export const settingsCommon: any = {
},
settingsButtonContainer: {
padding: "15px 38px",
textAlign: "right" as const,
display: "flex",
justifyContent: "flex-end",
},
innerSettingsButtonContainer: {
maxWidth: 840,
@@ -882,7 +883,8 @@ export const hrClass = {
export const tenantDetailsStyles = {
buttonContainer: {
textAlign: "right" as const,
display: "flex",
justifyContent: "flex-end",
},
multiContainer: {
display: "flex" as const,
@@ -1133,7 +1135,8 @@ export const serviceAccountStyles: any = {
width: "100%",
},
buttonContainer: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
},
infoDetails: {
color: "#393939",

15
portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx
View File

@@ -16,10 +16,11 @@
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 { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
const styles = (theme: Theme) =>
createStyles({
@@ -56,7 +57,8 @@ const styles = (theme: Theme) =>
},
buttonInnerContainer: {
width: "100%",
textAlign: "right" as const,
display: "flex",
justifyContent: "flex-end",
marginRight: 15,
},
});
@@ -109,17 +111,14 @@ const WizardPage = ({
return (
<Button
id={"wizard-button-" + btn.label}
variant="contained"
color="primary"
size="small"
variant="regular"
onClick={() => {
buttonAction(btn);
}}
disabled={!btn.enabled}
key={`button-${page.label}-${btn.label}`}
>
{btn.label}
</Button>
label={btn.label}
/>
);
})}
</div>

45
portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
View File

@@ -1,19 +1,18 @@
import React from "react";
import {
Button,
ButtonProps,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
} from "@mui/material";
import { LoadingButton } from "@mui/lab";
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";
const styles = (theme: Theme) =>
createStyles({
@@ -31,8 +30,10 @@ type ConfirmDialogProps = {
confirmationContent: React.ReactNode | React.ReactNode[];
cancelText?: string;
confirmText?: string;
confirmButtonProps?: Partial<ButtonProps>;
cancelButtonProps?: Partial<ButtonProps>;
confirmButtonProps?: ButtonProps &
React.ButtonHTMLAttributes<HTMLButtonElement>;
cancelButtonProps?: ButtonProps &
React.ButtonHTMLAttributes<HTMLButtonElement>;
titleIcon?: React.ReactNode;
};
@@ -47,8 +48,8 @@ const ConfirmDialog = ({
confirmationContent,
cancelText = "Cancel",
confirmText = "Confirm",
confirmButtonProps = {},
cancelButtonProps = {},
confirmButtonProps = undefined,
cancelButtonProps = undefined,
titleIcon = null,
}: ConfirmDialogProps) => {
return (
@@ -88,34 +89,22 @@ const ConfirmDialog = ({
</DialogContent>
<DialogActions className={classes.actions}>
<Button
className={classes.cancelButton}
onClick={onCancel || onClose}
disabled={isLoading}
type="button"
{...cancelButtonProps}
variant="outlined"
color="primary"
variant="regular"
id={"confirm-cancel"}
>
{cancelText}
</Button>
<LoadingButton
className={classes.confirmButton}
type="button"
onClick={onConfirm}
loading={isLoading}
disabled={isLoading}
variant="outlined"
color="secondary"
loadingPosition="start"
startIcon={<React.Fragment />}
autoFocus
label={cancelText}
/>
<Button
id={"confirm-ok"}
onClick={onConfirm}
label={confirmText}
disabled={isLoading}
variant={"secondary"}
{...confirmButtonProps}
>
{confirmText}
</LoadingButton>
/>
</DialogActions>
</Dialog>
);

62
portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
View File

@@ -20,7 +20,6 @@ import { useSelector } from "react-redux";
import Grid from "@mui/material/Grid";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import IconButton from "@mui/material/IconButton";
import { AppState, useAppDispatch } from "../../../../store";
import OperatorLogo from "../../../../icons/OperatorLogo";
import ConsoleLogo from "../../../../icons/ConsoleLogo";
@@ -31,6 +30,7 @@ import { Box } from "@mui/material";
import { toggleList } from "../../ObjectBrowser/objectBrowserSlice";
import { selFeatures } from "../../consoleSlice";
import { selDirectPVMode, selOpMode } from "../../../../systemSlice";
import { Button } from "mds";
const styles = (theme: Theme) =>
createStyles({
@@ -48,7 +48,12 @@ const styles = (theme: Theme) =>
alignItems: "center",
},
rightMenu: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
paddingRight: 20,
"& button": {
marginLeft: 8,
},
},
logo: {
marginLeft: 34,
@@ -68,8 +73,8 @@ const styles = (theme: Theme) =>
width: 15,
height: 15,
top: 0,
right: 2,
marginTop: -16,
right: 4,
marginTop: 4,
transitionDuration: "0.2s",
color: "#32C787",
"& svg": {
@@ -195,40 +200,31 @@ const PageHeader = ({
>
{actions && actions}
{managerObjects && managerObjects.length > 0 && (
<IconButton
color="primary"
<Button
aria-label="Refresh List"
component="span"
onClick={() => {
dispatch(toggleList());
}}
icon={
<Fragment>
<div
className={`${classes.indicator} ${
newObject ? "newItem" : ""
}`}
style={{
opacity: managerObjects.length > 0 && newItems ? 1 : 0,
}}
>
<CircleIcon />
</div>
<ObjectManagerIcon
style={{ width: 20, height: 20, marginTop: -2 }}
/>
</Fragment>
}
id="object-manager-toggle"
size="large"
sx={{
marginRight: "20px",
color: "#5E5E5E",
position: "relative",
border: "#E2E2E2 1px solid",
borderRadius: "3px",
width: "40px",
height: "40px",
backgroundColor: "#F8F8F8",
padding: 0,
"&>svg": {
width: "25px",
},
}}
>
<div
className={`${classes.indicator} ${newObject ? "newItem" : ""}`}
style={{
opacity: managerObjects.length > 0 && newItems ? 1 : 0,
}}
>
<CircleIcon />
</div>
<ObjectManagerIcon />
</IconButton>
style={{ position: "relative", padding: "0 10px" }}
/>
)}
</Grid>
</Grid>

3
portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
View File

@@ -81,6 +81,9 @@ const styles = (theme: Theme) =>
rightItems: {
display: "flex",
alignItems: "center",
"& button": {
marginLeft: 8,
},
"@media (max-width: 600px)": {
width: "100%",
},

33
portal-ui/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx Normal file
View File

@@ -0,0 +1,33 @@
// This file is part of MinIO Console Server
// Copyright (c) 2022 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Tooltip } from "@mui/material";
interface ITooltipWrapperProps {
tooltip: string;
children: any;
}
const TooltipWrapper = ({ tooltip, children }: ITooltipWrapperProps) => {
return (
<Tooltip title={tooltip}>
<span>{children}</span>
</Tooltip>
);
};
export default TooltipWrapper;

97
portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
View File

@@ -16,10 +16,9 @@
import React, { Fragment, useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import { Box, Button, LinearProgress } from "@mui/material";
import { Box, LinearProgress } from "@mui/material";
import { useNavigate } from "react-router-dom";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { Button } from "mds";
import useApi from "../../Common/Hooks/useApi";
import { AddIcon, ClustersIcon, RemoveIcon } from "../../../../icons";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -34,6 +33,7 @@ import {
setSnackBarMessage,
} from "../../../../systemSlice";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
type SiteInputRow = {
name: string;
@@ -415,38 +415,49 @@ const AddReplicationSites = () => {
},
}}
>
<RBIconButton
tooltip={"Add a Row"}
text={""}
variant="outlined"
color="primary"
icon={<AddIcon />}
onClick={(e) => {
e.preventDefault();
const newRows = [...siteConfig];
//add at the next index
newRows.splice(index + 1, 0, {
name: "",
endpoint: "",
});
<TooltipWrapper tooltip={"Add a Row"}>
<Button
id={`add-row-${index}`}
variant="regular"
icon={<AddIcon />}
onClick={(e) => {
e.preventDefault();
const newRows = [...siteConfig];
//add at the next index
newRows.splice(index + 1, 0, {
name: "",
endpoint: "",
});
setSiteConfig(newRows);
}}
/>
<RBIconButton
tooltip={"Remove Row"}
text={""}
variant="outlined"
disabled={isDelDisabled}
color="primary"
icon={<RemoveIcon />}
onClick={(e) => {
e.preventDefault();
setSiteConfig(
siteConfig.filter((_, idx) => idx !== index)
);
}}
/>
setSiteConfig(newRows);
}}
style={{
width: 25,
height: 25,
padding: 0,
}}
/>
</TooltipWrapper>
<TooltipWrapper tooltip={"Remove Row"}>
<Button
id={`remove-row-${index}`}
variant="regular"
disabled={isDelDisabled}
icon={<RemoveIcon />}
onClick={(e) => {
e.preventDefault();
setSiteConfig(
siteConfig.filter((_, idx) => idx !== index)
);
}}
style={{
width: 25,
height: 25,
padding: 0,
marginLeft: 8,
}}
/>
</TooltipWrapper>
</Box>
</Grid>
</Fragment>
@@ -465,28 +476,26 @@ const AddReplicationSites = () => {
}}
>
<Button
id={"clear"}
type="button"
variant="outlined"
color="primary"
variant="regular"
disabled={isAdding}
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={
isAdding ||
!accessKey ||
!secretKey ||
!isAllEndpointsValid
}
>
Save
</Button>
label={"Save"}
/>
</Box>
</Grid>
</form>

28
portal-ui/src/screens/Console/Configurations/SiteReplication/EntityReplicationLookup.tsx
View File

@@ -16,9 +16,9 @@
import React, { useState } from "react";
import { Box, Grid } from "@mui/material";
import { Button } from "mds";
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { ClustersIcon } from "../../../../icons";
import useApi from "../../Common/Hooks/useApi";
import { StatsResponseType } from "./SiteReplicationStatus";
@@ -27,6 +27,7 @@ import Loader from "../../Common/Loader/Loader";
import PolicyEntityStatus from "./LookupStatus/PolicyEntityStatus";
import GroupEntityStatus from "./LookupStatus/GroupEntityStatus";
import UserEntityStatus from "./LookupStatus/UserEntityStatus";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const EntityReplicationLookup = () => {
const [entityType, setEntityType] = useState<string>("bucket");
@@ -140,18 +141,19 @@ const EntityReplicationLookup = () => {
maxWidth: "80px",
}}
>
<RBIconButton
type={"button"}
onClick={() => {
getStats(entityType, entityValue);
}}
text={`View `}
tooltip={"View across sites"}
icon={<ClustersIcon />}
color={"primary"}
showLabelAlways
disabled={!entityValue || !entityType}
/>
<TooltipWrapper tooltip={"View across sites"}>
<Button
id={"view-across-sites"}
type={"button"}
onClick={() => {
getStats(entityType, entityValue);
}}
label={`View`}
icon={<ClustersIcon />}
collapseOnSmall={false}
disabled={!entityValue || !entityType}
/>
</TooltipWrapper>
</Box>
</Box>

80
portal-ui/src/screens/Console/Configurations/SiteReplication/ReplicationSites.tsx
View File

@@ -17,9 +17,9 @@
import React, { useState } from "react";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import { Box, Button, DialogContentText, Tooltip } from "@mui/material";
import { Box, DialogContentText, Tooltip } from "@mui/material";
import { Button } from "mds";
import { ReplicationSite } from "./SiteReplication";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import TrashIcon from "../../../../icons/TrashIcon";
import { CircleIcon, ConfirmDeleteIcon, EditIcon } from "../../../../icons";
import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
@@ -41,6 +41,7 @@ import {
setSnackBarMessage,
} from "../../../../systemSlice";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -228,33 +229,46 @@ const ReplicationSites = ({
},
}}
>
<RBIconButton
<TooltipWrapper
tooltip={
sites.length <= 2
? "Minimum two sites are required for replication"
: "Delete Site"
}
text={""}
variant="outlined"
color="secondary"
disabled={sites.length <= 2}
icon={<TrashIcon />}
onClick={(e) => {
e.preventDefault();
setIsDeleteSiteKey(key);
}}
/>
<RBIconButton
tooltip={"Edit Endpoint"}
text={""}
variant="contained"
color="primary"
icon={<EditIcon />}
onClick={(e) => {
e.preventDefault();
setEditSite(siteInfo);
}}
/>
>
<Button
id={`delete-site-${key}-${index}`}
variant="secondary"
disabled={sites.length <= 2}
icon={<TrashIcon />}
onClick={(e) => {
e.preventDefault();
setIsDeleteSiteKey(key);
}}
style={{
width: "25px",
height: "25px",
padding: "0",
}}
/>
</TooltipWrapper>
<TooltipWrapper tooltip={"Edit Endpoint"}>
<Button
id={`edit-icon-${key}-${index}`}
variant="regular"
icon={<EditIcon />}
onClick={(e) => {
e.preventDefault();
setEditSite(siteInfo);
}}
style={{
width: "25px",
height: "25px",
padding: "0",
marginLeft: "8px",
}}
/>
</TooltipWrapper>
</Box>
</ListItemButton>
@@ -326,26 +340,24 @@ const ReplicationSites = ({
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"close"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={() => {
setEditSite(null);
}}
>
Close
</Button>
label={"Close"}
/>
<Button
id={"update"}
type="button"
variant="contained"
color="primary"
variant="callAction"
disabled={isEditing || !isValidEndPointUrl}
onClick={() => {
updatePeerSite();
}}
>
Update
</Button>
label={"Update"}
/>
</Grid>
</ModalWrapper>
) : null}

79
portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx
View File

@@ -23,7 +23,7 @@ import PageLayout from "../../Common/Layout/PageLayout";
import useApi from "../../Common/Hooks/useApi";
import ReplicationSites from "./ReplicationSites";
import TrashIcon from "../../../../icons/TrashIcon";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { Button } from "mds";
import Loader from "../../Common/Loader/Loader";
import {
AddIcon,
@@ -41,6 +41,7 @@ import {
} from "../../../../systemSlice";
import AButton from "../../Common/AButton/AButton";
import { useAppDispatch } from "../../../../store";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
export type ReplicationSite = {
deploymentID: string;
@@ -118,45 +119,51 @@ const SiteReplication = () => {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
"& button": {
marginLeft: "8px",
},
}}
>
{hasSites ? (
<Box>
<RBIconButton
tooltip={"Delete All"}
text={"Delete All"}
variant="outlined"
color="secondary"
disabled={isRemoving}
icon={<TrashIcon />}
onClick={() => {
setIsDeleteAll(true);
}}
/>
<RBIconButton
tooltip={"Replication Status"}
text={"Replication Status"}
variant="outlined"
color="primary"
icon={<RecoverIcon />}
onClick={(e) => {
e.preventDefault();
navigate(IAM_PAGES.SITE_REPLICATION_STATUS);
}}
/>
</Box>
<Fragment>
<TooltipWrapper tooltip={"Delete All"}>
<Button
id={"delete-all"}
label={"Delete All"}
variant="secondary"
disabled={isRemoving}
icon={<TrashIcon />}
onClick={() => {
setIsDeleteAll(true);
}}
/>
</TooltipWrapper>
<TooltipWrapper tooltip={"Replication Status"}>
<Button
id={"replication-status"}
label={"Replication Status"}
variant="regular"
icon={<RecoverIcon />}
onClick={(e) => {
e.preventDefault();
navigate(IAM_PAGES.SITE_REPLICATION_STATUS);
}}
/>
</TooltipWrapper>
</Fragment>
) : null}
<RBIconButton
tooltip={"Add Replication Sites"}
text={"Add Sites"}
variant="contained"
color="primary"
disabled={isRemoving}
icon={<AddIcon />}
onClick={() => {
navigate(IAM_PAGES.SITE_REPLICATION_ADD);
}}
/>
<TooltipWrapper tooltip={"Add Replication Sites"}>
<Button
id={"add-replication-site"}
label={"Add Sites"}
variant="callAction"
disabled={isRemoving}
icon={<AddIcon />}
onClick={() => {
navigate(IAM_PAGES.SITE_REPLICATION_ADD);
}}
/>
</TooltipWrapper>
</Box>
{hasSites ? (
<ReplicationSites

28
portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplicationStatus.tsx
View File

@@ -15,9 +15,10 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Box, Grid } from "@mui/material";
import { Button } from "mds";
import PageHeader from "../../Common/PageHeader/PageHeader";
import PageLayout from "../../Common/Layout/PageLayout";
import { Box, Grid } from "@mui/material";
import useApi from "../../Common/Hooks/useApi";
import BackLink from "../../../../common/BackLink";
import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
@@ -30,9 +31,9 @@ import {
RefreshIcon,
UsersIcon,
} from "../../../../icons";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import EntityReplicationLookup from "./EntityReplicationLookup";
import Loader from "../../Common/Loader/Loader";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
export type StatsResponseType = {
maxBuckets?: number;
@@ -128,17 +129,18 @@ const SiteReplicationStatus = () => {
title={"Replication status from all Sites"}
actions={
<Fragment>
<RBIconButton
onClick={() => {
getStats();
}}
tooltip={"Refresh"}
text={"Refresh"}
showLabelAlways
icon={<RefreshIcon />}
color="primary"
variant={"contained"}
/>
<TooltipWrapper tooltip={"Refresh"}>
<Button
id={"refresh"}
onClick={() => {
getStats();
}}
label={"Refresh"}
icon={<RefreshIcon />}
variant={"regular"}
collapseOnSmall={false}
/>
</TooltipWrapper>
</Fragment>
}
/>

12
portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
View File

@@ -20,9 +20,10 @@ import { useNavigate, useParams } from "react-router-dom";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import {
fileInputStyles,
formFieldStyles,
@@ -516,13 +517,12 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
</Grid>
<Grid item xs={12} className={classes.settingsButtonContainer}>
<Button
id={"save-tier-configuration"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={saving || !isFormValid}
>
Save Tier Configuration
</Button>
label={"Save Tier Configuration"}
/>
</Grid>
</form>
</Grid>

17
portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
View File

@@ -21,6 +21,7 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, LinearProgress } from "@mui/material";
import { Button } from "mds";
import Grid from "@mui/material/Grid";
import {
actionsTray,
@@ -53,7 +54,7 @@ import {
} from "../../../../common/SecureComponent/permissions";
import { SecureComponent } from "../../../../common/SecureComponent";
import { tierTypes } from "./utils";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { selDistSet, setErrorSnackMessage } from "../../../../systemSlice";
import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "../../../../store";
@@ -276,10 +277,10 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
value={filter}
/>
<div className={classes.rightActionButtons}>
<RBIconButton
<Button
id={"refresh-list"}
icon={<RefreshIcon />}
color="primary"
text={`Refresh List`}
label={`Refresh List`}
onClick={() => {
setIsLoading(true);
}}
@@ -290,12 +291,12 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<RBIconButton
<Button
id={"add-tier"}
icon={<AddIcon />}
color="primary"
text={`Create Tier`}
label={`Create Tier`}
onClick={addTier}
variant="contained"
variant="callAction"
/>
</SecureComponent>
</div>

16
portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
View File

@@ -16,11 +16,11 @@
import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import {
formFieldStyles,
@@ -47,7 +47,8 @@ interface ITierCredentialsModal {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
},
...modalBasic,
...formFieldStyles,
@@ -217,13 +218,12 @@ const UpdateTierCredentialsModal = ({
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
id={"save-credentials"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={savingTiers || !isFormValid}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{savingTiers && (
<Grid item xs={12}>

21
portal-ui/src/screens/Console/Console.tsx
View File

@@ -22,10 +22,11 @@ import React, {
useState,
} from "react";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import debounce from "lodash/debounce";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import Snackbar from "@mui/material/Snackbar";
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
@@ -33,10 +34,8 @@ import { useSelector } from "react-redux";
import { AppState, useAppDispatch } from "../../store";
import { snackBarCommon } from "./Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../common/types";
import Menu from "./Menu/Menu";
import api from "../../common/api";
import MainError from "./Common/MainError/MainError";
import {
CONSOLE_UI_RESOURCE,
@@ -174,7 +173,12 @@ const styles = (theme: Theme) =>
heigh: "60px",
widht: "100%",
lineHeight: "60px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
"& button": {
marginLeft: 8,
},
},
progress: {
height: "3px",
@@ -564,14 +568,13 @@ const Console = ({ classes }: IConsoleProps) => {
The instance needs to be restarted for configuration changes
to take effect.{" "}
<Button
color="secondary"
size="small"
id={"restart-server"}
variant="secondary"
onClick={() => {
restartServer();
}}
>
Restart
</Button>
label={"Restart"}
/>
</Fragment>
)}
</div>

20
portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
View File

@@ -35,10 +35,11 @@ import ServersList from "./ServersList";
import CounterCard from "./CounterCard";
import ReportedUsage from "./ReportedUsage";
import { DiagnosticsMenuIcon } from "../../../../icons/SidebarMenus";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { Button } from "mds";
import { Link } from "react-router-dom";
import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
import TimeStatItem from "../TimeStatItem";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
const BoxItem = ({ children }: { children: any }) => {
return (
@@ -228,14 +229,15 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
marginRight: "75px",
}}
>
<RBIconButton
tooltip={"Browse"}
onClick={() => {}}
text={"Browse"}
icon={<ArrowRightIcon />}
color={"primary"}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Browse"}>
<Button
id={"browse-dashboard"}
onClick={() => {}}
label={"Browse"}
icon={<ArrowRightIcon />}
variant={"regular"}
/>
</TooltipWrapper>
</Link>
}
/>

36
portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
View File

@@ -16,6 +16,7 @@
import React, { Fragment, useEffect, useState } 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 { Grid, InputAdornment, TextField } from "@mui/material";
@@ -38,9 +39,7 @@ import api from "../../../common/api";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import RefreshIcon from "../../../icons/RefreshIcon";
import SearchIcon from "../../../icons/SearchIcon";
import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
import HelpBox from "../../../common/HelpBox";
import BoxButton from "../Common/BoxButton/BoxButton";
import withSuspense from "../Common/Components/withSuspense";
import PageHeader from "../Common/PageHeader/PageHeader";
@@ -243,35 +242,32 @@ const DirectPVMain = ({ classes }: IDirectPVMain) => {
disabled={notAvailable}
variant="standard"
/>
<BoxIconButton
<Button
id={"refresh-directpv-list"}
color="primary"
aria-label="Refresh Tenant List"
aria-label="Refresh DirectPV List"
onClick={() => {
setLoading(true);
}}
disabled={notAvailable}
size="large"
>
<RefreshIcon />
</BoxIconButton>
<BoxButton
variant="contained"
color="primary"
icon={<RefreshIcon />}
/>
<Button
id={"format-selected-drives"}
variant="callAction"
disabled={checkedDrives.length <= 0 || notAvailable}
onClick={formatSelectedDrives}
label={"Format Selected Drives"}
>
<GroupIcon />
</BoxButton>
<BoxButton
variant="contained"
color="primary"
icon={<GroupIcon />}
/>
<Button
id={"format-all-drives"}
variant="callAction"
label={"Format All Drives"}
onClick={formatAllDrives}
disabled={notAvailable}
>
<AddIcon />
</BoxButton>
icon={<AddIcon />}
/>
</Grid>
<Grid item xs={12}>

24
portal-ui/src/screens/Console/DirectPV/FormatErrorsResult.tsx
View File

@@ -14,10 +14,11 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Button, Grid, Theme } from "@mui/material";
import React from "react";
import { Grid, Theme } from "@mui/material";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import React from "react";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import { IDirectPVFormatResItem } from "./types";
@@ -97,22 +98,19 @@ const FormatErrorsResult = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
color="primary"
variant="outlined"
id={"download-results"}
variant="regular"
onClick={() => {
download("csiFormatErrors.json", JSON.stringify([...errorsList]));
}}
>
Download
</Button>
label={"Download"}
/>
<Button
id={"finish"}
onClick={onCloseFormatErrorsList}
color="primary"
variant="contained"
autoFocus
>
Done
</Button>
variant="callAction"
label={"Donw"}
/>
</Grid>
</Grid>
</ModalWrapper>

20
portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
View File

@@ -3,7 +3,7 @@ import UsersSelectors from "./UsersSelectors";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
import Grid from "@mui/material/Grid";
import { Button } from "@mui/material";
import { Button } from "mds";
import api from "../../../common/api";
import { ErrorResponseHandler } from "../../../common/types";
@@ -95,26 +95,24 @@ const AddGroupMember = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"reset-add-group-member"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={() => {
setSelectedUsers(preSelectedUsers);
}}
>
Reset
</Button>
label={"Reset"}
/>
<Button
id={"save-add-group-member"}
type="button"
variant="contained"
color="primary"
variant="callAction"
onClick={() => {
addMembersToGroup();
}}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</ModalWrapper>
);

23
portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
View File

@@ -24,7 +24,8 @@ import {
modalStyleUtils,
} from "../Common/FormComponents/common/styleLibrary";
import Grid from "@mui/material/Grid";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import { Button } from "mds";
import PageHeader from "../Common/PageHeader/PageHeader";
import PageLayout from "../Common/Layout/PageLayout";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -146,23 +147,21 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"clear-group"}
type="button"
variant="outlined"
color="primary"
className={classes.spacerRight}
variant="regular"
style={classes.spacerRight}
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"save-group"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={saving || !validGroup}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{saving && (
<Grid item xs={12}>

71
portal-ui/src/screens/Console/Groups/Groups.tsx
View File

@@ -17,6 +17,7 @@
import React, { Fragment, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
@@ -56,11 +57,12 @@ import {
} from "../../../common/SecureComponent";
import withSuspense from "../Common/Components/withSuspense";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { encodeURLString } from "../../../common/utils";
import { setErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
const SetPolicy = withSuspense(
@@ -236,17 +238,18 @@ const Groups = ({ classes }: IGroupsProps) => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Select Policy"}
onClick={() => {
setPolicyOpen(true);
}}
text={"Assign Policy"}
icon={<IAMPoliciesIcon />}
color="primary"
disabled={checkedGroups.length < 1}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Select Policy"}>
<Button
id={"assign-policy"}
onClick={() => {
setPolicyOpen(true);
}}
label={"Assign Policy"}
icon={<IAMPoliciesIcon />}
disabled={checkedGroups.length < 1}
variant={"regular"}
/>
</TooltipWrapper>
</SecureComponent>
<SecureComponent
resource={CONSOLE_UI_RESOURCE}
@@ -254,17 +257,18 @@ const Groups = ({ classes }: IGroupsProps) => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Delete Selected"}
onClick={() => {
setDeleteOpen(true);
}}
text={"Delete Selected"}
icon={<DeleteIcon />}
color="secondary"
disabled={checkedGroups.length === 0}
variant={"outlined"}
/>
<TooltipWrapper tooltip={"Delete Selected"}>
<Button
id="delete-selected-groups"
onClick={() => {
setDeleteOpen(true);
}}
label={"Delete Selected"}
icon={<DeleteIcon />}
variant="secondary"
disabled={checkedGroups.length === 0}
/>
</TooltipWrapper>
</SecureComponent>
<SecureComponent
resource={CONSOLE_UI_RESOURCE}
@@ -275,16 +279,17 @@ const Groups = ({ classes }: IGroupsProps) => {
matchAll
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Create Group"}
text={"Create Group"}
variant="contained"
color="primary"
icon={<AddIcon />}
onClick={() => {
navigate(`${IAM_PAGES.GROUPS_ADD}`);
}}
/>
<TooltipWrapper tooltip={"Create Group"}>
<Button
id={"create-group"}
label={"Create Group"}
variant="callAction"
icon={<AddIcon />}
onClick={() => {
navigate(`${IAM_PAGES.GROUPS_ADD}`);
}}
/>
</TooltipWrapper>
</SecureComponent>
</Box>
</Grid>

67
portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
View File

@@ -1,6 +1,7 @@
import React, { Fragment, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles";
import { useNavigate, useParams } from "react-router-dom";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import {
actionsTray,
@@ -40,11 +41,12 @@ import {
SecureComponent,
} from "../../../common/SecureComponent";
import GroupDetailsHeader from "./GroupDetailsHeader";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { decodeURLString, encodeURLString } from "../../../common/utils";
import { setModalErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import { setSelectedPolicies } from "../Users/AddUsersSlice";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -189,16 +191,17 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
scopes={[IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP]}
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={memberActionText}
text={memberActionText}
variant="contained"
color="primary"
icon={<AddIcon />}
onClick={() => {
setUsersOpen(true);
}}
/>
<TooltipWrapper tooltip={memberActionText}>
<Button
id={"add-user-group"}
label={memberActionText}
variant="callAction"
icon={<AddIcon />}
onClick={() => {
setUsersOpen(true);
}}
/>
</TooltipWrapper>
</SecureComponent>
</div>
@@ -233,17 +236,17 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
<React.Fragment>
<div className={classes.actionsTray}>
<PanelTitle>Policies</PanelTitle>
<RBIconButton
tooltip={`Set Policies`}
text={`Set Policies`}
variant="contained"
color="primary"
icon={<IAMPoliciesIcon />}
onClick={() => {
setPolicyOpen(true);
}}
/>
<TooltipWrapper tooltip={"Set Policies"}>
<Button
id={"set-policies"}
label={`Set Policies`}
variant="callAction"
icon={<IAMPoliciesIcon />}
onClick={() => {
setPolicyOpen(true);
}}
/>
</TooltipWrapper>
</div>
<div className={classes.tableBlock}>
<TableWrapper
@@ -312,16 +315,16 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
errorProps={{ disabled: true }}
>
<div className={classes.spacerLeft}>
<RBIconButton
tooltip={`Delete Group`}
text={``}
variant="outlined"
color="secondary"
icon={<TrashIcon />}
onClick={() => {
setDeleteOpen(true);
}}
/>
<TooltipWrapper tooltip={"Delete Group"}>
<Button
id={"delete-user-group"}
variant="secondary"
icon={<TrashIcon />}
onClick={() => {
setDeleteOpen(true);
}}
/>
</TooltipWrapper>
</div>
</SecureComponent>
</Fragment>

10
portal-ui/src/screens/Console/Heal/Heal.tsx
View File

@@ -18,7 +18,6 @@ import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { HorizontalBar } from "react-chartjs-2";
import {
Button,
FormControl,
Grid,
InputBase,
@@ -28,6 +27,7 @@ import {
} from "@mui/material";
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { wsProtocol } from "../../../utils/wsUtils";
@@ -342,14 +342,14 @@ const Heal = () => {
</Grid>
<Grid item xs={12} className={classes.buttonBar}>
<Button
id={"start-heal"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={start}
onClick={() => setStart(true)}
>
Start
</Button>
label={"Start"}
/>
</Grid>
</Grid>
<Grid item xs={12} className={classes.graphContainer}>

23
portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
View File

@@ -22,6 +22,7 @@ import {
} from "websocket";
import { AppState, useAppDispatch } from "../../../store";
import { useSelector } from "react-redux";
import { Button } from "mds";
import {
DiagStatError,
DiagStatInProgress,
@@ -42,7 +43,7 @@ import {
actionsTray,
containerForHeader,
} from "../Common/FormComponents/common/styleLibrary";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import PageHeader from "../Common/PageHeader/PageHeader";
import TestWrapper from "../Common/TestWrapper/TestWrapper";
@@ -78,7 +79,8 @@ const styles = (theme: Theme) =>
marginBottom: 25,
},
startDiagnostic: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
margin: 25,
marginBottom: 0,
},
@@ -270,14 +272,13 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
{serverDiagnosticStatus !== DiagStatError &&
!downloadDisabled && (
<Button
id={"download"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
onClick={() => download()}
disabled={downloadDisabled}
>
Download
</Button>
label={"Download"}
/>
)}
<Grid
item
@@ -289,13 +290,11 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
<Button
id="start-new-diagnostic"
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={startDiagnostic}
onClick={() => setStartDiagnostic(true)}
>
{buttonStartText}
</Button>
label={buttonStartText}
/>
</Grid>
</Fragment>
)}

478
portal-ui/src/screens/Console/License/ActivationModal.tsx
View File

@@ -1,478 +0,0 @@
// This file is part of MinIO Console Server
// 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 <http://www.gnu.org/licenses/>.
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 { LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import {
containerForHeader,
formFieldStyles,
} from "../Common/FormComponents/common/styleLibrary";
import {
SubnetLoginRequest,
SubnetLoginResponse,
SubnetLoginWithMFARequest,
SubnetOrganization,
SubnetRegisterRequest,
SubnetRegTokenResponse,
} from "./types";
import { ErrorResponseHandler } from "../../../common/types";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import api from "../../../common/api";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import RadioGroupSelector from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
import Link from "@mui/material/Link";
import { setModalErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
const styles = (theme: Theme) =>
createStyles({
subnetLicenseKey: {},
subnetLoginForm: {},
licenseKeyField: {},
pageTitle: {
marginBottom: 20,
},
registrationMode: {
cursor: "pointer",
},
button: {
textTransform: "none",
fontSize: 15,
fontWeight: 700,
background:
"transparent linear-gradient(90deg, #073052 0%, #081c42 100%) 0% 0% no-repeat padding-box",
color: "#fff",
},
buttonSignup: {
textTransform: "none",
fontSize: 15,
fontWeight: 700,
marginLeft: 15,
},
...formFieldStyles,
...containerForHeader(theme.spacing(4)),
});
interface IActivationModal {
classes: any;
open: boolean;
closeModal: () => void;
}
const ActivationModal = ({ classes, open, closeModal }: IActivationModal) => {
const dispatch = useAppDispatch();
const [license, setLicense] = useState<string>("");
const [subnetPassword, setSubnetPassword] = useState<string>("");
const [subnetEmail, setSubnetEmail] = useState<string>("");
const [subnetMFAToken, setSubnetMFAToken] = useState<string>("");
const [subnetOTP, setSubnetOTP] = useState<string>("");
const [subnetAccessToken, setSubnetAccessToken] = useState<string>("");
const [selectedSubnetOrganisation, setSelectedSubnetOrganisation] =
useState<string>("");
const [subnetRegToken, setSubnetRegToken] = useState<string>("");
const [subnetOrganizations, setSubnetOrganizations] = useState<
SubnetOrganization[]
>([]);
const [onlineActivation, setOnlineActivation] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false);
const clearForm = () => {
setLicense("");
setSubnetPassword("");
setSubnetEmail("");
setSubnetMFAToken("");
setSubnetOTP("");
};
const fetchSubnetRegToken = () => {
if (loading || subnetRegToken) {
return;
}
setLoading(true);
api
.invoke("GET", "/api/v1/subnet/registration-token")
.then((resp: SubnetRegTokenResponse) => {
setLoading(false);
if (resp && resp.regToken) {
setSubnetRegToken(resp.regToken);
}
})
.catch((err: ErrorResponseHandler) => {
setLoading(false);
dispatch(setModalErrorSnackMessage(err));
});
};
const subnetRegister = () => {
if (loading) {
return;
}
setLoading(true);
if (subnetAccessToken && selectedSubnetOrganisation) {
const request: SubnetRegisterRequest = {
token: subnetAccessToken,
account_id: selectedSubnetOrganisation,
};
api
.invoke("POST", "/api/v1/subnet/register", request)
.then(() => {
setLoading(false);
clearForm();
closeModal();
})
.catch((err: ErrorResponseHandler) => {
setLoading(false);
dispatch(setModalErrorSnackMessage(err));
});
}
};
const subnetLoginWithMFA = () => {
if (loading) {
return;
}
setLoading(true);
const request: SubnetLoginWithMFARequest = {
username: subnetEmail,
otp: subnetOTP,
mfa_token: subnetMFAToken,
};
api
.invoke("POST", "/api/v1/subnet/login/mfa", request)
.then((resp: SubnetLoginResponse) => {
setLoading(false);
if (resp && resp.access_token && resp.organizations.length > 0) {
setSubnetAccessToken(resp.access_token);
setSubnetOrganizations(resp.organizations);
setSelectedSubnetOrganisation(
resp.organizations[0].accountId.toString()
);
}
})
.catch((err: ErrorResponseHandler) => {
setLoading(false);
setSubnetOTP("");
dispatch(setModalErrorSnackMessage(err));
});
};
const subnetLogin = () => {
if (loading) {
return;
}
setLoading(true);
let request: SubnetLoginRequest = {
username: subnetEmail,
password: subnetPassword,
apiKey: license,
};
api
.invoke("POST", "/api/v1/subnet/login", request)
.then((resp: SubnetLoginResponse) => {
setLoading(false);
if (resp && resp.registered) {
clearForm();
closeModal();
} else if (resp && resp.mfa_token) {
setSubnetMFAToken(resp.mfa_token);
} else if (resp && resp.access_token && resp.organizations.length > 0) {
setSubnetAccessToken(resp.access_token);
setSubnetOrganizations(resp.organizations);
setSelectedSubnetOrganisation(
resp.organizations[0].accountId.toString()
);
}
})
.catch((err: ErrorResponseHandler) => {
setLoading(false);
clearForm();
dispatch(setModalErrorSnackMessage(err));
});
};
let clusterRegistrationForm: JSX.Element;
if (subnetAccessToken && subnetOrganizations.length > 0) {
clusterRegistrationForm = (
<Fragment>
<Grid item xs={12}>
<Typography variant="subtitle2" gutterBottom component="div">
Register MinIO cluster
</Typography>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
tooltip={"Please choose the organization for this cluster."}
currentSelection={selectedSubnetOrganisation}
id="subnet-organisation"
name="subnet-organisation"
label="Select an Organisation"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
setSelectedSubnetOrganisation(e.target.value as string);
}}
selectorOptions={subnetOrganizations.map((organisation) => ({
value: organisation.accountId.toString(),
label: organisation.company,
}))}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<Button
className={classes.button}
color="primary"
onClick={() => subnetRegister()}
disabled={loading || subnetAccessToken.trim().length === 0}
variant="contained"
>
Register
</Button>
</Grid>
</Fragment>
);
} else if (subnetMFAToken) {
clusterRegistrationForm = (
<Fragment>
<Grid item xs={12}>
<Typography variant="subtitle2" gutterBottom component="div">
Two-Factor Authentication
</Typography>
<Typography variant="caption" display="block" gutterBottom>
Please enter the 6-digit verification code that was sent to your
email address. This code will be valid for 5 minutes.
</Typography>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
overlayIcon={<LockOutlinedIcon />}
id="subnet-otp"
name="subnet-otp"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setSubnetOTP(event.target.value);
}}
placeholder=""
label=""
type="text"
value={subnetOTP}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<Button
color="primary"
onClick={() => subnetLoginWithMFA()}
disabled={
loading ||
subnetOTP.trim().length === 0 ||
subnetMFAToken.trim().length === 0
}
variant="contained"
>
Verify
</Button>
</Grid>
</Fragment>
);
} else {
clusterRegistrationForm = (
<Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
overlayIcon={<PersonOutlineOutlinedIcon />}
id="subnet-email"
name="subnet-email"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setSubnetEmail(event.target.value);
}}
placeholder="email"
label=""
type="text"
value={subnetEmail}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
overlayIcon={<LockOutlinedIcon />}
id="subnet-password"
name="subnet-password"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setSubnetPassword(event.target.value);
}}
placeholder="password"
label=""
type="password"
value={subnetPassword}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<Button
color="primary"
onClick={() => subnetLogin()}
disabled={
loading ||
subnetEmail.trim().length === 0 ||
subnetPassword.trim().length === 0
}
variant="contained"
>
Login
</Button>
<Button
className={classes.buttonSignup}
color="primary"
target="_blank"
rel="noopener noreferrer"
href="#"
onClick={(e) => {
e.preventDefault();
window.open("https://min.io/pricing", "_blank");
}}
variant="outlined"
>
Sign Up
</Button>
</Grid>
<Typography variant="caption" display="block" gutterBottom>
<Link
className={classes.registrationMode}
color="inherit"
onClick={() => {
fetchSubnetRegToken();
setOnlineActivation(false);
}}
>
Offline Activation
</Link>
</Typography>
</Fragment>
);
}
return open ? (
<ModalWrapper
title=""
modalOpen={open}
onClose={() => {
setLicense("");
setSubnetPassword("");
setSubnetEmail("");
closeModal();
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<Grid container alignItems="center" item xs={12}>
<Grid item xs={12}>
<Typography component="h2" variant="h6" className={classes.pageTitle}>
Activate SUBNET License
</Typography>
</Grid>
{onlineActivation ? (
<Grid item className={classes.subnetLoginForm} xs={12}>
<Grid container>{clusterRegistrationForm}</Grid>
</Grid>
) : (
<Grid item className={classes.subnetLicenseKey} xs={12}>
<Typography variant="caption" display="block" gutterBottom>
Step 1: Copy the following registration token
</Typography>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
onChange={() => {}}
id="registration-token"
name="registration-token"
placeholder=""
label=""
type="text"
value={subnetRegToken}
disabled
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<Button
variant="contained"
color="primary"
onClick={() => navigator.clipboard.writeText(subnetRegToken)}
>
Copy
</Button>
</Grid>
<Typography variant="caption" display="block" gutterBottom>
Step 2: Use the previous token to register your cluster at:{" "}
<Link
color="inherit"
href="https://subnet.min.io/cluster/register"
target="_blank"
>
https://subnet.min.io/cluster/register
</Link>
</Typography>
<Typography variant="caption" display="block" gutterBottom>
Step 3: Enter the API key generated by SUBNET
</Typography>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={license}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setLicense(event.target.value)
}
id="api-key"
name="api-key"
placeholder=""
label=""
type="text"
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<Button
variant="contained"
color="primary"
onClick={() => subnetLogin()}
disabled={loading || license.trim().length === 0}
>
Activate
</Button>
</Grid>
<Typography variant="caption" display="block" gutterBottom>
<Link
className={classes.registrationMode}
color="inherit"
onClick={() => setOnlineActivation(true)}
>
Online Activation
</Link>
</Typography>
</Grid>
)}
</Grid>
{loading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</ModalWrapper>
) : null;
};
export default withStyles(styles)(ActivationModal);

12
portal-ui/src/screens/Console/License/LicenseConsentModal.tsx
View File

@@ -16,7 +16,8 @@
import React from "react";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import { Button } from "mds";
import { AGPLV3DarkLogo } from "../../../icons";
import { setLicenseConsent } from "./utils";
@@ -109,13 +110,12 @@ const LicenseConsentModal = ({
}}
>
<Button
id={"confirm"}
type="button"
variant="contained"
color="primary"
variant="callAction"
onClick={recordAgplConsent}
>
Acknowledge
</Button>
label={"Acknowledge"}
/>
</Box>
</Box>
</ModalWrapper>

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

@@ -17,7 +17,7 @@
import React, { Fragment, useEffect, useState } from "react";
import clsx from "clsx";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import Button from "@mui/material/Button";
import { Button } from "mds";
import { Theme, useTheme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import { SubnetInfo } from "./types";
@@ -296,20 +296,12 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
currentPlan !== "community" ? "https://subnet.min.io" : link;
return (
<Button
id={`license-action-${link}`}
variant={variant}
color="primary"
target="_blank"
rel="noopener noreferrer"
sx={{
style={{
marginTop: "12px",
width: "80%",
"&.MuiButton-contained": {
padding: 0,
paddingLeft: "8px",
paddingRight: "8px",
},
}}
href={linkToNav}
disabled={
currentPlan !== LICENSE_PLANS.COMMUNITY && currentPlan !== plan
}
@@ -321,9 +313,8 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
"_blank"
);
}}
>
{btnText}
</Button>
label={btnText}
/>
);
};
@@ -621,7 +612,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
{getButton(
`https://slack.min.io${linkTracker}`,
"Join Slack",
"outlined",
"regular",
LICENSE_PLANS.COMMUNITY
)}
</Box>
@@ -663,7 +654,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
!PAID_PLANS.includes(currentPlan)
? "Subscribe"
: "Login to SUBNET",
"contained",
"callAction",
LICENSE_PLANS.STANDARD
)}
</Box>
@@ -715,7 +706,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
!PAID_PLANS.includes(currentPlan)
? "Subscribe"
: "Login to SUBNET",
"contained",
"callAction",
LICENSE_PLANS.ENTERPRISE
)}
</Box>

34
portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
View File

@@ -16,17 +16,11 @@
import React, { Fragment, useEffect, useState } from "react";
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { useSelector } from "react-redux";
import {
Button,
FormControl,
Grid,
InputBase,
MenuItem,
Select,
} from "@mui/material";
import { FormControl, Grid, InputBase, MenuItem, Select } from "@mui/material";
import moment from "moment/moment";
import { ErrorResponseHandler } from "../../../../../src/common/types";
@@ -330,27 +324,29 @@ const ErrorLogs = () => {
</FormControl>
)}
</Grid>
<Grid item xs={2} textAlign={"right"}>
<Grid
item
xs={2}
sx={{ display: "flex", justifyContent: "flex-end" }}
>
{!logsStarted && (
<Button
id={"start-logs"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={false}
onClick={startLogs}
>
Start Logs
</Button>
label={"Start Logs"}
/>
)}
{logsStarted && (
<Button
id={"stop-logs"}
type="button"
variant="contained"
color="primary"
variant="callAction"
onClick={stopLogs}
>
Stop Logs
</Button>
label={"Stop Logs"}
/>
)}
</Grid>
<Grid item xs={12} className={classes.actionsTray}>

14
portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx
View File

@@ -15,9 +15,10 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment } from "react";
import get from "lodash/get";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import get from "lodash/get";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -79,13 +80,12 @@ const LogSearchFullModal = ({
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
type="button"
variant="contained"
id={"close-log-search"}
variant="callAction"
color="primary"
onClick={onClose}
>
Close
</Button>
label={"Close"}
/>
</Grid>
</Grid>
</ModalWrapper>

14
portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
View File

@@ -16,11 +16,12 @@
import React, { Fragment, useCallback, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import get from "lodash/get";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import { Grid } from "@mui/material";
import get from "lodash/get";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, Grid } from "@mui/material";
import {
advancedFilterToggleStyles,
containerForHeader,
@@ -400,13 +401,12 @@ const LogsSearchMain = ({ classes }: ILogSearchProps) => {
</Grid>
<Grid item xs={12} className={classes.endLineAction}>
<Button
id={"get-information"}
type="button"
variant="contained"
color="primary"
variant="callAction"
onClick={triggerLoad}
>
Get Information
</Button>
label={"Get Information"}
/>
</Grid>
</Grid>
<Grid item xs={12} className={classes.tableBlock}>

11
portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
View File

@@ -21,7 +21,7 @@ import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button } from "@mui/material";
import { Button } from "mds";
import api from "../../../common/api";
import {
@@ -227,13 +227,12 @@ const AddNotificationEndpoint = ({
</Grid>
<Grid item xs={12} className={classes.settingsButtonContainer}>
<Button
id={"save-notification-target"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={saving}
>
Save Notification Target
</Button>
label={"Save Notification Target"}
/>
</Grid>
</div>
</Fragment>

29
portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx
View File

@@ -15,13 +15,13 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useCallback, useEffect, useState } from "react";
import { Button } from "mds";
import { useLocation, useNavigate } from "react-router-dom";
import get from "lodash/get";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import Grid from "@mui/material/Grid";
import api from "../../../../common/api";
import ConfTargetGeneric from "../ConfTargetGeneric";
@@ -220,30 +220,21 @@ const EditConfiguration = ({
}}
>
<Button
type="button"
variant="outlined"
color="secondary"
sx={{
padding: {
xs: "3px", //avoid wrapping on smaller screens
md: "20px",
},
}}
id={"restore-defaults"}
variant="secondary"
onClick={() => {
setResetConfigurationOpen(true);
}}
>
Restore Defaults
</Button>
label={"Restore Defaults"}
/>
&nbsp; &nbsp;
<Button
id={"save"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={saving}
>
Save
</Button>
label={"Save"}
/>
</Grid>
</form>
</Box>

48
portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
View File

@@ -15,7 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Button } from "mds";
import { useNavigate } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -47,7 +47,7 @@ import HelpBox from "../../../common/HelpBox";
import AButton from "../Common/AButton/AButton";
import PageLayout from "../Common/Layout/PageLayout";
import SearchBox from "../Common/SearchBox";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
import {
setErrorSnackMessage,
@@ -55,6 +55,7 @@ import {
} from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import ConfirmDeleteTargetModal from "./ConfirmDeleteTargetModal";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
interface IListNotificationEndpoints {
classes: any;
@@ -191,27 +192,28 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
value={filter}
/>
<div className={classes.rightActionItems}>
<RBIconButton
tooltip={"Refresh List"}
text={"Refresh"}
variant="outlined"
color="primary"
icon={<RefreshIcon />}
onClick={() => {
setIsLoading(true);
}}
/>
<RBIconButton
tooltip={"Add Notification Target"}
text={" Add Notification Target"}
variant="contained"
color="primary"
icon={<AddIcon />}
onClick={() => {
navigate(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
}}
/>
<TooltipWrapper tooltip={"Refresh List"}>
<Button
id={"reload-notification-endpoints"}
label={"Refresh"}
variant="regular"
icon={<RefreshIcon />}
onClick={() => {
setIsLoading(true);
}}
/>
</TooltipWrapper>
<TooltipWrapper tooltip={"Add Notification Target"}>
<Button
id={"add-notification-target"}
label={" Add Notification Target"}
variant="callAction"
icon={<AddIcon />}
onClick={() => {
navigate(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
}}
/>
</TooltipWrapper>
</div>
</Grid>
{isLoading && <LinearProgress />}

61
portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
View File

@@ -22,7 +22,7 @@ import withStyles from "@mui/styles/withStyles";
import createStyles from "@mui/styles/createStyles";
import { Theme } from "@mui/material/styles";
import { Link, useNavigate } from "react-router-dom";
import { Button, IconButton, Tooltip } from "@mui/material";
import { IconButton, Tooltip } from "@mui/material";
import { objectBrowserCommon } from "../Common/FormComponents/common/styleLibrary";
import { encodeURLString } from "../../../common/utils";
import { BackCaretIcon, CopyIcon, NewPathIcon } from "../../../icons";
@@ -33,7 +33,7 @@ import withSuspense from "../Common/Components/withSuspense";
import { setSnackBarMessage } from "../../../systemSlice";
import { AppState, useAppDispatch } from "../../../store";
import { setVersionsModeEnabled } from "./objectBrowserSlice";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { Button } from "mds";
const CreatePathModal = withSuspense(
React.lazy(
@@ -192,31 +192,28 @@ const BrowserBreadcrumbs = ({
{listBreadcrumbs}
</div>
<CopyToClipboard text={`${bucketName}/${splitPaths.join("/")}`}>
<RBIconButton
<Button
id={"copy-path"}
icon={<CopyIcon />}
disableTouchRipple
disableRipple
focusRipple={false}
variant={"outlined"}
icon={
<CopyIcon
style={{
width: "12px",
height: "12px",
fill: "#969FA8",
marginTop: -1,
}}
/>
}
variant={"regular"}
onClick={() => {
dispatch(setSnackBarMessage("Path copied to clipboard"));
}}
sx={{
marginRight: "3px",
padding: "0",
color: "#969FA8",
border: "#969FA8 1px solid",
style={{
width: "28px",
height: "28px",
"& .MuiButton-root": {
height: "28px",
},
"& .min-icon": {
width: "12px",
height: "12px",
},
color: "#969FA8",
border: "#969FA8 1px solid",
marginRight: 5,
}}
/>
</CopyToClipboard>
@@ -233,25 +230,15 @@ const BrowserBreadcrumbs = ({
rewindEnabled ||
!hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
}
endIcon={<NewPathIcon />}
disableTouchRipple
disableRipple
focusRipple={false}
sx={{
icon={<NewPathIcon style={{ fill: "#969FA8" }} />}
style={{
whiteSpace: "nowrap",
color: "#969FA8",
border: "#969FA8 1px solid",
whiteSpace: "nowrap",
minWidth: "160px",
"@media (max-width: 1060px)": {
fontSize: 0,
minWidth: 40,
padding: "0 10px 0 0",
},
}}
variant={"outlined"}
>
Create new path
</Button>
variant={"regular"}
label={"Create new path"}
/>
</Tooltip>
)}
</div>

10
portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
View File

@@ -17,7 +17,7 @@
import React, { useState } from "react";
import Grid from "@mui/material/Grid";
import createStyles from "@mui/styles/createStyles";
import { Button } from "@mui/material";
import { Button } from "mds";
import makeStyles from "@mui/styles/makeStyles";
import { Theme } from "@mui/material/styles";
import { EditIcon } from "../../../icons";
@@ -189,13 +189,13 @@ const RenameLongFileName = ({
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
id={"download-file"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={newFileName.length > 200 && !acceptLongName}
>
Download File
</Button>
label={"Download File"}
/>
</Grid>
</Grid>
</form>

20
portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
View File

@@ -16,7 +16,8 @@
import React, { Fragment, useState } from "react";
import Grid from "@mui/material/Grid";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import { Button } from "mds";
import PageHeader from "../Common/PageHeader/PageHeader";
import PageLayout from "../Common/Layout/PageLayout";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -132,22 +133,21 @@ const AddPolicyScreen = () => {
}}
>
<Button
id={"clear"}
type="button"
variant="outlined"
color="primary"
variant="regular"
onClick={resetForm}
>
Clear
</Button>
label={"Clear"}
/>
<Button
id={"save-policy"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading || !validSave}
>
Save
</Button>
label={"Save"}
/>
</Box>
</Grid>
</Grid>

26
portal-ui/src/screens/Console/Policies/ListPolicies.tsx
View File

@@ -15,7 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Button } from "mds";
import { useNavigate } from "react-router-dom";
import get from "lodash/get";
import { Theme } from "@mui/material/styles";
@@ -49,10 +49,11 @@ import {
import SearchBox from "../Common/SearchBox";
import withSuspense from "../Common/Components/withSuspense";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { encodeURLString } from "../../../common/utils";
import { setErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
@@ -193,16 +194,17 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Create Policy"}
text={"Create Policy"}
variant="contained"
color="primary"
icon={<AddIcon />}
onClick={() => {
navigate(`${IAM_PAGES.POLICY_ADD}`);
}}
/>
<TooltipWrapper tooltip={"Create Policy"}>
<Button
id={"create-policy"}
label={"Create Policy"}
variant="callAction"
icon={<AddIcon />}
onClick={() => {
navigate(`${IAM_PAGES.POLICY_ADD}`);
}}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item xs={12} className={classes.tableBlock}>

62
portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
View File

@@ -17,6 +17,7 @@ import React, { Fragment, useEffect, useState } from "react";
import { IAMPolicy, IAMStatement, Policy } from "./types";
import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { Button } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -28,7 +29,7 @@ import {
} from "../Common/FormComponents/common/styleLibrary";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import api from "../../../common/api";
import PageHeader from "../Common/PageHeader/PageHeader";
@@ -56,20 +57,25 @@ import {
} from "../../../common/SecureComponent";
import withSuspense from "../Common/Components/withSuspense";
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
import PolicyView from "./PolicyView";
import { decodeURLString, encodeURLString } from "../../../common/utils";
import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
import { selFeatures } from "../consoleSlice";
import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
paddingTop: 16,
"& button": {
marginLeft: 8,
},
},
pageContainer: {
border: "1px solid #EAEAEA",
@@ -349,28 +355,30 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<RBIconButton
tooltip={"Delete Policy"}
text={"Delete Policy"}
variant="outlined"
color="secondary"
icon={<TrashIcon />}
onClick={deletePolicy}
/>
<TooltipWrapper tooltip={"Delete Policy"}>
<Button
id={"delete-policy"}
label={"Delete Policy"}
variant="secondary"
icon={<TrashIcon />}
onClick={deletePolicy}
/>
</TooltipWrapper>
</SecureComponent>
<RBIconButton
tooltip={"Refresh"}
text={"Refresh"}
variant="outlined"
color="primary"
icon={<RefreshIcon />}
onClick={() => {
setLoadingUsers(true);
setLoadingGroups(true);
setLoadingPolicy(true);
}}
/>
<TooltipWrapper tooltip={"Refresh"}>
<Button
id={"refresh-policy"}
label={"Refresh"}
variant="regular"
icon={<RefreshIcon />}
onClick={() => {
setLoadingUsers(true);
setLoadingGroups(true);
setLoadingPolicy(true);
}}
/>
</TooltipWrapper>
</Fragment>
}
/>
@@ -513,13 +521,13 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
errorProps={{ disabled: true }}
>
<Button
id={"save"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={addLoading || !validSave}
>
Save
</Button>
label={"Save"}
/>
</SecureComponent>
</Grid>
{addLoading && (

27
portal-ui/src/screens/Console/Policies/SetPolicy.tsx
View File

@@ -15,12 +15,12 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState, Fragment } from "react";
import get from "lodash/get";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import {
modalBasic,
@@ -58,8 +58,12 @@ const styles = (theme: Theme) =>
marginTop: 15,
},
buttonContainer: {
textAlign: "right",
display: "flex",
justifyContent: "flex-end",
marginTop: ".9rem",
"& button": {
marginLeft: 8,
},
},
});
@@ -185,23 +189,22 @@ const SetPolicy = ({
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
id={"reset"}
type="button"
variant="outlined"
color="primary"
variant="regular"
className={classes.spacerRight}
onClick={resetSelection}
>
Reset
</Button>
label={"Reset"}
/>
<Button
id={"save"}
type="button"
variant="contained"
variant="callAction"
color="primary"
disabled={loading}
onClick={setPolicyAction}
>
Save
</Button>
label={"Save"}
/>
</Grid>
{loading && (
<Grid item xs={12}>

24
portal-ui/src/screens/Console/Speedtest/STResults.tsx
View File

@@ -17,6 +17,7 @@
import React, { Fragment, useState } from "react";
import get from "lodash/get";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Grid } from "@mui/material";
@@ -31,7 +32,6 @@ import {
UploadStatIcon,
VersionIcon,
} from "../../../icons";
import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
import { cleanMetrics } from "./utils";
@@ -311,21 +311,19 @@ const STResults = ({ classes, results, start }: ISTResults) => {
<Grid item xs={12} md={6} className={classes.actionButtons}>
{!start && (
<Fragment>
<BoxIconButton
aria-label="Download"
<Button
id={"download-results"}
aria-label="Download Results"
onClick={downloadResults}
size="large"
>
<DownloadIcon />
</BoxIconButton>
icon={<DownloadIcon />}
/>
&nbsp;
<BoxIconButton
aria-label="Download"
<Button
id={"toggle-json"}
aria-label="Toogle JSON"
onClick={toggleJSONView}
size="large"
>
<JSONIcon />
</BoxIconButton>
icon={<JSONIcon />}
/>
</Fragment>
)}
</Grid>

19
portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
View File

@@ -17,8 +17,9 @@
import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import moment from "moment/moment";
import PageHeader from "../Common/PageHeader/PageHeader";
@@ -182,6 +183,10 @@ const Speedtest = () => {
setSpeedometerValue(percToDisplay);
}, [start, currentValue, topDate, totalSeconds]);
const stoppedLabel = currStatus !== null ? "Retest" : "Start";
const buttonLabel = start ? "Start" : stoppedLabel;
return (
<Fragment>
<PageHeader label="Performance" />
@@ -289,20 +294,14 @@ const Speedtest = () => {
type="button"
id={"start-speed-test"}
variant={
currStatus !== null && !start ? "contained" : "outlined"
currStatus !== null && !start ? "callAction" : "regular"
}
className={`${classes.buttonBackground} ${classes.speedStart}`}
disabled={
duration.trim() === "" || size.trim() === "" || start
}
>
{!start && (
<Fragment>
{currStatus !== null ? "Retest" : "Start"}
</Fragment>
)}
{start ? "Start" : ""}
</Button>
label={buttonLabel}
/>
</Grid>
</Grid>
<Grid container className={classes.multiModule}>

23
portal-ui/src/screens/Console/Support/ApiKeyRegister.tsx
View File

@@ -15,7 +15,8 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Box, Button } from "@mui/material";
import { Box } from "@mui/material";
import { Button } from "mds";
import { OnlineRegistrationIcon } from "../../../icons";
import { FormTitle } from "./utils";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -157,25 +158,27 @@ const ApiKeyRegister = ({
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
"& button": {
marginLeft: "8px",
},
}}
>
<Button
variant="outlined"
id={"get-from-subnet"}
variant="regular"
className={classes.spacerRight}
disabled={loading}
onClick={() => setShowApiKeyModal(true)}
>
Get from SUBNET
</Button>
label={"Get from SUBNET"}
/>
<Button
id={"register"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={loading || apiKey.trim().length === 0}
onClick={() => onRegister()}
>
Register
</Button>
label={"Register"}
/>
<GetApiKeyModal
open={showApiKeyModal}
closeModal={() => setShowApiKeyModal(false)}

3
portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx
View File

@@ -214,8 +214,7 @@ const GetApiKeyModal = ({
onConfirm={onConfirm}
onClose={closeModal}
confirmButtonProps={{
color: "primary",
variant: "contained",
variant: "callAction",
disabled: !email || !password || isLoading,
hidden: true,
}}

25
portal-ui/src/screens/Console/Support/Profile.tsx
View File

@@ -1,9 +1,10 @@
import React, { Fragment, useState } from "react";
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import PageHeader from "../Common/PageHeader/PageHeader";
import PageLayout from "../Common/Layout/PageLayout";
import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
@@ -17,9 +18,10 @@ import {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
display: "flex",
justifyContent: "flex-end",
marginTop: 24,
textAlign: "right",
"& .MuiButton-root": {
"& button": {
marginLeft: 8,
},
},
@@ -166,27 +168,26 @@ const Profile = ({ classes }: IProfileProps) => {
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
id={"start-profiling"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={profilingStarted || types.length < 1}
onClick={() => {
startProfiling();
}}
>
Start Profiling
</Button>
label={"Start Profiling"}
/>
<Button
id={"stop-profiling"}
type="submit"
variant="contained"
variant="callAction"
color="primary"
disabled={!profilingStarted}
onClick={() => {
stopProfiling();
}}
>
Stop Profiling
</Button>
label={"Stop Profiling"}
/>
</Grid>
</Grid>
</PageLayout>

50
portal-ui/src/screens/Console/Support/Register.tsx
View File

@@ -16,6 +16,7 @@
import React, { Fragment, useCallback, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles";
import { Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import {
actionsTray,
@@ -24,7 +25,7 @@ import {
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import withStyles from "@mui/styles/withStyles";
import { Box, Button, Link } from "@mui/material";
import { Box, Link } from "@mui/material";
import PageHeader from "../Common/PageHeader/PageHeader";
import PageLayout from "../Common/Layout/PageLayout";
import { CopyIcon, UsersIcon } from "../../../icons";
@@ -378,14 +379,12 @@ const Register = ({ classes }: IRegister) => {
}}
>
<Button
className={classes.button}
color="primary"
id={"register-cluster"}
onClick={() => subnetRegister()}
disabled={loading || subnetAccessToken.trim().length === 0}
variant="contained"
>
Register
</Button>
variant="callAction"
label={"Register"}
/>
</Box>
</Box>
</Box>
@@ -449,17 +448,16 @@ const Register = ({ classes }: IRegister) => {
}}
>
<Button
color="primary"
id={"verify"}
onClick={() => subnetLoginWithMFA()}
disabled={
loading ||
subnetOTP.trim().length === 0 ||
subnetMFAToken.trim().length === 0
}
variant="contained"
>
Verify
</Button>
variant="callAction"
label={"Verify"}
/>
</Box>
</Box>
@@ -553,12 +551,16 @@ const Register = ({ classes }: IRegister) => {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
"& button": {
marginLeft: "8px",
},
}}
>
<Button
id={"sign-up"}
type="submit"
className={classes.spacerRight}
variant="outlined"
variant="regular"
onClick={(e) => {
e.preventDefault();
window.open(
@@ -568,22 +570,20 @@ const Register = ({ classes }: IRegister) => {
"_blank"
);
}}
>
Sign up
</Button>
label={"Sign up"}
/>
<Button
id={"register-credentials"}
type="submit"
variant="contained"
color="primary"
variant="callAction"
disabled={
loading ||
subnetEmail.trim().length === 0 ||
subnetPassword.trim().length === 0
}
onClick={() => subnetLogin()}
>
Register
</Button>
label={"Register"}
/>
</Box>
</Box>
</Box>
@@ -789,13 +789,13 @@ const Register = ({ classes }: IRegister) => {
}}
>
<Button
variant="contained"
id={"register-subnet"}
variant="callAction"
color="primary"
onClick={() => subnetLogin()}
disabled={loading || license.trim().length === 0}
>
Register
</Button>
label={"Register"}
/>
</Box>
</Box>
<RegisterHelpBox />

10
portal-ui/src/screens/Console/Tenants/AddTenant/CreateTenantButton.tsx
View File

@@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Button } from "@mui/material";
import { Button } from "mds";
import React from "react";
import { useSelector } from "react-redux";
import { AppState, useAppDispatch } from "../../../../store";
@@ -45,17 +45,15 @@ const CreateTenantButton = () => {
return (
<Button
id={"wizard-button-Create"}
variant="contained"
variant="callAction"
color="primary"
size="small"
onClick={() => {
dispatch(createTenantAsync());
}}
disabled={!enabled}
key={`button-AddTenant-Create`}
>
Create
</Button>
label={"Create"}
/>
);
};

5
portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
View File

@@ -50,6 +50,7 @@ const styles = (theme: Theme) =>
background: "#FFFFFF",
border: "1px solid #EAEAEA",
padding: 2,
marginTop: 20,
},
...formFieldStyles,
...modalBasic,
@@ -124,7 +125,7 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
return (
<Fragment>
<Grid container>
<Grid item xs={8} md={9}>
<Grid item sx={{ width: "calc(100% - 300px)" }}>
<Paper className={classes.paperWrapper} sx={{ minHeight: 550 }}>
<Grid container>
<Grid item xs={12}>
@@ -197,7 +198,7 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
</Grid>
</Paper>
</Grid>
<Grid item xs={4} md={3}>
<Grid item>
<div className={classes.sizePreview}>
<SizePreview />
</div>

3
portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
View File

@@ -61,8 +61,7 @@ const AddNamespaceModal = () => {
title={`New namespace`}
confirmText={"Create"}
confirmButtonProps={{
color: "primary",
variant: "contained",
variant: "callAction",
}}
isOpen={addNamespaceOpen}
titleIcon={<ConfirmModalIcon />}

Some files were not shown because too many files have changed in this diff Show More