@keycloakify/keycloak-admin-ui/sessions/SessionsTable.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEnvironment } from "../ui-shared";
import { Button, Label, List, ListItem, ListVariant, ToolbarItem, Tooltip, } from "@patternfly/react-core";
import { CubesIcon, InfoCircleIcon } from "@patternfly/react-icons";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useMatch, useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { toClient } from "../clients/routes/Client";
import { useAlerts } from "../ui-shared";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../ui-shared";
import { KeycloakDataTable, } from "../ui-shared";
import { useRealm } from "../context/realm-context/RealmContext";
import { useWhoAmI } from "../context/whoami/WhoAmI";
import { UserRoute, toUser } from "../user/routes/User";
import { toUsers } from "../user/routes/Users";
import { isLightweightUser } from "../user/utils";
import useFormatDate from "../utils/useFormatDate";
const UsernameCell = (row) => {
    const { realm } = useRealm();
    const { t } = useTranslation();
    return (_jsxs(Link, { to: toUser({ realm, id: row.userId, tab: "sessions" }), children: [row.username, row.transientUser && (_jsxs(_Fragment, { children: [" ", _jsx(Tooltip, { content: t("transientUserTooltip"), children: _jsx(Label, { "data-testid": "user-details-label-transient-user", icon: _jsx(InfoCircleIcon, {}), isCompact: true, children: t("transientUser") }) })] }))] }));
};
const ClientsCell = (row) => {
    const { realm } = useRealm();
    return (_jsx(List, { variant: ListVariant.inline, children: Object.entries(row.clients).map(([clientId, client]) => (_jsx(ListItem, { children: _jsx(Link, { to: toClient({ realm, clientId, tab: "sessions" }), children: client }) }, clientId))) }));
};
export default function SessionsTable({ loader, hiddenColumns = [], emptyInstructions, logoutUser, filter, isSearching, isPaginated, }) {
    const { keycloak } = useEnvironment();
    const { adminClient } = useAdminClient();
    const { realm } = useRealm();
    const { whoAmI } = useWhoAmI();
    const navigate = useNavigate();
    const { t } = useTranslation();
    const { addError } = useAlerts();
    const formatDate = useFormatDate();
    const [key, setKey] = useState(0);
    const refresh = () => setKey((value) => value + 1);
    const isOnUserPage = !!useMatch(UserRoute.path);
    const columns = useMemo(() => {
        const defaultColumns = [
            {
                name: "username",
                displayKey: "user",
                cellRenderer: UsernameCell,
            },
            {
                name: "type",
                displayKey: "type",
            },
            {
                name: "start",
                displayKey: "started",
                cellRenderer: (row) => formatDate(new Date(row.start)),
            },
            {
                name: "lastAccess",
                displayKey: "lastAccess",
                cellRenderer: (row) => formatDate(new Date(row.lastAccess)),
            },
            {
                name: "ipAddress",
                displayKey: "ipAddress",
            },
            {
                name: "clients",
                displayKey: "clients",
                cellRenderer: ClientsCell,
            },
        ];
        return defaultColumns.filter(({ name }) => !hiddenColumns.includes(name));
    }, [realm, hiddenColumns]);
    const [toggleLogoutDialog, LogoutConfirm] = useConfirmDialog({
        titleKey: "logoutAllSessions",
        messageKey: "logoutAllDescription",
        continueButtonLabel: "confirm",
        onConfirm: async () => {
            try {
                await adminClient.users.logout({ id: logoutUser });
                if (isOnUserPage && isLightweightUser(logoutUser)) {
                    navigate(toUsers({ realm: realm }));
                }
                else {
                    refresh();
                }
            }
            catch (error) {
                addError("logoutAllSessionsError", error);
            }
        },
    });
    async function onClickRevoke(rowData) {
        const session = rowData.data;
        await adminClient.realms.deleteSession({
            realm,
            session: session.id,
            isOffline: true,
        });
        refresh();
    }
    async function onClickSignOut(rowData) {
        const session = rowData.data;
        await adminClient.realms.deleteSession({
            realm,
            session: session.id,
            isOffline: false,
        });
        if (session.userId === whoAmI.getUserId()) {
            await keycloak.logout({ redirectUri: "" });
        }
        else if (isOnUserPage && isLightweightUser(session.userId)) {
            navigate(toUsers({ realm: realm }));
        }
        else {
            refresh();
        }
    }
    return (_jsxs(_Fragment, { children: [_jsx(LogoutConfirm, {}), _jsx(KeycloakDataTable, { loader: loader, ariaLabelKey: "titleSessions", searchPlaceholderKey: "searchForSession", isPaginated: isPaginated, isSearching: isSearching, searchTypeComponent: filter, toolbarItem: logoutUser && (_jsx(ToolbarItem, { children: _jsx(Button, { onClick: toggleLogoutDialog, children: t("logoutAllSessions") }) })), columns: columns, actionResolver: (rowData) => {
                    if (rowData.data.type === "Offline" ||
                        rowData.data.type === "OFFLINE") {
                        return [
                            {
                                title: t("revoke"),
                                onClick: () => onClickRevoke(rowData),
                            },
                        ];
                    }
                    return [
                        {
                            title: t("signOut"),
                            onClick: () => onClickSignOut(rowData),
                        },
                    ];
                }, emptyState: _jsx(ListEmptyState, { hasIcon: true, icon: CubesIcon, message: t("noSessions"), instructions: emptyInstructions ? emptyInstructions : t("noSessionsDescription") }) }, key)] }));
}
//# sourceMappingURL=SessionsTable.js.map