@keycloakify/keycloak-admin-ui/user/Organizations.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ListEmptyState, OrganizationTable, useAlerts, useFetch, } from "../ui-shared";
import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, MenuToggle, ToolbarItem, } from "@patternfly/react-core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { useRealm } from "../context/realm-context/RealmContext";
import { OrganizationModal } from "../organizations/OrganizationModal";
import { toEditOrganization } from "../organizations/routes/EditOrganization";
import useToggle from "../utils/useToggle";
export const Organizations = () => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { id } = useParams();
    const { addAlert, addError } = useAlerts();
    const { realm } = useRealm();
    const [key, setKey] = useState(0);
    const refresh = () => setKey(key + 1);
    const [joinToggle, toggle, setJoinToggle] = useToggle();
    const [shouldJoin, setShouldJoin] = useState(true);
    const [openOrganizationPicker, setOpenOrganizationPicker] = useState(false);
    const [userOrgs, setUserOrgs] = useState([]);
    const [selectedOrgs, setSelectedOrgs] = useState([]);
    useFetch(() => adminClient.organizations.memberOrganizations({ userId: id }), setUserOrgs, [key]);
    const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
        titleKey: "removeConfirmOrganizationTitle",
        messageKey: t("organizationRemoveConfirm", { count: selectedOrgs.length }),
        continueButtonLabel: "remove",
        continueButtonVariant: ButtonVariant.danger,
        onConfirm: async () => {
            try {
                await Promise.all(selectedOrgs.map((org) => adminClient.organizations.delMember({
                    orgId: org.id,
                    userId: id,
                })));
                addAlert(t("organizationRemovedSuccess"));
                setSelectedOrgs([]);
                refresh();
            }
            catch (error) {
                addError("organizationRemoveError", error);
            }
        },
    });
    return (_jsxs(_Fragment, { children: [openOrganizationPicker && (_jsx(OrganizationModal, { isJoin: shouldJoin, existingOrgs: userOrgs, onClose: () => setOpenOrganizationPicker(false), onAdd: async (orgs) => {
                    try {
                        await Promise.all(orgs.map((org) => {
                            const form = new FormData();
                            form.append("id", id);
                            return shouldJoin
                                ? adminClient.organizations.addMember({
                                    orgId: org.id,
                                    userId: id,
                                })
                                : adminClient.organizations.inviteExistingUser({
                                    orgId: org.id,
                                }, form);
                        }));
                        addAlert(t(shouldJoin
                            ? "userAddedOrganization"
                            : "userInvitedOrganization", { count: orgs.length }));
                        refresh();
                    }
                    catch (error) {
                        addError(shouldJoin ? "userAddedOrganizationError" : "userInvitedError", error);
                    }
                } })), _jsx(DeleteConfirm, {}), _jsx(OrganizationTable, { link: ({ organization, children }) => (_jsx(Link, { to: toEditOrganization({
                        realm,
                        id: organization.id,
                        tab: "settings",
                    }), children: children }, organization.id)), loader: userOrgs, onSelect: (orgs) => setSelectedOrgs(orgs), deleteLabel: "remove", onDelete: (org) => {
                    setSelectedOrgs([org]);
                    toggleDeleteDialog();
                }, toolbarItem: _jsxs(_Fragment, { children: [_jsx(ToolbarItem, { children: _jsx(Dropdown, { onOpenChange: setJoinToggle, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, id: "toggle-id", onClick: toggle, variant: "primary", children: t("joinOrganization") })), isOpen: joinToggle, children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { onClick: () => {
                                                setShouldJoin(true);
                                                setOpenOrganizationPicker(true);
                                            }, children: t("joinOrganization") }, "join"), _jsx(DropdownItem, { onClick: () => {
                                                setShouldJoin(false);
                                                setOpenOrganizationPicker(true);
                                            }, children: t("sendInvite") }, "invite")] }) }) }), _jsx(ToolbarItem, { children: _jsx(Button, { "data-testid": "removeOrganization", variant: "secondary", isDisabled: selectedOrgs.length === 0, onClick: () => toggleDeleteDialog(), children: t("remove") }) })] }), children: _jsx(ListEmptyState, { message: t("emptyUserOrganizations"), instructions: t("emptyUserOrganizationsInstructions"), secondaryActions: [
                        {
                            text: t("joinOrganization"),
                            onClick: () => {
                                setShouldJoin(true);
                                setOpenOrganizationPicker(true);
                            },
                        },
                        {
                            text: t("sendInvitation"),
                            onClick: () => {
                                setShouldJoin(false);
                                setOpenOrganizationPicker(true);
                            },
                        },
                    ] }) })] }));
};
//# sourceMappingURL=Organizations.js.map