libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

restructure and add chooser when adding new

Browse source
This commit is contained in:
mfrances 2021-04-07 10:50:55 -04:00
parent 9e5104b668
commit 56a1b233d4
13 changed files with 1161 additions and 1118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/route-config.ts
View file

@ -226,6 +226,12 @@ export const routes: RoutesFn = (t: TFunction) => [
breadcrumb: null,
access: "view-realm",
},
{
path: "/:realm/user-federation/ldap/new",
component: UserFederationLdapSettings,
breadcrumb: t("common:settings"),
access: "view-realm",
},
{
path: "/:realm/user-federation/ldap/:id/:tab?",
component: UserFederationLdapSettings,
@ -238,12 +244,6 @@ export const routes: RoutesFn = (t: TFunction) => [
breadcrumb: t("common:mappingDetails"),
access: "view-realm",
},
{
path: "/:realm/user-federation/ldap/new",
component: UserFederationLdapSettings,
breadcrumb: t("common:settings"),
access: "view-realm",
},
{
path: "/:realm/",
component: DashboardSection,

6
src/user-federation/ldap/mappers/LdapMapperFullNameAttribute.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { Controller, UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperFullNameAttributeProps = {
form: UseFormMethods;
@ -18,9 +16,6 @@ export const LdapMapperFullNameAttribute = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("ldapFullNameAttribute")}
labelIcon={
@ -98,7 +93,6 @@ export const LdapMapperFullNameAttribute = ({
)}
></Controller>
</FormGroup>
</FormAccess>
</>
);
};

5
src/user-federation/ldap/mappers/LdapMapperHardcodedAttribute.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperHardcodedAttributeProps = {
form: UseFormMethods;
@ -18,8 +16,6 @@ export const LdapMapperHardcodedAttribute = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("userModelAttributeName")}
labelIcon={
@ -62,7 +58,6 @@ export const LdapMapperHardcodedAttribute = ({
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

6
src/user-federation/ldap/mappers/LdapMapperHardcodedLdapAttribute.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperHardcodedLdapAttributeProps = {
form: UseFormMethods;
@ -18,9 +16,6 @@ export const LdapMapperHardcodedLdapAttribute = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("ldapAttributeName")}
labelIcon={
@ -63,7 +58,6 @@ export const LdapMapperHardcodedLdapAttribute = ({
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

5
src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperHardcodedLdapGroupProps = {
form: UseFormMethods;
@ -18,8 +16,6 @@ export const LdapMapperHardcodedLdapGroup = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("group")}
labelIcon={
@ -41,7 +37,6 @@ export const LdapMapperHardcodedLdapGroup = ({
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

5
src/user-federation/ldap/mappers/LdapMapperHardcodedLdapRole.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperHardcodedLdapRoleProps = {
form: UseFormMethods;
@ -18,8 +16,6 @@ export const LdapMapperHardcodedLdapRole = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("common:role")}
labelIcon={
@ -41,7 +37,6 @@ export const LdapMapperHardcodedLdapRole = ({
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

15
src/user-federation/ldap/mappers/LdapMapperList.tsx
View file

@ -10,20 +10,17 @@ import {
useAdminClient,
asyncStateFetch,
} from "../../../context/auth/AdminClient";
import { Link, useParams, useRouteMatch } from "react-router-dom";
import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
export const LdapMapperList = () => {
const [mappers, setMappers] = useState<ComponentRepresentation[]>();
const history = useHistory();
const { t } = useTranslation("user-federation");
const adminClient = useAdminClient();
const { addAlert } = useAlerts();
const { url } = useRouteMatch();
const handleError = useErrorHandler();
const [key, setKey] = useState(0);
const { id } = useParams<{ id: string }>();
useEffect(() => {
@ -95,13 +92,7 @@ export const LdapMapperList = () => {
<Button
data-testid="createMapperBtn"
variant="primary"
// onClick={handleModalToggle}
onClick={() =>
addAlert(
t("Add functionality not implemented yet!"),
AlertVariant.success
)
}
onClick={() => history.push(`${url}/new`)}
>
{t("common:addMapper")}
</Button>

20
src/user-federation/ldap/mappers/LdapMapperMsadLdsUserAccount.tsx
View file

@ -1,20 +0,0 @@
import React from "react";
import { UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperMsadLdsUserAccountProps = {
form: UseFormMethods;
};
export const LdapMapperMsadLdsUserAccount = ({
form,
}: LdapMapperMsadLdsUserAccountProps) => {
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
</FormAccess>
</>
);
};

5
src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, Switch } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { Controller, UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperMsadUserAccountProps = {
form: UseFormMethods;
@ -18,8 +16,6 @@ export const LdapMapperMsadUserAccount = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("passwordPolicyHintsEnabled")}
labelIcon={
@ -48,7 +44,6 @@ export const LdapMapperMsadUserAccount = ({
)}
></Controller>
</FormGroup>
</FormAccess>
</>
);
};

9
src/user-federation/ldap/mappers/LdapMapperRoleGroup.tsx
View file

@ -9,9 +9,7 @@ import {
import React, { useState } from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { Controller, UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperRoleGroupProps = {
form: UseFormMethods;
@ -42,8 +40,6 @@ export const LdapMapperRoleGroup = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={isRole ? t("ldapRolesDn") : t("ldapGroupsDn")}
labelIcon={
@ -111,9 +107,7 @@ export const LdapMapperRoleGroup = ({
? helpText("roleObjectClassesHelp")
: helpText("groupObjectClassesHelp")
}
forLabel={
isRole ? t("roleObjectClasses") : t("groupObjectClasses")
}
forLabel={isRole ? t("roleObjectClasses") : t("groupObjectClasses")}
forID="kc-object-classes"
/>
}
@ -565,7 +559,6 @@ export const LdapMapperRoleGroup = ({
</FormGroup>
</>
)}
</FormAccess>
</>
);
};

5
src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx
View file

@ -2,9 +2,7 @@ import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { Controller, UseFormMethods } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useTranslation } from "react-i18next";
import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
export type LdapMapperUserAttributeProps = {
form: UseFormMethods;
@ -20,8 +18,6 @@ export const LdapMapperUserAttribute = ({
return (
<>
<FormAccess role="manage-realm" isHorizontal>
<LdapMapperGeneral form={form} />
<FormGroup
label={t("userModelAttribute")}
labelIcon={
@ -210,7 +206,6 @@ export const LdapMapperUserAttribute = ({
) : (
<></>
)}
</FormAccess>
</>
);
};

207
src/user-federation/ldap/mappers/LdapMappingDetails.tsx
View file

@ -4,20 +4,26 @@ import {
AlertVariant,
Button,
Form,
FormGroup,
PageSection,
Select,
SelectOption,
SelectVariant,
TextInput,
} from "@patternfly/react-core";
import { convertToFormValues } from "../../../util";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import { useAdminClient } from "../../../context/auth/AdminClient";
import { ViewHeader } from "../../../components/view-header/ViewHeader";
import { useHistory, useParams } from "react-router-dom";
import { useForm } from "react-hook-form";
import { Controller, useForm, useWatch } from "react-hook-form";
import { useAlerts } from "../../../components/alert/Alerts";
import { useTranslation } from "react-i18next";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { LdapMapperUserAttribute } from "./LdapMapperUserAttribute";
import { LdapMapperMsadUserAccount } from "./LdapMapperMsadUserAccount";
import { LdapMapperMsadLdsUserAccount } from "./LdapMapperMsadLdsUserAccount";
import { LdapMapperFullNameAttribute } from "./LdapMapperFullNameAttribute";
import { LdapMapperHardcodedLdapRole } from "./LdapMapperHardcodedLdapRole";
@ -26,7 +32,6 @@ import { LdapMapperHardcodedLdapAttribute } from "./LdapMapperHardcodedLdapAttri
import { LdapMapperHardcodedAttribute } from "./LdapMapperHardcodedAttribute";
import { LdapMapperRoleGroup } from "./LdapMapperRoleGroup";
import { useRealm } from "../../../context/realm-context/RealmContext";
export const LdapMappingDetails = () => {
@ -40,10 +45,14 @@ export const LdapMappingDetails = () => {
const { realm } = useRealm();
const id = mapperId;
const { t } = useTranslation("user-federation");
const helpText = useTranslation("user-federation-help").t;
const { addAlert } = useAlerts();
const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
useEffect(() => {
(async () => {
if (mapperId !== "new") {
if (mapperId) {
const fetchedMapper = await adminClient.components.findOne({ id });
if (fetchedMapper) {
@ -56,6 +65,7 @@ export const LdapMappingDetails = () => {
setupForm(fetchedMapper);
}
}
}
})();
}, []);
@ -78,13 +88,140 @@ export const LdapMappingDetails = () => {
),
AlertVariant.success
);
history.push(`/${realm}/user-federation`);
history.push(`/${realm}/user-federation/ldap/${mapper!.parentId}/mappers`);
};
const mapperType = useWatch({
control: form.control,
name: "choose-mapper-type",
});
const isNew = mapperId === "new";
return (
<>
<ViewHeader titleKey={mapper ? mapper.name! : ""} subKey="" />
<ViewHeader
titleKey={mapper ? mapper.name! : "Create new mapper"}
subKey=""
/>
<PageSection variant="light" isFilled>
<FormAccess role="manage-realm" isHorizontal>
{!isNew && (
<FormGroup label={t("common:id")} fieldId="kc-ldap-mapper-id">
<TextInput
isDisabled
type="text"
id="kc-ldap-mapper-id"
data-testid="ldap-mapper-id"
name="id"
ref={form.register}
/>
</FormGroup>
)}
<FormGroup
label={t("common:name")}
labelIcon={
<HelpItem
helpText={helpText("nameHelp")}
forLabel={t("common:name")}
forID="kc-ldap-mapper-name"
/>
}
fieldId="kc-ldap-mapper-name"
isRequired
>
<TextInput
isDisabled={!isNew}
isRequired
type="text"
id="kc-ldap-mapper-name"
data-testid="ldap-mapper-name"
name="name"
ref={form.register}
/>
</FormGroup>
{!isNew ? (
<FormGroup
label={t("common:mapperType")}
labelIcon={
<HelpItem
helpText={helpText("mapperTypeHelp")}
forLabel={t("common:mapperType")}
forID="kc-ldap-mapper-type"
/>
}
fieldId="kc-ldap-mapper-type"
isRequired
>
<TextInput
isDisabled={!isNew}
isRequired
type="text"
id="kc-ldap-mapper-type"
data-testid="ldap-mapper-type"
name="providerId"
ref={form.register}
/>
</FormGroup>
) : (
<FormGroup
label={t("common:mapperType")}
labelIcon={
<HelpItem
helpText={helpText("mapperTypeHelp")}
forLabel={t("common:mapperType")}
forID="kc-choose-mapper-type"
/>
}
fieldId="kc-choose-mapper-type"
isRequired
>
<Controller
name="choose-mapper-type"
defaultValue=" "
control={form.control}
render={({ onChange, value }) => (
<Select
toggleId="kc-choose-mapper-type"
required
onToggle={() =>
setIsMapperDropdownOpen(!isMapperDropdownOpen)
}
isOpen={isMapperDropdownOpen}
onSelect={(_, value) => {
onChange(value as string);
setIsMapperDropdownOpen(false);
}}
selections={value}
variant={SelectVariant.single}
// data-testid="choose-mapper-type"
>
<SelectOption
key={0}
value="msad-user-account-control-mapper"
/>
<SelectOption
key={1}
value="msda-lds-user-account-control-mapper"
/>
<SelectOption key={2} value="group-ldap-mapper" />
<SelectOption key={3} value="user-attribute-ldap-mapper" />
<SelectOption key={4} value="role-ldap-mapper" />
<SelectOption key={5} value="hardcoded-attribute-mapper" />
<SelectOption key={6} value="hardcoded-ldap-role-mapper" />
<SelectOption key={7} value="certificate-ldap-mapper" />
<SelectOption key={8} value="full-name-ldap-mapper" />
<SelectOption key={9} value="hardcoded-ldap-group-mapper" />
<SelectOption
key={10}
value="hardcoded-ldap-attribute-mapper"
/>
</Select>
)}
></Controller>
</FormGroup>
)}
{/* When loading existing mappers, load forms based on providerId aka mapper type */}
{mapper
? (mapper.providerId! === "certificate-ldap-mapper" ||
mapper.providerId! === "user-attribute-ldap-mapper") && (
@ -99,11 +236,8 @@ export const LdapMappingDetails = () => {
<LdapMapperMsadUserAccount form={form} />
)
: ""}
{mapper
? mapper.providerId! === "msad-lds-user-account-control-mapper" && (
<LdapMapperMsadLdsUserAccount form={form} />
)
: ""}
{/* msad-lds-user-account-control-mapper does not need a component
because it is just id, name, and mapper type*/}
{mapper
? mapper.providerId! === "full-name-ldap-mapper" && (
<LdapMapperFullNameAttribute form={form} />
@ -135,6 +269,59 @@ export const LdapMappingDetails = () => {
<LdapMapperRoleGroup form={form} type={mapper.providerId} />
)
: ""}
{/* When creating new mappers, load forms based on dropdown selection */}
{mapperType
? mapperType === "certificate-ldap-mapper" && (
<LdapMapperUserAttribute form={form} mapperType={mapperType} />
)
: ""}
{mapperType
? mapperType === "user-attribute-ldap-mapper" && (
<LdapMapperUserAttribute form={form} mapperType={mapperType} />
)
: ""}
{mapperType
? mapperType === "msad-user-account-control-mapper" && (
<LdapMapperMsadUserAccount form={form} />
)
: ""}
{mapperType
? mapperType === "full-name-ldap-mapper" && (
<LdapMapperFullNameAttribute form={form} />
)
: ""}
{mapperType
? mapperType === "hardcoded-ldap-role-mapper" && (
<LdapMapperHardcodedLdapRole form={form} />
)
: ""}
{mapperType
? mapperType === "hardcoded-ldap-group-mapper" && (
<LdapMapperHardcodedLdapGroup form={form} />
)
: ""}
{mapperType
? mapperType === "hardcoded-ldap-attribute-mapper" && (
<LdapMapperHardcodedLdapAttribute form={form} />
)
: ""}
{mapperType
? mapperType === "hardcoded-attribute-mapper" && (
<LdapMapperHardcodedAttribute form={form} />
)
: ""}
{mapperType
? mapperType === "role-ldap-mapper" && (
<LdapMapperRoleGroup form={form} type={mapperType} />
)
: ""}
{mapperType
? mapperType === "group-ldap-mapper" && (
<LdapMapperRoleGroup form={form} type={mapperType} />
)
: ""}
</FormAccess>
<Form onSubmit={form.handleSubmit(save)}>
<ActionGroup>
<Button

71
src/user-federation/ldap/mappers/shared/LdapMapperGeneral.tsx
View file

@ -1,71 +0,0 @@
import { FormGroup, TextInput } from "@patternfly/react-core";
import React from "react";
import { HelpItem } from "../../../../components/help-enabler/HelpItem";
import { UseFormMethods } from "react-hook-form";
import { useTranslation } from "react-i18next";
export type LdapMapperGeneralProps = {
form: UseFormMethods;
};
export const LdapMapperGeneral = ({ form }: LdapMapperGeneralProps) => {
const { t } = useTranslation("user-federation");
const helpText = useTranslation("user-federation-help").t;
return (
<>
<FormGroup label={t("common:id")} fieldId="kc-ldap-mapper-id">
<TextInput
isRequired
type="text"
id="kc-ldap-mapper-id"
data-testid="ldap-mapper-id"
name="id"
ref={form.register}
/>
</FormGroup>
<FormGroup
label={t("common:name")}
labelIcon={
<HelpItem
helpText={helpText("nameHelp")}
forLabel={t("common:name")}
forID="kc-ldap-mapper-name"
/>
}
fieldId="kc-ldap-mapper-name"
isRequired
>
<TextInput
isRequired
type="text"
id="kc-ldap-mapper-name"
data-testid="ldap-mapper-name"
name="name"
ref={form.register}
/>
</FormGroup>
<FormGroup
label={t("common:mapperType")}
labelIcon={
<HelpItem
helpText={helpText("mapperTypeHelp")}
forLabel={t("common:mapperType")}
forID="kc-ldap-mapper-type"
/>
}
fieldId="kc-ldap-mapper-type"
isRequired
>
<TextInput
isRequired
type="text"
id="kc-ldap-mapper-type"
data-testid="ldap-mapper-type"
name="providerId"
ref={form.register}
/>
</FormGroup>
</>
);
};