Skip to content

Commit 4147b06

Browse files
author
Benjamin Perez
committed
Improvements to LDAP Configuration page
- Fixed LDAP Enabled / Disabled calculation - Removed Password Label from main page to avoid confusion - Display LDAP ENV variables in case of configured Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 65b0bab commit 4147b06

File tree

2 files changed

+163
-47
lines changed

2 files changed

+163
-47
lines changed

‎portal-ui/src/screens/Console/IDP/LDAP/IDPLDAPConfigurationDetails.tsx‎

Lines changed: 155 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,20 @@ import React, { Fragment, useEffect, useState } from "react";
1818
import {
1919
Box,
2020
Button,
21+
ConsoleIcon,
2122
EditIcon,
2223
FormLayout,
2324
Grid,
25+
HelpBox,
2426
InputBox,
2527
Loader,
2628
PageLayout,
2729
RefreshIcon,
2830
Switch,
2931
Tabs,
32+
Tooltip,
33+
ValuePair,
34+
WarnIcon,
3035
} from "mds";
3136
import { api } from "api";
3237
import { ConfigurationKV } from "api/consoleApi";
@@ -40,7 +45,6 @@ import {
4045
} from "../../../../systemSlice";
4146
import { ldapFormFields, ldapHelpBoxContents } from "../utils";
4247
import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
43-
import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair";
4448
import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
4549
import AddIDPConfigurationHelpBox from "../AddIDPConfigurationHelpbox";
4650
import LDAPEntitiesQuery from "./LDAPEntitiesQuery";
@@ -63,12 +67,14 @@ const IDPLDAPConfigurationDetails = () => {
6367
const [isEnabled, setIsEnabled] = useState<boolean>(false);
6468
const [hasConfiguration, setHasConfiguration] = useState<boolean>(false);
6569
const [fields, setFields] = useState<any>({});
70+
const [overrideFields, setOverrideFields] = useState<any>({});
6671
const [record, setRecord] = useState<ConfigurationKV[] | undefined>(
6772
undefined,
6873
);
6974
const [editMode, setEditMode] = useState<boolean>(false);
7075
const [resetOpen, setResetOpen] = useState<boolean>(false);
7176
const [curTab, setCurTab] = useState<string>("configuration");
77+
const [envOverride, setEnvOverride] = useState<boolean>(false);
7278

7379
const toggleEditMode = () => {
7480
if (editMode && record) {
@@ -79,13 +85,20 @@ const IDPLDAPConfigurationDetails = () => {
7985

8086
const parseFields = (record: ConfigurationKV[]) => {
8187
let fields: any = {};
88+
let ovrFlds: any = {};
8289
if (record && record.length > 0) {
8390
const enabled = record.find((item: any) => item.key === "enable");
8491

8592
let totalCoincidences = 0;
93+
let totalOverride = 0;
8694

8795
record.forEach((item: any) => {
88-
fields[item.key] = item.value;
96+
if (item.env_override) {
97+
fields[item.key] = item.env_override.value;
98+
ovrFlds[item.key] = item.env_override.name;
99+
} else {
100+
fields[item.key] = item.value;
101+
}
89102

90103
if (
91104
enabledConfigLDAP.includes(item.key) &&
@@ -96,16 +109,27 @@ const IDPLDAPConfigurationDetails = () => {
96109
) {
97110
totalCoincidences++;
98111
}
112+
113+
if (enabledConfigLDAP.includes(item.key) && item.env_override) {
114+
totalOverride++;
115+
}
99116
});
100-
const hasConfig = totalCoincidences === enabledConfigLDAP.length;
101-
if (hasConfig && enabled && enabled.value !== "off") {
117+
118+
const hasConfig = totalCoincidences !== 0;
119+
120+
if (hasConfig && ((enabled && enabled.value !== "off") || !enabled)) {
102121
setIsEnabled(true);
103122
} else {
104123
setIsEnabled(false);
105124
}
106125

126+
if (totalOverride !== 0) {
127+
setEnvOverride(true);
128+
}
129+
107130
setHasConfiguration(hasConfig);
108131
}
132+
setOverrideFields(ovrFlds);
109133
setFields(fields);
110134
};
111135

@@ -281,22 +305,41 @@ const IDPLDAPConfigurationDetails = () => {
281305
actions={
282306
!editMode ? (
283307
<Fragment>
284-
<Button
285-
id={"edit"}
286-
type="button"
287-
variant={"callAction"}
288-
icon={<EditIcon />}
289-
onClick={toggleEditMode}
290-
label={"Edit Configuration"}
291-
disabled={loading}
292-
/>
293-
{hasConfiguration && (
308+
<Tooltip
309+
tooltip={
310+
envOverride
311+
? "Configuration cannot be edited in this module as LDAP environment variables are set for this MinIO instance."
312+
: ""
313+
}
314+
>
294315
<Button
295-
id={"is-configuration-enabled"}
296-
onClick={() => toggleConfiguration(!isEnabled)}
297-
label={isEnabled ? "Disable LDAP" : "Enable LDAP"}
298-
variant={isEnabled ? "secondary" : "regular"}
316+
id={"edit"}
317+
type="button"
318+
variant={"callAction"}
319+
icon={<EditIcon />}
320+
onClick={toggleEditMode}
321+
label={"Edit Configuration"}
322+
disabled={loading || envOverride}
299323
/>
324+
</Tooltip>
325+
{hasConfiguration && (
326+
<Tooltip
327+
tooltip={
328+
envOverride
329+
? "Configuration cannot be disabled / enabled in this module as LDAP environment variables are set for this MinIO instance."
330+
: ""
331+
}
332+
>
333+
<Button
334+
id={"is-configuration-enabled"}
335+
onClick={() => toggleConfiguration(!isEnabled)}
336+
label={
337+
isEnabled ? "Disable LDAP" : "Enable LDAP"
338+
}
339+
variant={isEnabled ? "secondary" : "regular"}
340+
disabled={envOverride}
341+
/>
342+
</Tooltip>
300343
)}
301344
<Button
302345
id={"refresh-idp-config"}
@@ -337,6 +380,27 @@ const IDPLDAPConfigurationDetails = () => {
337380
/>
338381
}
339382
>
383+
{editMode && hasConfiguration ? (
384+
<Box sx={{ marginBottom: 15 }}>
385+
<HelpBox
386+
title={
387+
<Box
388+
style={{
389+
display: "flex",
390+
justifyContent: "space-between",
391+
alignItems: "center",
392+
flexGrow: 1,
393+
}}
394+
>
395+
Lookup Bind Password must be re-entered to
396+
change LDAP configurations
397+
</Box>
398+
}
399+
iconComponent={<WarnIcon />}
400+
help={null}
401+
/>
402+
</Box>
403+
) : null}
340404
{Object.entries(formFields).map(([key, value]) =>
341405
renderFormField(key, value),
342406
)}
@@ -349,7 +413,7 @@ const IDPLDAPConfigurationDetails = () => {
349413
gap: "15px",
350414
}}
351415
>
352-
{editMode && (
416+
{editMode && hasConfiguration && (
353417
<Button
354418
id={"clear"}
355419
type="button"
@@ -358,26 +422,22 @@ const IDPLDAPConfigurationDetails = () => {
358422
label={"Reset Configuration"}
359423
/>
360424
)}
361-
{editMode && (
362-
<Button
363-
id={"cancel"}
364-
type="button"
365-
variant="regular"
366-
onClick={toggleEditMode}
367-
label={"Cancel"}
368-
/>
369-
)}
370-
{editMode && (
371-
<Button
372-
id={"save-key"}
373-
type="submit"
374-
variant="callAction"
375-
color="primary"
376-
disabled={loading || !validSave()}
377-
label={"Save"}
378-
onClick={saveRecord}
379-
/>
380-
)}
425+
<Button
426+
id={"cancel"}
427+
type="button"
428+
variant="regular"
429+
onClick={toggleEditMode}
430+
label={"Cancel"}
431+
/>
432+
<Button
433+
id={"save-key"}
434+
type="submit"
435+
variant="callAction"
436+
color="primary"
437+
disabled={loading || !validSave()}
438+
label={"Save"}
439+
onClick={saveRecord}
440+
/>
381441
</Box>
382442
</FormLayout>
383443
</Fragment>
@@ -397,20 +457,68 @@ const IDPLDAPConfigurationDetails = () => {
397457
},
398458
}}
399459
>
400-
<LabelValuePair
460+
<ValuePair
401461
label={"LDAP Enabled"}
402462
value={isEnabled ? "Yes" : "No"}
403463
/>
404464
{hasConfiguration && (
405465
<Fragment>
406466
{Object.entries(formFields).map(
407-
([key, value]) => (
408-
<LabelValuePair
409-
key={key}
410-
label={value.label}
411-
value={fields[key] ? fields[key] : ""}
412-
/>
413-
),
467+
([key, value]) => {
468+
if (!value.editOnly) {
469+
let label: React.ReactNode = value.label;
470+
let val: React.ReactNode = fields[key]
471+
? fields[key]
472+
: "";
473+
474+
if (overrideFields[key]) {
475+
label = (
476+
<Box
477+
sx={{
478+
display: "flex",
479+
alignItems: "center",
480+
gap: 5,
481+
"& .min-icon": {
482+
height: 20,
483+
width: 20,
484+
},
485+
"& span": {
486+
height: 20,
487+
display: "flex",
488+
alignItems: "center",
489+
},
490+
}}
491+
>
492+
<span>{value.label}</span>
493+
<Tooltip
494+
tooltip={`This value is set from the ${overrideFields[key]} environment variable`}
495+
placement={"right"}
496+
>
497+
<span className={"muted"}>
498+
<ConsoleIcon />
499+
</span>
500+
</Tooltip>
501+
</Box>
502+
);
503+
504+
val = (
505+
<i>
506+
<span className={"muted"}>
507+
{val}
508+
</span>
509+
</i>
510+
);
511+
}
512+
return (
513+
<ValuePair
514+
key={key}
515+
label={label}
516+
value={val}
517+
/>
518+
);
519+
}
520+
return null;
521+
},
414522
)}
415523
</Fragment>
416524
)}

‎portal-ui/src/screens/Console/IDP/utils.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ export const ldapFormFields = {
156156
tooltip: "Disable SSL certificate verification ",
157157
placeholder: "myldapserver.com:636",
158158
type: "toggle",
159+
editOnly: false,
159160
},
160161
server_addr: {
161162
required: true,
@@ -166,6 +167,7 @@ export const ldapFormFields = {
166167
tooltip: 'AD/LDAP server address e.g. "myldapserver.com:636"',
167168
placeholder: "myldapserver.com:636",
168169
type: "text",
170+
editOnly: false,
169171
},
170172
lookup_bind_dn: {
171173
required: true,
@@ -177,6 +179,7 @@ export const ldapFormFields = {
177179
"DN (Distinguished Name) for LDAP read-only service account used to perform DN and group lookups",
178180
placeholder: "cn=admin,dc=min,dc=io",
179181
type: "text",
182+
editOnly: false,
180183
},
181184
lookup_bind_password: {
182185
required: true,
@@ -188,6 +191,7 @@ export const ldapFormFields = {
188191
"Password for LDAP read-only service account used to perform DN and group lookups",
189192
placeholder: "admin",
190193
type: "password",
194+
editOnly: true,
191195
},
192196
user_dn_search_base_dn: {
193197
required: true,
@@ -198,6 +202,7 @@ export const ldapFormFields = {
198202
tooltip: "",
199203
placeholder: "DC=example,DC=net",
200204
type: "text",
205+
editOnly: false,
201206
},
202207
user_dn_search_filter: {
203208
required: true,
@@ -208,6 +213,7 @@ export const ldapFormFields = {
208213
tooltip: "",
209214
placeholder: "(sAMAcountName=%s)",
210215
type: "text",
216+
editOnly: false,
211217
},
212218
group_search_base_dn: {
213219
required: false,
@@ -216,6 +222,7 @@ export const ldapFormFields = {
216222
tooltip: "",
217223
placeholder: "ou=swengg,dc=min,dc=io",
218224
type: "text",
225+
editOnly: false,
219226
},
220227
group_search_filter: {
221228
required: false,
@@ -224,5 +231,6 @@ export const ldapFormFields = {
224231
tooltip: "",
225232
placeholder: "(&(objectclass=groupofnames)(member=%d))",
226233
type: "text",
234+
editOnly: false,
227235
},
228236
};

0 commit comments

Comments
 (0)