@datalayer/core 1.0.20 → 1.0.21

package/lib/views/datasources/Datasources.js

@@ -4,14 +4,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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 { PageLayout, Button, IconButton, Text, Label, Heading, } from '@primer/react';
+import { Blankslate, Table, DataTable } from '@primer/react/experimental';
+import { DatabaseIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
 import { useCache, useNavigate } from '../../hooks/index.js';
-const DatasourcesTable = ({ datasourcesListRoute, }) => {
+const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }) => {
     const { useDatasources } = useCache();
-    const datasourcesQuery = useDatasources();
+    const datasourcesQuery = useDatasources({ principalUid, principalKind });
     const navigate = useNavigate();
     const [datasources, setDatasources] = useState([]);
     useEffect(() => {
@@ -19,33 +20,40 @@ const DatasourcesTable = ({ datasourcesListRoute, }) => {
             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(datasourcesListRoute
-                                ? `${datasourcesListRoute}/${datasource.id}`
-                                : `${datasource.id}`, e) })),
-                    },
-                ] })] }));
+    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." }) })] })) : (_jsx(Table.Container, { children: _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(datasourcesListRoute
+                            ? `${datasourcesListRoute}/${datasource.id}`
+                            : `${datasource.id}`, e) })),
+                },
+            ] }) }));
 };
-export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, } = {}) => {
+export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, principalUid, principalKind, } = {}) => {
     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(newDatasourceRoute, e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute }) }) })] }));
+    return (_jsx(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: _jsx(PageLayout.Content, { children: _jsxs(Box, { sx: { maxWidth: 960, mx: 'auto', width: '100%' }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            justifyContent: 'space-between',
+                            gap: 3,
+                            flexWrap: 'wrap',
+                            mb: 4,
+                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind })] }) }) }));
 };
 export default Datasources;

package/lib/views/iam-tokens/IAMTokenNew.d.ts

@@ -1,6 +1,8 @@
 export type IAMTokenNewProps = {
     /** Route to navigate when clicking "List my Tokens". Defaults to '/settings/iam/tokens'. */
     tokensListRoute?: string;
+    /** Whether to render the "New API Key" title header in create mode. Defaults to true. */
+    showTitle?: boolean;
 };
-export declare const IAMTokenNew: ({ tokensListRoute, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokenNew: ({ tokensListRoute, showTitle, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenNew;

package/lib/views/iam-tokens/IAMTokenNew.js

@@ -10,7 +10,7 @@ import { CopyIcon } from '@primer/octicons-react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 import { useCache, useNavigate, useToast } from '../../hooks/index.js';
 import { useRunStore } from '../../state/index.js';
-export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
+export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', showTitle = true, } = {}) => {
     const runStore = useRunStore();
     const { useCreateToken } = useCache();
     const createTokenMutation = useCreateToken();
@@ -108,7 +108,7 @@ export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {})
                                                 variant: 'success',
                                             });
                                         }
-                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my API Keys" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New API Key" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my API Keys" }) })] })) : (_jsxs(_Fragment, { children: [showTitle ? (_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New API Key" }) }) })) : null, _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
                                         !validationResult.description ||
                                         !validationResult.expirationDate, sx: { marginTop: 2 }, onClick: e => {
                                         e.preventDefault();

package/lib/views/iam-tokens/IAMTokens.d.ts

@@ -5,6 +5,8 @@ export type IAMTokensProps = {
     tokensListRoute?: string;
     /** Whether to display view titles/headings. Defaults to true. */
     showTitle?: boolean;
+    /** Whether to render the "New API Key" button in this component header. Defaults to true. */
+    showNewButton?: boolean;
 };
-export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, showNewButton, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokens;

package/lib/views/iam-tokens/IAMTokens.js

@@ -80,8 +80,8 @@ const TokensTable = ({ tokensListRoute, showTitle = true, }) => {
                         setDeletingToken(null);
                 }, confirmButtonContent: "Delete", confirmButtonType: "danger", children: ["Are you sure you want to delete the token", ' ', _jsx("strong", { children: deletingToken.name }), "? This action cannot be undone."] }))] }));
 };
-export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, showTitle = true, } = {}) => {
+export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, showTitle = true, showNewButton = true, } = {}) => {
     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: [showTitle && (_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "API Keys" }) })), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New API Key" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute, showTitle: showTitle }) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [showTitle || showNewButton ? (_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [showTitle && (_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "API Keys" }) })), showNewButton && (_jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New API Key" }) }))] }) })) : null, _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute, showTitle: showTitle }) }) })] }));
 };
 export default IAMTokens;

package/lib/views/otel/OtelHeader.d.ts

@@ -29,5 +29,10 @@ export interface OtelHeaderProps {
      * where data is generated by agents, not manually).
      */
     showGenerateButtons?: boolean;
+    /**
+     * Whether to show account controls (token badge + sign out).
+     * Defaults to `true`.
+     */
+    showAccountControls?: boolean;
 }
 export declare const OtelHeader: React.FC<OtelHeaderProps>;

package/lib/views/otel/OtelHeader.js

@@ -14,7 +14,7 @@ import { useState, useCallback, useRef } from 'react';
 import { Box, Text, Button, Dialog } from '@primer/react';
 import { TelescopeIcon, SignOutIcon } from '@primer/octicons-react';
 import { UserBadge } from '../profile/index.js';
-export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, }) => {
+export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, showAccountControls = true, }) => {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogTitle, setDialogTitle] = useState('');
     const [dialogRequest, setDialogRequest] = useState('');
@@ -33,7 +33,7 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
             onNavigate(signalMap[kind]);
         }
         setGenerating(true);
-        const url = `${baseUrl}/api/generate/${kind}?count=${count}`;
+        const url = `${baseUrl}/api/otel/v1/generate/${kind}?count=${count}`;
         setDialogRequest(`POST ${url}`);
         try {
             const headers = {};
@@ -70,7 +70,7 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
                     flexShrink: 0,
                     // Allow overflow visible so the JWT popover can extend below the header.
                     overflow: 'visible',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, token && _jsx(UserBadge, { token: token }), onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, showAccountControls && token && _jsx(UserBadge, { token: token }), showAccountControls && onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
                     {
                         content: 'Close',
                         onClick: () => setDialogOpen(false),

package/lib/views/profile/UserBadge.d.ts

@@ -27,10 +27,15 @@ export interface UserBadgeProps {
      * Threshold (in milliseconds) below which the expiration timestamp is
      * rendered in ``attention.fg`` (yellow) to warn that the token is about
      * to expire.  Tokens already past ``exp`` render in ``danger.fg`` (red);
-     * tokens further out than this threshold render in ``success.fg``
-     * (green).  Defaults to ``3_600_000`` (1 hour).
+     * tokens further out than this threshold render in ``success.fg`` (green).
+     * Defaults to ``10_800_000`` (3 hours).
      */
     expirationWarningMs?: number;
+    /**
+     * Optional callback fired when the claims popover is open and the token is
+     * already expired.
+     */
+    onTokenExpired?: () => void;
 }
 export declare const UserBadge: React.FC<UserBadgeProps>;
 export default UserBadge;

package/lib/views/profile/UserBadge.js

@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module views/profile
  */
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { Box, Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt.js';
 import { getRelativeTime } from '../../utils/Date.js';
 // ── Component ─────────────────────────────────────────────────────
-export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, expirationWarningMs = 60 * 60 * 1000, }) => {
+export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, expirationWarningMs = 3 * 60 * 60 * 1000, onTokenExpired, }) => {
     const [open, setOpen] = useState(false);
     const [expanded, setExpanded] = useState(false);
     const closeTimer = useRef(null);
@@ -52,6 +52,15 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
         : expiringSoon
             ? 'attention.fg'
             : 'fg.muted';
+    const expiredNotifiedForTokenRef = useRef(null);
+    useEffect(() => {
+        if (!onTokenExpired || !open || !expired)
+            return;
+        if (expiredNotifiedForTokenRef.current === token)
+            return;
+        expiredNotifiedForTokenRef.current = token;
+        onTokenExpired();
+    }, [expired, onTokenExpired, open, token]);
     return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
                     fontSize: 1,
                     color: triggerColor,

package/lib/views/secrets/Secrets.js

@@ -19,27 +19,27 @@ const SecretsTable = () => {
             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) })),
-                    },
-                ] })] }));
+    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." }) })] })) : (_jsx(Table.Container, { children: _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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "type": "module",
   "workspaces": [
     ".",
@@ -102,11 +102,11 @@
     "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache"
   },
   "dependencies": {
-    "@datalayer/icons-react": "^1.0.6",
+    "@datalayer/icons-react": "^1.0.7",
     "@datalayer/jupyter-lexical": "^1.0.16",
     "@datalayer/jupyter-react": "^2.0.7",
-    "@datalayer/primer-addons": "^1.0.12",
-    "@datalayer/primer-rjsf": "^1.0.1",
+    "@datalayer/primer-addons": "^1.0.15",
+    "@datalayer/primer-rjsf": "^1.0.3",
     "@fluentui/react": "^8.125.3",
     "@jupyter-widgets/base-manager": "^1.0.12",
     "@jupyter-widgets/schema": "^0.5.6",
@@ -133,8 +133,8 @@
     "@primer/primitives": "^10.5.0",
     "@primer/react": "^37.19.0",
     "@primer/react-brand": "^0.58.0",
-    "@stripe/react-stripe-js": "^2.7.1",
-    "@stripe/stripe-js": "^4.0.0",
+    "@stripe/react-stripe-js": "^6.3.0",
+    "@stripe/stripe-js": "^9.4.0",
     "@styled-system/css": "^5.1.5",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "^5.90.6",
@@ -169,6 +169,7 @@
     "ulid": "^2.3.0",
     "unique-names-generator": "^4.7.1",
     "usehooks-ts": "^2.9.1",
+    "user": "^0.0.0",
     "uuid": "^13.0.0",
     "validator": "^13.7.0",
     "zod": "^4.1.13",
@@ -257,6 +258,6 @@
     ]
   },
   "optionalDependencies": {
-    "keytar": "^7.9.0"
+    "@github/keytar": "^7.10.6"
   }
 }