@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
76 lines • 6.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakSelect, SelectVariant } from "../../ui-shared";
import { Button, SelectOption, TextInput } from "@patternfly/react-core";
import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import { camelCase } from "lodash-es";
import { useEffect, useMemo, useState } from "react";
import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { defaultContextAttributes } from "../../clients/utils";
import "./key-based-attribute-input.css";
const ValueInput = ({ name, rowIndex, attribute, selectableValues, resources, }) => {
const { t } = useTranslation();
const { control, register, getValues } = useFormContext();
const [isValueOpenArray, setIsValueOpenArray] = useState([false]);
const toggleValueSelect = (rowIndex, open) => {
const arr = [...isValueOpenArray];
arr[rowIndex] = open;
setIsValueOpenArray(arr);
};
const attributeValues = useMemo(() => {
var _a;
let values = [];
if (selectableValues) {
values = (_a = defaultContextAttributes.find((attr) => { var _a, _b; return attr.key === ((_b = (_a = getValues().context) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b.key); })) === null || _a === void 0 ? void 0 : _a.values;
}
return values;
}, [getValues]);
const renderSelectOptionType = () => {
var _a;
const scopeValues = (_a = resources === null || resources === void 0 ? void 0 : resources.find((resource) => { var _a, _b; return resource.name === ((_b = (_a = getValues().resources) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b.key); })) === null || _a === void 0 ? void 0 : _a.scopes;
if ((attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.length) && !resources) {
return attributeValues.map((attr) => (_jsx(SelectOption, { value: attr.key, children: attr.name }, attr.key)));
}
else if (scopeValues === null || scopeValues === void 0 ? void 0 : scopeValues.length) {
return scopeValues.map((scope) => (_jsx(SelectOption, { value: scope.name, children: scope.name }, scope.name)));
}
};
const getMessageBundleKey = (attributeName) => camelCase(attributeName).replace(/\W/g, "");
return (_jsx(Td, { children: resources || (attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.length) ? (_jsx(Controller, { name: `${name}.${rowIndex}.value`, defaultValue: [], control: control, render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: `${attribute.id}-value`, className: "kc-attribute-value-selectable", chipGroupProps: {
numChips: 1,
expandedText: t("hide"),
collapsedText: t("showRemaining"),
}, onToggle: (open) => toggleValueSelect(rowIndex, open), isOpen: isValueOpenArray[rowIndex], variant: SelectVariant.typeahead, typeAheadAriaLabel: t("selectOrTypeAKey"), placeholderText: t("selectOrTypeAKey"), selections: field.value, onSelect: (v) => {
field.onChange(v);
toggleValueSelect(rowIndex, false);
}, children: renderSelectOptionType() })) })) : (_jsx(TextInput, { id: `${getMessageBundleKey(attribute.key)}-value`, className: "value-input", defaultValue: attribute.value, "data-testid": "attribute-value-input", "aria-label": t("value"), ...register(`${name}.${rowIndex}.value`) })) }));
};
export const KeyBasedAttributeInput = ({ name, selectableValues, resources, }) => {
const { t } = useTranslation();
const { control, watch } = useFormContext();
const { fields, append, remove } = useFieldArray({
control: control,
name,
});
const [isKeyOpenArray, setIsKeyOpenArray] = useState([false]);
const toggleKeySelect = (rowIndex, open) => {
const arr = [...isKeyOpenArray];
arr[rowIndex] = open;
setIsKeyOpenArray(arr);
};
useEffect(() => {
if (!fields.length) {
append({ key: "", value: "" }, { shouldFocus: false });
}
}, [fields]);
const watchLastValue = watch(`${name}.${fields.length - 1}.value`, "");
return (_jsxs(Table, { className: "kc-attributes__table", "aria-label": "Role attribute keys and values", variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { width: 40, children: t("key") }), _jsx(Th, { width: 40, children: t("value") })] }) }), _jsxs(Tbody, { children: [fields.map((attribute, rowIndex) => (_jsxs(Tr, { "data-testid": "attribute-row", children: [_jsx(Td, { children: _jsx(Controller, { name: `${name}.${rowIndex}.key`, defaultValue: "", control: control, render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: `${name}.${rowIndex}.key`, className: "kc-attribute-key-selectable", onToggle: (open) => toggleKeySelect(rowIndex, open), isOpen: isKeyOpenArray[rowIndex], variant: SelectVariant.typeahead, typeAheadAriaLabel: t("selectOrTypeAKey"), placeholderText: t("selectOrTypeAKey"), selections: field.value, onSelect: (v) => {
field.onChange(v.toString());
toggleKeySelect(rowIndex, false);
}, children: selectableValues === null || selectableValues === void 0 ? void 0 : selectableValues.map((attribute) => (_jsx(SelectOption, { selected: attribute.name === field.value, value: resources ? attribute.name : attribute.key, children: attribute.name }, attribute.key))) })) }) }), _jsx(ValueInput, { name: name, attribute: attribute, rowIndex: rowIndex, selectableValues: selectableValues, resources: resources }), _jsx(Td, { children: _jsx(Button, { id: `${name}-minus-button-${rowIndex}`, variant: "link", className: "kc-attributes__minus-icon", onClick: () => remove(rowIndex), "aria-label": t("remove"), children: _jsx(MinusCircleIcon, {}) }) })] }, attribute.id))), _jsx(Tr, { children: _jsx(Td, { children: _jsx(Button, { "aria-label": t("addAttribute", { label: t("attribute") }), id: `${name}-plus-icon`, variant: "link", className: "kc-attributes__plus-icon", onClick: () => {
append({ key: "", value: "" });
setIsKeyOpenArray([...isKeyOpenArray, false]);
}, icon: _jsx(PlusCircleIcon, {}), isDisabled: !watchLastValue, "data-testid": "attribute-add-row", children: t("addAttribute", { label: t("attribute") }) }) }) })] })] }));
};
//# sourceMappingURL=KeyBasedAttributeInput.js.map