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