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

Migrated OpenID module components to mds (#2925)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-07-06 14:14:10 -06:00
committed by GitHub
parent c96c95924c
commit 803ffe2960
5 changed files with 155 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
View File

@@ -15,28 +15,26 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { 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 } from "@mui/material";
import {
formFieldStyles,
modalBasic,
} from "../Common/FormComponents/common/styleLibrary";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { BackLink, Button, PageLayout } from "mds";
BackLink,
Button,
FormLayout,
Grid,
InputBox,
PageLayout,
SectionTitle,
Switch,
} from "mds";
import { useNavigate } from "react-router-dom";
import { ErrorResponseHandler } from "../../../common/types";
import { useAppDispatch } from "../../../store";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import {
setErrorSnackMessage,
setHelpName,
setServerNeedsRestart,
} from "../../../systemSlice";
import useApi from "../Common/Hooks/useApi";
import SectionTitle from "../Common/SectionTitle";
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
@@ -51,14 +49,7 @@ type AddIDPConfigurationProps = {
endpoint: string;
};
const styles = (theme: Theme) =>
createStyles({
...formFieldStyles,
...modalBasic,
});
const AddIDPConfiguration = ({
classes,
icon,
helpBox,
header,
@@ -132,7 +123,7 @@ const AddIDPConfiguration = ({
switch (value.type) {
case "toggle":
return (
<FormSwitchWrapper
<Switch
indicatorLabels={["Enabled", "Disabled"]}
checked={fields[key] === "on" ? true : false}
value={"is-field-enabled"}
@@ -148,7 +139,7 @@ const AddIDPConfiguration = ({
);
default:
return (
<InputBoxWrapper
<InputBox
id={key}
required={value.required}
name={key}
@@ -178,76 +169,45 @@ const AddIDPConfiguration = ({
actions={<HelpMenu />}
/>
<PageLayout>
<Box
sx={{
display: "grid",
padding: "25px",
gap: "25px",
gridTemplateColumns: {
md: "2fr 1.2fr",
xs: "1fr",
},
border: "1px solid #eaeaea",
}}
>
<Box>
<SectionTitle icon={icon}>{title}</SectionTitle>
<form
noValidate
autoComplete="off"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
addRecord(e);
}}
>
<Grid container item spacing="20" sx={{ marginTop: 1 }}>
<Grid xs={12} item>
{Object.entries(extraFormFields).map(([key, value]) => (
<Grid
item
xs={12}
className={classes.formFieldRow}
key={key}
>
{renderFormField(key, value)}
</Grid>
))}
<Grid item xs={12} textAlign={"right"}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
marginTop: "20px",
gap: "15px",
}}
>
<Button
id={"clear"}
type="button"
variant="regular"
onClick={resetForm}
label={"Clear"}
/>
<FormLayout helpBox={helpBox}>
<SectionTitle icon={icon}>{title}</SectionTitle>
<form
noValidate
autoComplete="off"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
addRecord(e);
}}
>
<Grid container>
<Grid xs={12} item>
{Object.entries(extraFormFields).map(([key, value]) =>
renderFormField(key, value)
)}
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"clear"}
type="button"
variant="regular"
onClick={resetForm}
label={"Clear"}
/>
<Button
id={"save-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || !validSave()}
label={"Save"}
/>
</Box>
</Grid>
<Button
id={"save-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || !validSave()}
label={"Save"}
/>
</Grid>
</Grid>
</form>
</Box>
{helpBox}
</Box>
</Grid>
</form>
</FormLayout>
</PageLayout>
</Grid>
);
};
export default withStyles(styles)(AddIDPConfiguration);
export default AddIDPConfiguration;

20
portal-ui/src/screens/Console/IDP/AddIDPConfigurationHelpbox.tsx
View File

@@ -1,7 +1,21 @@
import React, { Fragment } from "react";
// This file is part of MinIO Console Server
// Copyright (c) 2023 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 { Box } from "@mui/material";
import { HelpIconFilled } from "mds";
import React, { Fragment } from "react";
import { HelpIconFilled, Box } from "mds";
interface IContent {
icon: React.ReactNode;

14
portal-ui/src/screens/Console/IDP/DeleteIDPConfigurationModal.tsx
View File

@@ -14,18 +14,16 @@
// 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 { DialogContentText } from "@mui/material";
import { ErrorResponseHandler } from "../../../common/types";
import useApi from "../Common/Hooks/useApi";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
import React, { Fragment } from "react";
import { ConfirmDeleteIcon } from "mds";
import {
setErrorSnackMessage,
setServerNeedsRestart,
} from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import { ErrorResponseHandler } from "../../../common/types";
import useApi from "../Common/Hooks/useApi";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
interface IDeleteIDPConfigurationModalProps {
closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -74,10 +72,10 @@ const DeleteIDPConfigurationModal = ({
disabled: deleteLoading,
}}
confirmationContent={
<DialogContentText>
<Fragment>
Are you sure you want to delete IDP <b>{displayName}</b>{" "}
configuration? <br />
</DialogContentText>
</Fragment>
}
/>
);

182
portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
View File

@@ -15,17 +15,6 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, 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 } from "@mui/material";
import {
containerForHeader,
formFieldStyles,
modalBasic,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
import {
BackLink,
Button,
@@ -33,9 +22,16 @@ import {
PageLayout,
RefreshIcon,
TrashIcon,
Box,
Grid,
Switch,
InputBox,
FormLayout,
breakPoints,
ScreenTitle,
} from "mds";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { useNavigate, useParams } from "react-router-dom";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types";
import { useAppDispatch } from "../../../store";
import {
@@ -43,17 +39,14 @@ import {
setHelpName,
setServerNeedsRestart,
} from "../../../systemSlice";
import useApi from "../Common/Hooks/useApi";
import api from "../../../common/api";
import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
import useApi from "../Common/Hooks/useApi";
import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
type IDPConfigurationDetailsProps = {
classes?: any;
formFields: object;
endpoint: string;
backLink: string;
@@ -63,23 +56,7 @@ type IDPConfigurationDetailsProps = {
icon: React.ReactNode;
};
const styles = (theme: Theme) =>
createStyles({
...formFieldStyles,
formFieldRow: {
...formFieldStyles.formFieldRow,
},
...modalBasic,
pageContainer: {
height: "100%",
},
...searchField,
...containerForHeader,
});
const IDPConfigurationDetails = ({
classes,
formFields,
endpoint,
backLink,
@@ -231,9 +208,9 @@ const IDPConfigurationDetails = ({
switch (value.type) {
case "toggle":
return (
<FormSwitchWrapper
<Switch
indicatorLabels={["Enabled", "Disabled"]}
checked={fields[key] === "on" ? true : false}
checked={fields[key] === "on"}
value={"is-field-enabled"}
id={"is-field-enabled"}
name={"is-field-enabled"}
@@ -248,7 +225,7 @@ const IDPConfigurationDetails = ({
);
default:
return (
<InputBoxWrapper
<InputBox
id={key}
required={value.required}
name={key}
@@ -269,18 +246,7 @@ const IDPConfigurationDetails = ({
const renderEditForm = () => {
return (
<Box
sx={{
display: "grid",
padding: "25px",
gap: "25px",
gridTemplateColumns: {
md: "2fr 1.2fr",
xs: "1fr",
},
border: "1px solid #eaeaea",
}}
>
<FormLayout helpBox={helpBox}>
<form
noValidate
autoComplete="off"
@@ -288,58 +254,45 @@ const IDPConfigurationDetails = ({
saveRecord(e);
}}
>
<Grid container item spacing="20" sx={{ marginTop: 1 }}>
<Grid xs={12} item className={classes.fieldBox}>
{Object.entries(formFields).map(([key, value]) => (
<Grid item xs={12} className={classes.formFieldRow} key={key}>
{renderFormField(key, value)}
</Grid>
))}
<Grid item xs={12} textAlign={"right"}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
marginTop: "20px",
gap: "15px",
}}
>
{editMode && (
<Button
id={"clear"}
type="button"
variant="regular"
onClick={resetForm}
label={"Clear"}
/>
)}
{editMode && (
<Button
id={"cancel"}
type="button"
variant="regular"
onClick={toggleEditMode}
label={"Cancel"}
/>
)}
{editMode && (
<Button
id={"save-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || loadingSave || !validSave()}
label={"Save"}
/>
)}
</Box>
<Grid container>
<Grid xs={12} item>
{Object.entries(formFields).map(([key, value]) =>
renderFormField(key, value)
)}
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
{editMode && (
<Button
id={"clear"}
type="button"
variant="regular"
onClick={resetForm}
label={"Clear"}
/>
)}
{editMode && (
<Button
id={"cancel"}
type="button"
variant="regular"
onClick={toggleEditMode}
label={"Cancel"}
/>
)}
{editMode && (
<Button
id={"save-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || loadingSave || !validSave()}
label={"Save"}
/>
)}
</Grid>
</Grid>
</Grid>
</form>
{helpBox}
</Box>
</FormLayout>
);
};
const renderViewForm = () => {
@@ -347,11 +300,15 @@ const IDPConfigurationDetails = ({
<Box
sx={{
display: "grid",
gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" },
gridAutoFlow: { xs: "dense", sm: "row" },
gridTemplateColumns: "1fr",
gridAutoFlow: "dense",
gap: 3,
padding: "15px",
border: "1px solid #eaeaea",
[`@media (min-width: ${breakPoints.sm}px)`]: {
gridTemplateColumns: "2fr 1fr",
gridAutoFlow: "row",
},
}}
>
{Object.entries(formFields).map(([key, value]) => (
@@ -370,7 +327,7 @@ const IDPConfigurationDetails = ({
}, [dispatch]);
return (
<Grid item xs={12}>
<Fragment>
{deleteOpen && configurationName && (
<DeleteIDPConfigurationModal
deleteOpen={deleteOpen}
@@ -379,15 +336,18 @@ const IDPConfigurationDetails = ({
closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
/>
)}
<PageHeaderWrapper
label={<BackLink onClick={() => navigate(backLink)} label={header} />}
actions={<HelpMenu />}
/>
<PageLayout className={classes.pageContainer}>
<Box>
<Grid item xs={12}>
<PageHeaderWrapper
label={<BackLink onClick={() => navigate(backLink)} label={header} />}
actions={<HelpMenu />}
/>
<PageLayout>
<ScreenTitle
icon={icon}
title={configurationName === "_" ? "Default" : configurationName}
title={
configurationName === "_" ? "Default" : configurationName || ""
}
subTitle={null}
actions={
<Fragment>
{configurationName !== "_" && (
@@ -425,13 +385,15 @@ const IDPConfigurationDetails = ({
/>
</Fragment>
}
sx={{
marginBottom: 15,
}}
/>
{editMode ? renderEditForm() : renderViewForm()}
</Box>
</PageLayout>
</Grid>
</PageLayout>
</Grid>
</Fragment>
);
};
export default withStyles(styles)(IDPConfigurationDetails);
export default IDPConfigurationDetails;

44
portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
View File

@@ -15,12 +15,11 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { useAppDispatch } from "../../../store";
import { AddIcon, Button, PageLayout, RefreshIcon, Grid, DataTable } from "mds";
import { useNavigate } from "react-router-dom";
import { api } from "api";
import { errorToHandler } from "api/errors";
import { useAppDispatch } from "../../../store";
import {
CONSOLE_UI_RESOURCE,
IAM_SCOPES,
@@ -30,28 +29,17 @@ import {
SecureComponent,
} from "../../../common/SecureComponent";
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
import { Grid } from "@mui/material";
import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import { AddIcon, Button, PageLayout, RefreshIcon } from "mds";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
import { api } from "api";
import { errorToHandler } from "api/errors";
type IDPConfigurationsProps = {
classes?: any;
idpType: string;
};
const styles = (theme: Theme) =>
createStyles({
...containerForHeader,
});
const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
const IDPConfigurations = ({ idpType }: IDPConfigurationsProps) => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
@@ -159,19 +147,15 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
label={`${idpType.toUpperCase()} Configurations`}
actions={<HelpMenu />}
/>
<PageLayout className={classes.pageContainer}>
<Grid container spacing={1}>
<PageLayout>
<Grid container>
<Grid
item
xs={12}
display={"flex"}
alignItems={"center"}
justifyContent={"flex-end"}
sx={{
"& button": {
marginLeft: "8px",
},
...actionsTray.actionsTray,
justifyContent: "flex-end",
gap: 8,
}}
>
<SecureComponent
@@ -206,13 +190,13 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item xs={12} className={classes.tableBlock}>
<Grid item xs={12}>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_CONFIG_UPDATE]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<TableWrapper
<DataTable
itemActions={tableActions}
columns={[
{ label: "Name", elementKey: "name" },
@@ -232,4 +216,4 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
);
};
export default withStyles(styles)(IDPConfigurations);
export default IDPConfigurations;