@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
135 lines • 6.86 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { TextControl, useAlerts, useFetch } from "../../ui-shared";
import { ActionGroup, AlertVariant, Button, ButtonVariant, DropdownItem, PageSection, } from "@patternfly/react-core";
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useAdminClient } from "../../admin-client";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { DynamicComponents } 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 useLocaleSort, { mapByKey } from "../../utils/useLocaleSort";
import { useParams } from "../../utils/useParams";
import { toIdentityProviderEditMapper, } from "../../identity-providers/routes/EditMapper";
import { toIdentityProvider } from "../../identity-providers/routes/IdentityProvider";
import { AddMapperForm } from "../../identity-providers/add/AddMapperForm";
export default function AddMapper() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const form = useForm({
shouldUnregister: true,
});
const { handleSubmit } = form;
const { addAlert, addError } = useAlerts();
const navigate = useNavigate();
const localeSort = useLocaleSort();
const { realm } = useRealm();
const { id, providerId, alias } = useParams();
const [mapperTypes, setMapperTypes] = useState();
const [currentMapper, setCurrentMapper] = useState();
const save = async (idpMapper) => {
const mapper = convertFormValuesToObject(idpMapper);
const identityProviderMapper = {
...mapper,
config: {
...mapper.config,
},
identityProviderAlias: alias,
};
if (id) {
try {
await adminClient.identityProviders.updateMapper({
id: id,
alias: alias,
}, { ...identityProviderMapper, id });
addAlert(t("mapperSaveSuccess"), AlertVariant.success);
}
catch (error) {
addError("mapperSaveError", error);
}
}
else {
try {
const createdMapper = await adminClient.identityProviders.createMapper({
identityProviderMapper,
alias: alias,
});
addAlert(t("mapperCreateSuccess"), AlertVariant.success);
navigate(toIdentityProviderEditMapper({
realm,
alias,
providerId: providerId,
id: createdMapper.id,
}));
}
catch (error) {
addError("mapperCreateError", error);
}
}
};
const [toggleDeleteMapperDialog, DeleteMapperConfirm] = useConfirmDialog({
titleKey: "deleteProviderMapper",
messageKey: t("deleteMapperConfirm", {
mapper: currentMapper === null || currentMapper === void 0 ? void 0 : currentMapper.name,
}),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.identityProviders.delMapper({
alias: alias,
id: id,
});
addAlert(t("deleteMapperSuccess"), AlertVariant.success);
navigate(toIdentityProvider({ providerId, alias, tab: "mappers", realm }));
}
catch (error) {
addError("deleteErrorIdentityProvider", error);
}
},
});
useFetch(() => Promise.all([
id ? adminClient.identityProviders.findOneMapper({ alias, id }) : null,
adminClient.identityProviders.findMapperTypes({ alias }),
]), ([mapper, mapperTypes]) => {
const mappers = localeSort(Object.values(mapperTypes), mapByKey("name"));
if (mapper) {
setCurrentMapper(mappers.find(({ id }) => id === mapper.identityProviderMapper));
setupForm(mapper);
}
else {
setCurrentMapper(mappers[0]);
}
setMapperTypes(mappers);
}, [id]);
const setupForm = (mapper) => {
convertToFormValues(mapper, form.setValue);
};
if (!mapperTypes || !currentMapper) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(PageSection, { variant: "light", children: [_jsx(DeleteMapperConfirm, {}), _jsx(ViewHeader, { className: "kc-add-mapper-title", titleKey: id
? t("editIdPMapper", {
providerId: providerId[0].toUpperCase() + providerId.substring(1),
})
: t("addIdPMapper", {
providerId: providerId[0].toUpperCase() + providerId.substring(1),
}), dropdownItems: id
? [
_jsx(DropdownItem, { onClick: toggleDeleteMapperDialog, children: t("delete") }, "delete"),
]
: undefined, divider: true }), _jsxs(FormAccess, { role: "manage-identity-providers", isHorizontal: true, onSubmit: handleSubmit(save), className: "pf-v5-u-mt-lg", children: [_jsxs(FormProvider, { ...form, children: [id && (_jsx(TextControl, { name: "id", label: t("id"), readOnly: true, rules: {
required: t("required"),
} })), currentMapper.properties && (_jsxs(_Fragment, { children: [_jsx(AddMapperForm, { form: form, id: id, mapperTypes: mapperTypes, updateMapperType: setCurrentMapper, mapperType: currentMapper }), _jsx(DynamicComponents, { properties: currentMapper.properties })] }))] }), _jsxs(ActionGroup, { children: [_jsx(Button, { "data-testid": "new-mapper-save-button", variant: "primary", type: "submit", children: t("save") }), _jsx(Button, { "data-testid": "new-mapper-cancel-button", variant: "link", component: (props) => (_jsx(Link, { ...props, to: toIdentityProvider({
realm,
providerId,
alias: alias,
tab: "mappers",
}) })), children: t("cancel") })] })] })] }));
}
//# sourceMappingURL=AddMapper.js.map