@keycloakify/keycloak-admin-ui/identity-providers/ManageOrderDialog.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakSpinner, useAlerts, useFetch, } from "../ui-shared";
import { Button, ButtonVariant, DataList, DataListCell, DataListControl, DataListDragButton, DataListItem, DataListItemCells, DataListItemRow, DragDrop, Draggable, Droppable, Modal, ModalVariant, Text, TextContent, } from "@patternfly/react-core";
import { sortBy } from "lodash-es";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../admin-client";
export const ManageOrderDialog = ({ orgId, hideRealmBasedIdps = false, onClose, }) => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { addAlert, addError } = useAlerts();
    const [liveText, setLiveText] = useState("");
    const [providers, setProviders] = useState();
    const [order, setOrder] = useState([]);
    const onDragStart = ({ index }) => {
        setLiveText(t("onDragStart", { item: order[index] }));
        return true;
    };
    const onDragMove = ({ index }) => {
        setLiveText(t("onDragMove", { item: order[index] }));
    };
    const onDragFinish = (source, dest) => {
        if (dest) {
            const result = [...order];
            const [removed] = result.splice(source.index, 1);
            result.splice(dest.index, 0, removed);
            setLiveText(t("onDragFinish", { list: result }));
            setOrder(result);
            return true;
        }
        else {
            setLiveText(t("onDragCancel"));
            return false;
        }
    };
    useFetch(() => orgId
        ? adminClient.organizations.listIdentityProviders({ orgId })
        : adminClient.identityProviders.find({ realmOnly: hideRealmBasedIdps }), (providers) => {
        setProviders(providers);
        setOrder(sortBy(providers, ["config.guiOrder", "alias"]).map((provider) => provider.alias));
    }, []);
    if (!providers) {
        return _jsx(KeycloakSpinner, {});
    }
    return (_jsxs(Modal, { variant: ModalVariant.small, title: t("manageDisplayOrder"), isOpen: true, onClose: onClose, actions: [
            _jsx(Button, { id: "modal-confirm", "data-testid": "confirm", onClick: async () => {
                    const updates = order.map((alias, index) => {
                        const provider = providers.find((p) => p.alias === alias);
                        provider.config.guiOrder = index;
                        return adminClient.identityProviders.update({ alias }, provider);
                    });
                    try {
                        await Promise.all(updates);
                        addAlert(t("orderChangeSuccess"));
                    }
                    catch (error) {
                        addError("orderChangeError", error);
                    }
                    onClose();
                }, children: t("save") }, "confirm"),
            _jsx(Button, { id: "modal-cancel", "data-testid": "cancel", variant: ButtonVariant.link, onClick: onClose, children: t("cancel") }, "cancel"),
        ], children: [_jsx(TextContent, { className: "pf-v5-u-pb-lg", children: _jsx(Text, { children: t("orderDialogIntro") }) }), _jsx(DragDrop, { onDrag: onDragStart, onDragMove: onDragMove, onDrop: onDragFinish, children: _jsx(Droppable, { hasNoWrapper: true, children: _jsx(DataList, { "aria-label": t("manageOrderTableAria"), "data-testid": "manageOrderDataList", isCompact: true, children: order.map((alias) => (_jsx(Draggable, { hasNoWrapper: true, children: _jsx(DataListItem, { "aria-label": alias, id: alias, children: _jsxs(DataListItemRow, { children: [_jsx(DataListControl, { children: _jsx(DataListDragButton, { "aria-label": t("dragHelp") }) }), _jsx(DataListItemCells, { dataListCells: [
                                                _jsx(DataListCell, { "data-testid": alias, children: alias }, alias),
                                            ] })] }) }) }, alias))) }) }) }), _jsx("div", { className: "pf-v5-screen-reader", "aria-live": "assertive", children: liveText })] }));
};
//# sourceMappingURL=ManageOrderDialog.js.map