@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
106 lines • 7.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { HelpItem, KeycloakSelect, SelectVariant, useAlerts, useFetch, } from "../ui-shared";
import { ActionGroup, AlertVariant, Button, FormGroup, PageSection, SelectOption, } from "@patternfly/react-core";
import { useState } from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { DynamicComponents } from "../components/dynamic/DynamicComponents";
import { FormAccess } from "../components/form/FormAccess";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { useParams } from "../utils/useParams";
import { toClientProfile } from "../realm-settings/routes/ClientProfile";
const defaultValues = {
config: {},
executor: "",
};
export default function ExecutorForm() {
var _a;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const navigate = useNavigate();
const { realm, profileName } = useParams();
const { executorName } = useParams();
const { addAlert, addError } = useAlerts();
const [selectExecutorTypeOpen, setSelectExecutorTypeOpen] = useState(false);
const serverInfo = useServerInfo();
const executorTypes = (_a = serverInfo.componentTypes) === null || _a === void 0 ? void 0 : _a["org.keycloak.services.clientpolicy.executor.ClientPolicyExecutorProvider"];
const [executors, setExecutors] = useState([]);
const [executorProperties, setExecutorProperties] = useState([]);
const [globalProfiles, setGlobalProfiles] = useState([]);
const [profiles, setProfiles] = useState([]);
const form = useForm({ defaultValues });
const { control, reset, handleSubmit } = form;
const editMode = !!executorName;
const setupForm = (profiles) => {
var _a;
const profile = profiles.find((profile) => profile.name === profileName);
const executor = (_a = profile === null || profile === void 0 ? void 0 : profile.executors) === null || _a === void 0 ? void 0 : _a.find((executor) => executor.executor === executorName);
if (executor)
reset({ config: executor.configuration });
};
useFetch(() => adminClient.clientPolicies.listProfiles({ includeGlobalProfiles: true }), (profiles) => {
setGlobalProfiles(profiles.globalProfiles);
setProfiles(profiles.profiles);
setupForm(profiles.profiles);
setupForm(profiles.globalProfiles);
}, []);
const save = async () => {
const formValues = form.getValues();
const updatedProfiles = profiles.map((profile) => {
var _a;
if (profile.name !== profileName) {
return profile;
}
const executors = ((_a = profile.executors) !== null && _a !== void 0 ? _a : []).concat({
executor: formValues.executor,
configuration: formValues.config || {},
});
if (editMode) {
const profileExecutor = profile.executors.find((executor) => executor.executor === executorName);
profileExecutor.configuration = {
...profileExecutor.configuration,
...formValues.config,
};
}
if (editMode) {
return profile;
}
return {
...profile,
executors,
};
});
try {
await adminClient.clientPolicies.createProfiles({
profiles: updatedProfiles,
globalProfiles: globalProfiles,
});
addAlert(editMode ? t("updateExecutorSuccess") : t("addExecutorSuccess"), AlertVariant.success);
navigate(toClientProfile({ realm, profileName }));
}
catch (error) {
addError(editMode ? "updateExecutorError" : "addExecutorError", error);
}
};
const globalProfile = globalProfiles.find((globalProfile) => globalProfile.name === profileName);
const profileExecutorType = executorTypes === null || executorTypes === void 0 ? void 0 : executorTypes.find((executor) => executor.id === executorName);
const editedProfileExecutors = profileExecutorType === null || profileExecutorType === void 0 ? void 0 : profileExecutorType.properties.map((property) => {
const globalDefaultValues = editMode ? property.defaultValue : "";
return {
...property,
defaultValue: globalDefaultValues,
};
});
return (_jsxs(_Fragment, { children: [_jsx(ViewHeader, { titleKey: editMode ? executorName : t("addExecutor"), divider: true }), _jsxs(PageSection, { variant: "light", children: [_jsxs(FormAccess, { isHorizontal: true, role: "manage-realm", className: "pf-v5-u-mt-lg", isReadOnly: !!globalProfile, children: [_jsx(FormGroup, { label: t("executorType"), fieldId: "kc-executorType", labelIcon: executors.length > 0 && executors[0].helpText !== "" ? (_jsx(HelpItem, { helpText: executors[0].helpText, fieldLabelId: "executorTypeHelpText" })) : editMode ? (_jsx(HelpItem, { helpText: profileExecutorType === null || profileExecutorType === void 0 ? void 0 : profileExecutorType.helpText, fieldLabelId: "executorTypeHelpText" })) : undefined, children: _jsx(Controller, { name: "executor", defaultValue: "", control: control, render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "kc-executor", placeholderText: "Select an executor", onToggle: (isOpen) => setSelectExecutorTypeOpen(isOpen), onSelect: (value) => {
var _a;
reset({ ...defaultValues, executor: value.toString() });
const selectedExecutor = executorTypes === null || executorTypes === void 0 ? void 0 : executorTypes.filter((type) => type.id === value);
setExecutors(selectedExecutor !== null && selectedExecutor !== void 0 ? selectedExecutor : []);
setExecutorProperties((_a = selectedExecutor === null || selectedExecutor === void 0 ? void 0 : selectedExecutor[0].properties) !== null && _a !== void 0 ? _a : []);
setSelectExecutorTypeOpen(false);
}, selections: editMode ? executorName : field.value, variant: SelectVariant.single, "data-testid": "executorType-select", "aria-label": t("executorType"), isOpen: selectExecutorTypeOpen, maxHeight: 580, isDisabled: editMode, children: executorTypes === null || executorTypes === void 0 ? void 0 : executorTypes.map((option) => (_jsx(SelectOption, { selected: option.id === field.value, value: option.id, description: option.helpText, children: option.id }, option.id))) })) }) }), _jsx(FormProvider, { ...form, children: _jsx(DynamicComponents, { properties: editMode ? editedProfileExecutors : executorProperties }) }), !globalProfile && (_jsxs(ActionGroup, { children: [_jsx(Button, { variant: "primary", onClick: () => handleSubmit(save)(), "data-testid": "addExecutor-saveBtn", children: editMode ? t("save") : t("add") }), _jsx(Button, { variant: "link", component: (props) => (_jsx(Link, { ...props, to: toClientProfile({ realm, profileName }) })), "data-testid": "addExecutor-cancelBtn", children: t("cancel") })] }))] }), editMode && globalProfile && (_jsx("div", { className: "kc-backToProfile", children: _jsx(Button, { component: (props) => (_jsx(Link, { ...props, to: toClientProfile({ realm, profileName }) })), variant: "primary", children: t("back") }) }))] })] }));
}
//# sourceMappingURL=ExecutorForm.js.map