@keycloakify/keycloak-admin-ui/authentication/components/ExecutionConfigModal.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { TextControl, useAlerts, useFetch } from "../../ui-shared";
import { ActionGroup, AlertVariant, Button, ButtonVariant, Form, Modal, ModalVariant, Tooltip, } from "@patternfly/react-core";
import { CogIcon, TrashIcon } from "@patternfly/react-icons";
import { useEffect, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
import { convertFormValuesToObject, convertToFormValues } from "../../util";
export const ExecutionConfigModal = ({ execution, }) => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { addAlert, addError } = useAlerts();
    const [show, setShow] = useState(false);
    const [config, setConfig] = useState();
    const [configDescription, setConfigDescription] = useState();
    const form = useForm();
    const { setValue, handleSubmit } = form;
    // default config all executions should have
    const defaultConfigProperties = execution.authenticationFlow
        ? []
        : [
            {
                helpText: t("authenticatorRefConfig.value.help"),
                label: t("authenticatorRefConfig.value.label"),
                name: "default.reference.value",
                readOnly: false,
                secret: false,
                type: "String",
            },
            {
                helpText: t("authenticatorRefConfig.maxAge.help"),
                label: t("authenticatorRefConfig.maxAge.label"),
                name: "default.reference.maxAge",
                readOnly: false,
                secret: false,
                type: "String",
            },
        ];
    const setupForm = (config) => {
        convertToFormValues(config || {}, setValue);
    };
    useFetch(async () => {
        let config;
        const configDescription = execution.configurable
            ? await adminClient.authenticationManagement.getConfigDescription({
                providerId: execution.providerId,
            })
            : {
                name: execution.displayName,
                properties: [],
            };
        if (execution.authenticationConfig) {
            config = await adminClient.authenticationManagement.getConfig({
                id: execution.authenticationConfig,
            });
        }
        // merge default and fetched config properties
        configDescription.properties = [
            ...defaultConfigProperties,
            ...configDescription.properties,
        ];
        return { configDescription, config };
    }, ({ configDescription, config }) => {
        setConfigDescription(configDescription);
        setConfig(config);
    }, []);
    useEffect(() => {
        if (config)
            setupForm(config);
    }, [config]);
    const save = async (saved) => {
        const changedConfig = convertFormValuesToObject(saved);
        try {
            if (config) {
                const newConfig = {
                    id: config.id,
                    alias: config.alias,
                    config: changedConfig.config,
                };
                await adminClient.authenticationManagement.updateConfig(newConfig);
                setConfig({ ...newConfig });
            }
            else {
                const newConfig = {
                    id: execution.id,
                    alias: changedConfig.alias,
                    config: changedConfig.config,
                };
                const { id } = await adminClient.authenticationManagement.createConfig(newConfig);
                setConfig({ ...newConfig.config, id, alias: newConfig.alias });
            }
            addAlert(t("configSaveSuccess"), AlertVariant.success);
            setShow(false);
        }
        catch (error) {
            addError("configSaveError", error);
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: t("settings"), children: _jsx(Button, { variant: "plain", "aria-label": t("settings"), onClick: () => setShow(true), children: _jsx(CogIcon, {}) }) }), configDescription && (_jsx(Modal, { variant: ModalVariant.small, isOpen: show, title: t("executionConfig", { name: configDescription.name }), onClose: () => setShow(false), children: _jsxs(Form, { id: "execution-config-form", onSubmit: handleSubmit(save), children: [_jsxs(FormProvider, { ...form, children: [_jsx(TextControl, { name: "alias", label: t("alias"), labelIcon: t("authenticationAliasHelp"), rules: { required: { value: true, message: t("required") } }, isDisabled: !!config }), _jsx(DynamicComponents, { stringify: true, properties: configDescription.properties || [] })] }), _jsxs(ActionGroup, { children: [_jsx(Button, { "data-testid": "save", variant: "primary", type: "submit", children: t("save") }), _jsx(Button, { "data-testid": "cancel", variant: ButtonVariant.link, onClick: () => {
                                        setShow(false);
                                    }, children: t("cancel") }), config && (_jsxs(Button, { className: "pf-v5-u-ml-4xl", "data-testid": "clear", variant: ButtonVariant.link, onClick: async () => {
                                        await adminClient.authenticationManagement.delConfig({
                                            id: config.id,
                                        });
                                        setConfig(undefined);
                                        setShow(false);
                                    }, children: [t("clear"), " ", _jsx(TrashIcon, {})] }))] })] }) }))] }));
};
//# sourceMappingURL=ExecutionConfigModal.js.map