@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
157 lines • 10 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { HelpItem, KeycloakSelect, SelectVariant, TextControl, useAlerts, useFetch, } from "../../../ui-shared";
import { ActionGroup, AlertVariant, Button, ButtonVariant, DropdownItem, FormGroup, PageSection, SelectOption, } from "@patternfly/react-core";
import { useState } from "react";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useAdminClient } from "../../../admin-client";
import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
import { DynamicComponents, convertToName, } from "../../../components/dynamic/DynamicComponents";
import { FormAccess } from "../../../components/form/FormAccess";
import { KeycloakSpinner } from "../../../ui-shared";
import { ViewHeader } from "../../../components/view-header/ViewHeader";
import { useRealm } from "../../../context/realm-context/RealmContext";
import { convertFormValuesToObject, convertToFormValues } from "../../../util";
import { useParams } from "../../../utils/useParams";
import { toUserFederationLdap } from "../../../user-federation/routes/UserFederationLdap";
export default function LdapMapperDetails() {
const { adminClient } = useAdminClient();
const form = useForm();
const [mapping, setMapping] = useState();
const [components, setComponents] = useState();
const { id, mapperId } = useParams();
const navigate = useNavigate();
const { realm } = useRealm();
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
useFetch(async () => {
const components = await adminClient.components.listSubComponents({
id,
type: "org.keycloak.storage.ldap.mappers.LDAPStorageMapper",
});
if (mapperId && mapperId !== "new") {
const fetchedMapper = await adminClient.components.findOne({
id: mapperId,
});
return { components, fetchedMapper };
}
return { components };
}, ({ components, fetchedMapper }) => {
setMapping(fetchedMapper);
setComponents(components);
if (mapperId !== "new" && !fetchedMapper)
throw new Error(t("notFound"));
if (fetchedMapper)
setupForm(fetchedMapper);
}, []);
const setupForm = (mapper) => {
convertToFormValues(mapper, form.setValue);
};
const save = async (mapper) => {
const component = convertFormValuesToObject(mapper);
const map = {
...component,
config: Object.entries(component.config || {}).reduce((result, [key, value]) => {
result[key] = Array.isArray(value) ? value : [value];
return result;
}, {}),
};
try {
if (mapperId === "new") {
await adminClient.components.create(map);
navigate(toUserFederationLdap({ realm, id: mapper.parentId, tab: "mappers" }));
}
else {
await adminClient.components.update({ id: mapperId }, map);
}
setupForm(map);
addAlert(t(mapperId === "new"
? "mappingCreatedSuccess"
: "mappingUpdatedSuccess"), AlertVariant.success);
}
catch (error) {
addError(mapperId === "new" ? "mappingCreatedError" : "mappingUpdatedError", error);
}
};
const sync = async (direction) => {
try {
const result = await adminClient.userStorageProvider.mappersSync({
parentId: (mapping === null || mapping === void 0 ? void 0 : mapping.parentId) || "",
id: mapperId,
direction,
});
addAlert(t("syncLDAPGroupsSuccessful", {
result: result.status,
}));
}
catch (error) {
addError("syncLDAPGroupsError", error);
}
refresh();
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteMappingTitle",
messageKey: "deleteMappingConfirm",
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.components.del({
id: mapping.id,
});
addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
navigate(toUserFederationLdap({ id, realm, tab: "mappers" }));
}
catch (error) {
addError("mappingDeletedError", error);
}
},
});
const mapperType = useWatch({
control: form.control,
name: "providerId",
});
if (!components) {
return _jsx(KeycloakSpinner, {});
}
const isNew = mapperId === "new";
const mapper = components.find((c) => c.id === mapperType);
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), _jsx(ViewHeader, { titleKey: mapping ? mapping.name : t("createNewMapper"), dropdownItems: isNew
? undefined
: [
_jsx(DropdownItem, { onClick: toggleDeleteDialog, children: t("delete") }, "delete"),
...((mapper === null || mapper === void 0 ? void 0 : mapper.metadata.fedToKeycloakSyncSupported)
? [
_jsx(DropdownItem, { onClick: () => sync("fedToKeycloak"), children: t(mapper.metadata.fedToKeycloakSyncMessage) }, "fedSync"),
]
: []),
...((mapper === null || mapper === void 0 ? void 0 : mapper.metadata.keycloakToFedSyncSupported)
? [
_jsx(DropdownItem, { onClick: () => {
sync("keycloakToFed");
}, children: t(mapper.metadata.keycloakToFedSyncMessage) }, "ldapSync"),
]
: []),
] }, key), _jsx(PageSection, { variant: "light", isFilled: true, children: _jsx(FormProvider, { ...form, children: _jsxs(FormAccess, { role: "manage-realm", isHorizontal: true, onSubmit: form.handleSubmit(() => save(form.getValues())), children: [!isNew && _jsx(TextControl, { name: "id", label: t("id"), isDisabled: true }), _jsx(TextControl, { name: "name", label: t("name"), labelIcon: t("mapperNameHelp"), isDisabled: !isNew, rules: { required: t("required") } }), _jsx("input", { type: "hidden", defaultValue: isNew ? id : mapping ? mapping.parentId : "", "data-testid": "ldap-mapper-parentId", ...form.register("parentId") }), _jsx("input", { type: "hidden", defaultValue: "org.keycloak.storage.ldap.mappers.LDAPStorageMapper", "data-testid": "ldap-mapper-provider-type", ...form.register("providerType") }), !isNew ? (_jsx(TextControl, { name: "providerId", label: t("mapperType"), labelIcon: (mapper === null || mapper === void 0 ? void 0 : mapper.helpText) ? mapper.helpText : t("mapperTypeHelp"), rules: { required: t("required") }, isDisabled: !isNew })) : (_jsx(FormGroup, { label: t("mapperType"), labelIcon: _jsx(HelpItem, { helpText: (mapper === null || mapper === void 0 ? void 0 : mapper.helpText) ? mapper.helpText : t("mapperTypeHelp"), fieldLabelId: "mapperType" }), fieldId: "kc-providerId", isRequired: true, children: _jsx(Controller, { name: "providerId", defaultValue: "", control: form.control, "data-testid": "ldap-mapper-type-select", render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "kc-providerId", typeAheadAriaLabel: t("mapperType"), onToggle: () => setIsMapperDropdownOpen(!isMapperDropdownOpen), isOpen: isMapperDropdownOpen, onSelect: (value) => {
var _a;
setupForm({
providerId: value,
...Object.fromEntries(((_a = components
.find((c) => c.id === value)) === null || _a === void 0 ? void 0 : _a.properties.filter((m) => m.type === "List").map((m) => {
var _a;
return [
convertToName(m.name),
(_a = m.options) === null || _a === void 0 ? void 0 : _a[0],
];
})) || []),
});
setIsMapperDropdownOpen(false);
}, selections: field.value, variant: SelectVariant.typeahead, "aria-label": t("selectMapperType"), children: components.map((c) => (_jsx(SelectOption, { value: c.id, children: c.id }, c.id))) })) }) })), !!mapperType && (_jsx(DynamicComponents, { properties: mapper === null || mapper === void 0 ? void 0 : mapper.properties })), _jsxs(ActionGroup, { children: [_jsx(Button, { isDisabled: !form.formState.isDirty, variant: "primary", type: "submit", "data-testid": "ldap-mapper-save", children: t("save") }), _jsx(Button, { variant: "link", onClick: () => isNew
? navigate(-1)
: navigate(`/${realm}/user-federation/ldap/${mapping.parentId}/mappers`), "data-testid": "ldap-mapper-cancel", children: t("cancel") })] })] }) }) })] }));
}
//# sourceMappingURL=LdapMapperDetails.js.map