@datalayer/core 1.1.59 → 1.1.66

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;