@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
85 lines • 6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormErrorText, HelpItem, useFetch, } from "../ui-shared";
import { Button, Chip, ChipGroup, FormGroup, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from "@patternfly/react-core";
import { TimesIcon } from "@patternfly/react-icons";
import { debounce } from "lodash-es";
import { useCallback, useRef, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../admin-client";
import { KeycloakSpinner } from "../ui-shared";
import useToggle from "../utils/useToggle";
export const IdentityProviderSelect = ({ name, label, helpText, defaultValue, isRequired, variant = "typeahead", isDisabled, }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { control, getValues, formState: { errors }, } = useFormContext();
const values = getValues(name);
const [open, toggleOpen, setOpen] = useToggle();
const [inputValue, setInputValue] = useState("");
const textInputRef = useRef();
const [idps, setIdps] = useState([]);
const [search, setSearch] = useState("");
const debounceFn = useCallback(debounce(setSearch, 1000), []);
useFetch(async () => {
const params = {
max: 20,
realmOnly: true,
};
if (search) {
params.search = search;
}
return await adminClient.identityProviders.find(params);
}, setIdps, [search]);
const convert = (identityProviders) => {
const options = identityProviders.map((option) => (_jsx(SelectOption, { value: option, selected: values === null || values === void 0 ? void 0 : values.includes(option.alias), children: option.alias }, option.alias)));
if (options.length === 0) {
return _jsx(SelectOption, { value: "", children: t("noResultsFound") });
}
return options;
};
if (!idps) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(FormGroup, { label: t(label), isRequired: isRequired, labelIcon: helpText ? (_jsx(HelpItem, { helpText: helpText, fieldLabelId: label })) : undefined, fieldId: name, children: [_jsx(Controller, { name: name, defaultValue: defaultValue, control: control, rules: {
validate: (value) => isRequired && value.filter((i) => i !== undefined).length === 0
? t("required")
: undefined,
}, render: ({ field }) => (_jsx(Select, { id: name, onOpenChange: toggleOpen, toggle: (ref) => (_jsx(MenuToggle, { "data-testid": name, ref: ref, variant: "typeahead", onClick: toggleOpen, isExpanded: open, isFullWidth: true, isDisabled: isDisabled, status: errors[name] ? "danger" : undefined, children: _jsxs(TextInputGroup, { isPlain: true, children: [_jsx(TextInputGroupMain, { value: inputValue || field.value, onClick: toggleOpen, onChange: (_, value) => {
setOpen(true);
setInputValue(value);
debounceFn(value);
}, autoComplete: "off", innerRef: textInputRef, placeholderText: t("selectAUser"), ...(field.value && {
"aria-activedescendant": field.value,
}), role: "combobox", isExpanded: open, "aria-controls": "select-create-typeahead-listbox", children: variant === "typeaheadMulti" &&
Array.isArray(field.value) && (_jsx(ChipGroup, { "aria-label": "Current selections", children: field.value.map((selection, index) => (_jsx(Chip, { onClick: (ev) => {
ev.stopPropagation();
field.onChange(field.value.filter((item) => item !== selection));
}, children: selection }, index))) })) }), _jsx(TextInputGroupUtilities, { children: !!search && (_jsx(Button, { variant: "plain", onClick: () => {
var _a;
setInputValue("");
setSearch("");
field.onChange([]);
(_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, "aria-label": t("clear"), children: _jsx(TimesIcon, { "aria-hidden": true }) })) })] }) })), isOpen: open, selected: field.value, onSelect: (_, v) => {
const idp = v;
const option = idp.alias;
if (variant !== "typeaheadMulti") {
const removed = field.value.includes(option);
if (removed) {
field.onChange([]);
}
else {
field.onChange([option]);
}
setInputValue(removed ? "" : option || "");
setOpen(false);
}
else {
const changedValue = field.value.find((v) => v === option)
? field.value.filter((v) => v !== option)
: [...field.value, option];
field.onChange(changedValue);
}
}, "aria-label": t(name), children: _jsx(SelectList, { children: convert(idps) }) })) }), errors[name] && _jsx(FormErrorText, { message: t("required") })] }));
};
//# sourceMappingURL=IdentityProviderSelect.js.map