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

UX bucket and object modals and all other modals (#1307)

Browse Source
This commit is contained in:
Prakash Senthil Vel
2021-12-10 20:12:46 +00:00
committed by GitHub
parent 9444dadc16
commit 8a79409ef6
40 changed files with 1413 additions and 1221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
modalBasic,
modalStyleUtils,
serviceAccountStyles,
} from "../Common/FormComponents/common/styleLibrary";
import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -37,7 +37,7 @@ import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWr
const styles = (theme: Theme) =>
createStyles({
...serviceAccountStyles,
...modalBasic,
...modalStyleUtils,
});
interface IAddServiceAccountProps {
@@ -128,7 +128,7 @@ const AddServiceAccount = ({
addServiceAccount(e);
}}
>
<Grid container className={classes.containerScrollable}>
<Grid container className={classes.modalFormScrollable}>
<Grid item xs={12}>
<div className={classes.infoDetails}>
Service Accounts inherit the policy explicitly attached to the
@@ -205,12 +205,11 @@ const AddServiceAccount = ({
</Grid>
</Grid>
<Grid container>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
color="primary"
variant="outlined"
className={classes.buttonSpacer}
onClick={resetForm}
>
Clear

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

@@ -24,9 +24,10 @@ import Grid from "@mui/material/Grid";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Button, LinearProgress } from "@mui/material";
import {
actionsTray,
containerForHeader,
modalBasic,
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { ChangePasswordRequest } from "../Buckets/types";
import { setModalErrorSnackMessage } from "../../../actions";
@@ -38,8 +39,9 @@ const styles = (theme: Theme) =>
buttonContainer: {
textAlign: "right",
},
...actionsTray,
...modalBasic,
...modalStyleUtils,
...formFieldStyles,
...spacingUtils,
...containerForHeader(theme.spacing(4)),
});
@@ -118,8 +120,6 @@ const ChangePassword = ({
setCurrentPassword("");
closeModal();
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<form
noValidate
@@ -129,8 +129,8 @@ const ChangePassword = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="current-password"
name="current-password"
@@ -142,7 +142,7 @@ const ChangePassword = ({
value={currentPassword}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="new-password"
name="new-password"
@@ -154,7 +154,7 @@ const ChangePassword = ({
value={newPassword}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="re-new-password"
name="re-new-password"
@@ -167,7 +167,7 @@ const ChangePassword = ({
/>
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="submit"
variant="contained"

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

@@ -24,9 +24,10 @@ import Grid from "@mui/material/Grid";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Button, LinearProgress } from "@mui/material";
import {
actionsTray,
containerForHeader,
modalBasic,
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { ChangeUserPasswordRequest } from "../Buckets/types";
import { setModalErrorSnackMessage } from "../../../actions";
@@ -38,8 +39,9 @@ const styles = (theme: Theme) =>
buttonContainer: {
textAlign: "right",
},
...actionsTray,
...modalBasic,
...modalStyleUtils,
...formFieldStyles,
...spacingUtils,
...containerForHeader(theme.spacing(4)),
});
@@ -109,8 +111,6 @@ const ChangeUserPassword = ({
setReNewPassword("");
closeModal();
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<form
noValidate
@@ -120,9 +120,11 @@ const ChangeUserPassword = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<h3>Change password for {userName}</h3>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalFormScrollable}>
<div className={classes.spacerBottom}>
Change password for: {userName}
</div>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="new-password"
name="new-password"
@@ -134,7 +136,7 @@ const ChangeUserPassword = ({
value={newPassword}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="re-new-password"
name="re-new-password"

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

@@ -21,7 +21,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { connect } from "react-redux";
import api from "../../../../common/api";
import { ErrorResponseHandler } from "../../../../common/types";
@@ -44,10 +47,8 @@ interface IAddAccessRule {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
});
const AddAccessRule = ({
@@ -86,53 +87,58 @@ const AddAccessRule = ({
};
return (
<React.Fragment>
<ModalWrapper
modalOpen={modalOpen}
title="Add Access Rule"
onClose={onClose}
>
<Grid container>
<Grid item xs={12}>
<InputBoxWrapper
value={prefix}
label={"Prefix"}
id={"prefix"}
name={"prefix"}
placeholder={"Enter Prefix"}
onChange={(e) => {
setPrefix(e.target.value);
}}
/>
<SelectWrapper
id="access"
name="Access"
onChange={(e) => {
setSelectedAccess(e.target.value);
}}
label="Access"
value={selectedAccess}
options={accessOptions}
disabled={false}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button type="button" color="primary" onClick={resetForm}>
Clear
</button>
<Button
type="submit"
variant="contained"
color="primary"
disabled={prefix.trim() === ""}
onClick={createProcess}
>
Save
</Button>
</Grid>
<ModalWrapper
modalOpen={modalOpen}
title="Add Access Rule"
onClose={onClose}
>
<Grid container>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={prefix}
label={"Prefix"}
id={"prefix"}
name={"prefix"}
placeholder={"Enter Prefix"}
onChange={(e) => {
setPrefix(e.target.value);
}}
/>
</Grid>
</ModalWrapper>
</React.Fragment>
<Grid item xs={12}>
<SelectWrapper
id="access"
name="Access"
onChange={(e) => {
setSelectedAccess(e.target.value);
}}
label="Access"
value={selectedAccess}
options={accessOptions}
disabled={false}
/>
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
color="primary"
variant="outlined"
onClick={resetForm}
>
Clear
</Button>
<Button
type="submit"
variant="contained"
color="primary"
disabled={prefix.trim() === ""}
onClick={createProcess}
>
Save
</Button>
</Grid>
</Grid>
</ModalWrapper>
);
};

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

@@ -21,7 +21,11 @@ import { Button, Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions";
import { AppState } from "../../../../store";
import { ErrorResponseHandler } from "../../../../common/types";
@@ -40,14 +44,9 @@ interface IBucketTagModal {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
},
pathLabel: {
marginTop: 0,
marginBottom: 32,
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
...spacingUtils,
});
const AddBucketTagModal = ({
@@ -89,64 +88,64 @@ const AddBucketTagModal = ({
};
return (
<React.Fragment>
<ModalWrapper
modalOpen={modalOpen}
title="Add New Tag"
onClose={() => {
onCloseAndUpdate(false);
}}
>
<Grid container>
<h3 className={classes.pathLabel}>Bucket: {bucketName}</h3>
<Grid item xs={12}>
<InputBoxWrapper
value={newKey}
label={"New Tag Key"}
id={"newTagKey"}
name={"newTagKey"}
placeholder={"Enter New Tag Key"}
onChange={(e: any) => {
setNewKey(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
value={newLabel}
label={"New Tag Label"}
id={"newTagLabel"}
name={"newTagLabel"}
placeholder={"Enter New Tag Label"}
onChange={(e: any) => {
setNewLabel(e.target.value);
}}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
type="button"
color="primary"
className={classes.clearButton}
onClick={resetForm}
>
Clear
</button>
<Button
type="submit"
variant="contained"
color="primary"
disabled={
newLabel.trim() === "" || newKey.trim() === "" || isSending
}
onClick={addTagProcess}
>
Save
</Button>
</Grid>
<ModalWrapper
modalOpen={modalOpen}
title={`Add New Tag `}
onClose={() => {
onCloseAndUpdate(false);
}}
>
<Grid container>
<div className={classes.spacerBottom}>
<strong>Bucket</strong>: {bucketName}
</div>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={newKey}
label={"New Tag Key"}
id={"newTagKey"}
name={"newTagKey"}
placeholder={"Enter New Tag Key"}
onChange={(e: any) => {
setNewKey(e.target.value);
}}
/>
</Grid>
</ModalWrapper>
</React.Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={newLabel}
label={"New Tag Label"}
id={"newTagLabel"}
name={"newTagLabel"}
placeholder={"Enter New Tag Label"}
onChange={(e: any) => {
setNewLabel(e.target.value);
}}
/>
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
onClick={resetForm}
>
Clear
</Button>
<Button
type="submit"
variant="contained"
color="primary"
disabled={
newLabel.trim() === "" || newKey.trim() === "" || isSending
}
onClick={addTagProcess}
>
Save
</Button>
</Grid>
</Grid>
</ModalWrapper>
);
};

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

@@ -17,7 +17,7 @@
import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
import { connect } from "react-redux";
import Grid from "@mui/material/Grid";
import { Button, LinearProgress } from "@mui/material";
import { Button } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -29,7 +29,10 @@ import TableBody from "@mui/material/TableBody";
import Checkbox from "@mui/material/Checkbox";
import Table from "@mui/material/Table";
import { ArnList } from "../types";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -38,18 +41,13 @@ import AutocompleteWrapper from "../../Common/FormComponents/AutocompleteWrapper
const styles = (theme: Theme) =>
createStyles({
minTableHeader: {
color: "#393939",
"& tr": {
"& th": {
fontWeight: "bold",
},
arnField: {
"& div div .MuiOutlinedInput-root": {
padding: 0,
},
},
buttonContainer: {
textAlign: "right",
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
});
interface IAddEventProps {
@@ -161,7 +159,7 @@ const AddEvent = ({
onClose={() => {
closeModalAndRefresh();
}}
title="Subscribe To Event"
title="Subscribe To Bucket Events"
>
<form
noValidate
@@ -172,7 +170,11 @@ const AddEvent = ({
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<Grid
item
xs={12}
className={`${classes.arnField} ${classes.formFieldRow}`}
>
<AutocompleteWrapper
onChange={(value: string) => {
setArn(value);
@@ -184,7 +186,29 @@ const AddEvent = ({
options={arnValues}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="prefix-input"
name="prefix-input"
label="Prefix"
value={prefix}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="suffix-input"
name="suffix-input"
label="Suffix"
value={suffix}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSuffix(e.target.value);
}}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<Table size="medium">
<TableHead className={classes.minTableHeader}>
<TableRow>
@@ -217,36 +241,19 @@ const AddEvent = ({
</TableBody>
</Table>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="prefix-input"
name="prefix-input"
label="Prefix"
value={prefix}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="suffix-input"
name="suffix-input"
label="Suffix"
value={suffix}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSuffix(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
@@ -256,11 +263,6 @@ const AddEvent = ({
Save
</Button>
</Grid>
{addLoading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</Grid>
</form>
</ModalWrapper>

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

@@ -22,7 +22,6 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
import Grid from "@mui/material/Grid";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions";
import {
ITierElement,
@@ -37,6 +36,12 @@ import DateSelector from "../../Common/FormComponents/DateSelector/DateSelector"
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
import {
createTenantCommon,
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../Common/FormComponents/common/styleLibrary";
interface IReplicationModal {
open: boolean;
@@ -53,10 +58,25 @@ interface ITiersDropDown {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
dateSelector: {
"& div": {
borderBottom: 0,
marginBottom: 0,
"& div:nth-child(2)": {
border: "1px solid #EAEAEA",
paddingLeft: 5,
"& div": {
border: 0,
},
},
},
},
...modalBasic,
...spacingUtils,
...modalStyleUtils,
...formFieldStyles,
...createTenantCommon,
});
const AddLifecycleModal = ({
@@ -239,202 +259,265 @@ const AddLifecycleModal = ({
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<h3>Lifecycle Configuration</h3>
<Grid item xs={12}>
<RadioGroupSelector
currentSelection={ilmType}
id="quota_type"
name="quota_type"
label="ILM Rule"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
setIlmType(e.target.value as string);
}}
selectorOptions={[
{ value: "expiry", label: "Expiry" },
{ value: "transition", label: "Transition" },
]}
/>
</Grid>
{ilmType === "expiry" ? (
<Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<fieldset className={classes.fieldGroup}>
<legend className={classes.descriptionText}>
Lifecycle Configuration
</legend>
<Grid item xs={12}>
<RadioGroupSelector
currentSelection={expiryType}
id="expiryType"
name="expiryType"
label="Expiry Type"
currentSelection={ilmType}
id="quota_type"
name="quota_type"
label="ILM Rule"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
setExpiryType(e.target.value as string);
setIlmType(e.target.value as string);
}}
selectorOptions={[
{ value: "date", label: "Date" },
{ value: "days", label: "Days" },
{ value: "expiry", label: "Expiry" },
{ value: "transition", label: "Transition" },
]}
/>
</Grid>
<Grid item xs={12}>
{expiryType === "date" ? (
<DateSelector
id="expiry_date"
label="Expiry Date"
value={expiryDate}
borderBottom={true}
onDateChange={(date: string, isValid: boolean) => {
if (isValid) {
setExpiryDate(date);
}
}}
/>
) : (
<InputBoxWrapper
type="number"
id="expiry_days"
name="expiry_days"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setExpiryDays(e.target.value);
}}
label="Expiry Days"
value={expiryDays}
min="0"
/>
)}
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
type="number"
id="noncurrentversion_expiration_days"
name="noncurrentversion_expiration_days"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setNCExpirationDays(e.target.value);
}}
label="Non-current Expiration Days"
value={NCExpirationDays}
min="0"
/>
</Grid>
</Fragment>
) : (
<Fragment>
<Grid item xs={12}>
<RadioGroupSelector
currentSelection={transitionType}
id="transitionType"
name="transitionType"
label="Transition Type"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
setTransitionType(e.target.value as string);
}}
selectorOptions={[
{ value: "date", label: "Date" },
{ value: "days", label: "Days" },
]}
/>
</Grid>
<Grid item xs={12}>
{transitionType === "date" ? (
<DateSelector
id="transition_date"
label="Transition Date"
value={transitionDate}
borderBottom={true}
onDateChange={(date: string, isValid: boolean) => {
if (isValid) {
setTransitionDate(date);
}
}}
/>
) : (
<InputBoxWrapper
type="number"
id="transition_days"
name="transition_days"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setTransitionDays(e.target.value);
}}
label="Transition Days"
value={transitionDays}
min="0"
/>
)}
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
type="number"
id="noncurrentversion_transition_days"
name="noncurrentversion_transition_days"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setNCTransitionDays(e.target.value);
}}
label="Non-current Transition Days"
value={NCTransitionDays}
min="0"
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="noncurrentversion_t_SC"
name="noncurrentversion_t_SC"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setNCTransitionSC(e.target.value);
}}
placeholder="Set Non-current Version Transition Storage Class"
label="Non-current Version Transition Storage Class"
value={NCTransitionSC}
/>
</Grid>
<Grid item xs={12}>
<SelectWrapper
label="Storage Class"
id="storage_class"
name="storage_class"
value={storageClass}
onChange={(e: SelectChangeEvent<string>) => {
setStorageClass(e.target.value as string);
}}
options={tiersList}
/>
</Grid>
</Fragment>
)}
<h3>File Configuration</h3>
<Grid item xs={12}>
<InputBoxWrapper
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
label="Prefix"
value={prefix}
/>
{ilmType === "expiry" ? (
<Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
currentSelection={expiryType}
id="expiryType"
name="expiryType"
label="Expiry Type"
onChange={(
e: React.ChangeEvent<{ value: unknown }>
) => {
setExpiryType(e.target.value as string);
}}
selectorOptions={[
{ value: "date", label: "Date" },
{ value: "days", label: "Days" },
]}
/>
</Grid>
<React.Fragment>
{expiryType === "date" ? (
<Grid
item
xs={12}
className={`${classes.dateSelector} `}
>
<DateSelector
id="expiry_date"
label="Expiry Date"
value={expiryDate}
borderBottom={true}
onDateChange={(
date: string,
isValid: boolean
) => {
if (isValid) {
setExpiryDate(date);
}
}}
/>
</Grid>
) : (
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
type="number"
id="expiry_days"
name="expiry_days"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setExpiryDays(e.target.value);
}}
label="Expiry Days"
value={expiryDays}
min="0"
/>
</Grid>
)}
</React.Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
type="number"
id="noncurrentversion_expiration_days"
name="noncurrentversion_expiration_days"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setNCExpirationDays(e.target.value);
}}
label="Non-current Expiration Days"
value={NCExpirationDays}
min="0"
/>
</Grid>
</Fragment>
) : (
<Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
currentSelection={transitionType}
id="transitionType"
name="transitionType"
label="Transition Type"
onChange={(
e: React.ChangeEvent<{ value: unknown }>
) => {
setTransitionType(e.target.value as string);
}}
selectorOptions={[
{ value: "date", label: "Date" },
{ value: "days", label: "Days" },
]}
/>
</Grid>
<React.Fragment>
{transitionType === "date" ? (
<Grid
item
xs={12}
className={`${classes.dateSelector} `}
>
<DateSelector
id="transition_date"
label="Transition Date"
value={transitionDate}
borderBottom={true}
onDateChange={(
date: string,
isValid: boolean
) => {
if (isValid) {
setTransitionDate(date);
}
}}
/>
</Grid>
) : (
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
type="number"
id="transition_days"
name="transition_days"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setTransitionDays(e.target.value);
}}
label="Transition Days"
value={transitionDays}
min="0"
/>
</Grid>
)}
</React.Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
type="number"
id="noncurrentversion_transition_days"
name="noncurrentversion_transition_days"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setNCTransitionDays(e.target.value);
}}
label="Non-current Transition Days"
value={NCTransitionDays}
min="0"
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="noncurrentversion_t_SC"
name="noncurrentversion_t_SC"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setNCTransitionSC(e.target.value);
}}
placeholder="Set Non-current Version Transition Storage Class"
label="Non-current Version Transition Storage Class"
value={NCTransitionSC}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<SelectWrapper
label="Storage Class"
id="storage_class"
name="storage_class"
value={storageClass}
onChange={(e: SelectChangeEvent<string>) => {
setStorageClass(e.target.value as string);
}}
options={tiersList}
/>
</Grid>
</Fragment>
)}
</fieldset>
</Grid>
<Grid item xs={12}>
<QueryMultiSelector
name="tags"
label="Tags"
elements={""}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Grid>
<Grid item xs={12}>
<FormSwitchWrapper
value="expired_delete_marker"
id="expired_delete_marker"
name="expired_delete_marker"
checked={expiredObjectDM}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setExpiredObjectDM(event.target.checked);
}}
label={"Expired Object Delete Marker"}
/>
<Grid item xs={12} className={classes.formFieldRow}>
<fieldset className={classes.fieldGroup}>
<legend className={classes.descriptionText}>
File Configuration
</legend>
<Grid item xs={12}>
<InputBoxWrapper
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
label="Prefix"
value={prefix}
/>
</Grid>
<Grid item xs={12}>
<QueryMultiSelector
name="tags"
label="Tags"
elements={""}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Grid>
<Grid item xs={12}>
<FormSwitchWrapper
value="expired_delete_marker"
id="expired_delete_marker"
name="expired_delete_marker"
checked={expiredObjectDM}
onChange={(
event: React.ChangeEvent<HTMLInputElement>
) => {
setExpiredObjectDM(event.target.checked);
}}
label={"Expired Object Delete Marker"}
/>
</Grid>
</fieldset>
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh(false);
}}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"

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

@@ -19,10 +19,15 @@ import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
import { Button, SelectChangeEvent } from "@mui/material";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
createTenantCommon,
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { BulkReplicationResponse } from "../types";
import { setModalErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
@@ -49,10 +54,24 @@ const styles = (theme: Theme) =>
},
multiContainer: {
display: "flex",
alignItems: "center" as const,
justifyContent: "flex-start" as const,
alignItems: "center",
},
sizeFactorContainer: {
"& label": {
display: "none",
},
"& div:first-child": {
marginBottom: 0,
},
},
...spacingUtils,
...createTenantCommon,
...formFieldStyles,
...modalStyleUtils,
modalFormScrollable: {
...modalStyleUtils.modalFormScrollable,
paddingRight: 10,
},
...modalBasic,
});
const AddReplicationModal = ({
@@ -162,8 +181,8 @@ const AddReplicationModal = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="targetURL"
name="targetURL"
@@ -175,7 +194,7 @@ const AddReplicationModal = ({
value={targetURL}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
checked={useTLS}
id="useTLS"
@@ -187,7 +206,7 @@ const AddReplicationModal = ({
value="yes"
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="accessKey"
name="accessKey"
@@ -198,7 +217,7 @@ const AddReplicationModal = ({
value={accessKey}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="secretKey"
name="secretKey"
@@ -209,7 +228,7 @@ const AddReplicationModal = ({
value={secretKey}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="targetBucket"
name="targetBucket"
@@ -220,7 +239,7 @@ const AddReplicationModal = ({
value={targetBucket}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="region"
name="region"
@@ -231,7 +250,7 @@ const AddReplicationModal = ({
value={region}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<SelectWrapper
id="replication_mode"
name="replication_mode"
@@ -248,24 +267,22 @@ const AddReplicationModal = ({
</Grid>
{replicationMode === "async" && (
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<div className={classes.multiContainer}>
<div>
<InputBoxWrapper
type="number"
id="bandwidth_scalar"
name="bandwidth_scalar"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setBandwidthScalar(e.target.value as string);
}}
label="Bandwidth"
value={bandwidthScalar}
min="0"
/>
</div>
<InputBoxWrapper
type="number"
id="bandwidth_scalar"
name="bandwidth_scalar"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setBandwidthScalar(e.target.value as string);
}}
label="Bandwidth"
value={bandwidthScalar}
min="0"
/>
<div className={classes.sizeFactorContainer}>
<SelectWrapper
label={"Unit"}
label={" "}
id="bandwidth_unit"
name="bandwidth_unit"
value={bandwidthUnit}
@@ -278,7 +295,7 @@ const AddReplicationModal = ({
</div>
</Grid>
)}
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="healthCheck"
name="healthCheck"
@@ -289,34 +306,44 @@ const AddReplicationModal = ({
value={healthCheck}
/>
</Grid>
<h3>Object Filters</h3>
<Grid item xs={12}>
<InputBoxWrapper
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
placeholder="prefix"
label="Prefix"
value={prefix}
/>
<fieldset className={classes.fieldGroup}>
<legend className={classes.descriptionText}>
Object Filters
</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
placeholder="prefix"
label="Prefix"
value={prefix}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<QueryMultiSelector
name="tags"
label="Tags"
elements={""}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Grid>
</fieldset>
</Grid>
<Grid item xs={12}>
<QueryMultiSelector
name="tags"
label="Tags"
elements={""}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Grid>
<h3>Storage Configuration</h3>
<Grid item xs={12}>
<Grid
item
xs={12}
className={`${classes.spacerTop} ${classes.formFieldRow}`}
>
<InputBoxWrapper
id="storageClass"
name="storageClass"
@@ -328,35 +355,52 @@ const AddReplicationModal = ({
value={targetStorageClass}
/>
</Grid>
<h3>Replication Options</h3>
<Grid item xs={12}>
<FormSwitchWrapper
checked={repDeleteMarker}
id="deleteMarker"
name="deleteMarker"
label="Delete Marker"
onChange={(e) => {
setRepDeleteMarker(e.target.checked);
}}
value={repDeleteMarker}
description={"Replicate soft deletes"}
/>
</Grid>
<Grid item xs={12}>
<FormSwitchWrapper
checked={repDelete}
id="repDelete"
name="repDelete"
label="Deletes"
onChange={(e) => {
setRepDelete(e.target.checked);
}}
value={repDelete}
description={"Replicate versioned deletes"}
/>
<fieldset className={classes.fieldGroup}>
<legend className={classes.descriptionText}>
Replication Options
</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
checked={repDeleteMarker}
id="deleteMarker"
name="deleteMarker"
label="Delete Marker"
onChange={(e) => {
setRepDeleteMarker(e.target.checked);
}}
value={repDeleteMarker}
description={"Replicate soft deletes"}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
checked={repDelete}
id="repDelete"
name="repDelete"
label="Deletes"
onChange={(e) => {
setRepDelete(e.target.checked);
}}
value={repDelete}
description={"Replicate versioned deletes"}
/>
</Grid>
</fieldset>
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
@@ -366,11 +410,6 @@ const AddReplicationModal = ({
Save
</Button>
</Grid>
{addLoading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</Grid>
</form>
</ModalWrapper>

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

@@ -22,7 +22,10 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { setModalErrorSnackMessage } from "../../../../actions";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { BucketEncryptionInfo } from "../types";
import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
@@ -32,10 +35,8 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
},
...modalBasic,
...modalStyleUtils,
...formFieldStyles,
});
interface IEnableBucketEncryptionProps {
@@ -51,7 +52,6 @@ interface IEnableBucketEncryptionProps {
const EnableBucketEncryption = ({
classes,
open,
encryptionEnabled,
encryptionCfg,
selectedBucket,
closeModalAndRefresh,
@@ -121,8 +121,8 @@ const EnableBucketEncryption = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<SelectWrapper
onChange={(e: SelectChangeEvent<string>) => {
setEncryptionType(e.target.value as string);
@@ -147,11 +147,9 @@ const EnableBucketEncryption = ({
]}
/>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
{encryptionType === "sse-kms" && (
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="kms-key-id"
name="kms-key-id"
@@ -163,11 +161,19 @@ const EnableBucketEncryption = ({
/>
</Grid>
)}
<Grid item xs={12}>
<br />
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="submit"
variant="outlined"
color="primary"
onClick={() => {
closeModalAndRefresh();
}}
disabled={loading}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"

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

@@ -25,7 +25,10 @@ import { factorForDropdown, getBytes, units } from "../../../../common/utils";
import { BucketQuota } from "../types";
import { setModalErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -35,10 +38,8 @@ import api from "../../../../common/api";
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
});
interface IEnableQuotaProps {
@@ -131,7 +132,7 @@ const EnableQuota = ({
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
value="bucket_quota"
id="bucket_quota"
@@ -145,7 +146,7 @@ const EnableQuota = ({
</Grid>
{quotaEnabled && (
<React.Fragment>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
currentSelection={quotaType}
id="quota_type"
@@ -160,7 +161,7 @@ const EnableQuota = ({
]}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<Grid container>
<Grid item xs={10}>
<InputBoxWrapper
@@ -194,11 +195,20 @@ const EnableQuota = ({
</Grid>
</React.Fragment>
)}
<Grid item xs={12}>
<br />
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={loading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"

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

@@ -16,18 +16,11 @@
import React, { useState, Fragment } from "react";
import { connect } from "react-redux";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
LinearProgress,
} from "@mui/material";
import { DialogContentText } from "@mui/material";
import api from "../../../../common/api";
import { setErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
interface IVersioningEventProps {
closeVersioningModalAndRefresh: (refresh: boolean) => void;
@@ -67,17 +60,20 @@ const EnableVersioningModal = ({
};
return (
<Dialog
open={modalOpen}
<ConfirmDialog
title={`Versioning on Bucket`}
confirmText={versioningCurrentState ? "Disable" : "Enable"}
isOpen={modalOpen}
isLoading={versioningLoading}
onConfirm={enableVersioning}
confirmButtonProps={{
color: "primary",
variant: "contained",
}}
onClose={() => {
closeVersioningModalAndRefresh(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Edit Versioning</DialogTitle>
<DialogContent>
{versioningLoading && <LinearProgress />}
confirmationContent={
<DialogContentText id="alert-dialog-description">
Are you sure you want to{" "}
<strong>{versioningCurrentState ? "disable" : "enable"}</strong>{" "}
@@ -86,32 +82,12 @@ const EnableVersioningModal = ({
<Fragment>
<br />
<br />
<strong>File versions won't be automatically deleted</strong>
<strong>File versions won't be automatically deleted.</strong>
</Fragment>
)}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={() => {
closeVersioningModalAndRefresh(false);
}}
color="primary"
disabled={versioningLoading}
>
Cancel
</Button>
<Button
onClick={() => {
enableVersioning();
}}
color="secondary"
autoFocus
>
{versioningCurrentState ? "Disable" : "Enable"}
</Button>
</DialogActions>
</Dialog>
}
/>
);
};

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

@@ -16,12 +16,15 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
import { Button, SelectChangeEvent } from "@mui/material";
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 { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
modalStyleUtils,
spacingUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
@@ -30,7 +33,8 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
const styles = (theme: Theme) =>
createStyles({
...modalBasic,
...modalStyleUtils,
...spacingUtils,
});
interface ISetAccessPolicyProps {
@@ -92,39 +96,46 @@ const SetAccessPolicy = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<SelectWrapper
value={accessPolicy}
label="Access Policy"
id="select-access-policy"
name="select-access-policy"
onChange={(e: SelectChangeEvent<string>) => {
setAccessPolicy(e.target.value as string);
}}
options={[
{ value: "PRIVATE", label: "Private" },
{ value: "PUBLIC", label: "Public" },
]}
/>
</Grid>
<Grid
item
xs={12}
className={`${classes.spacerTop} ${classes.formFieldRow}`}
>
<SelectWrapper
value={accessPolicy}
label="Access Policy"
id="select-access-policy"
name="select-access-policy"
onChange={(e: SelectChangeEvent<string>) => {
setAccessPolicy(e.target.value as string);
}}
options={[
{ value: "PRIVATE", label: "Private" },
{ value: "PUBLIC", label: "Public" },
]}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
onClick={() => {
closeModalAndRefresh();
}}
disabled={addLoading}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
color="primary"
fullWidth
disabled={addLoading}
>
Set
</Button>
</Grid>
{addLoading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</Grid>
</form>
</ModalWrapper>

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

@@ -21,7 +21,12 @@ 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 { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
createTenantCommon,
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions";
import {
ErrorResponseHandler,
@@ -34,7 +39,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
const styles = (theme: Theme) =>
createStyles({
...modalBasic,
...spacingUtils,
...createTenantCommon,
...formFieldStyles,
...modalStyleUtils,
});
interface ISetRetentionConfigProps {
@@ -126,8 +134,8 @@ const SetRetentionConfig = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
currentSelection={retentionMode}
id="retention_mode"
@@ -142,7 +150,7 @@ const SetRetentionConfig = ({
]}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
currentSelection={retentionUnit}
id="retention_unit"
@@ -157,7 +165,7 @@ const SetRetentionConfig = ({
]}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
type="number"
id="retention_validity"
@@ -172,12 +180,22 @@ const SetRetentionConfig = ({
/>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh();
}}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
color="primary"
fullWidth
disabled={addLoading || !valid}
>
Set

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

@@ -21,7 +21,10 @@ import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/I
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../../../Common/FormComponents/common/styleLibrary";
import { connect } from "react-redux";
import { setFileModeEnabled } from "../../../../ObjectBrowser/actions";
import history from "../../../../../../history";
@@ -42,14 +45,8 @@ interface ICreateFolder {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
},
pathLabel: {
marginTop: 0,
marginBottom: 32,
},
...modalBasic,
...modalStyleUtils,
...formFieldStyles,
});
const CreateFolderModal = ({
@@ -112,8 +109,10 @@ const CreateFolderModal = ({
onClose={onClose}
>
<Grid container>
<h3 className={classes.pathLabel}>Current Path: {currentPath}</h3>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
Current Path: {currentPath}
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={pathUrl}
label={"New Folder Path"}
@@ -126,15 +125,15 @@ const CreateFolderModal = ({
required
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
color="primary"
className={classes.clearButton}
variant="outlined"
onClick={resetForm}
>
Clear
</button>
</Button>
<Button
type="submit"
variant="contained"
@@ -142,7 +141,7 @@ const CreateFolderModal = ({
disabled={!isFormValid}
onClick={createProcess}
>
Go
Create
</Button>
</Grid>
</Grid>

41
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
View File

@@ -21,7 +21,6 @@ import { Button, Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../../../actions";
import { AppState } from "../../../../../../store";
import { ErrorResponseHandler } from "../../../../../../common/types";
@@ -29,6 +28,11 @@ import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/I
import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
import api from "../../../../../../common/api";
import { decodeFileName } from "../../../../../../common/utils";
import {
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../../../Common/FormComponents/common/styleLibrary";
interface ITagModal {
modalOpen: boolean;
@@ -44,14 +48,13 @@ interface ITagModal {
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
},
pathLabel: {
marginTop: 0,
marginBottom: 32,
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
...spacingUtils,
});
const AddTagModal = ({
@@ -103,48 +106,48 @@ const AddTagModal = ({
<React.Fragment>
<ModalWrapper
modalOpen={modalOpen}
title="Add New Tag"
title="Add New Tag to the Object"
onClose={() => {
onCloseAndUpdate(false);
}}
>
<Grid container>
<h3 className={classes.pathLabel}>
Selected Object: {decodeFileName(selectedObject)}
</h3>
<Grid item xs={12}>
<div className={classes.spacerBottom}>
<strong>Selected Object</strong>: {decodeFileName(selectedObject)}
</div>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={newKey}
label={"New Tag Key"}
label={"Tag Key"}
id={"newTagKey"}
name={"newTagKey"}
placeholder={"Enter New Tag Key"}
placeholder={"Enter Tag Key"}
onChange={(e) => {
setNewKey(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={newLabel}
label={"New Tag Label"}
label={"Tag Label"}
id={"newTagLabel"}
name={"newTagLabel"}
placeholder={"Enter New Tag Label"}
placeholder={"Enter Tag Label"}
onChange={(e) => {
setNewLabel(e.target.value);
}}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
className={classes.clearButton}
onClick={resetForm}
>
Clear
</button>
</Button>
<Button
type="submit"
variant="contained"

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

@@ -22,7 +22,11 @@ import withStyles from "@mui/styles/withStyles";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../../../actions";
import { IFileInfo } from "./types";
import { ErrorResponseHandler } from "../../../../../../common/types";
@@ -33,15 +37,9 @@ import { encodeFileName } from "../../../../../../common/utils";
const styles = (theme: Theme) =>
createStyles({
objectName: {
fontSize: 18,
fontWeight: 700,
marginBottom: 40,
},
buttonContainer: {
textAlign: "right",
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
...spacingUtils,
});
interface ISetRetentionProps {
@@ -107,9 +105,10 @@ const SetLegalHoldModal = ({
closeModalAndRefresh(false);
}}
>
<Grid item xs={12} className={classes.objectName}>
{objectName}
<Grid item xs={12} className={classes.spacerBottom}>
Object: {bucketName}
</Grid>
<form
noValidate
autoComplete="off"
@@ -117,7 +116,7 @@ const SetLegalHoldModal = ({
onSubmit(e);
}}
>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
value="legalhold"
id="legalhold"
@@ -133,15 +132,15 @@ const SetLegalHoldModal = ({
}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
color="primary"
className={classes.clearButton}
variant="outlined"
onClick={resetForm}
>
Reset
</button>
Clear
</Button>
<Button
type="submit"
variant="contained"

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

@@ -21,7 +21,11 @@ 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 { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../../../../Common/FormComponents/common/styleLibrary";
import { IFileInfo } from "./types";
import { setModalErrorSnackMessage } from "../../../../../../actions";
import { twoDigitDate } from "../../../../Common/FormComponents/DateSelector/utils";
@@ -35,15 +39,24 @@ import { encodeFileName } from "../../../../../../common/utils";
const styles = (theme: Theme) =>
createStyles({
objectName: {
fontSize: 18,
fontWeight: 700,
marginBottom: 40,
...formFieldStyles,
...modalStyleUtils,
...spacingUtils,
dateSelector: {
"& div": {
borderBottom: 0,
marginBottom: 0,
"& div:nth-child(2)": {
border: "1px solid #EAEAEA",
paddingLeft: 5,
"& div": {
border: 0,
},
},
},
},
buttonContainer: {
textAlign: "right",
},
...modalBasic,
});
interface ISetRetentionProps {
@@ -190,9 +203,9 @@ const SetRetention = ({
closeModalAndRefresh(false);
}}
>
<Grid item xs={12} className={classes.objectName}>
{objectName}
</Grid>
<div className={classes.spacerBottom}>
<strong>Selected Object</strong>: {objectName}
</div>
<form
noValidate
autoComplete="off"
@@ -201,7 +214,7 @@ const SetRetention = ({
}}
>
{showSwitcher && (
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
value="status"
id="status"
@@ -215,7 +228,7 @@ const SetRetention = ({
/>
</Grid>
)}
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<RadioGroupSelector
currentSelection={type}
id="type"
@@ -233,7 +246,7 @@ const SetRetention = ({
]}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={`${classes.dateSelector} `}>
<DateSelector
id="date"
label="Date"
@@ -249,15 +262,15 @@ const SetRetention = ({
}}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
className={classes.clearButton}
onClick={resetForm}
>
Reset
</button>
</Button>
<Button
type="submit"
variant="contained"

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

@@ -24,7 +24,10 @@ import CopyToClipboard from "react-copy-to-clipboard";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import LinearProgress from "@mui/material/LinearProgress";
import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../../../Common/FormComponents/common/styleLibrary";
import { IFileInfo } from "./types";
import {
@@ -43,14 +46,36 @@ const CopyIcon = React.lazy(() => import("../../../../../../icons/CopyIcon"));
const styles = (theme: Theme) =>
createStyles({
copyButtonContainer: {
paddingLeft: 16,
paddingTop: 18,
shareLinkInfo: {
fontSize: 13,
fontWeight: 400,
},
modalContent: {
paddingBottom: 53,
copyShareLink: {
display: "flex",
"@media (max-width: 900px)": {
flexFlow: "column",
alignItems: "center",
justifyContent: "center",
},
},
...modalBasic,
copyShareLinkInput: {
"& div:first-child": {
marginTop: 0,
},
"@media (max-width: 900px)": {
minWidth: 250,
},
},
copyShareLinkBtn: {
display: "flex",
alignItems: "center",
justifyContent: "center",
"@media (max-width: 900px)": {
marginTop: 10,
},
},
...modalStyleUtils,
...formFieldStyles,
});
interface IShareFileProps {
@@ -189,53 +214,56 @@ const ShareFile = ({
closeModalAndRefresh();
}}
>
<Grid container className={classes.modalContent}>
{isLoadingVersion && (
<Grid item xs={12}>
<LinearProgress />
{isLoadingVersion && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
{!isLoadingVersion && (
<Fragment>
<Grid item xs={12} className={classes.shareLinkInfo}>
This is a temporary URL with integrated access credentials for
sharing objects valid for up to 7 days.
<br />
The temporary URL expires after the configured time limit.
</Grid>
)}
{!isLoadingVersion && (
<Fragment>
<Grid item xs={12} className={classes.moduleDescription}>
This module generates a temporary URL with integrated access
credentials for sharing objects for up to 7 days.
<br />
The temporary URL expires after the configured time limit.
<Grid item xs={12} className={classes.dateContainer}>
<DaysSelector
initialDate={initialDate}
id="date"
label="Active for"
maxDays={7}
onChange={dateChanged}
entity="Link"
/>
</Grid>
<Grid
item
xs={12}
className={`${classes.copyShareLink} ${classes.formFieldRow} `}
>
<Grid item xs={10} className={classes.copyShareLinkInput}>
<PredefinedList content={shareURL} />
</Grid>
<Grid item xs={12} className={classes.dateContainer}>
<DaysSelector
initialDate={initialDate}
id="date"
label="Active for"
maxDays={7}
onChange={dateChanged}
entity="Link"
/>
<Grid item xs={2} className={classes.copyShareLinkBtn}>
<CopyToClipboard text={shareURL}>
<Button
variant="contained"
color="primary"
endIcon={<CopyIcon />}
onClick={() => {
setModalSnackMessage("Share URL Copied to clipboard");
}}
disabled={shareURL === "" || isLoadingFile}
>
Copy
</Button>
</CopyToClipboard>
</Grid>
<Grid container item xs={12}>
<Grid item xs={10}>
<PredefinedList content={shareURL} />
</Grid>
<Grid item xs={2} className={classes.copyButtonContainer}>
<CopyToClipboard text={shareURL}>
<Button
variant="contained"
color="primary"
endIcon={<CopyIcon />}
onClick={() => {
setModalSnackMessage("Share URL Copied to clipboard");
}}
disabled={shareURL === "" || isLoadingFile}
>
Copy
</Button>
</CopyToClipboard>
</Grid>
</Grid>
</Fragment>
)}
</Grid>
</Grid>
</Fragment>
)}
</ModalWrapper>
</React.Fragment>
);

156
portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
View File

@@ -41,6 +41,7 @@ const styles = (theme: Theme) =>
labelContainer: {
display: "flex",
alignItems: "center",
marginBottom: 15,
},
fieldContainer: {
...fieldBasic.fieldContainer,
@@ -59,6 +60,34 @@ const styles = (theme: Theme) =>
dateInputContainer: {
margin: "0 10px",
},
durationInputs: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
validityIndicator: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
invalidDurationText: {
marginTop: 15,
display: "flex",
color: "red",
fontSize: 11,
},
validityText: {
fontSize: 14,
fontWeight: 600,
marginTop: 15,
display: "flex",
alignItems: "center",
justifyContent: "center",
"@media (max-width: 900px)": {
flexFlow: "column",
},
},
});
const calculateNewTime = (
@@ -156,74 +185,85 @@ const DaysSelector = ({
return (
<Fragment>
<Grid item xs={12} className={classes.fieldContainer}>
<Grid container alignItems={"center"} justifyContent={"center"}>
<Grid container className={classes.fieldContainer}>
<Grid item xs={12} alignItems={"center"} justifyContent={"center"}>
<Grid item xs={12} className={classes.labelContainer}>
<InputLabel htmlFor={id} className={classes.inputLabel}>
<span>{label}</span>
</InputLabel>
</Grid>
<Grid item className={classes.dateInputContainer}>
<InputBoxWrapper
id={id}
type="number"
min="0"
max={maxDays ? maxDays.toString() : "999"}
label="Days"
name={id}
onChange={(e) => {
setSelectedDays(parseInt(e.target.value));
}}
value={selectedDays.toString()}
extraInputProps={extraInputProps}
noLabelMinWidth
/>
</Grid>
<Grid item className={classes.dateInputContainer}>
<InputBoxWrapper
id={id}
type="number"
min="0"
max="23"
label="Hours"
name={id}
onChange={(e) => {
setSelectedHours(parseInt(e.target.value));
}}
value={selectedHours.toString()}
extraInputProps={extraInputProps}
noLabelMinWidth
/>
</Grid>
<Grid item className={classes.dateInputContainer}>
<InputBoxWrapper
id={id}
type="number"
min="0"
max="59"
label="Minutes"
name={id}
onChange={(e) => {
setSelectedMinutes(parseInt(e.target.value));
}}
value={selectedMinutes.toString()}
extraInputProps={extraInputProps}
noLabelMinWidth
/>
<Grid item xs={12} className={classes.durationInputs}>
<Grid item className={classes.dateInputContainer}>
<InputBoxWrapper
id={id}
type="number"
min="0"
max={maxDays ? maxDays.toString() : "999"}
label="Days"
name={id}
onChange={(e) => {
setSelectedDays(parseInt(e.target.value));
}}
value={selectedDays.toString()}
extraInputProps={extraInputProps}
noLabelMinWidth
/>
</Grid>
<Grid item className={classes.dateInputContainer}>
<InputBoxWrapper
id={id}
type="number"
min="0"
max="23"
label="Hours"
name={id}
onChange={(e) => {
setSelectedHours(parseInt(e.target.value));
}}
value={selectedHours.toString()}
extraInputProps={extraInputProps}
noLabelMinWidth
/>
</Grid>
<Grid item className={classes.dateInputContainer}>
<InputBoxWrapper
id={id}
type="number"
min="0"
max="59"
label="Minutes"
name={id}
onChange={(e) => {
setSelectedMinutes(parseInt(e.target.value));
}}
value={selectedMinutes.toString()}
extraInputProps={extraInputProps}
noLabelMinWidth
/>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container>
<Grid item xs={12} className={classes.dateContainer}>
{validDate && (
<Fragment>
<strong>{entity} will be available until:</strong>{" "}
{dateSelected.format("MM/DD/YYYY HH:mm:ss")}
</Fragment>
<Grid
item
xs={12}
className={`${classes.validityIndicator} ${classes.formFieldRow}`}
>
{validDate ? (
<div className={classes.validityText}>
<div className={classes.validityLabel}>
{entity} will be available until:
</div>{" "}
<div className={classes.validTill}>
{dateSelected.format("MM/DD/YYYY HH:mm:ss")}
</div>
</div>
) : (
<div className={classes.invalidDurationText}>
Please select a valid duration.
</div>
)}
</Grid>
</Grid>
<br />
</Fragment>
);
};

1
portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
View File

@@ -59,6 +59,7 @@ const styles = (theme: Theme) =>
},
lineInputBoxes: {
display: "flex",
marginBottom: 10,
},
queryDiv: {
alignSelf: "center",

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

@@ -736,8 +736,7 @@ export const wizardCommon = {
margin: 0,
},
descriptionText: {
fontSize: 13,
color: "#777777",
fontSize: 14,
},
container: {
padding: "77px 0 0 0",
@@ -1110,6 +1109,12 @@ export const spacingUtils: any = {
spacerLeft: {
marginLeft: ".9rem",
},
spacerBottom: {
marginBottom: ".9rem",
},
spacerTop: {
marginTop: ".9rem",
},
};
export const formFieldStyles = {
@@ -1161,6 +1166,10 @@ export const deleteDialogStyles = {
top: -20,
left: 30,
position: "relative",
padding: 1,
"&:focus, &:hover": {
background: "#EAEAEA",
},
},
"& .min-icon": {
height: 16,
@@ -1208,6 +1217,30 @@ export const advancedFilterToggleStyles: any = {
export const createTenantCommon: any = {
fieldGroup: {
border: "1px solid #EAEAEA",
paddingTop: 5,
paddingTop: 15,
},
descriptionText: {
fontSize: 16,
},
};
export const modalStyleUtils: any = {
modalButtonBar: {
marginTop: 15,
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
"& button": {
marginRight: 10,
},
"& button:last-child": {
marginRight: 0,
},
},
modalFormScrollable: {
maxHeight: "calc(100vh - 300px)",
overflowY: "auto",
paddingTop: 10,
},
};

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

@@ -58,9 +58,6 @@ const ConfirmDialog = ({
}
}}
className={classes.root}
onBackdropClick={() => {
return false;
}}
sx={{
"& .MuiPaper-root": {
padding: "1rem 2rem 2rem 1rem",
@@ -104,12 +101,12 @@ const ConfirmDialog = ({
onClick={onConfirm}
loading={isLoading}
disabled={isLoading}
{...confirmButtonProps}
variant="outlined"
color="secondary"
loadingPosition="start"
startIcon={null}
startIcon={<React.Fragment />}
autoFocus
{...confirmButtonProps}
>
{confirmText}
</LoadingButton>

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

@@ -21,11 +21,15 @@ import { Dialog, DialogContent, DialogTitle } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { snackBarCommon } from "../FormComponents/common/styleLibrary";
import {
deleteDialogStyles,
snackBarCommon,
} from "../FormComponents/common/styleLibrary";
import { AppState } from "../../../../store";
import { snackBarMessage } from "../../../../types";
import { setModalSnackMessage } from "../../../../actions";
import ModalError from "../FormComponents/ModalError/ModalError";
import CloseIcon from "@mui/icons-material/Close";
interface IModalProps {
classes: any;
@@ -39,63 +43,17 @@ interface IModalProps {
setModalSnackMessage: typeof setModalSnackMessage;
}
const baseCloseLine = {
content: '" "',
borderLeft: "2px solid #9C9C9C",
height: 33,
width: 1,
position: "absolute",
};
const styles = (theme: Theme) =>
createStyles({
dialogContainer: {
padding: "8px 15px 22px",
},
closeContainer: {
textAlign: "right",
},
closeButton: {
height: 16,
width: 16,
padding: 0,
backgroundColor: "initial",
"&:hover": {
backgroundColor: "initial",
},
"&:active": {
backgroundColor: "initial",
...deleteDialogStyles,
root: {
"& .MuiPaper-root": {
padding: "1rem 2rem 2rem 1rem",
},
},
closeIcon: {
"&::before": {
...baseCloseLine,
transform: "rotate(45deg)",
height: 12,
},
"&::after": {
...baseCloseLine,
transform: "rotate(-45deg)",
height: 12,
},
"&:hover::before, &:hover::after": {
borderColor: "#9C9C9C",
},
display: "block",
position: "relative",
height: 12,
width: 12,
},
titleClass: {
padding: "0px 50px 12px",
fontSize: "1.2rem",
fontWeight: 600,
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
},
modalContent: {
padding: "0 50px",
content: {
padding: 25,
paddingBottom: 0,
},
customDialogSize: {
width: "100%",
@@ -162,51 +120,53 @@ const ModalWrapper = ({
return (
<Dialog
open={modalOpen}
onClose={onClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
classes={classes}
{...customSize}
scroll={"paper"}
onClose={(event, reason) => {
if (reason !== "backdropClick") {
onClose(); // close on Esc but not on click outside
}
}}
className={classes.root}
>
<div className={classes.dialogContainer}>
<ModalError />
<Snackbar
open={openSnackbar}
className={classes.snackBarModal}
onClose={() => {
closeSnackBar();
}}
message={message}
ContentProps={{
className: `${classes.snackBar} ${
modalSnackMessage && modalSnackMessage.type === "error"
? classes.errorSnackBar
: ""
}`,
}}
autoHideDuration={
modalSnackMessage && modalSnackMessage.type === "error"
? 10000
: 5000
}
/>
<DialogTitle className={classes.title}>
<div className={classes.titleText}>{title}</div>
<div className={classes.closeContainer}>
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={onClose}
disableRipple
size="large"
size="small"
>
<span className={classes.closeIcon} />
<CloseIcon />
</IconButton>
</div>
<DialogTitle id="alert-dialog-title" className={classes.titleClass}>
{title}
</DialogTitle>
<DialogContent className={noContentPadding ? "" : classes.modalContent}>
{children}
</DialogContent>
</div>
</DialogTitle>
<ModalError />
<Snackbar
open={openSnackbar}
className={classes.snackBarModal}
onClose={() => {
closeSnackBar();
}}
message={message}
ContentProps={{
className: `${classes.snackBar} ${
modalSnackMessage && modalSnackMessage.type === "error"
? classes.errorSnackBar
: ""
}`,
}}
autoHideDuration={
modalSnackMessage && modalSnackMessage.type === "error" ? 10000 : 5000
}
/>
<DialogContent className={noContentPadding ? "" : classes.content}>
{children}
</DialogContent>
</Dialog>
);
};

152
portal-ui/src/screens/Console/DirectCSI/FormatDrives.tsx
View File

@@ -16,16 +16,7 @@
import React, { Fragment, useState } from "react";
import { connect } from "react-redux";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Grid,
LinearProgress,
} from "@mui/material";
import { DialogContentText, Grid, LinearProgress } from "@mui/material";
import { setErrorSnackMessage } from "../../../actions";
import { IDirectCSIFormatResItem, IDirectCSIFormatResult } from "./types";
import { ErrorResponseHandler } from "../../../common/types";
@@ -33,6 +24,7 @@ import api from "../../../common/api";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
interface IFormatAllDrivesProps {
closeFormatModalAndRefresh: (
@@ -76,86 +68,74 @@ const FormatDrives = ({
});
};
return (
<Dialog
open={deleteOpen}
<ConfirmDialog
title={`Format ${allDrives ? "All " : ""} Drives`}
confirmText={`Format Drive${
drivesToFormat.length > 1 || allDrives ? "s" : ""
}`}
confirmButtonProps={{
disabled: formatAll !== "YES, PROCEED",
}}
isOpen={deleteOpen}
isLoading={deleteLoading}
onConfirm={removeRecord}
onClose={() => {
closeFormatModalAndRefresh(false, []);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
Format {allDrives ? "All " : ""}Drives
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{!allDrives && (
<Fragment>
<PredefinedList
label={`Selected Drive${drivesToFormat.length > 1 ? "s" : ""}`}
content={drivesToFormat.join(", ")}
confirmationContent={
<React.Fragment>
<DialogContentText>
{!allDrives && (
<Fragment>
<PredefinedList
label={`Selected Drive${
drivesToFormat.length > 1 ? "s" : ""
}`}
content={drivesToFormat.join(", ")}
/>
<br />
</Fragment>
)}
<Grid item xs={12}>
<FormSwitchWrapper
value="force"
id="force"
name="force"
checked={force}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setForce(event.target.checked);
}}
label={"Force Format"}
indicatorLabels={["Yes", "No"]}
/>
<br />
</Fragment>
)}
<Grid item xs={12}>
<FormSwitchWrapper
value="force"
id="force"
name="force"
checked={force}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setForce(event.target.checked);
}}
label={"Force Format"}
indicatorLabels={["Yes", "No"]}
/>
</Grid>
Are you sure you want to format{" "}
{allDrives ? <strong>All</strong> : "the selected"} drive
{drivesToFormat.length > 1 || allDrives ? "s" : ""}?.
<br />
<br />
<strong>
All information contained will be erased and cannot be recovered
</strong>
<br />
<br />
To continue please type <b>YES, PROCEED</b> in the box.
<Grid item xs={12}>
<InputBoxWrapper
id="format-confirm"
name="format-confirm"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setFormatAll(event.target.value);
}}
label=""
value={formatAll}
/>
</Grid>
</DialogContentText>
</DialogContent>
{deleteLoading && <LinearProgress />}
<DialogActions>
<Button
onClick={() => {
closeFormatModalAndRefresh(false, []);
}}
color="primary"
disabled={deleteLoading}
>
Cancel
</Button>
<Button
onClick={removeRecord}
color="secondary"
autoFocus
disabled={formatAll !== "YES, PROCEED"}
>
Format Drive{drivesToFormat.length > 1 || allDrives ? "s" : ""}
</Button>
</DialogActions>
</Dialog>
</Grid>
Are you sure you want to format{" "}
{allDrives ? <strong>All</strong> : "the selected"} drive
{drivesToFormat.length > 1 || allDrives ? "s" : ""}?.
<br />
<br />
<strong>
All information contained will be erased and cannot be recovered
</strong>
<br />
<br />
To continue please type <b>YES, PROCEED</b> in the box.
<Grid item xs={12}>
<InputBoxWrapper
id="format-confirm"
name="format-confirm"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setFormatAll(event.target.value);
}}
label=""
value={formatAll}
/>
</Grid>
</DialogContentText>
{deleteLoading && <LinearProgress />}
</React.Fragment>
}
/>
);
};

16
portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
View File

@@ -21,6 +21,7 @@ import React from "react";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import { IDirectCSIFormatResItem } from "./types";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
interface IFormatErrorsProps {
open: boolean;
@@ -37,6 +38,7 @@ const styles = (theme: Theme) =>
errorsList: {
height: "calc(100vh - 280px)",
},
...modalStyleUtils,
});
const download = (filename: string, text: string) => {
@@ -68,7 +70,7 @@ const FormatErrorsResult = ({
onClose={onCloseFormatErrorsList}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12} className={classes.modalFormScrollable}>
There were some issues trying to format the selected CSI Drives,
please fix the issues and try again.
<br />
@@ -90,16 +92,22 @@ const FormatErrorsResult = ({
noBackground
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
color="primary"
variant="outlined"
onClick={() => {
download("csiFormatErrors.json", JSON.stringify([...errorsList]));
}}
color="primary"
>
Download
</Button>
<Button onClick={onCloseFormatErrorsList} color="secondary" autoFocus>
<Button
onClick={onCloseFormatErrorsList}
color="primary"
variant="contained"
autoFocus
>
Done
</Button>
</Grid>

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

@@ -23,7 +23,7 @@ import { Button, LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import {
formFieldStyles,
modalBasic,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../actions";
@@ -54,9 +54,15 @@ const styles = (theme: Theme) =>
buttonContainer: {
textAlign: "right",
},
userSelector: {
"& .MuiPaper-root": {
padding: 0,
marginBottom: 15,
},
},
...formFieldStyles,
...spacingUtils,
...modalBasic,
...modalStyleUtils,
});
const AddGroup = ({
@@ -191,7 +197,7 @@ const AddGroup = ({
)}
<form noValidate autoComplete="off" onSubmit={setSaving}>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12} className={classes.modalFormScrollable}>
{selectedGroup === null ? (
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
@@ -205,11 +211,11 @@ const AddGroup = ({
/>
</Grid>
) : (
<React.Fragment>
<Grid item xs={12} className={classes.formFieldRow}>
<PredefinedList label={"Group Name"} content={selectedGroup} />
</React.Fragment>
</Grid>
)}
<Grid item xs={12}>
<Grid item xs={12} className={classes.userSelector}>
<UsersSelectors
selectedUsers={selectedUsers}
setSelectedUsers={setSelectedUsers}

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

@@ -13,6 +13,7 @@ import createStyles from "@mui/styles/createStyles";
import {
formFieldStyles,
modalBasic,
modalStyleUtils,
} from "../Common/FormComponents/common/styleLibrary";
import withStyles from "@mui/styles/withStyles";
@@ -33,6 +34,13 @@ const styles = (theme: Theme) =>
textAlign: "right",
marginTop: "1rem",
},
userSelector: {
"& .MuiPaper-root": {
padding: 0,
marginBottom: 15,
},
},
...modalStyleUtils,
...formFieldStyles,
...modalBasic,
});
@@ -69,18 +77,19 @@ const AddGroupMember = ({
<div className={classes.formFieldRow}>
<PredefinedList label={`Selected Group`} content={selectedGroup} />
</div>
<UsersSelectors
selectedUsers={selectedUsers}
setSelectedUsers={setSelectedUsers}
editMode={!selectedGroup}
/>
<div className={classes.userSelector}>
<UsersSelectors
selectedUsers={selectedUsers}
setSelectedUsers={setSelectedUsers}
editMode={!selectedGroup}
/>
</div>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
className={classes.spacerRight}
onClick={() => {
setSelectedUsers(preSelectedUsers);
}}

100
portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
View File

@@ -16,27 +16,15 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
LinearProgress,
} from "@mui/material";
import { DialogContentText, LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import {
deleteDialogStyles,
modalBasic,
} from "../../Common/FormComponents/common/styleLibrary";
import { deleteDialogStyles } from "../../Common/FormComponents/common/styleLibrary";
import { setErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
const styles = (theme: Theme) =>
createStyles({
@@ -45,7 +33,6 @@ const styles = (theme: Theme) =>
whiteSpace: "normal",
wordWrap: "break-word",
},
...modalBasic,
...deleteDialogStyles,
});
@@ -91,70 +78,29 @@ const ResetConfigurationModal = ({
};
return (
<Dialog
open={resetOpen}
<ConfirmDialog
title={`Restore Defaults`}
confirmText={"Yes, Reset Configuration"}
isOpen={resetOpen}
isLoading={resetLoading}
onConfirm={resetConfiguration}
onClose={() => {
closeResetModalAndRefresh(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
sx={{
"& .MuiPaper-root": {
padding: "1rem 2rem 2rem 1rem",
},
}}
>
<DialogTitle id="alert-dialog-title" className={classes.title}>
<div className={classes.titleText}>Restore Defaults</div>
<div className={classes.closeContainer}>
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={() => {
closeResetModalAndRefresh(false);
}}
disableRipple
size="small"
>
<CloseIcon />
</IconButton>
</div>
</DialogTitle>
<DialogContent>
{resetLoading && <LinearProgress />}
<DialogContentText id="alert-dialog-description">
Are you sure you want to restore these configurations to default
values?
<br />
<b className={classes.wrapText}>
Please note that this may cause your system to not be accessible
</b>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
type="button"
variant="outlined"
onClick={() => {
closeResetModalAndRefresh(false);
}}
color="primary"
disabled={resetLoading}
>
Cancel
</Button>
<Button
onClick={resetConfiguration}
variant="contained"
color="primary"
autoFocus
disabled={resetLoading}
>
Yes, Reset Configuration
</Button>
</DialogActions>
</Dialog>
confirmationContent={
<React.Fragment>
{resetLoading && <LinearProgress />}
<DialogContentText>
Are you sure you want to restore these configurations to default
values?
<br />
<b className={classes.wrapText}>
Please note that this may cause your system to not be accessible
</b>
</DialogContentText>
</React.Fragment>
}
/>
);
};

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

@@ -74,10 +74,7 @@ const styles = (theme: Theme) =>
},
searchField: {
...searchField.searchField,
minWidth: 380,
"@media (max-width: 900px)": {
minWidth: 220,
},
maxWidth: 380,
},
});

9
portal-ui/src/screens/Console/Policies/AddPolicy.tsx
View File

@@ -26,7 +26,7 @@ import { Policy } from "./types";
import { setModalErrorSnackMessage } from "../../../actions";
import {
fieldBasic,
modalBasic,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types";
@@ -53,7 +53,7 @@ const styles = (theme: Theme) =>
},
},
...spacingUtils,
...modalBasic,
...modalStyleUtils,
...fieldBasic,
});
@@ -130,7 +130,7 @@ const AddPolicy = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="policy-name"
@@ -155,13 +155,12 @@ const AddPolicy = ({
/>
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
{!policyEdit && (
<Button
type="button"
variant="outlined"
color="primary"
className={classes.spacerRight}
onClick={resetForm}
>
Clear

29
portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
View File

@@ -24,6 +24,7 @@ import Grid from "@mui/material/Grid";
import { policySort } from "../../../utils/sortFunctions";
import {
actionsTray,
searchField,
selectorsCommon,
tableStyles,
} from "../Common/FormComponents/common/styleLibrary";
@@ -47,23 +48,27 @@ const styles = (theme: Theme) =>
textAlign: "center",
padding: "10px 0",
},
filterBox: {
searchBox: {
flex: 1,
},
searchField: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: ".9rem",
},
fieldLabel: {
fontWeight: 600,
fontWeight: 400,
width: 160,
marginRight: 10,
},
tableBlock: {
...tableStyles.tableBlock,
},
filterBox: {
display: "flex",
marginBottom: 15,
alignItems: "center",
"& span": {
fontSize: 14,
},
},
...searchField,
...tableStyles,
...actionsTray,
...selectorsCommon,
});
@@ -136,16 +141,14 @@ const PolicySelectors = ({
{loading && <LinearProgress />}
{records.length > 0 ? (
<React.Fragment>
<Grid item xs={12} className={classes.searchField}>
<Grid item xs={12} className={classes.filterBox}>
<span className={classes.fieldLabel}>Assign Policies</span>
<div className={classes.filterBox}>
<div className={classes.searchBox}>
<SearchBox
placeholder="Filter by Policy"
placeholder="Filter Policy"
onChange={(value) => {
setFilter(value);
}}
overrideClass={classes.searchField}
/>
</div>
</Grid>

40
portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
View File

@@ -503,7 +503,9 @@ const Encryption = ({
<Grid container>
<Grid item xs={12} style={{ marginBottom: 15 }}>
<fieldset className={classes.fieldGroup}>
<legend>Encryption Service Certificates</legend>
<legend className={classes.descriptionText}>
Encryption Service Certificates
</legend>
<FileSelector
onChange={(encodedValue, fileName) => {
addFileServerCert("key", fileName, encodedValue);
@@ -537,7 +539,9 @@ const Encryption = ({
<Grid container style={{ marginBottom: 15 }}>
<Grid item xs={12}>
<fieldset className={classes.fieldGroup}>
<legend>Mutual TLS authentication</legend>
<legend className={classes.descriptionText}>
Mutual TLS authentication
</legend>
<FileSelector
onChange={(encodedValue, fileName) => {
addFileClientCert("key", fileName, encodedValue);
@@ -620,7 +624,7 @@ const Encryption = ({
<Grid item xs={12}>
<fieldset className={classes.fieldGroup}>
<legend>App Role</legend>
<legend className={classes.descriptionText}>App Role</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="vault_approle_engine"
@@ -680,7 +684,9 @@ const Encryption = ({
<Grid container className={classes.mutualTlsConfig}>
<fieldset className={classes.fieldGroup}>
<legend>Mutual TLS authentication (optional)</legend>
<legend className={classes.descriptionText}>
Mutual TLS authentication (optional)
</legend>
<FileSelector
onChange={(encodedValue, fileName) => {
addFileVaultCert("key", fileName, encodedValue);
@@ -723,7 +729,7 @@ const Encryption = ({
style={{ marginTop: 15 }}
>
<fieldset className={classes.fieldGroup}>
<legend>Status</legend>
<legend className={classes.descriptionText}>Status</legend>
<InputBoxWrapper
type="number"
min="0"
@@ -758,7 +764,9 @@ const Encryption = ({
</Grid>
<Grid item xs={12}>
<fieldset className={classes.fieldGroup}>
<legend>Credentials</legend>
<legend className={classes.descriptionText}>
Credentials
</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="azure_tenant_id"
@@ -828,7 +836,9 @@ const Encryption = ({
</Grid>
<Grid item xs={12}>
<fieldset className={classes.fieldGroup}>
<legend>Credentials</legend>
<legend className={classes.descriptionText}>
Credentials
</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="gcp_client_email"
@@ -920,7 +930,9 @@ const Encryption = ({
</Grid>
<Grid item xs={12}>
<fieldset className={classes.fieldGroup}>
<legend>Credentials</legend>
<legend className={classes.descriptionText}>
Credentials
</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="aws_accessKey"
@@ -988,7 +1000,9 @@ const Encryption = ({
}}
>
<fieldset className={classes.fieldGroup}>
<legend>Credentials</legend>
<legend className={classes.descriptionText}>
Credentials
</legend>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="gemalto_token"
@@ -1042,7 +1056,9 @@ const Encryption = ({
}}
>
<fieldset className={classes.fieldGroup}>
<legend>Custom CA Root certificate verification</legend>
<legend className={classes.descriptionText}>
Custom CA Root certificate verification
</legend>
<FileSelector
onChange={(encodedValue, fileName) => {
@@ -1081,7 +1097,9 @@ const Encryption = ({
</Grid>
<fieldset className={classes.fieldGroup} style={{ marginTop: 15 }}>
<legend>SecurityContext for KES pods</legend>
<legend className={classes.descriptionText}>
SecurityContext for KES pods
</legend>
<Grid item xs={12} className={classes.kesSecurityContext}>
<div
className={`${classes.multiContainer} ${classes.responsiveContainer}`}

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

@@ -16,15 +16,7 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
LinearProgress,
} from "@mui/material";
import { DialogContentText, LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -35,8 +27,7 @@ import {
import { setErrorSnackMessage } from "../../../../../../actions";
import { ErrorResponseHandler } from "../../../../../../common/types";
import api from "../../../../../../common/api";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog";
const styles = (theme: Theme) =>
createStyles({
@@ -94,67 +85,30 @@ const AddNamespaceModal = ({
};
return (
<Dialog
open={addNamespaceOpen}
<ConfirmDialog
title={`New namespace`}
confirmText={"Create"}
confirmButtonProps={{
color: "primary",
variant: "contained",
}}
isOpen={addNamespaceOpen}
isLoading={addNamespaceLoading}
onConfirm={addNamespace}
onClose={() => {
closeAddNamespaceModalAndRefresh(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
sx={{
"& .MuiPaper-root": {
padding: "1rem 2rem 2rem 1rem",
},
}}
>
<DialogTitle id="alert-dialog-title" className={classes.title}>
<div className={classes.titleText}>Create new namespace</div>
<div className={classes.closeContainer}>
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={() => {
closeAddNamespaceModalAndRefresh(false);
}}
disableRipple
size="small"
>
<CloseIcon />
</IconButton>
</div>
</DialogTitle>
<DialogContent>
{addNamespaceLoading && <LinearProgress />}
<DialogContentText id="alert-dialog-description">
Are you sure you want to add a namespace called
<br />
<b className={classes.wrapText}>{namespace}</b>?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
type="button"
variant="outlined"
onClick={() => {
closeAddNamespaceModalAndRefresh(false);
}}
color="primary"
disabled={addNamespaceLoading}
>
Cancel
</Button>
<Button
onClick={addNamespace}
variant="contained"
color="primary"
autoFocus
disabled={addNamespaceLoading}
>
Create
</Button>
</DialogActions>
</Dialog>
confirmationContent={
<React.Fragment>
{addNamespaceLoading && <LinearProgress />}
<DialogContentText>
Are you sure you want to add a namespace called
<br />
<b className={classes.wrapText}>{namespace}</b>?
</DialogContentText>
</React.Fragment>
}
/>
);
};

91
portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
View File

@@ -4,7 +4,10 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import Grid from "@mui/material/Grid";
import { generatePoolName, niceBytes } from "../../../../common/utils";
@@ -33,14 +36,19 @@ const styles = (theme: Theme) =>
display: "flex",
flexGrow: 1,
alignItems: "center",
margin: "auto",
justifyContent: "center",
"& div": {
flexGrow: 1,
width: "100%",
width: 150,
"@media (max-width: 900px)": {
flexFlow: "column",
},
},
},
factorElements: {
display: "flex",
justifyContent: "flex-start",
marginLeft: 30,
},
sizeNumber: {
fontSize: 35,
@@ -52,7 +60,8 @@ const styles = (theme: Theme) =>
color: "#777",
textAlign: "center",
},
...modalBasic,
...formFieldStyles,
...modalStyleUtils,
});
const AddPoolModal = ({
@@ -149,7 +158,7 @@ const AddPoolModal = ({
});
}}
>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="number_of_nodes"
name="number_of_nodes"
@@ -161,7 +170,7 @@ const AddPoolModal = ({
value={numberOfNodes.toString(10)}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="pool_size"
name="pool_size"
@@ -173,7 +182,7 @@ const AddPoolModal = ({
value={volumeSize.toString(10)}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="volumes_per_sever"
name="volumes_per_sever"
@@ -185,7 +194,7 @@ const AddPoolModal = ({
value={volumesPerServer.toString(10)}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<SelectWrapper
id="storage_class"
name="storage_class"
@@ -198,39 +207,47 @@ const AddPoolModal = ({
disabled={storageClasses.length < 1}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.bottomContainer}>
<div className={classes.factorElements}>
<div>
<div className={classes.sizeNumber}>
{niceBytes(instanceCapacity.toString(10))}
</div>
<div className={classes.sizeDescription}>Instance Capacity</div>
<Grid item xs={12} className={classes.bottomContainer}>
<div className={classes.factorElements}>
<div>
<div className={classes.sizeNumber}>
{niceBytes(instanceCapacity.toString(10))}
</div>
<div>
<div className={classes.sizeNumber}>
{niceBytes(totalCapacity.toString(10))}
</div>
<div className={classes.sizeDescription}>Total Capacity</div>
<div className={classes.sizeDescription}>Instance Capacity</div>
</div>
<div>
<div className={classes.sizeNumber}>
{niceBytes(totalCapacity.toString(10))}
</div>
<div className={classes.sizeDescription}>Total Capacity</div>
</div>
<div className={classes.buttonContainer}>
<Button
type="submit"
variant="contained"
color="primary"
disabled={addSending}
>
Save
</Button>
</div>
</Grid>
{addSending && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</div>
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={addSending}
onClick={() => onClosePoolAndReload(false)}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
color="primary"
disabled={addSending}
>
Save
</Button>
</Grid>
{addSending && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</form>
</ModalWrapper>
);

48
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
View File

@@ -25,7 +25,7 @@ import api from "../../../../common/api";
import { setModalErrorSnackMessage } from "../../../../actions";
import {
fieldBasic,
modalBasic,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../../common/types";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -41,7 +41,20 @@ const styles = (theme: Theme) =>
fontSize: 14,
fontWeight: "bold",
},
...modalBasic,
codeMirrorContainer: {
marginBottom: 20,
paddingLeft: 15,
"&:nth-child(2) .MuiGrid-root:nth-child(3)": {
border: "1px solid #EAEAEA",
},
"& label": {
marginBottom: ".5rem",
},
"& label + div": {
display: "none",
},
},
...modalStyleUtils,
...fieldBasic,
});
@@ -119,10 +132,16 @@ const TenantYAML = ({
}}
title={`YAML`}
>
{loading && <LinearProgress />}
{addLoading ||
(loading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
))}
{errorMessage !== "" && (
<div className={classes.errorState}>{errorMessage}</div>
)}
{!loading && (
<form
noValidate
@@ -132,10 +151,7 @@ const TenantYAML = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<Grid item xs={12}>
<br />
</Grid>
<Grid item xs={12} className={classes.codeMirrorContainer}>
<CodeMirrorWrapper
label={`Tenant Specification`}
value={tenantYaml}
@@ -145,7 +161,18 @@ const TenantYAML = ({
}}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
disabled={addLoading}
onClick={() => {
closeModalAndRefresh(false);
}}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
@@ -155,11 +182,6 @@ const TenantYAML = ({
Save
</Button>
</Grid>
{addLoading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</Grid>
</form>
)}

35
portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
View File

@@ -20,7 +20,10 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, Grid } from "@mui/material";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -42,7 +45,11 @@ const styles = (theme: Theme) =>
buttonContainer: {
textAlign: "right",
},
...modalBasic,
infoText: {
fontSize: 14,
},
...formFieldStyles,
...modalStyleUtils,
});
const UpdateTenantModal = ({
@@ -138,14 +145,14 @@ const UpdateTenantModal = ({
onClose={closeAction}
>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<span>
<Grid item xs={12} className={classes.modalFormScrollable}>
<div className={classes.infoText}>
Please enter the MinIO image from dockerhub to use. If blank, then
latest build will be used.
</span>
</div>
<br />
<br />
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={minioImage}
label={"MinIO's Image"}
@@ -157,7 +164,7 @@ const UpdateTenantModal = ({
}}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
value="imageRegistry"
id="setImageRegistry"
@@ -172,7 +179,7 @@ const UpdateTenantModal = ({
</Grid>
{imageRegistry && (
<Fragment>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={imageRegistryEndpoint}
label={"Endpoint"}
@@ -184,7 +191,7 @@ const UpdateTenantModal = ({
}}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={imageRegistryUsername}
label={"Username"}
@@ -196,7 +203,7 @@ const UpdateTenantModal = ({
}}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
value={imageRegistryPassword}
label={"Password"}
@@ -211,15 +218,15 @@ const UpdateTenantModal = ({
</Fragment>
)}
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
color="primary"
className={classes.clearButton}
variant="outlined"
onClick={resetForm}
>
Clear
</button>
</Button>
<Button
type="submit"
variant="contained"

11
portal-ui/src/screens/Console/Users/AddUser.tsx
View File

@@ -23,7 +23,7 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
formFieldStyles,
modalBasic,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { User } from "./types";
@@ -40,16 +40,12 @@ import { TabPanel } from "../../shared/tabs";
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
textAlign: "right",
marginTop: ".9rem",
},
tabsHeader: {
marginBottom: "1rem",
},
...modalStyleUtils,
...formFieldStyles,
...spacingUtils,
...modalBasic,
});
interface IAddUserContentProps {
@@ -277,12 +273,11 @@ const AddUser = ({
</Grid>
)}
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
className={classes.spacerRight}
onClick={resetForm}
>
Clear

9
portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
View File

@@ -22,7 +22,7 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
modalBasic,
modalStyleUtils,
serviceAccountStyles,
} from "../Common/FormComponents/common/styleLibrary";
import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -37,7 +37,7 @@ import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWr
const styles = (theme: Theme) =>
createStyles({
...serviceAccountStyles,
...modalBasic,
...modalStyleUtils,
});
interface IAddUserServiceAccountProps {
@@ -131,7 +131,7 @@ const AddUserServiceAccount = ({
addUserServiceAccount(e);
}}
>
<Grid container className={classes.containerScrollable}>
<Grid container className={classes.modalFormScrollable}>
<Grid item xs={12}>
<div className={classes.infoDetails}>
Service Accounts inherit the policy explicitly attached to the
@@ -210,12 +210,11 @@ const AddUserServiceAccount = ({
</Grid>
</Grid>
<Grid container>
<Grid item xs={12} className={classes.buttonContainer}>
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
color="primary"
variant="outlined"
className={classes.buttonSpacer}
onClick={resetForm}
>
Clear

31
portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
View File

@@ -21,7 +21,10 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
import {
formFieldStyles,
modalStyleUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../actions";
import { ErrorResponseHandler } from "../../../common/types";
import api from "../../../common/api";
@@ -42,7 +45,8 @@ const styles = (theme: Theme) =>
buttonContainer: {
textAlign: "right",
},
...modalBasic,
...modalStyleUtils,
...formFieldStyles,
});
const BulkAddToGroup = ({
@@ -130,30 +134,29 @@ const BulkAddToGroup = ({
) : (
<form noValidate autoComplete="off" onSubmit={setSaving}>
<Grid container>
<Grid item xs={12} className={classes.formScrollable}>
<PredefinedList
label={"Selected Users"}
content={checkedUsers.join(", ")}
/>
<Grid item xs={12}>
<br />
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<PredefinedList
label={"Selected Users"}
content={checkedUsers.join(", ")}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.formFieldRow}>
<GroupsSelectors
selectedGroups={selectedGroups}
setSelectedGroups={setSelectedGroups}
/>
</Grid>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
<Grid item xs={12} className={classes.modalButtonBar}>
<Button
type="button"
variant="outlined"
color="primary"
className={classes.clearButton}
onClick={resetForm}
>
Clear
</button>
</Button>
<Button
type="submit"
variant="contained"

9
portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
View File

@@ -50,10 +50,15 @@ const styles = (theme: Theme) =>
padding: "10px 0",
},
actionsTitle: {
fontWeight: 600,
fontWeight: 400,
color: "#000",
fontSize: 16,
fontSize: 14,
alignSelf: "center",
marginRight: 48,
"@media (max-width: 900px)": {
marginRight: 0,
},
},
searchBox: {
flex: 1,