@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
57 lines • 3.83 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { PaginatingTableToolbar, useFetch } from "../../../ui-shared";
import { Button, ButtonVariant, Form, Modal, ModalVariant, PageSection, Radio, } from "@patternfly/react-core";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../../admin-client";
import useLocaleSort, { mapByKey } from "../../../utils/useLocaleSort";
import { providerConditionFilter } from "../../../authentication/FlowDetails";
const AuthenticationProviderList = ({ list, setValue, }) => {
return (_jsx(PageSection, { variant: "light", className: "pf-v5-u-py-lg", children: _jsx(Form, { isHorizontal: true, children: list === null || list === void 0 ? void 0 : list.map((provider) => (_jsx(Radio, { id: provider.id, name: "provider", label: provider.displayName, "data-testid": provider.id, description: provider.description, onChange: () => {
setValue(provider);
} }, provider.id))) }) }));
};
export const AddStepModal = ({ name, type, onSelect }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const [value, setValue] = useState();
const [providers, setProviders] = useState();
const [max, setMax] = useState(10);
const [first, setFirst] = useState(0);
const [search, setSearch] = useState("");
const localeSort = useLocaleSort();
useFetch(async () => {
switch (type) {
case "client":
return adminClient.authenticationManagement.getClientAuthenticatorProviders();
case "form":
return adminClient.authenticationManagement.getFormActionProviders();
case "condition": {
const providers = await adminClient.authenticationManagement.getAuthenticatorProviders();
return providers.filter(providerConditionFilter);
}
case "basic":
default: {
const providers = await adminClient.authenticationManagement.getAuthenticatorProviders();
return providers.filter((p) => !providerConditionFilter(p));
}
}
}, (providers) => setProviders(providers), []);
const page = useMemo(() => {
const normalizedSearch = search.trim().toLowerCase();
return localeSort(providers !== null && providers !== void 0 ? providers : [], mapByKey("displayName"))
.filter(({ displayName, description }) => (displayName === null || displayName === void 0 ? void 0 : displayName.toLowerCase().includes(normalizedSearch)) ||
(description === null || description === void 0 ? void 0 : description.toLowerCase().includes(normalizedSearch)))
.slice(first, first + max + 1);
}, [providers, search, first, max]);
return (_jsx(Modal, { variant: ModalVariant.medium, isOpen: true, title: t("addStepTo", { name }), onClose: () => onSelect(), actions: [
_jsx(Button, { id: "modal-add", "data-testid": "modal-add", onClick: () => onSelect(value), children: t("add") }, "add"),
_jsx(Button, { "data-testid": "cancel", id: "modal-cancel", variant: ButtonVariant.link, onClick: () => {
onSelect();
}, children: t("cancel") }, "cancel"),
], children: providers && (_jsx(PaginatingTableToolbar, { count: page.length || 0, first: first, max: max, onNextClick: setFirst, onPreviousClick: setFirst, onPerPageSelect: (first, max) => {
setFirst(first);
setMax(max);
}, inputGroupName: "search", inputGroupPlaceholder: t("search"), inputGroupOnEnter: setSearch, children: _jsx(AuthenticationProviderList, { list: page.slice(0, max), setValue: setValue }) })) }));
};
//# sourceMappingURL=AddStepModal.js.map