@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
113 lines • 7.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useAlerts, useFetch } from "../../ui-shared";
import { AlertVariant, ButtonVariant, PageSection, Tab, Tabs, TabTitleText, } from "@patternfly/react-core";
import { isEqual } from "lodash-es";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../../components/form/FormAccess";
import { useRealm } from "../../context/realm-context/RealmContext";
import { convertToFormValues } from "../../util";
import { AddEventTypesDialog } from "../../realm-settings/event-config/AddEventTypesDialog";
import { EventConfigForm } from "../../realm-settings/event-config/EventConfigForm";
import { EventListenersForm } from "../../realm-settings/event-config/EventListenersForm";
import { EventsTypeTable } from "../../realm-settings/event-config/EventsTypeTable";
export const EventsTab = ({ realm }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const form = useForm();
const { setValue, handleSubmit } = form;
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const [tableKey, setTableKey] = useState(0);
const reload = () => setTableKey(new Date().getTime());
const [activeTab, setActiveTab] = useState("event");
const [events, setEvents] = useState();
const [type, setType] = useState();
const [addEventType, setAddEventType] = useState(false);
const { addAlert, addError } = useAlerts();
const { realm: realmName, refresh: refreshRealm } = useRealm();
const setupForm = (eventConfig) => {
setEvents(eventConfig);
convertToFormValues(eventConfig || {}, setValue);
};
const clear = async (type) => {
setType(type);
toggleDeleteDialog();
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteEvents",
messageKey: "deleteEventsConfirm",
continueButtonLabel: "clear",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
switch (type) {
case "admin":
await adminClient.realms.clearAdminEvents({ realm: realmName });
break;
case "user":
await adminClient.realms.clearEvents({ realm: realmName });
break;
}
addAlert(t(`${type}-events-cleared`), AlertVariant.success);
}
catch (error) {
addError(`${type}-events-cleared-error`, error);
}
},
});
useFetch(() => adminClient.realms.getConfigEvents({ realm: realmName }), (eventConfig) => {
var _a;
setupForm({
...eventConfig,
adminEventsExpiration: (_a = realm.attributes) === null || _a === void 0 ? void 0 : _a.adminEventsExpiration,
});
reload();
}, [key]);
const save = async (config) => {
var _a;
const updatedEventListener = !isEqual(events === null || events === void 0 ? void 0 : events.eventsListeners, config.eventsListeners);
const { adminEventsExpiration, ...eventConfig } = config;
if (((_a = realm.attributes) === null || _a === void 0 ? void 0 : _a.adminEventsExpiration) !== adminEventsExpiration) {
await adminClient.realms.update({ realm: realmName }, {
...realm,
attributes: { ...(realm.attributes || {}), adminEventsExpiration },
});
}
refreshRealm();
try {
await adminClient.realms.updateConfigEvents({ realm: realmName }, eventConfig);
setupForm({ ...events, ...eventConfig, adminEventsExpiration });
addAlert(updatedEventListener
? t("saveEventListenersSuccess")
: t("eventConfigSuccessfully"), AlertVariant.success);
}
catch (error) {
addError(updatedEventListener
? t("saveEventListenersError")
: t("eventConfigError"), error);
}
};
const addEventTypes = async (eventTypes) => {
var _a;
const eventsTypes = eventTypes.map((type) => type.id);
const enabledEvents = (_a = events.enabledEventTypes) === null || _a === void 0 ? void 0 : _a.concat(eventsTypes);
await addEvents(enabledEvents);
};
const addEvents = async (events = []) => {
const eventConfig = { ...form.getValues(), enabledEventTypes: events };
await save(eventConfig);
setAddEventType(false);
refresh();
};
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), addEventType && (_jsx(AddEventTypesDialog, { onConfirm: (eventTypes) => addEventTypes(eventTypes), configured: (events === null || events === void 0 ? void 0 : events.enabledEventTypes) || [], onClose: () => setAddEventType(false) })), _jsxs(Tabs, { activeKey: activeTab, onSelect: (_, key) => setActiveTab(key), children: [_jsx(Tab, { eventKey: "event", title: _jsx(TabTitleText, { children: t("eventListeners") }), "data-testid": "rs-event-listeners-tab", children: _jsx(PageSection, { children: _jsx(FormAccess, { role: "manage-events", isHorizontal: true, onSubmit: handleSubmit(save), children: _jsx(EventListenersForm, { form: form, reset: () => setupForm(events) }) }) }) }), _jsxs(Tab, { eventKey: "user", title: _jsx(TabTitleText, { children: t("userEventsSettings") }), "data-testid": "rs-events-tab", children: [_jsx(PageSection, { children: _jsx(FormAccess, { role: "manage-events", isHorizontal: true, onSubmit: handleSubmit(save), children: _jsx(EventConfigForm, { type: "user", form: form, reset: () => setupForm(events), clear: () => clear("user") }) }) }), _jsx(PageSection, { children: _jsx(EventsTypeTable, { addTypes: () => setAddEventType(true), eventTypes: (events === null || events === void 0 ? void 0 : events.enabledEventTypes) || [], onDelete: (value) => {
var _a;
const enabledEventTypes = (_a = events === null || events === void 0 ? void 0 : events.enabledEventTypes) === null || _a === void 0 ? void 0 : _a.filter((e) => e !== value.id);
addEvents(enabledEventTypes);
setEvents({ ...events, enabledEventTypes });
} }, tableKey) })] }), _jsx(Tab, { eventKey: "admin", title: _jsx(TabTitleText, { children: t("adminEventsSettings") }), "data-testid": "rs-admin-events-tab", children: _jsx(PageSection, { children: _jsx(FormAccess, { role: "manage-events", isHorizontal: true, onSubmit: handleSubmit(save), children: _jsx(EventConfigForm, { type: "admin", form: form, reset: () => setupForm(events), clear: () => clear("admin") }) }) }) })] })] }));
};
//# sourceMappingURL=EventsTab.js.map