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

Merge pull request #535 from mfrances17/save-mapper

Browse source 
Add/edit/delete LDAP mappers
This commit is contained in:
mfrances17 2021-04-20 16:53:55 -04:00 committed by GitHub
commit f3511d0be1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 1385 additions and 1302 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client-scopes/details/MappingDetails.tsx
View file

@ -143,9 +143,9 @@ export const MappingDetails = () => {
} else {
await adminClient.clientScopes.addProtocolMapper({ id }, map);
}
addAlert(t(`mapping${key}Success`), AlertVariant.success);
addAlert(t(`common:mapping${key}Success`), AlertVariant.success);
} catch (error) {
addAlert(t(`mapping${key}Error`, { error }), AlertVariant.danger);
addAlert(t(`common:mapping${key}Error`, { error }), AlertVariant.danger);
}
};

2
src/client-scopes/messages.json
View file

@ -18,8 +18,6 @@
"deletedSuccess": "The client scope has been deleted",
"deleteError": "Could not delete client scope: {{error}}",
"includeInTokenScope": "Include in token scope",
"mappingUpdatedSuccess": "Mapping successfully updated",
"mappingUpdatedError": "Could not update mapping: '{{error}}'",
"realmRolePrefix": "Realm role prefix",
"multiValued": "Multivalued",
"tokenClaimName": "Token claim name",

3
src/common-messages.json
View file

@ -109,11 +109,14 @@
"id": "ID",
"addMapper": "Add mapper",
"createNewMapper": "Create new mapper",
"searchForMapper": "Search for mapper",
"mapperType": "Mapper type",
"mappingDeletedSuccess": "Mapping successfully deleted",
"mappingDeletedError": "Could not delete mapping: '{{error}}'",
"mappingDetails": "Mapper details",
"mappingUpdatedSuccess": "Mapping successfully updated",
"mappingUpdatedError": "Could not update mapping: '{{error}}'",
"mappingCreatedSuccess": "Mapping successfully created",
"mappingCreatedError": "Could not create mapping: '{{error}}'",
"deleteMappingTitle": "Delete mapping?",

16
src/route-config.ts
View file

@ -29,8 +29,8 @@ import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
import { RealmRoleTabs } from "./realm-roles/RealmRoleTabs";
import { SearchGroups } from "./groups/SearchGroups";
import { CreateInitialAccessToken } from "./clients/initial-access/CreateInitialAccessToken";
import { LdapMappingDetails } from "./user-federation/ldap/mappers/LdapMappingDetails";
import { RealmSettingsTabs } from "./realm-settings/RealmSettingsTabs";
import { LdapMapperDetails } from "./user-federation/ldap/mappers/LdapMapperDetails";
export type RouteDef = BreadcrumbsRoute & {
access: AccessType;
@ -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,
@ -234,16 +240,10 @@ export const routes: RoutesFn = (t: TFunction) => [
},
{
path: "/:realm/user-federation/ldap/:id/:tab/:mapperId",
component: LdapMappingDetails,
component: LdapMapperDetails,
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,

17
src/user-federation/UserFederationLdapSettings.tsx
View file

@ -123,7 +123,7 @@ const LdapSettingsHeader = ({
return (
<>
<DisableConfirm />
{id === "new" ? (
{!id ? (
<ViewHeader titleKey="LDAP" subKey="" />
) : (
<ViewHeader
@ -178,7 +178,7 @@ export const UserFederationLdapSettings = () => {
useEffect(() => {
(async () => {
if (id !== "new") {
if (id) {
const fetchedComponent = await adminClient.components.findOne({ id });
if (fetchedComponent) {
setupForm(fetchedComponent);
@ -211,22 +211,17 @@ export const UserFederationLdapSettings = () => {
const save = async (component: ComponentRepresentation) => {
try {
if (id) {
if (id === "new") {
if (!id) {
await adminClient.components.create(component);
history.push(`/${realm}/user-federation`);
} else {
await adminClient.components.update({ id }, component);
}
}
setupForm(component as ComponentRepresentation);
addAlert(
t(id === "new" ? "createSuccess" : "saveSuccess"),
AlertVariant.success
);
addAlert(t(id ? "saveSuccess" : "createSuccess"), AlertVariant.success);
} catch (error) {
addAlert(
`${t(id === "new" ? "createError" : "saveError")} '${error}'`,
`${t(id ? "saveError" : "createError")} '${error}'`,
AlertVariant.danger
);
}
@ -326,6 +321,7 @@ export const UserFederationLdapSettings = () => {
</ActionGroup>
</Form>
</Tab>
{id && (
<Tab
id="mappers"
eventKey="mappers"
@ -333,6 +329,7 @@ export const UserFederationLdapSettings = () => {
>
<LdapMapperList />
</Tab>
)}
</KeycloakTabs>
</PageSection>
</>

394
src/user-federation/ldap/mappers/LdapMapperDetails.tsx Normal file
View file

@ -0,0 +1,394 @@
import React, { useState, useEffect } from "react";
import {
ActionGroup,
AlertVariant,
Button,
Form,
FormGroup,
PageSection,
Select,
SelectOption,
SelectVariant,
TextInput,
} from "@patternfly/react-core";
import { convertFormValuesToObject, 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 { 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 { LdapMapperFullNameAttribute } from "./LdapMapperFullNameAttribute";
import { LdapMapperHardcodedLdapRole } from "./LdapMapperHardcodedLdapRole";
import { LdapMapperHardcodedLdapGroup } from "./LdapMapperHardcodedLdapGroup";
import { LdapMapperHardcodedLdapAttribute } from "./LdapMapperHardcodedLdapAttribute";
import { LdapMapperHardcodedAttribute } from "./LdapMapperHardcodedAttribute";
import { LdapMapperRoleGroup } from "./LdapMapperRoleGroup";
import { useRealm } from "../../../context/realm-context/RealmContext";
export const LdapMapperDetails = () => {
const form = useForm<ComponentRepresentation>();
const [mapping, setMapping] = useState<ComponentRepresentation>();
const adminClient = useAdminClient();
const { id, mapperId } = useParams<{ id: string; mapperId: string }>();
const history = useHistory();
const { realm } = useRealm();
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: mapperId,
});
if (fetchedMapper) {
setMapping(fetchedMapper);
setupForm(fetchedMapper);
}
}
}
})();
}, []);
const setupForm = (mapper: ComponentRepresentation) => {
Object.entries(mapper).map((entry) => {
if (entry[0] === "config") {
convertToFormValues(entry[1], "config", form.setValue);
} else {
form.setValue(entry[0], entry[1]);
}
});
};
const save = async (mapper: ComponentRepresentation) => {
let config = {};
if (mapper.config !== undefined) {
config = convertFormValuesToObject(mapper.config);
}
const map = { ...mapper, config };
try {
if (mapperId) {
if (mapperId === "new") {
await adminClient.components.create(map);
history.push(
`/${realm}/user-federation/ldap/${mapper!.parentId}/mappers`
);
} else {
await adminClient.components.update({ id: mapperId }, map);
}
}
setupForm(map as ComponentRepresentation);
addAlert(
t(
mapperId === "new"
? "common:mappingCreatedSuccess"
: "common:mappingUpdatedSuccess"
),
AlertVariant.success
);
} catch (error) {
addAlert(
`${t(
mapperId === "new"
? "common:mappingCreatedError"
: "common:mappingUpdatedError"
)} '${error}'`,
AlertVariant.danger
);
}
};
const mapperType = useWatch({
control: form.control,
name: "providerId",
});
const isNew = mapperId === "new";
return (
<>
<ViewHeader
titleKey={mapping ? mapping.name! : t("common:createNewMapper")}
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}
/>
<TextInput
hidden
defaultValue={isNew ? id : mapping ? mapping.parentId : ""}
type="text"
id="kc-ldap-parentId"
data-testid="ldap-parentId"
name="parentId"
ref={form.register}
/>
<TextInput
hidden
defaultValue="org.keycloak.storage.ldap.mappers.LDAPStorageMapper"
type="text"
id="kc-ldap-provider-type"
data-testid="ldap-provider-type"
name="providerType"
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-providerId"
/>
}
fieldId="kc-providerId"
isRequired
>
<Controller
name="providerId"
defaultValue=" "
control={form.control}
render={({ onChange, value }) => (
<Select
toggleId="kc-providerId"
required
onToggle={() =>
setIsMapperDropdownOpen(!isMapperDropdownOpen)
}
isOpen={isMapperDropdownOpen}
onSelect={(_, value) => {
onChange(value as string);
setIsMapperDropdownOpen(false);
}}
selections={value}
variant={SelectVariant.single}
>
<SelectOption
key={0}
value="msad-user-account-control-mapper"
/>
<SelectOption
key={1}
value="msad-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 */}
{mapping
? (mapping.providerId! === "certificate-ldap-mapper" ||
mapping.providerId! === "user-attribute-ldap-mapper") && (
<LdapMapperUserAttribute
form={form}
mapperType={mapping?.providerId}
/>
)
: ""}
{mapping
? mapping.providerId! === "msad-user-account-control-mapper" && (
<LdapMapperMsadUserAccount form={form} />
)
: ""}
{/* msad-lds-user-account-control-mapper does not need a component
because it is just id, name, and mapper type*/}
{mapping
? mapping.providerId! === "full-name-ldap-mapper" && (
<LdapMapperFullNameAttribute form={form} />
)
: ""}
{mapping
? mapping.providerId! === "hardcoded-ldap-role-mapper" && (
<LdapMapperHardcodedLdapRole form={form} />
)
: ""}
{mapping
? mapping.providerId! === "hardcoded-ldap-group-mapper" && (
<LdapMapperHardcodedLdapGroup form={form} />
)
: ""}
{mapping
? mapping.providerId! === "hardcoded-ldap-attribute-mapper" && (
<LdapMapperHardcodedLdapAttribute form={form} />
)
: ""}
{mapping
? mapping.providerId! === "hardcoded-attribute-mapper" && (
<LdapMapperHardcodedAttribute form={form} />
)
: ""}
{mapping
? (mapping.providerId! === "role-ldap-mapper" ||
mapping.providerId! === "group-ldap-mapper") && (
<LdapMapperRoleGroup form={form} type={mapping.providerId} />
)
: ""}
{/* When creating new mappers, load forms based on dropdown selection */}
{isNew && mapperType
? mapperType === "certificate-ldap-mapper" && (
<LdapMapperUserAttribute form={form} mapperType={mapperType} />
)
: ""}
{isNew && mapperType
? mapperType === "user-attribute-ldap-mapper" && (
<LdapMapperUserAttribute form={form} mapperType={mapperType} />
)
: ""}
{isNew && mapperType
? mapperType === "msad-user-account-control-mapper" && (
<LdapMapperMsadUserAccount form={form} />
)
: ""}
{isNew && mapperType
? mapperType === "full-name-ldap-mapper" && (
<LdapMapperFullNameAttribute form={form} />
)
: ""}
{isNew && mapperType
? mapperType === "hardcoded-ldap-role-mapper" && (
<LdapMapperHardcodedLdapRole form={form} />
)
: ""}
{isNew && mapperType
? mapperType === "hardcoded-ldap-group-mapper" && (
<LdapMapperHardcodedLdapGroup form={form} />
)
: ""}
{isNew && mapperType
? mapperType === "hardcoded-ldap-attribute-mapper" && (
<LdapMapperHardcodedLdapAttribute form={form} />
)
: ""}
{isNew && mapperType
? mapperType === "hardcoded-attribute-mapper" && (
<LdapMapperHardcodedAttribute form={form} />
)
: ""}
{isNew && mapperType
? mapperType === "role-ldap-mapper" && (
<LdapMapperRoleGroup form={form} type={mapperType} />
)
: ""}
{isNew && mapperType
? mapperType === "group-ldap-mapper" && (
<LdapMapperRoleGroup form={form} type={mapperType} />
)
: ""}
</FormAccess>
<Form onSubmit={form.handleSubmit(() => save(form.getValues()))}>
<ActionGroup>
<Button
isDisabled={!form.formState.isDirty}
variant="primary"
type="submit"
data-testid="ldap-save"
>
{t("common:save")}
</Button>
<Button
variant="link"
onClick={() =>
isNew
? history.goBack()
: history.push(
`/${realm}/user-federation/ldap/${
mapping!.parentId
}/mappers`
)
}
data-testid="ldap-cancel"
>
{t("common:cancel")}
</Button>
</ActionGroup>
</Form>
</PageSection>
</>
);
};

8
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={
@ -38,7 +33,7 @@ export const LdapMapperFullNameAttribute = ({
type="text"
id="kc-full-name-attribute"
data-testid="full-name-attribute"
name="config.ldap-full-name-attribute"
name="config.ldap-full-name-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -98,7 +93,6 @@ export const LdapMapperFullNameAttribute = ({
)}
></Controller>
</FormGroup>
</FormAccess>
</>
);
};

9
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={
@ -37,7 +33,7 @@ export const LdapMapperHardcodedAttribute = ({
type="text"
id="kc-user-model-attribute"
data-testid="user-model-attribute"
name="config.user-model-attribute"
name="config.user-model-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -58,11 +54,10 @@ export const LdapMapperHardcodedAttribute = ({
type="text"
id="kc-attribute-value"
data-testid="attribute-value"
name="config.attribute-value"
name="config.attribute-value[0]"
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

10
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={
@ -38,7 +33,7 @@ export const LdapMapperHardcodedLdapAttribute = ({
type="text"
id="kc-ldap-attribute-name"
data-testid="ldap-attribute-name"
name="config.ldap-attribute-name"
name="config.ldap-attribute-name[0]"
ref={form.register}
/>
</FormGroup>
@ -59,11 +54,10 @@ export const LdapMapperHardcodedLdapAttribute = ({
type="text"
id="kc-ldap-attribute-value"
data-testid="ldap-attribute-value"
name="config.ldap-attribute-value"
name="config.ldap-attribute-value[0]"
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

7
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={
@ -37,11 +33,10 @@ export const LdapMapperHardcodedLdapGroup = ({
type="text"
id="kc-group"
data-testid="group"
name="config.group"
name="config.group[0]"
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

7
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={
@ -37,11 +33,10 @@ export const LdapMapperHardcodedLdapRole = ({
type="text"
id="kc-role"
data-testid="role"
name="config.role"
name="config.role[0]"
ref={form.register}
/>
</FormGroup>
</FormAccess>
</>
);
};

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

@ -1,74 +1,76 @@
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { AlertVariant, Button, ToolbarItem } from "@patternfly/react-core";
import {
AlertVariant,
Button,
ButtonVariant,
ToolbarItem,
} from "@patternfly/react-core";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import { useErrorHandler } from "react-error-boundary";
import { KeycloakDataTable } from "../../../components/table-toolbar/KeycloakDataTable";
import { ListEmptyState } from "../../../components/list-empty-state/ListEmptyState";
import { useAlerts } from "../../../components/alert/Alerts";
import {
useAdminClient,
asyncStateFetch,
} from "../../../context/auth/AdminClient";
import { Link, useParams, useRouteMatch } from "react-router-dom";
import { useAdminClient } from "../../../context/auth/AdminClient";
import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
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 refresh = () => setKey(new Date().getTime());
const { id } = useParams<{ id: string }>();
useEffect(() => {
return asyncStateFetch(
() => {
const [selectedMapper, setSelectedMapper] = useState<
ComponentRepresentation
>();
const loader = async () => {
const testParams: {
[name: string]: string | number;
} = {
parent: id,
type: "org.keycloak.storage.ldap.mappers.LDAPStorageMapper",
};
return adminClient.components.find(testParams);
},
(mappers) => {
setMappers(mappers);
// TODO: remove after debugging
console.log("LdapMapperList - setMappers being set with:");
console.log(mappers);
},
handleError
);
}, [key]);
if (!mappers) {
return (
<>
<ListEmptyState
message={t("common:emptyMappers")}
instructions={t("common:emptyMappersInstructions")}
primaryActionText={t("common:emptyPrimaryAction")}
/>
</>
);
}
const loader = async () =>
Promise.resolve(
(mappers || []).map((mapper) => {
const mappersList = (await adminClient.components.find(testParams)).map(
(mapper) => {
return {
...mapper,
name: mapper.name,
type: mapper.providerId,
} as ComponentRepresentation;
})
}
);
return mappersList;
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("common:deleteMappingTitle", { mapperId: selectedMapper?.id }),
messageKey: "common:deleteMappingConfirm",
continueButtonLabel: "common:delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.components.del({
id: selectedMapper!.id!,
});
refresh();
addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
setSelectedMapper(undefined);
} catch (error) {
addAlert(
t("common:mappingDeletedError", { error }),
AlertVariant.danger
);
}
},
});
const getUrl = (url: string) => {
if (url.indexOf("/mappers") === -1) {
@ -85,6 +87,7 @@ export const LdapMapperList = () => {
return (
<>
<DeleteConfirm />
<KeycloakDataTable
key={key}
loader={loader}
@ -95,13 +98,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>
@ -110,20 +107,9 @@ export const LdapMapperList = () => {
actions={[
{
title: t("common:delete"),
onRowClick: async (mapper) => {
try {
addAlert(
// t("common:mappingDeletedError"),
"Delete functionality not implemented yet!",
AlertVariant.success
);
} catch (error) {
addAlert(
t("common:mappingDeletedError", { error }),
AlertVariant.danger
);
}
return true;
onRowClick: (mapper) => {
setSelectedMapper(mapper);
toggleDeleteDialog();
},
},
]}

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>
</>
);
};

43
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={
@ -65,7 +61,7 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-ldap-dn"
data-testid="ldap-dn"
name={isRole ? "config.roles-dn" : "config.groups-dn"}
name={isRole ? "config.roles-dn[0]" : "config.groups-dn[0]"}
ref={form.register}
/>
</FormGroup>
@ -81,7 +77,7 @@ export const LdapMapperRoleGroup = ({
: helpText("groupNameLdapAttributeHelp")
}
forLabel={
isRole ? t("roleNameLdapAttribute") : t("roleNameLdapAttribute")
isRole ? t("roleNameLdapAttribute") : t("groupNameLdapAttribute")
}
forID="kc-name-attribute"
/>
@ -96,8 +92,8 @@ export const LdapMapperRoleGroup = ({
data-testid="name-attribute"
name={
isRole
? "config.role-name-ldap-attribute"
: "config.group-name-ldap-attribute"
? "config.role-name-ldap-attribute[0]"
: "config.group-name-ldap-attribute[0]"
}
ref={form.register}
/>
@ -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"
/>
}
@ -127,8 +121,8 @@ export const LdapMapperRoleGroup = ({
data-testid="object-classes"
name={
isRole
? "config.role-object-classes"
: "config.group-object-classes"
? "config.role-object-classes[0]"
: "config.group-object-classes[0]"
}
ref={form.register}
/>
@ -210,7 +204,7 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-membership-ldap-attribute"
data-testid="membership-ldap-attribute"
name="config.membership-ldap-attribute"
name="config.membership-ldap-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -227,7 +221,7 @@ export const LdapMapperRoleGroup = ({
>
<Controller
name="config.membership-attribute-type[0]"
defaultValue=""
defaultValue="DN"
control={form.control}
render={({ onChange, value }) => (
<Select
@ -270,7 +264,7 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-membership-user-ldap-attribute"
data-testid="membership-user-ldap-attribute"
name="config.membership-user-ldap-attribute"
name="config.membership-user-ldap-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -291,7 +285,11 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-ldap-filter"
data-testid="ldap-filter"
name="config.ldap-filter"
name={
isRole
? "config.roles-ldap-filter[0]"
: "config.groups-ldap-filter[0]"
}
ref={form.register}
/>
</FormGroup>
@ -308,7 +306,7 @@ export const LdapMapperRoleGroup = ({
>
<Controller
name="config.mode[0]"
defaultValue=""
defaultValue="READ_ONLY"
control={form.control}
render={({ onChange, value }) => (
<Select
@ -364,7 +362,7 @@ export const LdapMapperRoleGroup = ({
? "config.user-roles-retrieve-strategy[0]"
: "config.user-groups-retrieve-strategy[0]"
}
defaultValue=""
defaultValue="LOAD_ROLES_BY_MEMBER_ATTRIBUTE"
control={form.control}
render={({ onChange, value }) => (
<Select
@ -416,7 +414,7 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-member-of-attribute"
data-testid="member-of-attribute"
name="config.memberof-ldap-attribute"
name="config.memberof-ldap-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -510,7 +508,7 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-mapped-attributes"
data-testid="mapped-attributes"
name="config.mapped-group-attributes"
name="config.mapped-group-attributes[0]"
ref={form.register}
/>
</FormGroup>
@ -559,13 +557,12 @@ export const LdapMapperRoleGroup = ({
type="text"
id="kc-path"
data-testid="path"
name="config.groups-path"
name="config.groups-path[0]"
ref={form.register}
/>
</FormGroup>
</>
)}
</FormAccess>
</>
);
};

9
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={
@ -39,7 +35,7 @@ export const LdapMapperUserAttribute = ({
type="text"
id="kc-user-model-attribute"
data-testid="user-model-attribute"
name="config.user-model-attribute"
name="config.user-model-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -60,7 +56,7 @@ export const LdapMapperUserAttribute = ({
type="text"
id="kc-ldap-attribute"
data-testid="ldap-attribute"
name="config.ldap-attribute"
name="config.ldap-attribute[0]"
ref={form.register}
/>
</FormGroup>
@ -210,7 +206,6 @@ export const LdapMapperUserAttribute = ({
) : (
<></>
)}
</FormAccess>
</>
);
};

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

@ -1,164 +0,0 @@
import React, { useState, useEffect } from "react";
import {
ActionGroup,
AlertVariant,
Button,
Form,
PageSection,
} 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 { useAlerts } from "../../../components/alert/Alerts";
import { useTranslation } from "react-i18next";
import { LdapMapperUserAttribute } from "./LdapMapperUserAttribute";
import { LdapMapperMsadUserAccount } from "./LdapMapperMsadUserAccount";
import { LdapMapperMsadLdsUserAccount } from "./LdapMapperMsadLdsUserAccount";
import { LdapMapperFullNameAttribute } from "./LdapMapperFullNameAttribute";
import { LdapMapperHardcodedLdapRole } from "./LdapMapperHardcodedLdapRole";
import { LdapMapperHardcodedLdapGroup } from "./LdapMapperHardcodedLdapGroup";
import { LdapMapperHardcodedLdapAttribute } from "./LdapMapperHardcodedLdapAttribute";
import { LdapMapperHardcodedAttribute } from "./LdapMapperHardcodedAttribute";
import { LdapMapperRoleGroup } from "./LdapMapperRoleGroup";
import { useRealm } from "../../../context/realm-context/RealmContext";
export const LdapMappingDetails = () => {
const form = useForm<ComponentRepresentation>();
const [mapper, setMapper] = useState<ComponentRepresentation>();
const adminClient = useAdminClient();
const { mapperId } = useParams<{ mapperId: string }>();
const history = useHistory();
const { realm } = useRealm();
const id = mapperId;
const { t } = useTranslation("user-federation");
const { addAlert } = useAlerts();
useEffect(() => {
(async () => {
if (mapperId) {
const fetchedMapper = await adminClient.components.findOne({ id });
if (fetchedMapper) {
// TODO: remove after adding all mapper types
console.log("LdapMappingDetails: id used in findOne(id) call::");
console.log(id);
console.log("LdapMappingDetails: data returned from findOne(id):");
console.log(fetchedMapper);
setMapper(fetchedMapper);
setupForm(fetchedMapper);
}
}
})();
}, []);
const setupForm = (mapper: ComponentRepresentation) => {
Object.entries(mapper).map((entry) => {
if (entry[0] === "config") {
convertToFormValues(entry[1], "config", form.setValue);
} else {
form.setValue(entry[0], entry[1]);
}
});
};
const save = () => {
addAlert(
t(
id === "new"
? "Create functionality not implemented yet!"
: "Save functionality not implemented yet!"
),
AlertVariant.success
);
history.push(`/${realm}/user-federation`);
};
return (
<>
<ViewHeader titleKey={mapper ? mapper.name! : ""} subKey="" />
<PageSection variant="light" isFilled>
{mapper
? (mapper.providerId! === "certificate-ldap-mapper" ||
mapper.providerId! === "user-attribute-ldap-mapper") && (
<LdapMapperUserAttribute
form={form}
mapperType={mapper?.providerId}
/>
)
: ""}
{mapper
? mapper.providerId! === "msad-user-account-control-mapper" && (
<LdapMapperMsadUserAccount form={form} />
)
: ""}
{mapper
? mapper.providerId! === "msad-lds-user-account-control-mapper" && (
<LdapMapperMsadLdsUserAccount form={form} />
)
: ""}
{mapper
? mapper.providerId! === "full-name-ldap-mapper" && (
<LdapMapperFullNameAttribute form={form} />
)
: ""}
{mapper
? mapper.providerId! === "hardcoded-ldap-role-mapper" && (
<LdapMapperHardcodedLdapRole form={form} />
)
: ""}
{mapper
? mapper.providerId! === "hardcoded-ldap-group-mapper" && (
<LdapMapperHardcodedLdapGroup form={form} />
)
: ""}
{mapper
? mapper.providerId! === "hardcoded-ldap-attribute-mapper" && (
<LdapMapperHardcodedLdapAttribute form={form} />
)
: ""}
{mapper
? mapper.providerId! === "hardcoded-attribute-mapper" && (
<LdapMapperHardcodedAttribute form={form} />
)
: ""}
{mapper
? (mapper.providerId! === "role-ldap-mapper" ||
mapper.providerId! === "group-ldap-mapper") && (
<LdapMapperRoleGroup form={form} type={mapper.providerId} />
)
: ""}
<Form onSubmit={form.handleSubmit(save)}>
<ActionGroup>
<Button
isDisabled={!form.formState.isDirty}
variant="primary"
type="submit"
data-testid="ldap-save"
>
{t("common:save")}
</Button>
<Button
variant="link"
onClick={() =>
history.push(
`/${realm}/user-federation/ldap/${mapper!.parentId}/mappers`
)
}
data-testid="ldap-cancel"
>
{t("common:cancel")}
</Button>
</ActionGroup>
</Form>
</PageSection>
</>
);
};

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>
</>
);
};