Skip to content

Commit 073270c

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 073270c

File tree

2 files changed

+162
-45
lines changed

2 files changed

+162
-45
lines changed

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

Lines changed: 154 additions & 45 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";
@@ -63,12 +68,14 @@ const IDPLDAPConfigurationDetails = () => {
6368
const [isEnabled, setIsEnabled] = useState<boolean>(false);
6469
const [hasConfiguration, setHasConfiguration] = useState<boolean>(false);
6570
const [fields, setFields] = useState<any>({});
71+
const [overrideFields, setOverrideFields] = useState<any>({});
6672
const [record, setRecord] = useState<ConfigurationKV[] | undefined>(
6773
undefined,
6874
);
6975
const [editMode, setEditMode] = useState<boolean>(false);
7076
const [resetOpen, setResetOpen] = useState<boolean>(false);
7177
const [curTab, setCurTab] = useState<string>("configuration");
78+
const [envOverride, setEnvOverride] = useState<boolean>(false);
7279

7380
const toggleEditMode = () => {
7481
if (editMode && record) {
@@ -79,13 +86,20 @@ const IDPLDAPConfigurationDetails = () => {
7986

8087
const parseFields = (record: ConfigurationKV[]) => {
8188
let fields: any = {};
89+
let ovrFlds: any = {};
8290
if (record && record.length > 0) {
8391
const enabled = record.find((item: any) => item.key === "enable");
8492

8593
let totalCoincidences = 0;
94+
let totalOverride = 0;
8695

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

90104
if (
91105
enabledConfigLDAP.includes(item.key) &&
@@ -96,16 +110,27 @@ const IDPLDAPConfigurationDetails = () => {
96110
) {
97111
totalCoincidences++;
98112
}
113+
114+
if (enabledConfigLDAP.includes(item.key) && item.env_override) {
115+
totalOverride++;
116+
}
99117
});
100-
const hasConfig = totalCoincidences === enabledConfigLDAP.length;
101-
if (hasConfig && enabled && enabled.value !== "off") {
118+
119+
const hasConfig = totalCoincidences !== 0;
120+
121+
if (hasConfig && ((enabled && enabled.value !== "off") || !enabled)) {
102122
setIsEnabled(true);
103123
} else {
104124
setIsEnabled(false);
105125
}
106126

127+
if (totalOverride !== 0) {
128+
setEnvOverride(true);
129+
}
130+
107131
setHasConfiguration(hasConfig);
108132
}
133+
setOverrideFields(ovrFlds);
109134
setFields(fields);
110135
};
111136

@@ -281,22 +306,41 @@ const IDPLDAPConfigurationDetails = () => {
281306
actions={
282307
!editMode ? (
283308
<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 && (
309+
<Tooltip
310+
tooltip={
311+
envOverride
312+
? "Configuration cannot be edited in this module as LDAP environment variables are set for this MinIO instance."
313+
: ""
314+
}
315+
>
294316
<Button
295-
id={"is-configuration-enabled"}
296-
onClick={() => toggleConfiguration(!isEnabled)}
297-
label={isEnabled ? "Disable LDAP" : "Enable LDAP"}
298-
variant={isEnabled ? "secondary" : "regular"}
317+
id={"edit"}
318+
type="button"
319+
variant={"callAction"}
320+
icon={<EditIcon />}
321+
onClick={toggleEditMode}
322+
label={"Edit Configuration"}
323+
disabled={loading || envOverride}
299324
/>
325+
</Tooltip>
326+
{hasConfiguration && (
327+
<Tooltip
328+
tooltip={
329+
envOverride
330+
? "Configuration cannot be disabled / enabled in this module as LDAP environment variables are set for this MinIO instance."
331+
: ""
332+
}
333+
>
334+
<Button
335+
id={"is-configuration-enabled"}
336+
onClick={() => toggleConfiguration(!isEnabled)}
337+
label={
338+
isEnabled ? "Disable LDAP" : "Enable LDAP"
339+
}
340+
variant={isEnabled ? "secondary" : "regular"}
341+
disabled={envOverride}
342+
/>
343+
</Tooltip>
300344
)}
301345
<Button
302346
id={"refresh-idp-config"}
@@ -337,6 +381,27 @@ const IDPLDAPConfigurationDetails = () => {
337381
/>
338382
}
339383
>
384+
{editMode && hasConfiguration ? (
385+
<Box sx={{ marginBottom: 15 }}>
386+
<HelpBox
387+
title={
388+
<Box
389+
style={{
390+
display: "flex",
391+
justifyContent: "space-between",
392+
alignItems: "center",
393+
flexGrow: 1,
394+
}}
395+
>
396+
Lookup Bind Password must be re-entered to
397+
change LDAP configurations
398+
</Box>
399+
}
400+
iconComponent={<WarnIcon />}
401+
help={null}
402+
/>
403+
</Box>
404+
) : null}
340405
{Object.entries(formFields).map(([key, value]) =>
341406
renderFormField(key, value),
342407
)}
@@ -349,7 +414,7 @@ const IDPLDAPConfigurationDetails = () => {
349414
gap: "15px",
350415
}}
351416
>
352-
{editMode && (
417+
{editMode && hasConfiguration && (
353418
<Button
354419
id={"clear"}
355420
type="button"
@@ -358,26 +423,22 @@ const IDPLDAPConfigurationDetails = () => {
358423
label={"Reset Configuration"}
359424
/>
360425
)}
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-
)}
426+
<Button
427+
id={"cancel"}
428+
type="button"
429+
variant="regular"
430+
onClick={toggleEditMode}
431+
label={"Cancel"}
432+
/>
433+
<Button
434+
id={"save-key"}
435+
type="submit"
436+
variant="callAction"
437+
color="primary"
438+
disabled={loading || !validSave()}
439+
label={"Save"}
440+
onClick={saveRecord}
441+
/>
381442
</Box>
382443
</FormLayout>
383444
</Fragment>
@@ -404,13 +465,61 @@ const IDPLDAPConfigurationDetails = () => {
404465
{hasConfiguration && (
405466
<Fragment>
406467
{Object.entries(formFields).map(
407-
([key, value]) => (
408-
<LabelValuePair
409-
key={key}
410-
label={value.label}
411-
value={fields[key] ? fields[key] : ""}
412-
/>
413-
),
468+
([key, value]) => {
469+
if (!value.editOnly) {
470+
let label: React.ReactNode = value.label;
471+
let val: React.ReactNode = fields[key]
472+
? fields[key]
473+
: "";
474+
475+
if (overrideFields[key]) {
476+
label = (
477+
<Box
478+
sx={{
479+
display: "flex",
480+
alignItems: "center",
481+
gap: 5,
482+
"& .min-icon": {
483+
height: 20,
484+
width: 20,
485+
},
486+
"& span": {
487+
height: 20,
488+
display: "flex",
489+
alignItems: "center",
490+
},
491+
}}
492+
>
493+
<span>{value.label}</span>
494+
<Tooltip
495+
tooltip={`This value is set from the ${overrideFields[key]} environment variable`}
496+
placement={"right"}
497+
>
498+
<span className={"muted"}>
499+
<ConsoleIcon />
500+
</span>
501+
</Tooltip>
502+
</Box>
503+
);
504+
505+
val = (
506+
<i>
507+
<span className={"muted"}>
508+
{val}
509+
</span>
510+
</i>
511+
);
512+
}
513+
return (
514+
<ValuePair
515+
key={key}
516+
label={label}
517+
value={val}
518+
/>
519+
);
520+
}
521+
return null;
522+
},
414523
)}
415524
</Fragment>
416525
)}

‎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)