@keycloakify/keycloak-admin-ui/clients/authorization/policy/ClientScope.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FormErrorText, HelpItem, useFetch, } from "../../../ui-shared";
import { Button, Checkbox, FormGroup } from "@patternfly/react-core";
import { MinusCircleIcon } from "@patternfly/react-icons";
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import { useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../../admin-client";
import useLocaleSort, { mapByKey } from "../../../utils/useLocaleSort";
import { AddScopeDialog } from "../../../clients/scopes/AddScopeDialog";
export const ClientScope = () => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { control, getValues, setValue, formState: { errors }, } = useFormContext();
    const [open, setOpen] = useState(false);
    const [scopes, setScopes] = useState([]);
    const [selectedScopes, setSelectedScopes] = useState([]);
    const localeSort = useLocaleSort();
    useFetch(() => adminClient.clientScopes.find(), (scopes) => {
        setSelectedScopes(getValues("clientScopes").map((s) => scopes.find((c) => c.id === s.id)));
        setScopes(localeSort(scopes, mapByKey("name")));
    }, []);
    return (_jsxs(FormGroup, { label: t("clientScopes"), labelIcon: _jsx(HelpItem, { helpText: t("clientsClientScopesHelp"), fieldLabelId: "clientScopes" }), fieldId: "clientScopes", isRequired: true, children: [_jsx(Controller, { name: "clientScopes", control: control, defaultValue: [], rules: {
                    validate: (value) => value.filter((c) => c.id).length > 0,
                }, render: ({ field }) => (_jsxs(_Fragment, { children: [open && (_jsx(AddScopeDialog, { clientScopes: scopes.filter((scope) => !field.value
                                .map((c) => c.id)
                                .includes(scope.id)), isClientScopesConditionType: true, open: open, toggleDialog: () => setOpen(!open), onAdd: (scopes) => {
                                setSelectedScopes([
                                    ...selectedScopes,
                                    ...scopes.map((s) => s.scope),
                                ]);
                                field.onChange([
                                    ...field.value,
                                    ...scopes
                                        .map((scope) => scope.scope)
                                        .map((item) => ({ id: item.id, required: false })),
                                ]);
                            } })), _jsx(Button, { "data-testid": "select-scope-button", variant: "secondary", onClick: () => {
                                setOpen(true);
                            }, children: t("addClientScopes") })] })) }), selectedScopes.length > 0 && (_jsxs(Table, { variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: t("clientScopeTitle") }), _jsx(Th, { children: t("required") }), _jsx(Th, { "aria-hidden": "true" })] }) }), _jsx(Tbody, { children: selectedScopes.map((scope, index) => (_jsxs(Tr, { children: [_jsx(Td, { children: scope.name }), _jsx(Td, { children: _jsx(Controller, { name: `clientScopes.${index}.required`, defaultValue: false, control: control, render: ({ field }) => (_jsx(Checkbox, { id: "required", "data-testid": "standard", name: "required", isChecked: field.value, onChange: field.onChange })) }) }), _jsx(Td, { children: _jsx(Button, { variant: "link", className: "keycloak__client-authorization__policy-row-remove", icon: _jsx(MinusCircleIcon, {}), onClick: () => {
                                            setValue("clientScopes", [
                                                ...getValues("clientScopes").filter((s) => s.id !== scope.id),
                                            ]);
                                            setSelectedScopes([
                                                ...selectedScopes.filter((s) => s.id !== scope.id),
                                            ]);
                                        } }) })] }, scope.id))) })] })), errors.clientScopes && (_jsx(FormErrorText, { message: t("requiredClientScope") }))] }));
};
//# sourceMappingURL=ClientScope.js.map