@datalayer/core 1.1.60 → 1.2.10

package/lib/views/datasources/DatasourceNew.js

@@ -1,131 +1,142 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useEffect, useState } from 'react';
-import { PageLayout, FormControl, Button, TextInput, Text, Heading, Textarea, Select, Flash, Link, } from '@primer/react';
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useMemo, useRef, useState, } from 'react';
+import { PageLayout, FormControl, Button, Checkbox, CheckboxGroup, TextInput, Text, Heading, Textarea, Select, Flash, Link, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { useCache, useNavigate, useToast } from '../../hooks/index.js';
-import { useRunStore } from '../../state/index.js';
-export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/datasources', secretsRoute = '/settings/iam/secrets', principalUid, principalKind, accountPrincipal, } = {}) => {
-    const runStore = useRunStore();
-    const { useCreateDatasource } = useCache();
-    const createDatasourceMutation = useCreateDatasource({
-        principalUid,
-        principalKind,
-    });
+import { DATASOURCE_CONNECTOR_LABELS, DATASOURCE_OPERATIONS, } from '../../api/contents/index.js';
+import { useCache, useContentSources, useCreateContentSource, useNavigate, useToast, } from '../../hooks/index.js';
+const CONNECTORS = [
+    'athena',
+    'bigquery',
+    'sql',
+];
+/** What the connector needs to be told, and what the field is called. */
+const TARGET_LABELS = {
+    athena: {
+        endpoint: 'Region or workgroup endpoint',
+        target: 'Database',
+        hint: 'The Glue database queries run in. The Secret holds the AWS key pair and the output bucket.',
+    },
+    bigquery: {
+        endpoint: 'Endpoint',
+        target: 'Project',
+        hint: 'The Google Cloud project billed for the queries. The Secret holds the service account.',
+    },
+    sql: {
+        endpoint: 'Endpoint',
+        target: 'Database',
+        hint: 'host:port of the server and the database to open. The Secret holds the user and password.',
+    },
+};
+/**
+ * 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 const DatasourceNew = ({ datasourcesListRoute = '/datasources', secretsRoute = '/secrets', spaceUid, accountPrincipal, } = {}) => {
     const navigate = useNavigate();
     const { enqueueToast } = useToast();
-    const [formValues, setFormValues] = useState({
-        variant: 'athena',
-        database: undefined,
-        outputBucket: undefined,
-        name: undefined,
-        description: undefined,
-    });
-    const [validationResult, setValidationResult] = useState({
-        variant: undefined,
-        database: undefined,
-        outputBucket: undefined,
-        name: undefined,
-        description: undefined,
-    });
-    const valueVariantChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            variant: event.target.value,
-        }));
-    };
-    const valueDatabaseChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            database: event.target.value,
-        }));
+    const createSource = useCreateContentSource();
+    const { useSecrets } = useCache();
+    const secrets = useSecrets();
+    const dataservers = useContentSources({ kind: 'data-server' });
+    const idempotencyKey = useRef(`contents-datasource-${crypto.randomUUID()}`);
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [connectorType, setConnectorType] = useState('bigquery');
+    const [endpoint, setEndpoint] = useState('');
+    const [target, setTarget] = useState('');
+    const [route, setRoute] = useState('direct');
+    const [credentialUid, setCredentialUid] = useState('');
+    const [dataServerUid, setDataServerUid] = useState('');
+    const [operations, setOperations] = useState([
+        'select',
+        'describe',
+        'list',
+    ]);
+    const [rowLimit, setRowLimit] = useState('10000');
+    const [maxBytes, setMaxBytes] = useState('');
+    const [maxSeconds, setMaxSeconds] = useState('60');
+    const labels = TARGET_LABELS[connectorType];
+    const dataserverOptions = useMemo(() => (dataservers.data?.items ?? []).map(item => {
+        const configuration = item.source
+            .configuration;
+        return {
+            uid: item.source.uid,
+            name: item.source.name,
+            state: configuration.state ??
+                (configuration.lastHeartbeatAt ? 'ready' : 'registering'),
+        };
+    }), [dataservers.data]);
+    const numberOrUndefined = (value) => {
+        const parsed = Number.parseInt(value, 10);
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
     };
-    const valueOutputBucketChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            outputBucket: event.target.value,
-        }));
-    };
-    const valueNameChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            name: event.target.value,
-        }));
-    };
-    const valueDescriptionChange = (event) => {
-        setFormValues(prevFormValues => ({
-            ...prevFormValues,
-            description: event.target.value,
-        }));
-    };
-    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,
-            database: formValues.variant !== 'athena'
-                ? true
-                : formValues.database === undefined
-                    ? undefined
-                    : formValues.database.length > 0
-                        ? true
-                        : false,
-            outputBucket: formValues.variant !== 'athena'
-                ? true
-                : formValues.outputBucket === undefined
-                    ? undefined
-                    : formValues.outputBucket.length > 0
-                        ? true
-                        : false,
-        }));
-    }, [formValues]);
-    const submitCreate = () => {
-        if (!formValues.name || !formValues.description) {
+    const nameValid = name.trim().length > 2;
+    const credentialValid = route === 'dataserver' ? Boolean(dataServerUid) : Boolean(credentialUid);
+    const canSubmit = nameValid &&
+        credentialValid &&
+        operations.length > 0 &&
+        !createSource.isPending;
+    const toggleOperation = (operation, checked) => setOperations(current => checked
+        ? DATASOURCE_OPERATIONS.filter(item => item === operation || current.includes(item))
+        : current.filter(item => item !== operation));
+    const submit = async (event) => {
+        event.preventDefault();
+        if (!canSubmit) {
             return;
         }
-        runStore.layout().showBackdrop('Creating an datasource...');
-        createDatasourceMutation.mutate({
-            name: formValues.name,
-            variant: formValues.variant,
-            database: formValues.database ?? '',
-            outputBucket: formValues.outputBucket ?? '',
-            description: formValues.description,
-        }, {
-            onSuccess: (resp) => {
-                if (typeof resp === 'object' &&
-                    resp !== null &&
-                    'success' in resp &&
-                    resp.success) {
-                    const message = 'message' in resp &&
-                        typeof resp.message === 'string'
-                        ? resp.message
-                        : 'Datasource created.';
-                    enqueueToast(message, { variant: 'success' });
-                    navigate(datasourcesListRoute);
-                }
-            },
-            onSettled: () => {
-                runStore.layout().hideBackdrop();
-            },
-        });
+        try {
+            const created = await createSource.mutateAsync({
+                source: {
+                    name: name.trim(),
+                    description: description.trim() || null,
+                    spaceUid,
+                    kind: 'datasource',
+                    capabilities: ['query'],
+                    credentialUid: route === 'direct' ? credentialUid : null,
+                    configuration: {
+                        kind: 'datasource',
+                        connectorType,
+                        endpoint: endpoint.trim() || null,
+                        databaseOrProject: target.trim() || null,
+                        credentialUid: route === 'direct' ? credentialUid : null,
+                        networkRoute: route,
+                        dataServerUid: route === 'dataserver' ? dataServerUid : null,
+                        allowedOperations: operations,
+                        defaultRowLimit: numberOrUndefined(rowLimit),
+                        maxBytes: numberOrUndefined(maxBytes),
+                        maxSeconds: numberOrUndefined(maxSeconds),
+                    },
+                },
+                idempotencyKey: idempotencyKey.current,
+            });
+            enqueueToast('Datasource connected.', { variant: 'success' });
+            navigate(`${datasourcesListRoute}/${created.value.source.uid}`);
+        }
+        catch {
+            // The error is shown under the form; the idempotency key makes a retry safe.
+        }
     };
-    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: "New Datasource" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Create a datasource and configure required secrets for the selected provider." }), accountPrincipal && _jsx(Box, { sx: { mt: 2 }, children: accountPrincipal })] }), _jsxs(Flash, { variant: "warning", sx: { mb: 3 }, children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ",", ' ', "ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secrets" }), ' ', "are available:", '  ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), '  ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), '  ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource 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 datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _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.database ||
-                                    !validationResult.outputBucket ||
-                                    !validationResult.name ||
-                                    !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
-                                    e.preventDefault();
-                                    submitCreate();
-                                }, children: "Create a datasource" })] })] }) }) }));
+    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: "Connect a Datasource" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "A database, warehouse or query service your notebooks and agents query through Datalayer. The credential stays in Vault; a query receives a short-lived, scoped connection." }), accountPrincipal && _jsx(Box, { sx: { mt: 2 }, children: accountPrincipal })] }), _jsxs(Box, { as: "form", onSubmit: submit, sx: { display: 'grid', gap: 3 }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Connector" }), _jsx(Select, { value: connectorType, onChange: event => setConnectorType(event.target.value), children: CONNECTORS.map(connector => (_jsx(Select.Option, { value: connector, children: DATASOURCE_CONNECTOR_LABELS[connector] }, connector))) }), _jsx(FormControl.Caption, { children: labels.hint })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: name, onChange: event => setName(event.target.value), autoFocus: true }), name.length > 0 && !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, value: description, onChange: event => setDescription(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: labels.endpoint }), _jsx(TextInput, { block: true, monospace: true, value: endpoint, placeholder: connectorType === 'sql' ? 'warehouse.internal:5432' : '', onChange: event => setEndpoint(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: labels.target }), _jsx(TextInput, { block: true, monospace: true, value: target, onChange: event => setTarget(event.target.value) })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Network route" }), _jsxs(Select, { value: route, onChange: event => setRoute(event.target.value), children: [_jsx(Select.Option, { value: "direct", children: "Direct \u2014 Datalayer reaches the endpoint" }), _jsx(Select.Option, { value: "dataserver", children: "Through a Dataserver in your network" })] }), _jsx(FormControl.Caption, { children: "A private endpoint is reached through a Dataserver, which holds the credential in the network the database lives in." })] }), route === 'direct' ? (_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Credential" }), _jsxs(Select, { value: credentialUid, onChange: event => setCredentialUid(event.target.value), children: [_jsx(Select.Option, { value: "", children: "Choose a Secret\u2026" }), (secrets.data ?? []).map(secret => (_jsx(Select.Option, { value: secret.id, children: secret.name }, secret.id)))] }), _jsxs(FormControl.Caption, { children: ["Held in Vault and resolved server-side for each query; never handed to notebook code. Add one under", ' ', _jsx(Link, { href: secretsRoute, onClick: event => {
+                                                    event.preventDefault();
+                                                    navigate(secretsRoute, event);
+                                                }, children: "Secrets" }), "."] })] })) : (_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Dataserver" }), _jsxs(Select, { value: dataServerUid, onChange: event => setDataServerUid(event.target.value), children: [_jsx(Select.Option, { value: "", children: "Choose a Dataserver\u2026" }), dataserverOptions.map(option => (_jsxs(Select.Option, { value: option.uid, children: [option.name, " (", option.state, ")"] }, option.uid)))] }), _jsx(FormControl.Caption, { children: dataserverOptions.length === 0
+                                            ? 'No Dataserver is registered yet; register one under Dataservers first.'
+                                            : 'The gateway that reaches the endpoint. Contents routes to it only while it is online.' })] })), _jsxs(CheckboxGroup, { children: [_jsx(CheckboxGroup.Label, { children: "Allowed operations" }), DATASOURCE_OPERATIONS.map(operation => (_jsxs(FormControl, { children: [_jsx(Checkbox, { value: operation, checked: operations.includes(operation), onChange: event => toggleOperation(operation, event.target.checked) }), _jsx(FormControl.Label, { sx: { textTransform: 'capitalize' }, children: operation })] }, operation))), _jsx(CheckboxGroup.Caption, { children: "The service refuses any statement outside this list before a query exists. Writes are never allowed through a Datasource." })] }), _jsxs(Box, { sx: {
+                                    display: 'grid',
+                                    gridTemplateColumns: ['1fr', 'repeat(3, minmax(0, 1fr))'],
+                                    gap: 3,
+                                }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Default row limit" }), _jsx(TextInput, { block: true, type: "number", min: 1, value: rowLimit, onChange: event => setRowLimit(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Max bytes" }), _jsx(TextInput, { block: true, type: "number", min: 1, value: maxBytes, placeholder: "Unlimited", onChange: event => setMaxBytes(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Max seconds" }), _jsx(TextInput, { block: true, type: "number", min: 1, value: maxSeconds, onChange: event => setMaxSeconds(event.target.value) })] })] }), createSource.isError && (_jsx(Flash, { variant: "danger", children: createSource.error.message })), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { type: "button", onClick: event => navigate(datasourcesListRoute, event), children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !canSubmit, children: createSource.isPending ? 'Connecting…' : 'Connect Datasource' })] })] })] }) }) }));
 };
 export default DatasourceNew;

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

@@ -1,14 +1,46 @@
+import type { CatalogSource } from '../../api/contents';
 export type DatasourcesProps = {
-    /** Route to navigate when clicking "New datasource" button. Defaults to '/new/datasource'. */
+    /** Route to navigate when clicking "New datasource" button. Defaults to '/datasources/new'. */
     newDatasourceRoute?: string;
-    /** Base route for the datasources list (used for edit navigation). Defaults to current relative path. */
+    /** Base route for the datasources list (used for detail navigation). Defaults to the relative uid. */
     datasourcesListRoute?: string;
-    /** Optional principal uid used to scope datasource reads. */
-    principalUid?: string;
-    /** Optional principal kind used to scope datasource reads. */
-    principalKind?: 'personal' | 'organization' | 'team';
+    /** Only the Datasources of one Space. */
+    spaceUid?: string;
     /** Show local inline spinner in empty state while loading. */
     showInlineLoadingIndicator?: boolean;
+    /** Render the real view with inert, invented data for documentation. */
+    mock?: boolean;
+    /**
+     * Drawn inside a page that already has a heading and an inset of its own.
+     *
+     * On its own route this is a page: a frame, a centred column, a full-height
+     * minimum and a title. Inside the Contents catalog all four fight the page
+     * around it — the inset doubles, the column narrows past its neighbours, the
+     * min-height leaves a gap under a short list, and the title names the
+     * section twice.
+     */
+    embedded?: boolean;
 };
-export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, principalUid, principalKind, showInlineLoadingIndicator, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
+type DatasourceRow = {
+    id: string;
+    uid: string;
+    name: string;
+    description: string;
+    connector: string;
+    target: string;
+    route: 'direct' | 'dataserver';
+    operations: string;
+    status: string;
+    canExecute: boolean;
+};
+/** What a Datasource is, in the terms the table shows. */
+export declare const toDatasourceRow: (item: CatalogSource) => DatasourceRow;
+/**
+ * The Datasources of the Contents catalog.
+ *
+ * A Datasource is a `kind=datasource` content source: its connector, route,
+ * limits and allowed operations live in Contents. IAM is consulted only when
+ * one is created, to pick the Secret that holds its credential.
+ */
+export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, spaceUid, showInlineLoadingIndicator, mock, embedded, }?: DatasourcesProps) => import("react").JSX.Element;
 export default Datasources;

package/lib/views/datasources/Datasources.js

@@ -1,40 +1,45 @@
-import { jsx as _jsx, Fragment as _Fragment, 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 { useMemo } from 'react';
 import { PageLayout, Button, IconButton, Spinner, 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, principalUid, principalKind, showInlineLoadingIndicator = true, }) => {
-    const { useDatasources } = useCache();
-    const datasourcesQuery = useDatasources({ principalUid, principalKind });
+import { DATASOURCE_CONNECTOR_LABELS, } from '../../api/contents/index.js';
+import { useContentSources, useNavigate } from '../../hooks/index.js';
+import { DATASOURCES_MOCK } from './DatasourcesMock.js';
+/** What a Datasource is, in the terms the table shows. */
+export const toDatasourceRow = (item) => {
+    const configuration = item.source.configuration;
+    const connector = configuration.connectorType;
+    return {
+        id: item.source.uid,
+        uid: item.source.uid,
+        name: item.source.name,
+        description: item.source.description ?? '',
+        connector: DATASOURCE_CONNECTOR_LABELS[connector] ?? configuration.connectorType,
+        target: configuration.databaseOrProject ?? configuration.endpoint ?? '',
+        route: configuration.networkRoute === 'dataserver' ? 'dataserver' : 'direct',
+        operations: (configuration.allowedOperations ?? []).join(', '),
+        status: item.source.status,
+        canExecute: item.permissions.execute,
+    };
+};
+const DatasourcesTable = ({ datasources, datasourcesListRoute, mock = false, }) => {
     const navigate = useNavigate();
-    const [datasources, setDatasources] = useState([]);
-    const showInitialSpinner = datasources.length === 0 &&
-        (datasourcesQuery.isLoading ||
-            datasourcesQuery.isFetching ||
-            !Array.isArray(datasourcesQuery.data));
-    useEffect(() => {
-        if (datasourcesQuery.data) {
-            setDatasources(datasourcesQuery.data || []);
-        }
-    }, [datasourcesQuery.data]);
-    return datasources.length === 0 ? (_jsx(Blankslate, { border: true, spacious: true, children: showInitialSpinner && showInlineLoadingIndicator ? (_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minHeight: '40px',
-            }, children: _jsx(Spinner, {}) })) : showInitialSpinner ? (_jsxs(_Fragment, { children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Loading datasources..." }) })] })) : (_jsxs(_Fragment, { 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
+    return datasources.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(DatabaseIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasource yet. Connect a database, warehouse or query service to run governed queries from notebooks and agents." }) })] })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "datasources", "aria-describedby": "datasources-subtitle", data: datasources, columns: [
                 {
-                    header: 'Type',
-                    field: 'variant',
-                    renderCell: datasource => _jsx(Label, { children: datasource.variant }),
+                    header: 'Connector',
+                    field: 'connector',
+                    renderCell: datasource => _jsx(Label, { children: datasource.connector }),
                 },
                 {
                     header: 'Name',
@@ -42,27 +47,77 @@ const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, s
                     rowHeader: true,
                 },
                 {
-                    header: 'Description',
-                    field: 'description',
+                    header: 'Database or project',
+                    field: 'target',
+                    renderCell: datasource => datasource.target ? (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: datasource.target })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "\u2014" })),
+                },
+                {
+                    header: 'Route',
+                    field: 'route',
+                    renderCell: datasource => (_jsx(Label, { variant: datasource.route === 'dataserver' ? 'accent' : 'secondary', children: datasource.route === 'dataserver' ? 'Dataserver' : 'Direct' })),
+                },
+                {
+                    header: 'Operations',
+                    field: 'operations',
+                    renderCell: datasource => datasource.operations ? (_jsx(Text, { sx: { fontSize: 0 }, children: datasource.operations })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "\u2014" })),
+                },
+                {
+                    header: 'Status',
+                    field: 'status',
+                    renderCell: datasource => (_jsx(Label, { variant: datasource.status === 'ready' ? 'success' : 'secondary', children: datasource.status })),
                 },
                 {
                     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) })),
+                    renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": `Open ${datasource.name}`, size: "small", variant: "invisible", disabled: mock, onClick: e => {
+                            if (!mock) {
+                                navigate(datasourcesListRoute
+                                    ? `${datasourcesListRoute}/${datasource.uid}`
+                                    : `${datasource.uid}`, e);
+                            }
+                        } })),
                 },
             ] }) }));
 };
-export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, principalUid, principalKind, showInlineLoadingIndicator = true, } = {}) => {
+const LiveDatasourcesTable = ({ datasourcesListRoute, spaceUid, showInlineLoadingIndicator = true, }) => {
+    const datasourcesQuery = useContentSources({ kind: 'datasource', spaceUid });
+    const datasources = useMemo(() => (datasourcesQuery.data?.items ?? [])
+        .map(toDatasourceRow)
+        .sort((left, right) => left.name.localeCompare(right.name)), [datasourcesQuery.data]);
+    const showInitialSpinner = datasources.length === 0 && datasourcesQuery.isPending;
+    if (datasourcesQuery.isError && datasources.length === 0) {
+        return (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(DatabaseIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "Datasources could not be listed" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: datasourcesQuery.error.message }) }), _jsx(Blankslate.PrimaryAction, { onClick: () => datasourcesQuery.refetch(), children: "Try again" })] }));
+    }
+    return showInitialSpinner ? (_jsx(Blankslate, { border: true, spacious: true, children: showInlineLoadingIndicator ? (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minHeight: '40px',
+            }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Loading datasources..." }) })] })) })) : (_jsx(DatasourcesTable, { datasources: datasources, datasourcesListRoute: datasourcesListRoute }));
+};
+/**
+ * The Datasources of the Contents catalog.
+ *
+ * A Datasource is a `kind=datasource` content source: its connector, route,
+ * limits and allowed operations live in Contents. IAM is consulted only when
+ * one is created, to pick the Secret that holds its credential.
+ */
+export const Datasources = ({ newDatasourceRoute = '/datasources/new', datasourcesListRoute, spaceUid, showInlineLoadingIndicator = true, mock = false, embedded = false, } = {}) => {
     const navigate = useNavigate();
-    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, showInlineLoadingIndicator: showInlineLoadingIndicator })] }) }) }));
+    const body = (_jsxs(Box, { sx: { maxWidth: embedded ? undefined : 960, mx: 'auto', width: '100%' }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    gap: 3,
+                    flexWrap: 'wrap',
+                    mb: embedded ? 2 : 4,
+                }, children: [_jsx(Box, { children: !embedded && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Databases, warehouses and query services your notebooks and agents query through Datalayer, without holding the credential." })] })) }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, disabled: mock, onClick: e => navigate(newDatasourceRoute, e), children: "Connect Datasource" })] }), mock ? (_jsx(DatasourcesTable, { datasources: DATASOURCES_MOCK.map(toDatasourceRow), mock: true })) : (_jsx(LiveDatasourcesTable, { datasourcesListRoute: datasourcesListRoute, spaceUid: spaceUid, showInlineLoadingIndicator: showInlineLoadingIndicator }))] }));
+    if (embedded) {
+        return body;
+    }
+    return (_jsx(PageLayout, { containerWidth: "full", padding: "normal", style: {
+            overflow: 'visible',
+            minHeight: mock ? undefined : 'calc(100vh - 45px)',
+        }, children: _jsx(PageLayout.Content, { children: body }) }));
 };
 export default Datasources;

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

@@ -0,0 +1,3 @@
+import type { CatalogSource } from '../../api/contents';
+/** Invented records used when the real Datasources view is embedded in docs. */
+export declare const DATASOURCES_MOCK: CatalogSource[];

package/lib/views/datasources/DatasourcesMock.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+const OWNER = '01HZZZZZZZZZZZZZZZZZZZZZZZ';
+const catalog = (uid, name, description, configuration) => ({
+    source: {
+        contractVersion: 'v1',
+        uid,
+        kind: 'datasource',
+        name,
+        description,
+        principalUid: OWNER,
+        principalKind: 'user',
+        configuration: { kind: 'datasource', ...configuration },
+        capabilities: ['query'],
+        status: 'ready',
+        createdAt: '2026-08-24T12:00:00Z',
+        updatedAt: '2026-08-24T12:00:00Z',
+    },
+    permissions: {
+        view: true,
+        update: true,
+        execute: true,
+        effectiveAccessLevel: 'execute',
+        isOwner: true,
+    },
+});
+/** Invented records used when the real Datasources view is embedded in docs. */
+export const DATASOURCES_MOCK = [
+    catalog('01DATASRC0EARTH00000000000', 'Earth Observation Analytics', 'Curated satellite observations for geospatial analysis.', {
+        connectorType: 'bigquery',
+        databaseOrProject: 'earth-observation',
+        networkRoute: 'direct',
+        credentialUid: '01CREDENT1AL00000000000000',
+        allowedOperations: ['select', 'describe', 'list'],
+        defaultRowLimit: 10000,
+    }),
+    catalog('01DATASRC0LAKEH0USE0000000', 'Research Lakehouse', 'Shared Parquet datasets queried through Amazon Athena.', {
+        connectorType: 'athena',
+        databaseOrProject: 'research',
+        networkRoute: 'direct',
+        credentialUid: '01CREDENT1AL00000000000001',
+        allowedOperations: ['select', 'describe'],
+        defaultRowLimit: 5000,
+    }),
+    catalog('01DATASRC0PR1VATE000000000', 'Private Warehouse', 'An on-premises PostgreSQL reached through the Frankfurt Dataserver.', {
+        connectorType: 'sql',
+        endpoint: 'warehouse.internal:5432',
+        databaseOrProject: 'analytics',
+        networkRoute: 'dataserver',
+        dataServerUid: '01DATASRV0FRANKFURT0000000',
+        allowedOperations: ['select'],
+        defaultRowLimit: 1000,
+        maxSeconds: 60,
+    }),
+];

package/lib/views/iam/SignInSimple.d.ts

@@ -78,6 +78,18 @@ export interface SignInSimpleProps {
      * Disable all interactive controls (useful when embedded in documentation).
      */
     asDoc?: boolean;
+    /**
+     * Whether the form centres itself in the viewport.
+     *
+     * True by default, which is right for a page that is nothing but this form.
+     * False for a host that has placed it — a column beside something else —
+     * where `min-height: 100vh` pushes it half a screen down from whatever it
+     * was meant to sit level with.
+     *
+     * Distinct from `hideHero`, which also top-aligns but takes the title, icon
+     * and description with it, and from `asDoc`, which disables the form.
+     */
+    fillHeight?: boolean;
     /**
      * Hide header title and description area.
      */