@keycloakify/keycloak-admin-ui/organizations/Members.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Dropdown, DropdownItem, DropdownList, MenuToggle, PageSection, ToolbarItem, } from "@patternfly/react-core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useAlerts } from "../ui-shared";
import { ListEmptyState } from "../ui-shared";
import { KeycloakDataTable } from "../ui-shared";
import { useRealm } from "../context/realm-context/RealmContext";
import { MemberModal } from "../groups/MembersModal";
import { toUser } from "../user/routes/User";
import { useParams } from "../utils/useParams";
import useToggle from "../utils/useToggle";
import { InviteMemberModal } from "../organizations/InviteMemberModal";
const UserDetailLink = (user) => {
    const { realm } = useRealm();
    return (_jsx(Link, { to: toUser({ realm, id: user.id, tab: "settings" }), children: user.username }));
};
export const Members = () => {
    const { t } = useTranslation();
    const { adminClient } = useAdminClient();
    const { id: orgId } = useParams();
    const { addAlert, addError } = useAlerts();
    const [key, setKey] = useState(0);
    const refresh = () => setKey(key + 1);
    const [open, toggle] = useToggle();
    const [openAddMembers, toggleAddMembers] = useToggle();
    const [openInviteMembers, toggleInviteMembers] = useToggle();
    const [selectedMembers, setSelectedMembers] = useState([]);
    const loader = (first, max, search) => adminClient.organizations.listMembers({ orgId, first, max, search });
    const removeMember = async (selectedMembers) => {
        try {
            await Promise.all(selectedMembers.map((user) => adminClient.organizations.delMember({
                orgId,
                userId: user.id,
            })));
            addAlert(t("organizationUsersLeft", { count: selectedMembers.length }));
        }
        catch (error) {
            addError("organizationUsersLeftError", error);
        }
        refresh();
    };
    return (_jsxs(PageSection, { variant: "light", children: [openAddMembers && (_jsx(MemberModal, { membersQuery: () => adminClient.organizations.listMembers({ orgId }), onAdd: async (selectedRows) => {
                    try {
                        await Promise.all(selectedRows.map((user) => adminClient.organizations.addMember({
                            orgId,
                            userId: user.id,
                        })));
                        addAlert(t("organizationUsersAdded", { count: selectedRows.length }));
                    }
                    catch (error) {
                        addError("organizationUsersAddedError", error);
                    }
                }, onClose: () => {
                    toggleAddMembers();
                    refresh();
                } })), openInviteMembers && (_jsx(InviteMemberModal, { orgId: orgId, onClose: toggleInviteMembers })), _jsx(KeycloakDataTable, { loader: loader, isPaginated: true, ariaLabelKey: "membersList", searchPlaceholderKey: "searchMember", onSelect: (members) => setSelectedMembers([...members]), canSelectAll: true, toolbarItem: _jsxs(_Fragment, { children: [_jsx(ToolbarItem, { children: _jsx(Dropdown, { onOpenChange: toggle, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, onClick: toggle, isExpanded: open, variant: "primary", children: t("addMember") })), isOpen: open, children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { onClick: () => {
                                                toggleAddMembers();
                                                toggle();
                                            }, children: t("addRealmUser") }), _jsx(DropdownItem, { onClick: () => {
                                                toggleInviteMembers();
                                                toggle();
                                            }, children: t("inviteMember") })] }) }) }), _jsx(ToolbarItem, { children: _jsx(Button, { variant: "plain", isDisabled: selectedMembers.length === 0, onClick: () => removeMember(selectedMembers), children: t("removeMember") }) })] }), actions: [
                    {
                        title: t("remove"),
                        onRowClick: async (member) => {
                            await removeMember([member]);
                        },
                    },
                ], columns: [
                    {
                        name: "username",
                        cellRenderer: UserDetailLink,
                    },
                    {
                        name: "email",
                    },
                    {
                        name: "firstName",
                    },
                    {
                        name: "lastName",
                    },
                ], emptyState: _jsx(ListEmptyState, { message: t("emptyMembers"), instructions: t("emptyMembersInstructions"), secondaryActions: [
                        {
                            text: t("addRealmUser"),
                            onClick: toggleAddMembers,
                        },
                        {
                            text: t("inviteMember"),
                            onClick: toggleInviteMembers,
                        },
                    ] }) }, key)] }));
};
//# sourceMappingURL=Members.js.map