@keycloakify/keycloak-admin-ui/components/role-mapping/AddRoleMappingModal.js

Repackaged Keycloak Admin UI

import { jsx as _jsx } from "react/jsx-runtime";
import { Button, Dropdown, DropdownItem, DropdownList, MenuToggle, Modal, ModalVariant, ToolbarItem, } from "@patternfly/react-core";
import { FilterIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { useAccess } from "../../context/access/Access";
import { translationFormatter } from "../../utils/translationFormatter";
import useLocaleSort from "../../utils/useLocaleSort";
import { ListEmptyState } from "../../ui-shared";
import { KeycloakDataTable } from "../../ui-shared";
import { ServiceRole } from "../../components/role-mapping/RoleMapping";
import { getAvailableRoles } from "../../components/role-mapping/queries";
import { getAvailableClientRoles } from "../../components/role-mapping/resource";
export const AddRoleMappingModal = ({ id, name, type, isRadio = false, isLDAPmapper, onAssign, onClose, }) => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { hasAccess } = useAccess();
    const canViewRealmRoles = hasAccess("view-realm") || hasAccess("query-users");
    const [searchToggle, setSearchToggle] = useState(false);
    const [filterType, setFilterType] = useState("clients");
    const [selectedRows, setSelectedRows] = useState([]);
    const [key, setKey] = useState(0);
    const refresh = () => setKey(key + 1);
    const localeSort = useLocaleSort();
    const compareRow = ({ role: { name } }) => name === null || name === void 0 ? void 0 : name.toUpperCase();
    const loader = async (first, max, search) => {
        const params = {
            first: first,
            max: max,
        };
        if (search) {
            params.search = search;
        }
        const roles = await getAvailableRoles(adminClient, type, { ...params, id });
        const sorted = localeSort(roles, compareRow);
        return sorted.map((row) => {
            return {
                role: row.role,
                id: row.role.id,
            };
        });
    };
    const clientRolesLoader = async (first, max, search) => {
        const roles = await getAvailableClientRoles(adminClient, {
            id,
            type,
            first: first || 0,
            max: max || 10,
            search,
        });
        return localeSort(roles.map((e) => ({
            client: { clientId: e.client, id: e.clientId },
            role: { id: e.id, name: e.role, description: e.description },
            id: e.id,
        })), ({ client: { clientId }, role: { name } }) => `${clientId}${name}`);
    };
    return (_jsx(Modal, { variant: ModalVariant.large, title: isLDAPmapper ? t("assignRole") : t("assignRolesTo", { client: name }), isOpen: true, onClose: onClose, actions: [
            _jsx(Button, { "data-testid": "assign", isDisabled: selectedRows.length === 0, variant: "primary", onClick: () => {
                    onAssign(selectedRows);
                    onClose();
                }, children: t("assign") }, "confirm"),
            _jsx(Button, { "data-testid": "cancel", variant: "link", onClick: onClose, children: t("cancel") }, "cancel"),
        ], children: _jsx(KeycloakDataTable, { onSelect: (rows) => setSelectedRows([...rows]), searchPlaceholderKey: "searchByRoleName", isPaginated: !(filterType === "roles" && type !== "roles"), searchTypeComponent: canViewRealmRoles && (_jsx(ToolbarItem, { children: _jsx(Dropdown, { onOpenChange: (isOpen) => setSearchToggle(isOpen), onSelect: () => {
                        setFilterType(filterType === "roles" ? "clients" : "roles");
                        setSearchToggle(false);
                        refresh();
                    }, toggle: (ref) => (_jsx(MenuToggle, { "data-testid": "filter-type-dropdown", ref: ref, onClick: () => setSearchToggle(!searchToggle), icon: _jsx(FilterIcon, {}), children: filterType === "roles"
                            ? t("filterByRoles")
                            : t("filterByClients") })), isOpen: searchToggle, children: _jsx(DropdownList, { children: _jsx(DropdownItem, { "data-testid": filterType, children: filterType === "roles"
                                ? t("filterByClients")
                                : t("filterByRoles") }, "filter-type") }) }) })), canSelectAll: true, isRadio: isRadio, loader: filterType === "roles" ? loader : clientRolesLoader, ariaLabelKey: "roles", columns: [
                {
                    name: "name",
                    cellRenderer: ServiceRole,
                },
                {
                    name: "role.description",
                    displayKey: "description",
                    cellFormatters: [translationFormatter(t)],
                },
            ], emptyState: _jsx(ListEmptyState, { message: t("noRoles"), instructions: t("noRealmRolesToAssign"), secondaryActions: [
                    {
                        text: t("filterByClients"),
                        onClick: () => {
                            setFilterType("clients");
                            refresh();
                        },
                    },
                ] }) }, key) }));
};
//# sourceMappingURL=AddRoleMappingModal.js.map