@keycloakify/keycloak-admin-ui/realm-roles/UsersInRoleTab.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, PageSection, Popover } from "@patternfly/react-core";
import { QuestionCircleIcon } from "@patternfly/react-icons";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useHelp } from "../ui-shared";
import { useAdminClient } from "../admin-client";
import { ListEmptyState } from "../ui-shared";
import { KeycloakDataTable } from "../ui-shared";
import { useRealm } from "../context/realm-context/RealmContext";
import { emptyFormatter, upperCaseFormatter } from "../util";
import { useParams } from "../utils/useParams";
export const UsersInRoleTab = () => {
    const { adminClient } = useAdminClient();
    const navigate = useNavigate();
    const { realm } = useRealm();
    const { t } = useTranslation();
    const { id, clientId } = useParams();
    const loader = async (first, max) => {
        const role = await adminClient.roles.findOneById({ id: id });
        if (!role) {
            throw new Error(t("notFound"));
        }
        if (role.clientRole) {
            return adminClient.clients.findUsersWithRole({
                roleName: role.name,
                id: clientId,
                briefRepresentation: true,
                first,
                max,
            });
        }
        return adminClient.roles.findUsersWithRole({
            name: role.name,
            briefRepresentation: true,
            first,
            max,
        });
    };
    const { enabled } = useHelp();
    return (_jsx(PageSection, { "data-testid": "users-page", variant: "light", children: _jsx(KeycloakDataTable, { isPaginated: true, loader: loader, ariaLabelKey: "roleList", searchPlaceholderKey: "", "data-testid": "users-in-role-table", toolbarItem: enabled && (_jsx(Popover, { "aria-label": "Basic popover", position: "bottom", bodyContent: _jsxs("div", { children: [t("whoWillAppearPopoverTextRoles"), _jsx(Button, { className: "kc-groups-link", variant: "link", onClick: () => navigate(`/${realm}/groups`), children: t("groups") }), t("or"), _jsxs(Button, { className: "kc-users-link", variant: "link", onClick: () => navigate(`/${realm}/users`), children: [t("users"), "."] })] }), footerContent: t("whoWillAppearPopoverFooterText"), children: _jsx(Button, { variant: "link", className: "kc-who-will-appear-button", icon: _jsx(QuestionCircleIcon, {}), children: t("whoWillAppearLinkTextRoles") }, "who-will-appear-button") })), emptyState: _jsx(ListEmptyState, { hasIcon: true, message: t("noDirectUsers"), instructions: _jsxs("div", { children: [t("noUsersEmptyStateDescription"), _jsx(Button, { className: "kc-groups-link-empty-state", variant: "link", onClick: () => navigate(`/${realm}/groups`), children: t("groups") }), t("or"), _jsx(Button, { className: "kc-users-link-empty-state", variant: "link", onClick: () => navigate(`/${realm}/users`), children: t("users") }), t("noUsersEmptyStateDescriptionContinued")] }) }), columns: [
                {
                    name: "username",
                    displayKey: "userName",
                    cellFormatters: [emptyFormatter()],
                },
                {
                    name: "email",
                    displayKey: "email",
                    cellFormatters: [emptyFormatter()],
                },
                {
                    name: "lastName",
                    displayKey: "lastName",
                    cellFormatters: [emptyFormatter()],
                },
                {
                    name: "firstName",
                    displayKey: "firstName",
                    cellFormatters: [upperCaseFormatter(), emptyFormatter()],
                },
            ] }) }));
};
//# sourceMappingURL=UsersInRoleTab.js.map