@datalayer/core/lib/views/secrets/Secrets.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 } 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 SecretsTable = () => {
    const { useSecrets } = useCache();
    const secretsQuery = useSecrets();
    const navigate = useNavigate();
    const [secrets, setSecrets] = useState([]);
    useEffect(() => {
        if (secretsQuery.data) {
            setSecrets(secretsQuery.data || []);
        }
    }, [secretsQuery.data]);
    return secrets.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Secrets" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Secrets found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "secrets", children: "Secrets" }), _jsx(DataTable, { "aria-labelledby": "secrets", "aria-describedby": "secrets-subtitle", data: secrets, columns: [
                    {
                        header: 'Type',
                        field: 'variant',
                        renderCell: secret => _jsx(Label, { children: secret.variant }),
                    },
                    {
                        header: 'Name',
                        field: 'name',
                        rowHeader: true,
                    },
                    {
                        header: 'Description',
                        field: 'description',
                    },
                    {
                        header: '',
                        field: 'id',
                        renderCell: secret => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${secret.id}`, e) })),
                    },
                ] })] }));
};
export const Secrets = () => {
    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: "Secrets" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/secret', e), children: "New secret" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(SecretsTable, {}) }) })] }));
};
export default Secrets;