@keycloakify/keycloak-admin-ui/user-federation/ManagePriorityDialog.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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";
import { useAlerts } from "../ui-shared";
export const ManagePriorityDialog = ({ components, onClose, }) => {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { addAlert, addError } = useAlerts();
    const [liveText, setLiveText] = useState("");
    const [order, setOrder] = useState(sortBy(components, "config.priority", "name").map((component) => component.name));
    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;
        }
    };
    return (_jsxs(Modal, { variant: ModalVariant.small, title: t("managePriorityOrder"), isOpen: true, onClose: onClose, actions: [
            _jsx(Button, { id: "modal-confirm", onClick: async () => {
                    const updates = order.map((name, index) => {
                        const component = components.find((c) => c.name === name);
                        component.config.priority = [index.toString()];
                        return adminClient.components.update({ id: component.id }, component);
                    });
                    try {
                        await Promise.all(updates);
                        addAlert(t("orderChangeSuccessUserFed"));
                    }
                    catch (error) {
                        addError("orderChangeErrorUserFed", error);
                    }
                    onClose();
                }, children: t("save") }, "confirm"),
            _jsx(Button, { id: "modal-cancel", variant: ButtonVariant.link, onClick: onClose, children: t("cancel") }, "cancel"),
        ], children: [_jsx(TextContent, { className: "pf-v5-u-pb-lg", children: _jsx(Text, { children: t("managePriorityInfo") }) }), _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((name) => (_jsx(Draggable, { hasNoWrapper: true, children: _jsx(DataListItem, { "aria-label": name, id: name, children: _jsxs(DataListItemRow, { children: [_jsx(DataListControl, { children: _jsx(DataListDragButton, { "aria-label": t("dragHelp") }) }), _jsx(DataListItemCells, { dataListCells: [
                                                _jsx(DataListCell, { "data-testid": name, children: name }, name),
                                            ] })] }) }) }, name))) }) }) }), _jsx("div", { className: "pf-v5-screen-reader", "aria-live": "assertive", children: liveText })] }));
};
//# sourceMappingURL=ManagePriorityDialog.js.map