@datalayer/core/lib/views/iam-tokens/Tokens.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useState, useEffect } from 'react';
import { PageLayout, Button, IconButton, Text, Label, RelativeTime, } from '@primer/react';
import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experimental';
import { Box } from '@datalayer/primer-addons';
import { EditIcon } from '@datalayer/icons-react';
import { useCache, useNavigate } from '../../hooks';
const TokensTable = () => {
    const { useTokens } = useCache();
    const getTokensQuery = useTokens();
    const navigate = useNavigate();
    const [tokens, setTokens] = useState([]);
    useEffect(() => {
        if (getTokensQuery.data) {
            setTokens(getTokensQuery.data);
        }
    }, [getTokensQuery.data]);
    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Tokens" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Tokens found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "Tokens" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
                    {
                        header: 'Type',
                        field: 'variant',
                        renderCell: token => _jsx(Label, { children: token.variant }),
                    },
                    {
                        header: 'Name',
                        field: 'name',
                        rowHeader: true,
                    },
                    {
                        header: 'Description',
                        field: 'description',
                    },
                    {
                        header: 'Expiration date',
                        field: 'expirationDate',
                        renderCell: token => (_jsx(RelativeTime, { date: new Date(token.expirationDate) })),
                    },
                    {
                        header: '',
                        field: 'id',
                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${token.id}`, e) })),
                    },
                ] })] }));
};
export const Tokens = () => {
    const navigate = useNavigate();
    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/token', e), children: "New token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, {}) }) })] }));
};
export default Tokens;