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

Migrated remaining LDAP subcomponents to mds (#2926)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-07-06 22:21:19 -06:00
committed by GitHub
parent 803ffe2960
commit b975871e9d
2 changed files with 190 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
portal-ui/src/screens/Console/IDP/LDAP/IDPLDAPConfigurationDetails.tsx
View File

@@ -25,7 +25,12 @@ import {
Loader, Loader,
PageLayout, PageLayout,
RefreshIcon, RefreshIcon,
Switch,
Tabs,
} from "mds"; } from "mds";
import { api } from "api";
import { ConfigurationKV } from "api/consoleApi";
import { errorToHandler } from "api/errors";
import { useAppDispatch } from "../../../../store"; import { useAppDispatch } from "../../../../store";
import { import {
setErrorSnackMessage, setErrorSnackMessage,
@@ -33,20 +38,14 @@ import {
setServerNeedsRestart, setServerNeedsRestart,
setSnackBarMessage, setSnackBarMessage,
} from "../../../../systemSlice"; } from "../../../../systemSlice";
import { ldapFormFields, ldapHelpBoxContents } from "../utils";
import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle"; import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
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 { ldapFormFields, ldapHelpBoxContents } from "../utils";
import AddIDPConfigurationHelpBox from "../AddIDPConfigurationHelpbox"; import AddIDPConfigurationHelpBox from "../AddIDPConfigurationHelpbox";
import LDAPEntitiesQuery from "./LDAPEntitiesQuery"; import LDAPEntitiesQuery from "./LDAPEntitiesQuery";
import ResetConfigurationModal from "../../EventDestinations/CustomForms/ResetConfigurationModal"; import ResetConfigurationModal from "../../EventDestinations/CustomForms/ResetConfigurationModal";
import { TabPanel } from "../../../shared/tabs";
import TabSelector from "../../Common/TabSelector/TabSelector";
import HelpMenu from "../../HelpMenu"; import HelpMenu from "../../HelpMenu";
import { api } from "api";
import { ConfigurationKV } from "api/consoleApi";
import { errorToHandler } from "api/errors";
const enabledConfigLDAP = [ const enabledConfigLDAP = [
"server_addr", "server_addr",
@@ -70,7 +69,7 @@ const IDPLDAPConfigurationDetails = () => {
); );
const [editMode, setEditMode] = useState<boolean>(false); const [editMode, setEditMode] = useState<boolean>(false);
const [resetOpen, setResetOpen] = useState<boolean>(false); const [resetOpen, setResetOpen] = useState<boolean>(false);
const [curTab, setCurTab] = useState<number>(0); const [curTab, setCurTab] = useState<string>("configuration");
const toggleEditMode = () => { const toggleEditMode = () => {
if (editMode && record) { if (editMode && record) {
@@ -218,23 +217,21 @@ const IDPLDAPConfigurationDetails = () => {
switch (value.type) { switch (value.type) {
case "toggle": case "toggle":
return ( return (
<Box className={"inputItem"}> <Switch
<FormSwitchWrapper key={key}
key={key} indicatorLabels={["Enabled", "Disabled"]}
indicatorLabels={["Enabled", "Disabled"]} checked={fields[key] === "on"}
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"} label={value.label}
label={value.label} tooltip={value.tooltip}
tooltip={value.tooltip} onChange={(e) =>
onChange={(e) => setFields({ ...fields, [key]: e.target.checked ? "on" : "off" })
setFields({ ...fields, [key]: e.target.checked ? "on" : "off" }) }
} description=""
description="" disabled={!editMode}
disabled={!editMode} />
/>
</Box>
); );
default: default:
return ( return (
@@ -274,164 +271,182 @@ const IDPLDAPConfigurationDetails = () => {
)} )}
<PageHeaderWrapper label={"LDAP"} actions={<HelpMenu />} /> <PageHeaderWrapper label={"LDAP"} actions={<HelpMenu />} />
<PageLayout variant={"constrained"}> <PageLayout variant={"constrained"}>
<TabSelector <Tabs
selectedTab={curTab} horizontal
onChange={(newValue: number) => { options={[
setCurTab(newValue);
setEditMode(false);
}}
tabOptions={[
{ label: "Configuration" },
{ {
label: "Entities", tabConfig: { id: "configuration", label: "Configuration" },
disabled: !hasConfiguration || !isEnabled, content: (
},
]}
/>
<TabPanel index={0} value={curTab}>
<ScreenTitle
title={editMode ? "Edit Configuration" : ""}
actions={
!editMode ? (
<Fragment> <Fragment>
<Button <ScreenTitle
id={"edit"} title={editMode ? "Edit Configuration" : ""}
type="button" actions={
variant={"callAction"} !editMode ? (
icon={<EditIcon />} <Fragment>
onClick={toggleEditMode} <Button
label={"Edit Configuration"} id={"edit"}
disabled={loading} type="button"
/> variant={"callAction"}
{hasConfiguration && ( icon={<EditIcon />}
<Button onClick={toggleEditMode}
id={"is-configuration-enabled"} label={"Edit Configuration"}
onClick={() => toggleConfiguration(!isEnabled)} disabled={loading}
label={isEnabled ? "Disable LDAP" : "Enable LDAP"} />
variant={isEnabled ? "secondary" : "regular"} {hasConfiguration && (
/> <Button
)} id={"is-configuration-enabled"}
<Button onClick={() => toggleConfiguration(!isEnabled)}
id={"refresh-idp-config"} label={isEnabled ? "Disable LDAP" : "Enable LDAP"}
onClick={() => setLoading(true)} variant={isEnabled ? "secondary" : "regular"}
label={"Refresh"} />
icon={<RefreshIcon />} )}
/> <Button
</Fragment> id={"refresh-idp-config"}
) : null onClick={() => setLoading(true)}
} label={"Refresh"}
/> icon={<RefreshIcon />}
<br /> />
{loading ? ( </Fragment>
<Box ) : null
sx={{ display: "flex", justifyContent: "center", marginTop: 10 }}
>
<Loader />
</Box>
) : (
<Fragment>
{editMode ? (
<Fragment>
<FormLayout
helpBox={
<AddIDPConfigurationHelpBox
helpText={"Learn more about LDAP Configurations"}
contents={ldapHelpBoxContents}
docLink={
"https://min.io/docs/minio/linux/operations/external-iam.html?ref=con#minio-external-iam-ad-ldap"
}
docText={"Learn more about LDAP Configurations"}
/>
} }
> />
{Object.entries(formFields).map(([key, value]) => <br />
renderFormField(key, value) {loading ? (
)}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", justifyContent: "center",
justifyContent: "flex-end", marginTop: 10,
marginTop: "20px",
gap: "15px",
}} }}
> >
{editMode && ( <Loader />
<Button
id={"clear"}
type="button"
variant="secondary"
onClick={() => setResetOpen(true)}
label={"Reset Configuration"}
/>
)}
{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 || !validSave()}
label={"Save"}
onClick={saveRecord}
/>
)}
</Box> </Box>
</FormLayout> ) : (
<Fragment>
{editMode ? (
<Fragment>
<FormLayout
helpBox={
<AddIDPConfigurationHelpBox
helpText={
"Learn more about LDAP Configurations"
}
contents={ldapHelpBoxContents}
docLink={
"https://min.io/docs/minio/linux/operations/external-iam.html?ref=con#minio-external-iam-ad-ldap"
}
docText={"Learn more about LDAP Configurations"}
/>
}
>
{Object.entries(formFields).map(([key, value]) =>
renderFormField(key, value)
)}
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
marginTop: "20px",
gap: "15px",
}}
>
{editMode && (
<Button
id={"clear"}
type="button"
variant="secondary"
onClick={() => setResetOpen(true)}
label={"Reset Configuration"}
/>
)}
{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 || !validSave()}
label={"Save"}
onClick={saveRecord}
/>
)}
</Box>
</FormLayout>
</Fragment>
) : (
<Fragment>
<Box
sx={{
display: "grid",
gridTemplateColumns: "1fr",
gridAutoFlow: "dense",
gap: 3,
padding: "15px",
border: "1px solid #eaeaea",
[`@media (min-width: 576px)`]: {
gridTemplateColumns: "2fr 1fr",
gridAutoFlow: "row",
},
}}
>
<LabelValuePair
label={"LDAP Enabled"}
value={isEnabled ? "Yes" : "No"}
/>
{hasConfiguration && (
<Fragment>
{Object.entries(formFields).map(
([key, value]) => (
<LabelValuePair
key={key}
label={value.label}
value={fields[key] ? fields[key] : ""}
/>
)
)}
</Fragment>
)}
</Box>
</Fragment>
)}
</Fragment>
)}
</Fragment> </Fragment>
) : ( ),
},
{
tabConfig: {
id: "entities",
label: "Entities",
disabled: !hasConfiguration || !isEnabled,
},
content: (
<Fragment> <Fragment>
<Box {hasConfiguration && (
sx={{ <Box>
display: "grid", <LDAPEntitiesQuery />
gridTemplateColumns: "1fr", </Box>
gridAutoFlow: "dense", )}
gap: 3,
padding: "15px",
border: "1px solid #eaeaea",
[`@media (min-width: 576px)`]: {
gridTemplateColumns: "2fr 1fr",
gridAutoFlow: "row",
},
}}
>
<LabelValuePair
label={"LDAP Enabled"}
value={isEnabled ? "Yes" : "No"}
/>
{hasConfiguration && (
<Fragment>
{Object.entries(formFields).map(([key, value]) => (
<LabelValuePair
key={key}
label={value.label}
value={fields[key] ? fields[key] : ""}
/>
))}
</Fragment>
)}
</Box>
</Fragment> </Fragment>
)} ),
</Fragment> },
)} ]}
</TabPanel> currentTabOrPath={curTab}
<TabPanel index={1} value={curTab}> onTabClick={(newTab) => {
{hasConfiguration && ( setCurTab(newTab);
<Box> setEditMode(false);
<LDAPEntitiesQuery /> }}
</Box> />
)}
</TabPanel>
</PageLayout> </PageLayout>
</Grid> </Grid>
); );

8
portal-ui/src/screens/Console/IDP/LDAP/LDAPEntitiesQuery.tsx
View File

@@ -15,8 +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, useState } from "react"; import React, { Fragment, useState } from "react";
import { setErrorSnackMessage } from "../../../../systemSlice";
import { AppState, useAppDispatch } from "../../../../store";
import { import {
AddIcon, AddIcon,
Box, Box,
@@ -29,13 +27,15 @@ import {
SectionTitle, SectionTitle,
TimeIcon, TimeIcon,
} from "mds"; } from "mds";
import PolicySelectors from "../../Policies/PolicySelectors";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import LDAPResultsBlock from "./LDAPResultsBlock";
import { api } from "api"; import { api } from "api";
import { errorToHandler } from "api/errors"; import { errorToHandler } from "api/errors";
import { LdapEntities } from "api/consoleApi"; import { LdapEntities } from "api/consoleApi";
import { setErrorSnackMessage } from "../../../../systemSlice";
import { AppState, useAppDispatch } from "../../../../store";
import LDAPResultsBlock from "./LDAPResultsBlock";
import PolicySelectors from "../../Policies/PolicySelectors";
const LDAPEntitiesQuery = () => { const LDAPEntitiesQuery = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();