@datalayer/core 1.1.60 → 1.2.10

package/lib/utils/Jwt.d.ts

@@ -24,6 +24,32 @@ export interface DatalayerJwtPayload {
  * Returns `null` on any error (malformed token, invalid base64, etc.).
  */
 export declare function parseJwtPayload<T = DatalayerJwtPayload>(token: string): T | null;
+/**
+ * When a JWT expires, in milliseconds since the epoch.
+ *
+ * `null` when there is no token, when it cannot be decoded, or when it
+ * carries no `exp` — three different unknowns that all mean the same thing to
+ * a caller: nothing here says this token has expired.
+ */
+export declare function getJwtExpiryMs(token: string | null | undefined): number | null;
+/**
+ * Whether a JWT has already expired.
+ *
+ * Answers `false` for anything it cannot read — a missing token, an opaque
+ * one, a payload with no `exp`. This is the only safe direction: a caller
+ * uses it to refuse a request before making it, and refusing on a token we
+ * failed to parse would break every non-JWT credential the API accepts.
+ *
+ * Unverified, and deliberately so. The signature is the server's business;
+ * what a client can usefully do with `exp` is avoid sending a request whose
+ * only possible answer is 401, and tell the person why in the meantime.
+ *
+ * `leewaySeconds` counts a token as expired slightly early. A request takes
+ * time to arrive, so a token with a second left on it is one the server may
+ * well reject by the time it reads it — and a typed expiry error is a better
+ * answer for the reader than an opaque 401.
+ */
+export declare function isJwtExpired(token: string | null | undefined, leewaySeconds?: number): boolean;
 /**
  * Extract the Datalayer user object from a JWT, returning `null` if the
  * token is missing or cannot be decoded.

package/lib/utils/Jwt.js

@@ -29,6 +29,43 @@ export function parseJwtPayload(token) {
         return null;
     }
 }
+/**
+ * When a JWT expires, in milliseconds since the epoch.
+ *
+ * `null` when there is no token, when it cannot be decoded, or when it
+ * carries no `exp` — three different unknowns that all mean the same thing to
+ * a caller: nothing here says this token has expired.
+ */
+export function getJwtExpiryMs(token) {
+    if (!token)
+        return null;
+    const payload = parseJwtPayload(token);
+    const exp = payload?.exp;
+    return typeof exp === 'number' && Number.isFinite(exp) ? exp * 1000 : null;
+}
+/**
+ * Whether a JWT has already expired.
+ *
+ * Answers `false` for anything it cannot read — a missing token, an opaque
+ * one, a payload with no `exp`. This is the only safe direction: a caller
+ * uses it to refuse a request before making it, and refusing on a token we
+ * failed to parse would break every non-JWT credential the API accepts.
+ *
+ * Unverified, and deliberately so. The signature is the server's business;
+ * what a client can usefully do with `exp` is avoid sending a request whose
+ * only possible answer is 401, and tell the person why in the meantime.
+ *
+ * `leewaySeconds` counts a token as expired slightly early. A request takes
+ * time to arrive, so a token with a second left on it is one the server may
+ * well reject by the time it reads it — and a typed expiry error is a better
+ * answer for the reader than an opaque 401.
+ */
+export function isJwtExpired(token, leewaySeconds = 0) {
+    const expiryMs = getJwtExpiryMs(token);
+    if (expiryMs === null)
+        return false;
+    return expiryMs - leewaySeconds * 1000 <= Date.now();
+}
 /**
  * Extract the Datalayer user object from a JWT, returning `null` if the
  * token is missing or cannot be decoded.

package/lib/utils/Lazy.d.ts

@@ -2,6 +2,26 @@ import { ComponentType } from 'react';
 export type PreloadableComponent<T extends ComponentType<any>> = T & {
     preload: () => Promise<void>;
 };
+/**
+ * `React.lazy`, with a `preload()` that fetches the module ahead of the
+ * first render.
+ *
+ * Two rules keep it honest:
+ *
+ * - **One fetch.** `preload()` and React's own first render share a single
+ *   call to `factory`. They used to call it separately, so a component that
+ *   was preloaded and then rendered imported its module twice.
+ * - **One element type per mounted instance.** The component renders the
+ *   loaded module directly when it was already loaded at mount — no fallback
+ *   flash — and the lazy wrapper otherwise, and it keeps that choice for its
+ *   lifetime. It used to switch from the wrapper to the loaded module on any
+ *   render after `preload()` resolved, and React remounts on a change of
+ *   element type: a component preloaded after it had mounted lost its state
+ *   and ran its effects again on its next render.
+ *
+ * A failed fetch is forgotten, so the next `preload()` tries again rather
+ * than replaying the failure.
+ */
 export declare function lazyWithPreload<T extends ComponentType<any>>(factory: () => Promise<{
     default: T;
 }>): PreloadableComponent<T>;

package/lib/utils/Lazy.js

@@ -2,22 +2,48 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { createElement, forwardRef, lazy as reactLazy, } from 'react';
+import { createElement, forwardRef, lazy as reactLazy, useState, } from 'react';
+/**
+ * `React.lazy`, with a `preload()` that fetches the module ahead of the
+ * first render.
+ *
+ * Two rules keep it honest:
+ *
+ * - **One fetch.** `preload()` and React's own first render share a single
+ *   call to `factory`. They used to call it separately, so a component that
+ *   was preloaded and then rendered imported its module twice.
+ * - **One element type per mounted instance.** The component renders the
+ *   loaded module directly when it was already loaded at mount — no fallback
+ *   flash — and the lazy wrapper otherwise, and it keeps that choice for its
+ *   lifetime. It used to switch from the wrapper to the loaded module on any
+ *   render after `preload()` resolved, and React remounts on a change of
+ *   element type: a component preloaded after it had mounted lost its state
+ *   and ran its effects again on its next render.
+ *
+ * A failed fetch is forgotten, so the next `preload()` tries again rather
+ * than replaying the failure.
+ */
 export function lazyWithPreload(factory) {
-    const LazyComponent = reactLazy(factory);
     let factoryPromise;
     let LoadedComponent;
-    const Component = forwardRef(function LazyWithPreload(props, ref) {
-        return createElement(LoadedComponent ?? LazyComponent, Object.assign(ref ? { ref } : {}, props));
-    });
-    Component.preload = () => {
+    const load = () => {
         if (!factoryPromise) {
             factoryPromise = factory().then(module => {
                 LoadedComponent = module.default;
+                return module;
+            }, error => {
+                factoryPromise = undefined;
+                throw error;
             });
         }
         return factoryPromise;
     };
+    const LazyComponent = reactLazy(load);
+    const Component = forwardRef(function LazyWithPreload(props, ref) {
+        const [Resolved] = useState(() => LoadedComponent ?? LazyComponent);
+        return createElement(Resolved, Object.assign(ref ? { ref } : {}, props));
+    });
+    Component.preload = () => load().then(() => undefined);
     return Component;
 }
 export default lazyWithPreload;

package/lib/utils/Screencapture.js

@@ -7,6 +7,9 @@ export const takeHTMLNodeScreencapture = async (node) => {
     const sc = html2canvas(node, {
         width: node.getBoundingClientRect().width,
         height: node.getBoundingClientRect().height,
+        // Cross-origin pictures are otherwise left out and their space kept, so a
+        // cell carrying an `<img>` from the web captures as a blank rectangle.
+        useCORS: true,
     });
     return sc.then(canvas => {
         const croppedCanvas = document.createElement('canvas');

package/lib/utils/WithSuspense.d.ts

@@ -1,2 +1,12 @@
-export declare const WithSuspense: (Component: any, preload?: boolean, skeleton?: boolean) => (props: any) => import("react/jsx-runtime").JSX.Element;
+import { type ReactNode } from 'react';
+/**
+ * A lazily-loaded route, with something to look at while it arrives.
+ *
+ * `skeleton` was a boolean between one grey box and **nothing at all**, and
+ * nothing was the default — so every route in the application showed a blank
+ * page for as long as its chunk took, which for an editor is seconds. It now
+ * also takes a node, so a route can hand over a drawing of the thing that is
+ * coming rather than a hole where it will be.
+ */
+export declare const WithSuspense: (Component: any, preload?: boolean, skeleton?: boolean | ReactNode) => (props: any) => import("react").JSX.Element;
 export default WithSuspense;

package/lib/utils/WithSuspense.js

@@ -9,10 +9,20 @@ const Loading = (props) => {
     const { skeleton } = props;
     return skeleton ? (_jsx(_Fragment, { children: _jsx(SkeletonBox, { height: "100px" }) })) : (_jsx(_Fragment, {}));
 };
+/**
+ * A lazily-loaded route, with something to look at while it arrives.
+ *
+ * `skeleton` was a boolean between one grey box and **nothing at all**, and
+ * nothing was the default — so every route in the application showed a blank
+ * page for as long as its chunk took, which for an editor is seconds. It now
+ * also takes a node, so a route can hand over a drawing of the thing that is
+ * coming rather than a hole where it will be.
+ */
 export const WithSuspense = (Component, preload = true, skeleton = false) => (props) => {
     if (preload) {
         Component.preload();
     }
-    return (_jsx(Suspense, { fallback: _jsx(Loading, { skeleton: skeleton }), children: _jsx(Component, { ...props }) }));
+    const fallback = typeof skeleton === 'boolean' ? (_jsx(Loading, { skeleton: skeleton })) : (skeleton);
+    return (_jsx(Suspense, { fallback: fallback, children: _jsx(Component, { ...props }) }));
 };
 export default WithSuspense;

package/lib/views/api-keys/APIKeyEdit.d.ts

@@ -4,5 +4,5 @@ export type APIKeyEditProps = {
     /** Whether to render the local edit title header. Defaults to true. */
     showTitle?: boolean;
 };
-export declare const APIKeyEdit: ({ apiKeysListRoute, showTitle, }?: APIKeyEditProps) => import("react/jsx-runtime").JSX.Element;
+export declare const APIKeyEdit: ({ apiKeysListRoute, showTitle, }?: APIKeyEditProps) => import("react").JSX.Element;
 export default APIKeyEdit;

package/lib/views/api-keys/APIKeyNew.d.ts

@@ -4,5 +4,5 @@ export type APIKeyNewProps = {
     /** Whether to render the "New API Key" title header in create mode. Defaults to true. */
     showTitle?: boolean;
 };
-export declare const APIKeyNew: ({ apiKeysListRoute, showTitle, }?: APIKeyNewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const APIKeyNew: ({ apiKeysListRoute, showTitle, }?: APIKeyNewProps) => import("react").JSX.Element;
 export default APIKeyNew;

package/lib/views/api-keys/APIKeys.d.ts

@@ -8,5 +8,5 @@ export type APIKeysProps = {
     /** Whether to render the "New API Key" button in this component header. Defaults to true. */
     showNewButton?: boolean;
 };
-export declare const APIKeys: ({ newAPIKeyRoute, apiKeysListRoute, showTitle, showNewButton, }?: APIKeysProps) => import("react/jsx-runtime").JSX.Element;
+export declare const APIKeys: ({ newAPIKeyRoute, apiKeysListRoute, showTitle, showNewButton, }?: APIKeysProps) => import("react").JSX.Element;
 export default APIKeys;

package/lib/views/api-keys/APIKeys.js

@@ -61,12 +61,39 @@ const APIKeysTable = ({ apiKeysListRoute, showTitle = true, }) => {
             },
         });
     };
+    /** Where one API key is read, from wherever this table is drawn. */
+    const routeOf = (id) => apiKeysListRoute ? `${apiKeysListRoute}/${id}` : `${id}`;
+    /*
+     * A row opens the key it stands for.
+     *
+     * The click is caught on the way up rather than bound to each row: the
+     * table is drawn by `DataTable`, which owns its rows and takes no handler
+     * for them. So the row says which key it is — the name cell carries it —
+     * and this reads it back off whatever was clicked. Reading it from the row
+     * itself rather than from a position is what survives sorting.
+     */
+    const openClickedRow = (event) => {
+        const clicked = event.target;
+        // Something that already does something on click is not a row click.
+        if (clicked.closest('button, a, input, [role="menuitem"]')) {
+            return;
+        }
+        const id = clicked
+            .closest('tr')
+            ?.querySelector('[data-api-key]')?.dataset.apiKey;
+        if (id) {
+            navigate(routeOf(id));
+        }
+    };
     return apiKeys.length === 0 ? (_jsx(Blankslate, { border: true, spacious: true, children: showInitialSpinner ? (_jsx(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 minHeight: '40px',
-            }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [showTitle && _jsx(Blankslate.Heading, { children: "API Keys" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No API Keys found." }) })] })) })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [showTitle && (_jsxs(_Fragment, { children: [_jsx(Table.Title, { as: "h2", id: "api-keys", children: "API Keys" }), _jsx(Table.Subtitle, { as: "p", id: "api-keys-subtitle", children: "Your API keys." })] })), _jsx(DataTable, { "aria-labelledby": "api-keys", "aria-describedby": "api-keys-subtitle", data: apiKeys, columns: [
+            }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [showTitle && _jsx(Blankslate.Heading, { children: "API Keys" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No API Keys found." }) })] })) })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { onClick: openClickedRow, sx: {
+                    '& tbody tr': { cursor: 'pointer' },
+                    '& tbody tr:hover': { bg: 'canvas.subtle' },
+                }, children: [showTitle && (_jsxs(_Fragment, { children: [_jsx(Table.Title, { as: "h2", id: "api-keys", children: "API Keys" }), _jsx(Table.Subtitle, { as: "p", id: "api-keys-subtitle", children: "Your API keys." })] })), _jsx(DataTable, { "aria-labelledby": "api-keys", "aria-describedby": "api-keys-subtitle", data: apiKeys, columns: [
                             {
                                 header: 'Type',
                                 field: 'variant',
@@ -76,6 +103,7 @@ const APIKeysTable = ({ apiKeysListRoute, showTitle = true, }) => {
                                 header: 'Name',
                                 field: 'name',
                                 rowHeader: true,
+                                renderCell: apiKey => (_jsx(Box, { as: "span", "data-api-key": apiKey.id, children: apiKey.name })),
                             },
                             {
                                 header: 'Description',
@@ -89,9 +117,7 @@ const APIKeysTable = ({ apiKeysListRoute, showTitle = true, }) => {
                             {
                                 header: '',
                                 field: 'id',
-                                renderCell: apiKey => (_jsxs(Box, { display: "flex", sx: { gap: 1 }, children: [_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(apiKeysListRoute
-                                                ? `${apiKeysListRoute}/${apiKey.id}`
-                                                : `${apiKey.id}`, e) }), _jsx(IconButton, { ref: returnFocusRef, icon: TrashIcon, "aria-label": "Delete", size: "small", variant: "invisible", sx: { color: 'danger.fg' }, onClick: () => {
+                                renderCell: apiKey => (_jsxs(Box, { display: "flex", sx: { gap: 1 }, children: [_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(routeOf(apiKey.id), e) }), _jsx(IconButton, { ref: returnFocusRef, icon: TrashIcon, "aria-label": "Delete", size: "small", variant: "invisible", sx: { color: 'danger.fg' }, onClick: () => {
                                                 setDeletingAPIKey(apiKey);
                                                 setDeleteNameConfirm('');
                                             } })] })),

package/lib/views/api-keys/APIKeysStandalone.d.ts

@@ -1,2 +1,6 @@
-export declare const APIKeysStandalone: () => import("react/jsx-runtime").JSX.Element;
+export type APIKeysStandaloneProps = {
+    /** Where the "New API Key" button goes. */
+    newKeyRoute?: string;
+};
+export declare const APIKeysStandalone: ({ newKeyRoute, }?: APIKeysStandaloneProps) => import("react").JSX.Element;
 export default APIKeysStandalone;

package/lib/views/api-keys/APIKeysStandalone.js

@@ -110,8 +110,8 @@ const APIKeysTable = () => {
                     },
                 ], children: ["Are you sure you want to delete the API key", ' ', _jsx("strong", { children: deletingAPIKey.name }), "? This action cannot be undone.", _jsxs(Text, { sx: { mt: 3, display: 'block', color: 'fg.muted' }, children: ["Type ", _jsx("strong", { children: deletingAPIKey.name }), " to confirm deletion."] }), _jsx(TextInput, { block: true, value: deleteNameConfirm, onChange: e => setDeleteNameConfirm(e.target.value), placeholder: "Retype API key name", sx: { mt: 2 }, autoFocus: true })] }))] }));
 };
-export const APIKeysStandalone = () => {
+export const APIKeysStandalone = ({ newKeyRoute = '/settings/api-keys/new', } = {}) => {
     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: "API Keys" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/api-keys/new', e), children: "New API key" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(APIKeysTable, {}) }) })] }));
+    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: "API Keys" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newKeyRoute, e), children: "New API key" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(APIKeysTable, {}) }) })] }));
 };
 export default APIKeysStandalone;

package/lib/views/datasources/DatasourceDetail.d.ts

@@ -1,8 +1,15 @@
 export type DatasourceDetailProps = {
-    /** Optional principal uid used to scope datasource reads/updates. */
-    principalUid?: string;
-    /** Optional principal kind used to scope datasource reads/updates. */
-    principalKind?: 'personal' | 'organization' | 'team';
+    /** The Datasource, when not read from the `sourceUid` route parameter. */
+    sourceUid?: string;
 };
-export declare const DatasourceDetail: ({ principalUid, principalKind, }?: DatasourceDetailProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A Datasource's settings: what it connects to, and the name it goes by.
+ *
+ * The connection itself is read from Contents and never includes the
+ * credential — the page shows whether one is attached and resolvable. Name,
+ * description and limits are edited conditionally on the source's ETag, so
+ * two people editing the same record do not overwrite each other. Running
+ * queries is the Contents detail's job, not this page's.
+ */
+export declare const DatasourceDetail: ({ sourceUid: givenUid }?: DatasourceDetailProps) => import("react").JSX.Element;
 export default DatasourceDetail;

package/lib/views/datasources/DatasourceDetail.js

@@ -1,129 +1,99 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect } from 'react';
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { PageLayout, Text, Button, TextInput, FormControl, Textarea, Label, Spinner, Heading, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { EyeIcon, EyeClosedIcon } from '@primer/octicons-react';
+import { DATASOURCE_CONNECTOR_LABELS, } from '../../api/contents/index.js';
 import { BoringAvatar } from '../../components/avatars/index.js';
-import { useCache, useToast } from '../../hooks/index.js';
-import { useRunStore } from '../../state/index.js';
-export const DatasourceDetail = ({ principalUid, principalKind, } = {}) => {
-    const { datasourceId } = useParams();
-    const runStore = useRunStore();
+import { useContentSource, useCredentialDiagnostics, useTestDatasource, useToast, useUpdateContentSource, } from '../../hooks/index.js';
+function Row({ label, children }) {
+    return (_jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: ['1fr', '200px 1fr'], gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: label }), _jsx(Box, { sx: { fontSize: 1 }, children: children })] }));
+}
+const frame = (children) => (_jsx(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: _jsx(PageLayout.Content, { children: _jsx(Box, { sx: { maxWidth: 960, mx: 'auto', width: '100%' }, children: children }) }) }));
+/**
+ * A Datasource's settings: what it connects to, and the name it goes by.
+ *
+ * The connection itself is read from Contents and never includes the
+ * credential — the page shows whether one is attached and resolvable. Name,
+ * description and limits are edited conditionally on the source's ETag, so
+ * two people editing the same record do not overwrite each other. Running
+ * queries is the Contents detail's job, not this page's.
+ */
+export const DatasourceDetail = ({ sourceUid: givenUid } = {}) => {
+    const params = useParams();
+    const sourceUid = givenUid ?? params.sourceUid ?? params.datasourceId;
     const { enqueueToast } = useToast();
-    const { useUpdateDatasource, useDatasource } = useCache();
-    const updateDatasourceMutation = useUpdateDatasource({
-        principalUid,
-        principalKind,
-    });
-    const datasourceQuery = useDatasource(datasourceId ?? '', {
-        principalUid,
-        principalKind,
-    });
-    const [datasource, setDatasource] = useState();
-    const [formValues, setFormValues] = useState({
-        name: '',
-        description: '',
-    });
-    const [validationResult, setValidationResult] = useState({
-        name: undefined,
-        description: undefined,
-    });
-    const [passwordVisibility, setPasswordVisibility] = useState(false);
+    const sourceQuery = useContentSource(sourceUid);
+    const update = useUpdateContentSource();
+    const test = useTestDatasource();
+    const source = sourceQuery.data?.value.source;
+    const configuration = source?.configuration;
+    const diagnostics = useCredentialDiagnostics(configuration?.networkRoute === 'dataserver' ? undefined : sourceUid);
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [rowLimit, setRowLimit] = useState('');
+    const [maxSeconds, setMaxSeconds] = useState('');
     useEffect(() => {
-        if (datasourceQuery.data) {
-            const datasource = datasourceQuery.data;
-            setDatasource(datasource);
-            setFormValues({
-                name: datasource.name || '',
-                description: datasource.description || '',
-            });
+        if (source && configuration) {
+            setName(source.name);
+            setDescription(source.description ?? '');
+            setRowLimit(configuration.defaultRowLimit ? String(configuration.defaultRowLimit) : '');
+            setMaxSeconds(configuration.maxSeconds ? String(configuration.maxSeconds) : '');
         }
-    }, [datasourceQuery.data]);
-    const nameNameChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            name: event.target.value,
-        }));
-    };
-    const nameDescriptionChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            description: event.target.value,
-        }));
+    }, [source, configuration]);
+    if (!sourceUid) {
+        return _jsx(_Fragment, {});
+    }
+    if (sourceQuery.isPending) {
+        return frame(_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center', py: 6 }, children: _jsx(Spinner, { size: "large" }) }));
+    }
+    if (sourceQuery.isError || !source || !configuration || source.kind !== 'datasource') {
+        return frame(_jsx(Box, { sx: { p: 4 }, children: _jsx(Text, { sx: { color: 'danger.fg' }, children: sourceQuery.isError
+                    ? sourceQuery.error.message
+                    : 'Datasource not found, or this content is not a Datasource.' }) }));
+    }
+    const permissions = sourceQuery.data.value.permissions;
+    const numberOrNull = (value) => {
+        const parsed = Number.parseInt(value, 10);
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
     };
-    useEffect(() => {
-        setValidationResult(prev => ({
-            ...prev,
-            name: formValues.name === undefined
-                ? undefined
-                : formValues.name.length > 2
-                    ? true
-                    : false,
-            description: formValues.description === undefined
-                ? undefined
-                : formValues.description.length > 2
-                    ? true
-                    : false,
-        }));
-    }, [formValues]);
-    const nameSubmit = async () => {
-        if (!datasource) {
+    const nameValid = name.trim().length > 2;
+    const save = () => {
+        if (!nameValid) {
             return;
         }
-        runStore.layout().showBackdrop();
-        const updatedDatasource = {
-            ...datasource,
-            name: formValues.name,
-            description: formValues.description,
-        };
-        updateDatasourceMutation.mutate(updatedDatasource, {
-            onSuccess: (resp) => {
-                if (typeof resp === 'object' &&
-                    resp !== null &&
-                    'success' in resp &&
-                    resp.success) {
-                    enqueueToast('The datasource is successfully updated.', {
-                        variant: 'success',
-                    });
-                    setDatasource(updatedDatasource);
-                }
-            },
-            onSettled: () => {
-                runStore.layout().hideBackdrop();
+        update.mutate({
+            sourceUid: source.uid,
+            etag: sourceQuery.data.etag,
+            update: {
+                name: name.trim(),
+                description: description.trim() || null,
+                configuration: {
+                    ...configuration,
+                    defaultRowLimit: numberOrNull(rowLimit),
+                    maxSeconds: numberOrNull(maxSeconds),
+                },
             },
+        }, {
+            onSuccess: () => enqueueToast('The Datasource is updated.', { variant: 'success' }),
         });
     };
-    if (!datasourceId) {
-        return _jsx(_Fragment, {});
-    }
-    if (datasourceQuery.isLoading) {
-        return (_jsx(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: _jsx(PageLayout.Content, { children: _jsx(Box, { sx: { maxWidth: 960, mx: 'auto', width: '100%' }, children: _jsx(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            py: 6,
-                        }, children: _jsx(Spinner, { size: "large" }) }) }) }) }));
-    }
-    if (datasourceQuery.isError || (!datasourceQuery.isLoading && !datasource)) {
-        return (_jsx(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: _jsx(PageLayout.Content, { children: _jsx(Box, { sx: { maxWidth: 960, mx: 'auto', width: '100%' }, children: _jsx(Box, { sx: { p: 4 }, children: _jsx(Text, { sx: { color: 'danger.fg' }, children: "Datasource not found or failed to load." }) }) }) }) }));
-    }
-    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: { mb: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasource" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Update datasource connection metadata and review configured credentials." })] }), _jsx(Box, { sx: {
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                            p: 3,
-                        }, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: ['1fr', '180px 1fr'], gap: 4 }, children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: datasource?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: datasource?.variant }) })] }), _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: nameNameChange }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: nameDescriptionChange, rows: 5 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { placeholder: "Database", monospace: true, size: "large", contrast: !passwordVisibility, disabled: !passwordVisibility, type: passwordVisibility ? 'text' : 'password', value: datasource?.database || '', readOnly: true, trailingAction: _jsx(TextInput.Action, { onClick: () => {
-                                                                setPasswordVisibility(!passwordVisibility);
-                                                            }, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility ? 'Hide database' : 'Reveal database', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Output bucket" }), _jsx(TextInput, { placeholder: "Output bucket", monospace: true, size: "large", contrast: !passwordVisibility, disabled: !passwordVisibility, type: passwordVisibility ? 'text' : 'password', value: datasource?.outputBucket || '', readOnly: true, trailingAction: _jsx(TextInput.Action, { onClick: () => {
-                                                                setPasswordVisibility(!passwordVisibility);
-                                                            }, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
-                                                                ? 'Hide output bucket'
-                                                                : 'Reveal output bucket', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } })] }), _jsx(Box, { sx: { marginTop: 3 }, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: nameSubmit, children: "Update datasource" }) })] }) })] }) })] }) }) }));
+    const connector = DATASOURCE_CONNECTOR_LABELS[configuration.connectorType]
+        ?? configuration.connectorType;
+    return frame(_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { mb: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasource" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "The connection as Contents holds it. The credential is never shown; the page says whether one is attached and resolvable." })] }), _jsx(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.default',
+                    p: 3,
+                }, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: ['1fr', '180px 1fr'], gap: 4 }, children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: source.name, size: 100, style: { paddingRight: 10 } }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: connector }) })] }), _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Row, { label: "Connector", children: _jsx(Text, { children: connector }) }), _jsxs(Row, { label: "Route", children: [_jsx(Label, { variant: configuration.networkRoute === 'dataserver' ? 'accent' : 'secondary', children: configuration.networkRoute === 'dataserver' ? 'Through a Dataserver' : 'Direct' }), configuration.dataServerUid && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, ml: 2 }, children: configuration.dataServerUid }))] }), configuration.endpoint && (_jsx(Row, { label: "Endpoint", children: _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: configuration.endpoint }) })), configuration.databaseOrProject && (_jsx(Row, { label: configuration.connectorType === 'bigquery' ? 'Project' : 'Database', children: _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: configuration.databaseOrProject }) })), _jsx(Row, { label: "Allowed operations", children: _jsx(Text, { children: (configuration.allowedOperations ?? []).join(', ') || '—' }) }), _jsx(Row, { label: "Credential", children: configuration.networkRoute === 'dataserver' ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Held by the Dataserver, in your network." })) : configuration.credentialUid ? (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [diagnostics.data ? (_jsx(Label, { variant: diagnostics.data.resolvable ? 'success' : 'danger', children: diagnostics.data.resolvable ? 'Resolvable' : 'Not resolvable' })) : (_jsx(Label, { variant: "success", children: "Attached" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: diagnostics.data?.credentialName ?? 'Held in Vault and resolved server-side.' })] })) : (_jsx(Label, { variant: "attention", children: "None" })) }), _jsx(Row, { label: "Connection", children: _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Button, { size: "small", disabled: test.isPending || !permissions.execute, onClick: () => test.mutate(source.uid), children: test.isPending ? 'Testing…' : 'Test connection' }), test.data && (_jsxs(_Fragment, { children: [_jsx(Label, { variant: test.data.ok ? 'success' : 'danger', children: test.data.ok ? 'Reachable' : 'Not reachable' }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: test.data.detail })] })), test.isError && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: test.error.message }))] }) })] }), _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: name, disabled: !permissions.update, onChange: event => setName(event.target.value) }), !nameValid && (_jsx(FormControl.Validation, { variant: "error", children: "Name must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, rows: 3, value: description, disabled: !permissions.update, onChange: event => setDescription(event.target.value) })] }), _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: ['1fr', '1fr 1fr'], gap: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Default row limit" }), _jsx(TextInput, { block: true, type: "number", min: 1, value: rowLimit, placeholder: "Service default", disabled: !permissions.update, onChange: event => setRowLimit(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Max seconds" }), _jsx(TextInput, { block: true, type: "number", min: 1, value: maxSeconds, placeholder: "Service default", disabled: !permissions.update, onChange: event => setMaxSeconds(event.target.value) })] })] }), update.isError && (_jsx(Text, { as: "p", sx: { color: 'danger.fg' }, children: update.error.message })), permissions.update && (_jsx(Box, { sx: { marginTop: 3 }, children: _jsx(Button, { variant: "primary", disabled: !nameValid || update.isPending, onClick: save, children: update.isPending ? 'Saving…' : 'Update Datasource' }) }))] })] })] }) })] }));
 };
 export default DatasourceDetail;

package/lib/views/datasources/DatasourceNew.d.ts

@@ -1,15 +1,21 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type DatasourceNewProps = {
-    /** Route to navigate after creating a datasource. Defaults to '/settings/integrations/datasources'. */
+    /** Where the created Datasource is opened, as `${route}/${uid}`. Defaults to '/datasources'. */
     datasourcesListRoute?: string;
-    /** Route to navigate to the secrets page. Defaults to '/settings/iam/secrets'. */
+    /** Route to navigate to the secrets page. Defaults to '/secrets'. */
     secretsRoute?: string;
-    /** Optional principal uid used to scope datasource creation. */
-    principalUid?: string;
-    /** Optional principal kind used to scope datasource creation. */
-    principalKind?: 'personal' | 'organization' | 'team';
+    /** The Space the Datasource belongs to, when created from one. */
+    spaceUid?: string;
     /** Optional contextual principal summary rendered below the page intro. */
     accountPrincipal?: ReactNode;
 };
-export declare const DatasourceNew: ({ datasourcesListRoute, secretsRoute, principalUid, principalKind, accountPrincipal, }?: DatasourceNewProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Connect a Datasource: a `kind=datasource` content source.
+ *
+ * Everything but the credential lives in Contents. The credential is a
+ * Secret reference — IAM is consulted here only to list the Secrets to pick
+ * from — and a source routed through a Dataserver needs none, because the
+ * gateway holds the credential in the network the database lives in.
+ */
+export declare const DatasourceNew: ({ datasourcesListRoute, secretsRoute, spaceUid, accountPrincipal, }?: DatasourceNewProps) => import("react").JSX.Element;
 export default DatasourceNew;