@keycloakify/keycloak-admin-ui/clients/authorization/ScopePicker.js

Repackaged Keycloak Admin UI

import { jsx as _jsx } from "react/jsx-runtime";
import { HelpItem, KeycloakSelect, SelectVariant, useFetch, } from "../../ui-shared";
import { FormGroup, SelectOption } from "@patternfly/react-core";
import { 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";
export const ScopePicker = ({ clientId }) => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { control } = useFormContext();
    const [open, setOpen] = useState(false);
    const [scopes, setScopes] = useState();
    const [search, setSearch] = useState("");
    useFetch(() => {
        const params = {
            id: clientId,
            first: 0,
            max: 20,
            deep: false,
            name: search,
        };
        return adminClient.clients.listAllScopes(params);
    }, setScopes, [search]);
    const renderScopes = (scopes) => scopes.map((option) => (_jsx(SelectOption, { value: option, children: option.name }, option.id)));
    if (!scopes)
        return _jsx(KeycloakSpinner, {});
    return (_jsx(FormGroup, { label: t("authorizationScopes"), labelIcon: _jsx(HelpItem, { helpText: t("clientScopesHelp"), fieldLabelId: "scopes" }), fieldId: "scopes", children: _jsx(Controller, { name: "scopes", defaultValue: [], control: control, render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "scopes", variant: SelectVariant.typeaheadMulti, chipGroupProps: {
                    numChips: 3,
                    expandedText: t("hide"),
                    collapsedText: t("showRemaining"),
                }, onToggle: (val) => setOpen(val), isOpen: open, selections: field.value.map((o) => o.name), onFilter: (value) => {
                    setSearch(value);
                    return renderScopes(scopes);
                }, onSelect: (selectedValue) => {
                    const option = typeof selectedValue === "string"
                        ? selectedValue
                        : selectedValue.name;
                    const changedValue = field.value.find((o) => o.name === option)
                        ? field.value.filter((item) => item.name !== option)
                        : [...field.value, selectedValue];
                    field.onChange(changedValue);
                }, onClear: () => {
                    setSearch("");
                    field.onChange([]);
                }, typeAheadAriaLabel: t("authorizationScopes"), children: renderScopes(scopes) })) }) }));
};
//# sourceMappingURL=ScopePicker.js.map