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/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState } from "react"; 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 { import {
formFieldStyles, BackLink,
modalBasic, Button,
} from "../Common/FormComponents/common/styleLibrary"; FormLayout,
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; Grid,
import { BackLink, Button, PageLayout } from "mds"; InputBox,
PageLayout,
SectionTitle,
Switch,
} from "mds";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ErrorResponseHandler } from "../../../common/types"; import { ErrorResponseHandler } from "../../../common/types";
import { useAppDispatch } from "../../../store"; import { useAppDispatch } from "../../../store";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { import {
setErrorSnackMessage, setErrorSnackMessage,
setHelpName, setHelpName,
setServerNeedsRestart, setServerNeedsRestart,
} from "../../../systemSlice"; } from "../../../systemSlice";
import useApi from "../Common/Hooks/useApi"; 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 PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu"; import HelpMenu from "../HelpMenu";
@@ -51,14 +49,7 @@ type AddIDPConfigurationProps = {
endpoint: string; endpoint: string;
}; };
const styles = (theme: Theme) =>
createStyles({
...formFieldStyles,
...modalBasic,
});
const AddIDPConfiguration = ({ const AddIDPConfiguration = ({
classes,
icon, icon,
helpBox, helpBox,
header, header,
@@ -132,7 +123,7 @@ const AddIDPConfiguration = ({
switch (value.type) { switch (value.type) {
case "toggle": case "toggle":
return ( return (
<FormSwitchWrapper <Switch
indicatorLabels={["Enabled", "Disabled"]} indicatorLabels={["Enabled", "Disabled"]}
checked={fields[key] === "on" ? true : false} checked={fields[key] === "on" ? true : false}
value={"is-field-enabled"} value={"is-field-enabled"}
@@ -148,7 +139,7 @@ const AddIDPConfiguration = ({
); );
default: default:
return ( return (
<InputBoxWrapper <InputBox
id={key} id={key}
required={value.required} required={value.required}
name={key} name={key}
@@ -178,76 +169,45 @@ const AddIDPConfiguration = ({
actions={<HelpMenu />} actions={<HelpMenu />}
/> />
<PageLayout> <PageLayout>
<Box <FormLayout helpBox={helpBox}>
sx={{ <SectionTitle icon={icon}>{title}</SectionTitle>
display: "grid", <form
padding: "25px", noValidate
gap: "25px", autoComplete="off"
gridTemplateColumns: { onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
md: "2fr 1.2fr", addRecord(e);
xs: "1fr", }}
}, >
border: "1px solid #eaeaea", <Grid container>
}} <Grid xs={12} item>
> {Object.entries(extraFormFields).map(([key, value]) =>
<Box> renderFormField(key, value)
<SectionTitle icon={icon}>{title}</SectionTitle> )}
<form <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
noValidate <Button
autoComplete="off" id={"clear"}
onSubmit={(e: React.FormEvent<HTMLFormElement>) => { type="button"
addRecord(e); variant="regular"
}} onClick={resetForm}
> label={"Clear"}
<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"}
/>
<Button <Button
id={"save-key"} id={"save-key"}
type="submit" type="submit"
variant="callAction" variant="callAction"
color="primary" color="primary"
disabled={loading || !validSave()} disabled={loading || !validSave()}
label={"Save"} label={"Save"}
/> />
</Box>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</form> </Grid>
</Box> </form>
{helpBox} </FormLayout>
</Box>
</PageLayout> </PageLayout>
</Grid> </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 React, { Fragment } from "react";
import { HelpIconFilled } from "mds"; import { HelpIconFilled, Box } from "mds";
interface IContent { interface IContent {
icon: React.ReactNode; 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 // 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/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react"; import React, { Fragment } 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 { ConfirmDeleteIcon } from "mds"; import { ConfirmDeleteIcon } from "mds";
import { import {
setErrorSnackMessage, setErrorSnackMessage,
setServerNeedsRestart, setServerNeedsRestart,
} from "../../../systemSlice"; } from "../../../systemSlice";
import { useAppDispatch } from "../../../store"; import { useAppDispatch } from "../../../store";
import { ErrorResponseHandler } from "../../../common/types";
import useApi from "../Common/Hooks/useApi";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
interface IDeleteIDPConfigurationModalProps { interface IDeleteIDPConfigurationModalProps {
closeDeleteModalAndRefresh: (refresh: boolean) => void; closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -74,10 +72,10 @@ const DeleteIDPConfigurationModal = ({
disabled: deleteLoading, disabled: deleteLoading,
}} }}
confirmationContent={ confirmationContent={
<DialogContentText> <Fragment>
Are you sure you want to delete IDP <b>{displayName}</b>{" "} Are you sure you want to delete IDP <b>{displayName}</b>{" "}
configuration? <br /> 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/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react"; 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 { import {
BackLink, BackLink,
Button, Button,
@@ -33,9 +22,16 @@ import {
PageLayout, PageLayout,
RefreshIcon, RefreshIcon,
TrashIcon, TrashIcon,
Box,
Grid,
Switch,
InputBox,
FormLayout,
breakPoints,
ScreenTitle,
} from "mds"; } from "mds";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types"; import { ErrorResponseHandler } from "../../../common/types";
import { useAppDispatch } from "../../../store"; import { useAppDispatch } from "../../../store";
import { import {
@@ -43,17 +39,14 @@ import {
setHelpName, setHelpName,
setServerNeedsRestart, setServerNeedsRestart,
} from "../../../systemSlice"; } from "../../../systemSlice";
import useApi from "../Common/Hooks/useApi";
import api from "../../../common/api"; import api from "../../../common/api";
import ScreenTitle from "../Common/ScreenTitle/ScreenTitle"; import useApi from "../Common/Hooks/useApi";
import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal"; import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair"; import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper"; import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu"; import HelpMenu from "../HelpMenu";
type IDPConfigurationDetailsProps = { type IDPConfigurationDetailsProps = {
classes?: any;
formFields: object; formFields: object;
endpoint: string; endpoint: string;
backLink: string; backLink: string;
@@ -63,23 +56,7 @@ type IDPConfigurationDetailsProps = {
icon: React.ReactNode; icon: React.ReactNode;
}; };
const styles = (theme: Theme) =>
createStyles({
...formFieldStyles,
formFieldRow: {
...formFieldStyles.formFieldRow,
},
...modalBasic,
pageContainer: {
height: "100%",
},
...searchField,
...containerForHeader,
});
const IDPConfigurationDetails = ({ const IDPConfigurationDetails = ({
classes,
formFields, formFields,
endpoint, endpoint,
backLink, backLink,
@@ -231,9 +208,9 @@ const IDPConfigurationDetails = ({
switch (value.type) { switch (value.type) {
case "toggle": case "toggle":
return ( return (
<FormSwitchWrapper <Switch
indicatorLabels={["Enabled", "Disabled"]} indicatorLabels={["Enabled", "Disabled"]}
checked={fields[key] === "on" ? true : false} checked={fields[key] === "on"}
value={"is-field-enabled"} value={"is-field-enabled"}
id={"is-field-enabled"} id={"is-field-enabled"}
name={"is-field-enabled"} name={"is-field-enabled"}
@@ -248,7 +225,7 @@ const IDPConfigurationDetails = ({
); );
default: default:
return ( return (
<InputBoxWrapper <InputBox
id={key} id={key}
required={value.required} required={value.required}
name={key} name={key}
@@ -269,18 +246,7 @@ const IDPConfigurationDetails = ({
const renderEditForm = () => { const renderEditForm = () => {
return ( return (
<Box <FormLayout helpBox={helpBox}>
sx={{
display: "grid",
padding: "25px",
gap: "25px",
gridTemplateColumns: {
md: "2fr 1.2fr",
xs: "1fr",
},
border: "1px solid #eaeaea",
}}
>
<form <form
noValidate noValidate
autoComplete="off" autoComplete="off"
@@ -288,58 +254,45 @@ const IDPConfigurationDetails = ({
saveRecord(e); saveRecord(e);
}} }}
> >
<Grid container item spacing="20" sx={{ marginTop: 1 }}> <Grid container>
<Grid xs={12} item className={classes.fieldBox}> <Grid xs={12} item>
{Object.entries(formFields).map(([key, value]) => ( {Object.entries(formFields).map(([key, value]) =>
<Grid item xs={12} className={classes.formFieldRow} key={key}> renderFormField(key, value)
{renderFormField(key, value)} )}
</Grid> <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
))} {editMode && (
<Grid item xs={12} textAlign={"right"}> <Button
<Box id={"clear"}
sx={{ type="button"
display: "flex", variant="regular"
alignItems: "center", onClick={resetForm}
justifyContent: "flex-end", label={"Clear"}
marginTop: "20px", />
gap: "15px", )}
}} {editMode && (
> <Button
{editMode && ( id={"cancel"}
<Button type="button"
id={"clear"} variant="regular"
type="button" onClick={toggleEditMode}
variant="regular" label={"Cancel"}
onClick={resetForm} />
label={"Clear"} )}
/> {editMode && (
)} <Button
{editMode && ( id={"save-key"}
<Button type="submit"
id={"cancel"} variant="callAction"
type="button" color="primary"
variant="regular" disabled={loading || loadingSave || !validSave()}
onClick={toggleEditMode} label={"Save"}
label={"Cancel"} />
/> )}
)}
{editMode && (
<Button
id={"save-key"}
type="submit"
variant="callAction"
color="primary"
disabled={loading || loadingSave || !validSave()}
label={"Save"}
/>
)}
</Box>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>
{helpBox} </FormLayout>
</Box>
); );
}; };
const renderViewForm = () => { const renderViewForm = () => {
@@ -347,11 +300,15 @@ const IDPConfigurationDetails = ({
<Box <Box
sx={{ sx={{
display: "grid", display: "grid",
gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" }, gridTemplateColumns: "1fr",
gridAutoFlow: { xs: "dense", sm: "row" }, gridAutoFlow: "dense",
gap: 3, gap: 3,
padding: "15px", padding: "15px",
border: "1px solid #eaeaea", border: "1px solid #eaeaea",
[`@media (min-width: ${breakPoints.sm}px)`]: {
gridTemplateColumns: "2fr 1fr",
gridAutoFlow: "row",
},
}} }}
> >
{Object.entries(formFields).map(([key, value]) => ( {Object.entries(formFields).map(([key, value]) => (
@@ -370,7 +327,7 @@ const IDPConfigurationDetails = ({
}, [dispatch]); }, [dispatch]);
return ( return (
<Grid item xs={12}> <Fragment>
{deleteOpen && configurationName && ( {deleteOpen && configurationName && (
<DeleteIDPConfigurationModal <DeleteIDPConfigurationModal
deleteOpen={deleteOpen} deleteOpen={deleteOpen}
@@ -379,15 +336,18 @@ const IDPConfigurationDetails = ({
closeDeleteModalAndRefresh={closeDeleteModalAndRefresh} closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
/> />
)} )}
<PageHeaderWrapper <Grid item xs={12}>
label={<BackLink onClick={() => navigate(backLink)} label={header} />} <PageHeaderWrapper
actions={<HelpMenu />} label={<BackLink onClick={() => navigate(backLink)} label={header} />}
/> actions={<HelpMenu />}
<PageLayout className={classes.pageContainer}> />
<Box> <PageLayout>
<ScreenTitle <ScreenTitle
icon={icon} icon={icon}
title={configurationName === "_" ? "Default" : configurationName} title={
configurationName === "_" ? "Default" : configurationName || ""
}
subTitle={null}
actions={ actions={
<Fragment> <Fragment>
{configurationName !== "_" && ( {configurationName !== "_" && (
@@ -425,13 +385,15 @@ const IDPConfigurationDetails = ({
/> />
</Fragment> </Fragment>
} }
sx={{
marginBottom: 15,
}}
/> />
{editMode ? renderEditForm() : renderViewForm()} {editMode ? renderEditForm() : renderViewForm()}
</Box> </PageLayout>
</PageLayout> </Grid>
</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/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react"; import React, { Fragment, useEffect, useState } from "react";
import { AddIcon, Button, PageLayout, RefreshIcon, Grid, DataTable } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { useAppDispatch } from "../../../store";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { api } from "api";
import { errorToHandler } from "api/errors";
import { useAppDispatch } from "../../../store";
import { import {
CONSOLE_UI_RESOURCE, CONSOLE_UI_RESOURCE,
IAM_SCOPES, IAM_SCOPES,
@@ -30,28 +29,17 @@ import {
SecureComponent, SecureComponent,
} from "../../../common/SecureComponent"; } from "../../../common/SecureComponent";
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice"; import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
import { Grid } from "@mui/material";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper"; import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import { AddIcon, Button, PageLayout, RefreshIcon } from "mds";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal"; import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper"; import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu"; import HelpMenu from "../HelpMenu";
import { api } from "api";
import { errorToHandler } from "api/errors";
type IDPConfigurationsProps = { type IDPConfigurationsProps = {
classes?: any;
idpType: string; idpType: string;
}; };
const styles = (theme: Theme) => const IDPConfigurations = ({ idpType }: IDPConfigurationsProps) => {
createStyles({
...containerForHeader,
});
const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -159,19 +147,15 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
label={`${idpType.toUpperCase()} Configurations`} label={`${idpType.toUpperCase()} Configurations`}
actions={<HelpMenu />} actions={<HelpMenu />}
/> />
<PageLayout>
<PageLayout className={classes.pageContainer}> <Grid container>
<Grid container spacing={1}>
<Grid <Grid
item item
xs={12} xs={12}
display={"flex"}
alignItems={"center"}
justifyContent={"flex-end"}
sx={{ sx={{
"& button": { ...actionsTray.actionsTray,
marginLeft: "8px", justifyContent: "flex-end",
}, gap: 8,
}} }}
> >
<SecureComponent <SecureComponent
@@ -206,13 +190,13 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
</TooltipWrapper> </TooltipWrapper>
</SecureComponent> </SecureComponent>
</Grid> </Grid>
<Grid item xs={12} className={classes.tableBlock}> <Grid item xs={12}>
<SecureComponent <SecureComponent
scopes={[IAM_SCOPES.ADMIN_CONFIG_UPDATE]} scopes={[IAM_SCOPES.ADMIN_CONFIG_UPDATE]}
resource={CONSOLE_UI_RESOURCE} resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }} errorProps={{ disabled: true }}
> >
<TableWrapper <DataTable
itemActions={tableActions} itemActions={tableActions}
columns={[ columns={[
{ label: "Name", elementKey: "name" }, { label: "Name", elementKey: "name" },
@@ -232,4 +216,4 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
); );
}; };
export default withStyles(styles)(IDPConfigurations); export default IDPConfigurations;