@keycloakify/keycloak-admin-ui/page/PageList.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useAlerts } from "../ui-shared";
import { Button, ButtonVariant, PageSection, ToolbarItem, } from "@patternfly/react-core";
import { get } from "lodash-es";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../ui-shared";
import { KeycloakDataTable } from "../ui-shared";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { addDetailPage, toDetailPage } from "../page/routes";
export const PAGE_PROVIDER = "org.keycloak.services.ui.extend.UiPageProvider";
export const TAB_PROVIDER = "org.keycloak.services.ui.extend.UiTabProvider";
const DetailLink = ({ obj, field }) => {
    const { realm } = useRealm();
    const value = get(obj, field);
    return (_jsx(Link, { to: toDetailPage({ realm, providerId: obj.providerId, id: obj.id }), children: value }, value));
};
export default function PageList() {
    const { adminClient } = useAdminClient();
    const { t } = useTranslation();
    const { addAlert, addError } = useAlerts();
    const navigate = useNavigate();
    const { providerId } = useParams();
    const [key, setKey] = useState(0);
    const refresh = () => setKey(key + 1);
    const { realm: realmName, realmRepresentation: realm } = useRealm();
    const [selectedItem, setSelectedItem] = useState();
    const { componentTypes } = useServerInfo();
    const pages = componentTypes === null || componentTypes === void 0 ? void 0 : componentTypes[PAGE_PROVIDER];
    const page = pages === null || pages === void 0 ? void 0 : pages.find((p) => p.id === providerId);
    const loader = async () => {
        const params = {
            parent: realm === null || realm === void 0 ? void 0 : realm.id,
            type: PAGE_PROVIDER,
        };
        return await adminClient.components.find({ ...params });
    };
    const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
        titleKey: "itemDeleteConfirmTitle",
        messageKey: "itemDeleteConfirm",
        continueButtonLabel: "delete",
        continueButtonVariant: ButtonVariant.danger,
        onConfirm: async () => {
            try {
                await adminClient.components.del({
                    id: selectedItem.id,
                });
                addAlert(t("itemDeletedSuccess"));
                refresh();
            }
            catch (error) {
                addError("itemSaveError", error);
            }
        },
    });
    return (_jsxs(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: [_jsx(DeleteConfirm, {}), _jsx(ViewHeader, { titleKey: page.id, subKey: page.helpText, divider: false }), _jsx(KeycloakDataTable, { toolbarItem: _jsx(ToolbarItem, { children: _jsx(Button, { component: (props) => (_jsx(Link, { ...props, to: addDetailPage({ realm: realmName, providerId: page.id }) })), children: t("createItem") }) }), actionResolver: (item) => [
                    {
                        title: t("delete"),
                        onClick() {
                            setSelectedItem(item.data);
                            toggleDeleteDialog();
                        },
                    },
                ], searchPlaceholderKey: "searchItem", loader: loader, columns: [
                    ...(page.metadata.displayFields ||
                        page.properties.slice(0, 3).map((p) => p.name)).map((name, index) => ({
                        name: `config.${name}[0]`,
                        displayKey: page.properties.find((p) => p.name === name).label,
                        cellRenderer: index === 0
                            ? (obj) => (_jsx(DetailLink, { obj: obj, field: `config.${name}` }))
                            : undefined,
                    })),
                ], ariaLabelKey: "list", emptyState: _jsx(ListEmptyState, { hasIcon: true, message: t("noItems"), instructions: t("noItemsInstructions"), primaryActionText: t("createItem"), onPrimaryAction: () => navigate(addDetailPage({ realm: realmName, providerId: page.id })) }) }, key)] }));
}
//# sourceMappingURL=PageList.js.map