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

Components cleanup (#3079)

Browse Source 
Removed old component wrappers and replaced them with their mds equivalent components:

- InputBoxWrapper
- CommentBoxWrapper
- CheckboxWrapper
- PredefinedList

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-10-09 14:41:23 -05:00
committed by GitHub
parent 4018addd79
commit 56dc58b0b8
16 changed files with 228 additions and 903 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,8 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { AddNewTagIcon, Button } from "mds";
import { Grid } from "@mui/material";
import { AddNewTagIcon, Box, Button, FormLayout, Grid, InputBox } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -25,7 +24,6 @@ import {
modalStyleUtils,
spacingUtils,
} from "../../Common/FormComponents/common/styleLibrary";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import { setModalErrorSnackMessage } from "../../../../systemSlice";
import { useAppDispatch } from "../../../../store";
@@ -96,35 +94,31 @@ const AddBucketTagModal = ({
}}
titleIcon={<AddNewTagIcon />}
>
<Grid container>
<div className={classes.spacerBottom}>
<FormLayout withBorders={false} containerPadding={false}>
<Box sx={{ marginBottom: 15 }}>
<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>
<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}>
</Box>
<InputBox
value={newKey}
label={"New Tag Key"}
id={"newTagKey"}
name={"newTagKey"}
placeholder={"Enter New Tag Key"}
onChange={(e: any) => {
setNewKey(e.target.value);
}}
/>
<InputBox
value={newLabel}
label={"New Tag Label"}
id={"newTagLabel"}
name={"newTagLabel"}
placeholder={"Enter New Tag Label"}
onChange={(e: any) => {
setNewLabel(e.target.value);
}}
/>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"clear"}
type="button"
@@ -144,7 +138,7 @@ const AddBucketTagModal = ({
label={"Save"}
/>
</Grid>
</Grid>
</FormLayout>
</ModalWrapper>
);
};

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

@@ -15,7 +15,15 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Select, InputBox, Switch, FormLayout, Tooltip, Grid } from "mds";
import {
FormLayout,
Grid,
InputBox,
ReadBox,
Select,
Switch,
Tooltip,
} from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -27,7 +35,6 @@ import {
wizardCommon,
} from "../../Common/FormComponents/common/styleLibrary";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
import GenericWizard from "../../Common/GenericWizard/GenericWizard";
import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
@@ -325,10 +332,12 @@ const AddBulkReplicationModal = ({
componentRender: (
<Fragment>
<Grid item xs={12}>
<PredefinedList
<ReadBox
sx={{ width: "100%" }}
label="Local Buckets to replicate"
content={bucketsToAlter.join(", ")}
/>
>
{bucketsToAlter.join(", ")}
</ReadBox>
</Grid>
<h4>Remote Endpoint Configuration</h4>
<span className={classes.descriptionText}>

13
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
View File

@@ -27,10 +27,10 @@ import {
IconButton,
Tooltip,
Grid,
Checkbox,
} from "mds";
import { niceBytes } from "../../../../../../common/utils";
import SpecificVersionPill from "./SpecificVersionPill";
import CheckboxWrapper from "../../../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
import { BucketObject } from "api/consoleApi";
interface IFileVersionItem {
@@ -242,24 +242,19 @@ const FileVersionItem = ({
<Grid container>
<Grid item xs md={4} className={"versionContainer"}>
{checkable && (
<CheckboxWrapper
<Checkbox
checked={isChecked}
id={`select-${versionInfo.version_id}`}
label={""}
name={`select-${versionInfo.version_id}`}
onChange={(e) => {
e.stopPropagation();
e.preventDefault();
onCheck(versionInfo.version_id || "");
}}
value={versionInfo.version_id || ""}
disabled={versionInfo.is_delete_marker}
overrideCheckboxStyles={{
paddingLeft: 0,
height: 34,
width: 25,
sx={{
width: "initial",
}}
noTopMargin
/>
)}
{displayFileIconName(fileName, true)} v{index.toString()}

131
portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx
View File

@@ -1,131 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Checkbox, Grid, InputLabel, Tooltip } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
checkboxIcons,
fieldBasic,
tooltipHelper,
} from "../common/styleLibrary";
import { HelpIcon } from "mds";
interface CheckBoxProps {
label: string;
classes: any;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
value: string | boolean;
id: string;
name: string;
disabled?: boolean;
tooltip?: string;
overrideLabelClasses?: string;
overrideCheckboxStyles?: React.CSSProperties;
index?: number;
noTopMargin?: boolean;
checked: boolean;
className?: string;
}
const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
...tooltipHelper,
...checkboxIcons,
fieldContainer: {
...fieldBasic.fieldContainer,
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
margin: "15px 0",
marginBottom: 0,
flexBasis: "initial",
flexWrap: "nowrap",
},
noTopMargin: {
marginTop: 0,
},
});
const CheckboxWrapper = ({
label,
onChange,
value,
id,
name,
checked = false,
disabled = false,
noTopMargin = false,
tooltip = "",
overrideLabelClasses = "",
overrideCheckboxStyles,
classes,
className,
}: CheckBoxProps) => {
return (
<React.Fragment>
<Grid
item
xs={12}
className={`${classes.fieldContainer} ${
noTopMargin ? classes.noTopMargin : ""
} ${className ? className : ""}`}
>
<div>
<Checkbox
name={name}
id={id}
value={value}
color="primary"
inputProps={{ "aria-label": "secondary checkbox" }}
checked={checked}
onChange={onChange}
checkedIcon={<span className={classes.checkedIcon} />}
icon={<span className={classes.unCheckedIcon} />}
disabled={disabled}
disableRipple
disableFocusRipple
focusRipple={false}
centerRipple={false}
disableTouchRipple
style={overrideCheckboxStyles || {}}
/>
</div>
{label !== "" && (
<InputLabel
htmlFor={id}
className={`${classes.noMinWidthLabel} ${overrideLabelClasses}`}
>
<span>{label}</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<div className={classes.tooltip}>
<HelpIcon />
</div>
</Tooltip>
</div>
)}
</InputLabel>
)}
</Grid>
</React.Fragment>
);
};
export default withStyles(styles)(CheckboxWrapper);

158
portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
View File

@@ -1,158 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Grid, InputLabel, TextField, Tooltip } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
import { HelpIcon } from "mds";
interface CommentBoxProps {
label: string;
classes: any;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
value: string | boolean;
id: string;
name: string;
disabled?: boolean;
tooltip?: string;
index?: number;
error?: string;
required?: boolean;
placeholder?: string;
}
const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
...tooltipHelper,
inputLabel: {
...fieldBasic.inputLabel,
fontSize: 14,
margin: 0,
alignItems: "flex-start",
paddingTop: "20px",
flexWrap: "wrap",
display: "flex",
},
textBoxContainer: {
flexGrow: 1,
position: "relative",
},
cssOutlinedInput: {
borderColor: "#EAEAEA",
padding: 16,
},
rootContainer: {
"& .MuiOutlinedInput-inputMultiline": {
...fieldBasic.inputLabel,
fontSize: 13,
minHeight: 150,
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "#07193E",
borderWidth: 1,
},
"& textarea": {
color: "#07193E",
fontSize: 13,
fontWeight: 600,
"&:placeholder": {
color: "#858585",
opacity: 1,
fontWeight: 400,
},
},
},
});
const CommentBoxWrapper = ({
label,
onChange,
value,
id,
name,
disabled = false,
tooltip = "",
index = 0,
error = "",
required = false,
placeholder = "",
classes,
}: CommentBoxProps) => {
let inputProps: any = { "data-index": index };
return (
<React.Fragment>
<Grid
item
xs={12}
className={`${classes.fieldContainer} ${
error !== "" ? classes.errorInField : ""
}`}
>
{label !== "" && (
<InputLabel htmlFor={id} className={classes.inputLabel}>
<span>
{label}
{required ? "*" : ""}
</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<div className={classes.tooltip}>
<HelpIcon />
</div>
</Tooltip>
</div>
)}
</InputLabel>
)}
<div className={classes.textBoxContainer}>
<TextField
id={id}
name={name}
fullWidth
value={value}
disabled={disabled}
onChange={onChange}
multiline
rows={5}
inputProps={inputProps}
error={error !== ""}
helperText={error}
placeholder={placeholder}
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes: {
notchedOutline: classes.cssOutlinedInput,
root: classes.rootContainer,
},
}}
variant="outlined"
/>
</div>
</Grid>
</React.Fragment>
);
};
export default withStyles(styles)(CommentBoxWrapper);

262
portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
View File

@@ -1,262 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { ClipboardEvent, useState } from "react";
import {
Grid,
IconButton,
InputLabel,
TextField,
TextFieldProps,
Tooltip,
} from "@mui/material";
import { OutlinedInputProps } from "@mui/material/OutlinedInput";
import { InputProps as StandardInputProps } from "@mui/material/Input";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
import withStyles from "@mui/styles/withStyles";
import {
fieldBasic,
inputFieldStyles,
tooltipHelper,
} from "../common/styleLibrary";
import { HelpIcon } from "mds";
import clsx from "clsx";
interface InputBoxProps {
label: string;
classes: any;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onKeyPress?: (e: any) => void;
onFocus?: () => void;
onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;
value: string | boolean;
id: string;
name: string;
disabled?: boolean;
multiline?: boolean;
type?: string;
tooltip?: string;
autoComplete?: string;
index?: number;
error?: string;
required?: boolean;
placeholder?: string;
min?: string;
max?: string;
overlayId?: string;
overlayIcon?: any;
overlayAction?: () => void;
overlayObject?: any;
extraInputProps?: StandardInputProps["inputProps"];
noLabelMinWidth?: boolean;
pattern?: string;
autoFocus?: boolean;
className?: string;
}
const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
...tooltipHelper,
textBoxContainer: {
flexGrow: 1,
position: "relative",
},
overlayAction: {
position: "absolute",
right: 5,
top: 6,
"& svg": {
maxWidth: 15,
maxHeight: 15,
},
"&.withLabel": {
top: 5,
},
},
});
const inputStyles = makeStyles((theme: Theme) =>
createStyles({
...inputFieldStyles,
}),
);
function InputField(props: TextFieldProps) {
const classes = inputStyles();
return (
<TextField
InputProps={{ classes } as Partial<OutlinedInputProps>}
{...props}
/>
);
}
const InputBoxWrapper = ({
label,
onChange,
value,
id,
name,
type = "text",
autoComplete = "off",
disabled = false,
multiline = false,
tooltip = "",
index = 0,
error = "",
required = false,
placeholder = "",
min,
max,
overlayId,
overlayIcon = null,
overlayObject = null,
extraInputProps = {},
overlayAction,
noLabelMinWidth = false,
pattern = "",
autoFocus = false,
classes,
className = "",
onKeyPress,
onFocus,
onPaste,
}: InputBoxProps) => {
let inputProps: any = { "data-index": index, ...extraInputProps };
const [toggleTextInput, setToggleTextInput] = useState<boolean>(false);
if (type === "number" && min) {
inputProps["min"] = min;
}
if (type === "number" && max) {
inputProps["max"] = max;
}
if (pattern !== "") {
inputProps["pattern"] = pattern;
}
let inputBoxWrapperIcon = overlayIcon;
let inputBoxWrapperType = type;
if (type === "password" && overlayIcon === null) {
inputBoxWrapperIcon = toggleTextInput ? (
<VisibilityOffIcon />
) : (
<RemoveRedEyeIcon />
);
inputBoxWrapperType = toggleTextInput ? "text" : "password";
}
return (
<React.Fragment>
<Grid
container
className={clsx(
className !== "" ? className : "",
error !== "" ? classes.errorInField : classes.inputBoxContainer,
)}
>
{label !== "" && (
<InputLabel
htmlFor={id}
className={
noLabelMinWidth ? classes.noMinWidthLabel : classes.inputLabel
}
>
<span>
{label}
{required ? "*" : ""}
</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<div className={classes.tooltip}>
<HelpIcon />
</div>
</Tooltip>
</div>
)}
</InputLabel>
)}
<div className={classes.textBoxContainer}>
<InputField
id={id}
name={name}
fullWidth
value={value}
autoFocus={autoFocus}
disabled={disabled}
onChange={onChange}
type={inputBoxWrapperType}
multiline={multiline}
autoComplete={autoComplete}
inputProps={inputProps}
error={error !== ""}
helperText={error}
placeholder={placeholder}
className={classes.inputRebase}
onKeyPress={onKeyPress}
onFocus={onFocus}
onPaste={onPaste}
/>
{inputBoxWrapperIcon && (
<div
className={`${classes.overlayAction} ${
label !== "" ? "withLabel" : ""
}`}
>
<IconButton
onClick={
overlayAction
? () => {
overlayAction();
}
: () => setToggleTextInput(!toggleTextInput)
}
id={overlayId}
size={"small"}
disableFocusRipple={false}
disableRipple={false}
disableTouchRipple={false}
>
{inputBoxWrapperIcon}
</IconButton>
</div>
)}
{overlayObject && (
<div
className={`${classes.overlayAction} ${
label !== "" ? "withLabel" : ""
}`}
>
{overlayObject}
</div>
)}
</div>
</Grid>
</React.Fragment>
);
};
export default withStyles(styles)(InputBoxWrapper);

61
portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
View File

@@ -1,61 +0,0 @@
import React, { Fragment } from "react";
import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { predefinedList } from "../common/styleLibrary";
interface IPredefinedList {
classes: any;
label?: string;
content: any;
multiLine?: boolean;
actionButton?: React.ReactNode;
}
const styles = (theme: Theme) =>
createStyles({
...predefinedList,
});
const PredefinedList = ({
classes,
label = "",
content,
multiLine = false,
actionButton,
}: IPredefinedList) => {
return (
<Fragment>
<Grid className={classes.prefinedContainer}>
{label !== "" && (
<Grid item xs={12} className={classes.predefinedTitle}>
{label}
</Grid>
)}
<Grid
item
xs={12}
className={`${classes.predefinedList} ${
actionButton ? classes.includesActionButton : ""
}`}
>
<Grid
item
xs={12}
className={
multiLine ? classes.innerContentMultiline : classes.innerContent
}
>
{content}
</Grid>
{actionButton && (
<div className={classes.overlayShareOption}>{actionButton}</div>
)}
</Grid>
</Grid>
</Fragment>
);
};
export default withStyles(styles)(PredefinedList);

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

@@ -104,43 +104,6 @@ export const tooltipHelper = {
},
};
const checkBoxBasic = {
width: 16,
height: 16,
borderRadius: 2,
};
export const checkboxIcons = {
unCheckedIcon: {
...checkBoxBasic,
border: "1px solid #c3c3c3",
boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
},
checkedIcon: {
...checkBoxBasic,
border: "1px solid #FFFFFF",
backgroundColor: "#4CCB92",
boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
width: 14,
height: 14,
marginLeft: 1,
"&:before": {
content: "''",
display: "block",
marginLeft: -2,
marginTop: -2,
width: 16,
height: 16,
top: 0,
bottom: 0,
left: 0,
right: 0,
borderRadius: 2,
border: "1px solid #ccc",
},
},
};
export const containerForHeader = {
container: {
position: "relative" as const,

15
portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
View File

@@ -23,8 +23,15 @@ import {
formFieldStyles,
modalBasic,
} from "../../Common/FormComponents/common/styleLibrary";
import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
import { Switch, InputBox, Grid, Box, ReadBox, RadioGroup } from "mds";
import {
Switch,
InputBox,
Grid,
Box,
ReadBox,
RadioGroup,
CommentBox,
} from "mds";
interface IConfMySqlProps {
onChange: (newValue: IElementValue[]) => void;
@@ -298,13 +305,13 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<CommentBoxWrapper
<CommentBox
id="comment"
name="comment"
label="Comment"
placeholder="Enter custom notes if any"
value={comment}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
onChange={(e) => {
setComment(e.target.value);
}}
/>

16
portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfPostgres.tsx
View File

@@ -18,13 +18,21 @@ import React, { useCallback, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, Grid, InputBox, RadioGroup, ReadBox, Select, Switch } from "mds";
import {
Box,
CommentBox,
Grid,
InputBox,
RadioGroup,
ReadBox,
Select,
Switch,
} from "mds";
import { IElementValue } from "../../Configurations/types";
import {
formFieldStyles,
modalBasic,
} from "../../Common/FormComponents/common/styleLibrary";
import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
interface IConfPostgresProps {
onChange: (newValue: IElementValue[]) => void;
@@ -385,13 +393,13 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<CommentBoxWrapper
<CommentBox
id="comment"
name="comment"
label="Comment"
placeholder="Enter custom notes if any"
value={comment}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
onChange={(e) => {
setComment(e.target.value);
}}
/>

143
portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx
View File

@@ -15,11 +15,20 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Button, ConsoleIcon, Grid, ProgressBar, Tooltip } from "mds";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import {
Button,
ConsoleIcon,
FormLayout,
Grid,
InputBox,
ProgressBar,
ReadBox,
Switch,
Tooltip,
} from "mds";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import { Webhook } from "@mui/icons-material";
import { formFieldStyles } from "../../Common/FormComponents/common/styleLibrary";
import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
import CallToActionIcon from "@mui/icons-material/CallToAction";
import PendingActionsIcon from "@mui/icons-material/PendingActions";
import {
@@ -31,8 +40,6 @@ import {
import { useAppDispatch } from "../../../../store";
import { IConfigurationSys } from "../../Configurations/types";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
import { overrideFields } from "../../Configurations/utils";
import { api } from "api";
import { errorToHandler } from "api/errors";
@@ -200,12 +207,12 @@ const EditEndpointModal = ({
onClose={onCloseEndpoint}
titleIcon={icon}
>
{hasOverride.length > 0 ? (
<Fragment>
<Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
<PredefinedList
<FormLayout withBorders={false} containerPadding={false}>
{hasOverride.length > 0 ? (
<Fragment>
<ReadBox
label={"Enabled"}
content={overrideValues.enable?.value || "-"}
sx={{ width: "100%" }}
actionButton={
<Grid
item
@@ -229,12 +236,12 @@ const EditEndpointModal = ({
</Tooltip>
</Grid>
}
/>
</Grid>
<Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
<PredefinedList
>
{overrideValues.enable?.value || "-"}
</ReadBox>
<ReadBox
label={"Endpoint"}
content={overrideValues.endpoint?.value || "-"}
sx={{ width: "100%" }}
actionButton={
<Grid
item
@@ -258,12 +265,12 @@ const EditEndpointModal = ({
</Tooltip>
</Grid>
}
/>
</Grid>
<Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
<PredefinedList
>
{overrideValues.endpoint?.value || "-"}
</ReadBox>
<ReadBox
label={"Auth Token"}
content={overrideValues.auth_token?.value || "-"}
sx={{ width: "100%" }}
actionButton={
<Grid
item
@@ -287,13 +294,13 @@ const EditEndpointModal = ({
</Tooltip>
</Grid>
}
/>
</Grid>
</Fragment>
) : (
<Fragment>
<Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
<FormSwitchWrapper
>
{overrideValues.auth_token?.value || "-"}
</ReadBox>
</Fragment>
) : (
<Fragment>
<Switch
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.checked ? "on" : "off";
setEndpointState(value);
@@ -304,9 +311,7 @@ const EditEndpointModal = ({
value={"switch_on"}
checked={endpointState === "on"}
/>
</Grid>
<Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
<InputBoxWrapper
<InputBox
id="endpoint"
name="endpoint"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -325,9 +330,7 @@ const EditEndpointModal = ({
}
required
/>
</Grid>
<Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
<InputBoxWrapper
<InputBox
id="auth-token"
name="auth-token"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -336,49 +339,39 @@ const EditEndpointModal = ({
label="Auth Token"
value={authToken}
/>
</Grid>
{saving && (
<Grid
item
xs={12}
sx={{
marginBottom: 10,
}}
>
<ProgressBar />
{saving && (
<Grid
item
xs={12}
sx={{
marginBottom: 10,
}}
>
<ProgressBar />
</Grid>
)}
<Grid item sx={modalStyleUtils.modalButtonBar}>
<Button
id={"reset"}
type="button"
variant="regular"
disabled={saving}
onClick={onCloseEndpoint}
label={"Cancel"}
/>
<Button
id={"save-lifecycle"}
type="submit"
variant="callAction"
color="primary"
disabled={saving || invalidInputs.length !== 0}
label={"Update"}
onClick={updateWebhook}
/>
</Grid>
)}
<Grid
item
xs={12}
sx={{
display: "flex",
justifyContent: "flex-end",
}}
>
<Button
id={"reset"}
type="button"
variant="regular"
disabled={saving}
onClick={onCloseEndpoint}
label={"Cancel"}
sx={{
marginRight: 10,
}}
/>
<Button
id={"save-lifecycle"}
type="submit"
variant="callAction"
color="primary"
disabled={saving || invalidInputs.length !== 0}
label={"Update"}
onClick={updateWebhook}
/>
</Grid>
</Fragment>
)}
</Fragment>
)}
</FormLayout>
</ModalWrapper>
</Fragment>
);

14
portal-ui/src/screens/Console/KMS/AddKeyForm.tsx
View File

@@ -15,12 +15,18 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { AddAccessRuleIcon, Button, FormLayout, PageLayout, Grid } from "mds";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import {
AddAccessRuleIcon,
Button,
FormLayout,
PageLayout,
Grid,
InputBox,
} from "mds";
import { ErrorResponseHandler } from "../../../common/types";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import useApi from "../Common/Hooks/useApi";
import KMSHelpBox from "./KMSHelpbox";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
interface IAddKeyFormProps {
onSuccess: () => void;
@@ -71,7 +77,7 @@ const AddKeyForm = ({ onSuccess, onError }: IAddKeyFormProps) => {
>
<Grid container>
<Grid item xs={12}>
<InputBoxWrapper
<InputBox
id="key-name"
name="key-name"
label="Key Name"

9
portal-ui/src/screens/Console/KMS/DeleteKMSModal.tsx
View File

@@ -15,14 +15,13 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState, Fragment } from "react";
import { ConfirmDeleteIcon, Grid, InputBox } from "mds";
import { ErrorResponseHandler } from "../../../common/types";
import useApi from "../Common/Hooks/useApi";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
import { setErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import useApi from "../Common/Hooks/useApi";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
import WarningMessage from "../Common/WarningMessage/WarningMessage";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { ConfirmDeleteIcon, Grid } from "mds";
interface IDeleteKMSModalProps {
closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -80,7 +79,7 @@ const DeleteKMSModal = ({
</Grid>
To continue please type <b>{selectedItem}</b> in the box.
<Grid item xs={12}>
<InputBoxWrapper
<InputBox
id="retype-key"
name="retype-key"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {

84
portal-ui/src/screens/Console/KMS/ImportKey.tsx
View File

@@ -19,22 +19,22 @@ import {
AddAccessRuleIcon,
BackLink,
Button,
CodeEditor,
FormLayout,
Grid,
InputBox,
PageLayout,
} from "mds";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { useNavigate } from "react-router-dom";
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
import { ErrorResponseHandler } from "../../../common/types";
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "../../../store";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import useApi from "../Common/Hooks/useApi";
import KMSHelpBox from "./KMSHelpbox";
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
export const emptyContent = '{\n "bytes": ""\n}';
@@ -107,48 +107,42 @@ const ImportKey = () => {
importRecord(e);
}}
>
<Grid container>
<Grid item xs={12}>
<InputBoxWrapper
id="key-name"
name="key-name"
label="Key Name"
autoFocus={true}
value={keyName}
error={validateKeyName(keyName)}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setKeyName(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<CodeMirrorWrapper
label={"Set key Content"}
value={keyContent}
onChange={(value) => {
setKeyContent(value);
}}
editorHeight={"350px"}
/>
</Grid>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"clear"}
type="button"
variant="regular"
onClick={resetForm}
label={"Clear"}
/>
<InputBox
id="key-name"
name="key-name"
label="Key Name"
autoFocus={true}
value={keyName}
error={validateKeyName(keyName)}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setKeyName(e.target.value);
}}
/>
<CodeEditor
label={"Set key Content"}
value={keyContent}
onChange={(value) => {
setKeyContent(value);
}}
editorHeight={"350px"}
/>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"clear"}
type="button"
variant="regular"
onClick={resetForm}
label={"Clear"}
/>
<Button
id={"import-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || !validSave}
label={"Import"}
/>
</Grid>
<Button
id={"import-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || !validSave}
label={"Import"}
/>
</Grid>
</form>
</FormLayout>

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

@@ -15,23 +15,12 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import Grid from "@mui/material/Grid";
import createStyles from "@mui/styles/createStyles";
import { Button, EditIcon } from "mds";
import makeStyles from "@mui/styles/makeStyles";
import { Theme } from "@mui/material/styles";
import {
containerForHeader,
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import { Button, EditIcon, FormLayout, Grid, InputBox, Switch } from "mds";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { useAppDispatch } from "../../../store";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import { downloadObject } from "./utils";
import { BucketObject } from "api/consoleApi";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
interface IRenameLongFilename {
open: boolean;
@@ -42,15 +31,6 @@ interface IRenameLongFilename {
closeModal: () => void;
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
...modalStyleUtils,
...formFieldStyles,
...spacingUtils,
...containerForHeader,
}),
);
const RenameLongFileName = ({
open,
closeModal,
@@ -59,7 +39,6 @@ const RenameLongFileName = ({
actualInfo,
bucketName,
}: IRenameLongFilename) => {
const classes = useStyles();
const dispatch = useAppDispatch();
const [newFileName, setNewFileName] = useState<string>(currentItem);
@@ -93,42 +72,36 @@ const RenameLongFileName = ({
doDownload(e);
}}
>
<Grid container>
<Grid item xs={12} className={classes.modalFormScrollable}>
<Grid item xs={12} className={classes.formFieldRow}>
<InputBoxWrapper
id="download-filename"
name="download-filename"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setNewFileName(event.target.value);
}}
label=""
type={"text"}
value={newFileName}
error={
newFileName.length > 200 && !acceptLongName
? "Filename should be less than 200 characters long."
: ""
}
/>
</Grid>
<Grid item xs={12} className={classes.formFieldRow}>
<FormSwitchWrapper
value="acceptLongName"
id="acceptLongName"
name="acceptLongName"
checked={acceptLongName}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setAcceptLongName(event.target.checked);
if (event.target.checked) {
setNewFileName(currentItem);
}
}}
label={"Use Original Name"}
/>
</Grid>
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<FormLayout withBorders={false} containerPadding={false}>
<InputBox
id="download-filename"
name="download-filename"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setNewFileName(event.target.value);
}}
label=""
type={"text"}
value={newFileName}
error={
newFileName.length > 200 && !acceptLongName
? "Filename should be less than 200 characters long."
: ""
}
/>
<Switch
value="acceptLongName"
id="acceptLongName"
name="acceptLongName"
checked={acceptLongName}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setAcceptLongName(event.target.checked);
if (event.target.checked) {
setNewFileName(currentItem);
}
}}
label={"Use Original Name"}
/>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"download-file"}
type="submit"
@@ -138,7 +111,7 @@ const RenameLongFileName = ({
label={"Download File"}
/>
</Grid>
</Grid>
</FormLayout>
</form>
</ModalWrapper>
);

16
portal-ui/src/screens/Console/Tools/KeyRevealer.tsx
View File

@@ -15,9 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { Box } from "@mui/material";
import { Button, CopyIcon } from "mds";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { Button, CopyIcon, InputBox, Box, breakPoints } from "mds";
const KeyRevealer = ({ value }: { value: string }) => {
const [shown, setShown] = useState<boolean>(false);
@@ -27,13 +25,13 @@ const KeyRevealer = ({ value }: { value: string }) => {
sx={{
display: "flex",
alignItems: "center",
flexFlow: {
sm: "row",
xs: "column",
flexFlow: "row",
[`@media (max-width: ${breakPoints.sm}px)`]: {
flexFlow: "column",
},
}}
>
<InputBoxWrapper
<InputBox
id="inspect-dec-key"
name="inspect-dec-key"
placeholder=""
@@ -42,9 +40,7 @@ const KeyRevealer = ({ value }: { value: string }) => {
onChange={() => {}}
value={value}
overlayIcon={<CopyIcon />}
extraInputProps={{
readOnly: true,
}}
readOnly={true}
overlayAction={() => navigator.clipboard.writeText(value)}
/>