@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
120 lines • 7.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakSelect, SelectVariant, label, useAlerts, } from "../../ui-shared";
import { ActionGroup, Alert, AlertVariant, Button, ButtonVariant, Checkbox, InputGroup, InputGroupItem, SelectOption, Text, TextContent, TextInput, TextVariants, } from "@patternfly/react-core";
import { CheckIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Form } from "react-router-dom";
export function UserDataTableAttributeSearchForm({ activeFilters, setActiveFilters, profile, createAttributeSearchChips, searchUserWithAttributes, }) {
const { t } = useTranslation();
const { addAlert } = useAlerts();
const [selectAttributeKeyOpen, setSelectAttributeKeyOpen] = useState(false);
const defaultValues = {
name: "",
displayName: "",
value: "",
};
const { getValues, register, reset, formState: { errors }, setValue, setError, clearErrors, control, } = useForm({
mode: "onChange",
defaultValues,
});
const isAttributeKeyDuplicate = () => {
return activeFilters.userAttribute.some((filter) => filter.name === getValues().name);
};
const isAttributeNameValid = () => {
let valid = false;
if (!getValues().name.length) {
setError("name", {
type: "empty",
message: t("searchUserByAttributeMissingKeyError"),
});
}
else if (activeFilters.userAttribute.some((filter) => filter.name === getValues().name)) {
setError("name", {
type: "conflict",
message: t("searchUserByAttributeKeyAlreadyInUseError"),
});
}
else {
valid = true;
}
return valid;
};
const isAttributeValueValid = () => {
let valid = false;
if (!getValues().value.length) {
setError("value", {
type: "empty",
message: t("searchUserByAttributeMissingValueError"),
});
}
else {
valid = true;
}
return valid;
};
const isAttributeValid = () => isAttributeNameValid() && isAttributeValueValid();
const addToFilter = () => {
var _a, _b;
if (isAttributeValid()) {
setActiveFilters({
exact: getValues().exact,
userAttribute: [...activeFilters.userAttribute, { ...getValues() }],
});
reset({ exact: getValues().exact });
}
else {
if ((_a = errors.name) === null || _a === void 0 ? void 0 : _a.message) {
addAlert(errors.name.message, AlertVariant.danger);
}
if ((_b = errors.value) === null || _b === void 0 ? void 0 : _b.message) {
addAlert(errors.value.message, AlertVariant.danger);
}
}
};
const clearActiveFilters = () => {
const filtered = [...activeFilters.userAttribute].filter((chip) => chip.name !== chip.name);
setActiveFilters({ exact: getValues().exact, userAttribute: filtered });
};
const createAttributeKeyInputField = () => {
var _a;
if (profile) {
return (_jsx(KeycloakSelect, { "data-testid": "search-attribute-name-select", variant: SelectVariant.typeahead, onToggle: (isOpen) => setSelectAttributeKeyOpen(isOpen), selections: getValues().displayName, onSelect: (selectedValue) => {
setValue("displayName", selectedValue.toString());
if (isAttributeKeyDuplicate()) {
setError("name", { type: "conflict" });
}
else {
clearErrors("name");
}
}, isOpen: selectAttributeKeyOpen, placeholderText: t("selectAttribute"), validated: errors.name && "error", maxHeight: 300, ...register("displayName", {
required: true,
validate: isAttributeNameValid,
}), children: (_a = profile.attributes) === null || _a === void 0 ? void 0 : _a.map((option) => (_jsx(SelectOption, { value: label(t, option.displayName, option.name), onClick: (e) => {
e.stopPropagation();
setSelectAttributeKeyOpen(false);
setValue("name", option.name);
}, children: label(t, option.displayName, option.name) }, option.name))) }));
}
else {
return (_jsx(TextInput, { id: "name", placeholder: t("keyPlaceholder"), validated: errors.name && "error", onKeyDown: (e) => e.key === "Enter" && addToFilter(), ...register("name", {
required: true,
validate: isAttributeNameValid,
}) }));
}
};
return (_jsxs(Form, { className: "user-attribute-search-form", "data-testid": "user-attribute-search-form", children: [_jsx(TextContent, { className: "user-attribute-search-form-headline", children: _jsx(Text, { component: TextVariants.h2, children: t("selectAttributes") }) }), _jsx(Alert, { isInline: true, className: "user-attribute-search-form-alert", variant: "info", title: t("searchUserByAttributeDescription"), component: "h3" }), _jsxs(TextContent, { className: "user-attribute-search-form-key-value", children: [_jsx("div", { className: "user-attribute-search-form-left", children: _jsx(Text, { component: TextVariants.h3, children: t("key") }) }), _jsx("div", { className: "user-attribute-search-form-right", children: _jsx(Text, { component: TextVariants.h3, children: t("value") }) })] }), _jsx("div", { className: "user-attribute-search-form-left", children: createAttributeKeyInputField() }), _jsx("div", { className: "user-attribute-search-form-right", children: _jsxs(InputGroup, { children: [_jsx(InputGroupItem, { children: _jsx(TextInput, { id: "value", placeholder: t("valuePlaceholder"), validated: errors.value && "error", onKeyDown: (e) => {
if (e.key === "Enter") {
e.preventDefault();
addToFilter();
}
}, ...register("value", {
required: true,
validate: isAttributeValueValid,
}) }) }), _jsx(InputGroupItem, { children: _jsx(Button, { "data-testid": "user-attribute-search-add-filter-button", variant: "control", icon: _jsx(CheckIcon, {}), onClick: addToFilter, "aria-label": t("addToFilter") }) })] }) }), createAttributeSearchChips(), _jsx("div", { className: "pf-v5-u-pt-lg", children: _jsx(Controller, { name: "exact", defaultValue: false, control: control, render: ({ field }) => (_jsx(Checkbox, { id: "exact", "data-testid": "exact", label: t("exactSearch"), isChecked: field.value, onChange: field.onChange })) }) }), _jsxs(ActionGroup, { className: "user-attribute-search-form-action-group", children: [_jsx(Button, { "data-testid": "search-user-attribute-btn", variant: "primary", type: "submit", isDisabled: !activeFilters.userAttribute.length, onClick: searchUserWithAttributes, children: t("search") }), _jsx(Button, { variant: ButtonVariant.link, onClick: () => {
reset();
clearActiveFilters();
}, children: t("reset") })] })] }));
}
//# sourceMappingURL=UserDataTableAttributeSearchForm.js.map