@keycloakify/keycloak-admin-ui/page/PageHandler.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useAlerts, useFetch } from "../ui-shared";
import { ActionGroup, Button, Form, PageSection } from "@patternfly/react-core";
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { DynamicComponents } from "../components/dynamic/DynamicComponents";
import { useRealm } from "../context/realm-context/RealmContext";
import { useParams } from "../utils/useParams";
import { TAB_PROVIDER } from "../page/PageList";
import { toPage } from "../page/routes";
export const PageHandler = ({ id: idAttribute, providerType, page: { id: providerId, ...page }, }) => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const form = useForm();
    const { realm: realmName, realmRepresentation: realm } = useRealm();
    const { addAlert, addError } = useAlerts();
    const [id, setId] = useState(idAttribute);
    const params = useParams();
    useFetch(async () => await Promise.all([
        id ? adminClient.components.findOne({ id }) : Promise.resolve(),
        providerType === TAB_PROVIDER
            ? adminClient.components.find({ type: TAB_PROVIDER })
            : Promise.resolve(),
    ]), ([data, tabs]) => {
        const tab = (tabs || []).find((t) => t.providerId === providerId);
        form.reset(data || tab || {});
        if (tab)
            setId(tab.id);
    }, []);
    const onSubmit = async (component) => {
        if (component.config || params) {
            component.config = Object.assign(component.config || {}, params);
            Object.entries(component.config).forEach(([key, value]) => (component.config[key] = Array.isArray(value) ? value : [value]));
        }
        try {
            const updatedComponent = {
                ...component,
                providerId,
                providerType,
                parentId: realm === null || realm === void 0 ? void 0 : realm.id,
            };
            if (id) {
                await adminClient.components.update({ id }, updatedComponent);
            }
            else {
                const { id } = await adminClient.components.create(updatedComponent);
                setId(id);
            }
            addAlert(t("itemSaveSuccessful"));
        }
        catch (error) {
            addError("itemSaveError", error);
        }
    };
    return (_jsx(PageSection, { variant: "light", children: _jsxs(Form, { isHorizontal: true, onSubmit: form.handleSubmit(onSubmit), className: "keycloak__form", children: [_jsx(FormProvider, { ...form, children: _jsx(DynamicComponents, { properties: page.properties }) }), _jsxs(ActionGroup, { children: [_jsx(Button, { "data-testid": "save", type: "submit", children: t("save") }), _jsx(Button, { variant: "link", component: (props) => (_jsx(Link, { ...props, to: toPage({ realm: realmName, providerId: providerId }) })), children: t("cancel") })] })] }) }));
};
//# sourceMappingURL=PageHandler.js.map