@datalayer/core 1.0.19 → 1.0.21

package/lib/stateful/runtimes/actions.js

@@ -9,9 +9,8 @@ import { URLExt } from '@jupyterlab/coreutils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Upload } from 'tus-js-client';
 import { requestDatalayerAPI, } from '../../api/index.js';
-import { asRuntimeSnapshot } from '../../models/index.js';
+import { asCodeSandboxSnapshot } from '../../models/index.js';
 import { iamStore, runtimesStore } from '../../state/index.js';
-import { sleep } from '../../utils/index.js';
 /**
  * Get available Environments.
  */
@@ -100,7 +99,7 @@ export async function deleteRuntime(options) {
  */
 export async function snapshotRuntime(options) {
     const data = await requestDatalayerAPI({
-        url: URLExt.join(runtimesStore.getState().runtimesRunUrl, 'api/runtimes/v1/runtime-snapshots'),
+        url: URLExt.join(runtimesStore.getState().runtimesRunUrl, 'api/runtimes/v1/sandbox-snapshots'),
         method: 'POST',
         body: {
             pod_name: options.id,
@@ -110,29 +109,34 @@ export async function snapshotRuntime(options) {
         },
         token: iamStore.getState().token,
     });
-    if (!data.success || !data.snapshot) {
-        throw new Error(`Failed to take the runtime snapshot ${options.id} - ${data}`);
+    if (!data.success) {
+        throw new Error(`Failed to take the code sandbox snapshot ${options.id} - ${data}`);
+    }
+    // Runtimes service can return 202 Accepted without inline snapshot payload
+    // while the snapshot lifecycle completes asynchronously via pub-sub events.
+    if (!data.snapshot) {
+        return undefined;
     }
-    return asRuntimeSnapshot(data.snapshot);
+    return asCodeSandboxSnapshot(data.snapshot);
 }
 /**
- * Get Runtime Snapshots.
+ * Get Code Sandbox Snapshots.
  */
-export async function getRuntimeSnapshots() {
+export async function getSandboxSnapshots() {
     const data = await requestDatalayerAPI({
-        url: URLExt.join(runtimesStore.getState().runtimesRunUrl, 'api/runtimes/v1/runtime-snapshots'),
+        url: URLExt.join(runtimesStore.getState().runtimesRunUrl, 'api/runtimes/v1/sandbox-snapshots'),
         token: iamStore.getState().token,
     });
     if (!data.success) {
-        console.error('Failed to fetch runtime snapshots.', data);
+        console.error('Failed to fetch code sandbox snapshots.', data);
         return [];
     }
-    return (data.snapshots ?? []).map(asRuntimeSnapshot);
+    return (data.snapshots ?? []).map(asCodeSandboxSnapshot);
 }
 /**
- * Load a Runtime Snapshot within a Runtime.
+ * Load a Code Sandbox Snapshot within a Runtime.
  */
-export async function loadRuntimeSnapshot(options) {
+export async function loadSandboxSnapshot(options) {
     const data = await requestDatalayerAPI({
         url: URLExt.join(runtimesStore.getState().runtimesRunUrl, 'api/runtimes/v1/runtimes', options.id),
         method: 'PUT',
@@ -142,29 +146,29 @@ export async function loadRuntimeSnapshot(options) {
         token: iamStore.getState().token,
     });
     if (!data.success) {
-        throw new Error(`Failed to load the runtime snapshot; ${data.message}`);
+        throw new Error(`Failed to load the code sandbox snapshot; ${data.message}`);
     }
 }
 /**
- * Returns the Runtime Snapshot download URL.
+ * Returns the Code Sandbox Snapshot download URL.
  *
  * @param id Snapshot UID to download
  * @returns The download URL
  */
-export function createRuntimeSnapshotDownloadURL(id) {
-    return (URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/runtime-snapshots/${id}`) +
+export function createSandboxSnapshotDownloadURL(id) {
+    return (URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/sandbox-snapshots/${id}`) +
         URLExt.objectToQueryString({
             download: '1',
             token: iamStore.getState().token ?? '',
         }));
 }
 /**
- * Export a Runtime Snapshot.
+ * Export a Code Sandbox Snapshot.
  *
- * @param id Runtime snapshot UID to download
+ * @param id Code Sandbox snapshot UID to download
  */
-export function exportRuntimeSnapshot(id) {
-    const url = createRuntimeSnapshotDownloadURL(id);
+export function exportCodeSandboxSnapshot(id) {
+    const url = createSandboxSnapshotDownloadURL(id);
     const element = document.createElement('a');
     element.href = url;
     element.download = '';
@@ -173,46 +177,22 @@ export function exportRuntimeSnapshot(id) {
     document.body.removeChild(element);
 }
 /**
- * Delete a Runtime Snapshot.
+ * Delete a Code Sandbox Snapshot.
  */
-export async function deleteRuntimeSnapshot(id) {
+export async function deleteCodeSandboxSnapshot(id) {
     await requestDatalayerAPI({
-        url: URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/runtime-snapshots/${id}`),
+        url: URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/sandbox-snapshots/${id}`),
         method: 'DELETE',
         token: iamStore.getState().token,
     });
-    // Poll Runtime Snapshot state up-to its deletion.
-    try {
-        let sleepTimeout = 1000;
-        while (true) {
-            await sleep(sleepTimeout);
-            sleepTimeout *= 2;
-            const response = await requestDatalayerAPI({
-                url: URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/runtime-snapshots/${id}`),
-                token: iamStore.getState().token,
-            });
-            if (response.success === false) {
-                throw new Error(response.message);
-            }
-        }
-    }
-    catch (error) {
-        if (error.name === 'RunResponseError' &&
-            error.response.status === 404) {
-            // Expected not found
-        }
-        else {
-            throw error;
-        }
-    }
 }
 /**
- * Update Runtime Snapshot metadata.
+ * Update Code Sandbox Snapshot metadata.
  */
-export async function updateRuntimeSnapshot(id, metadata) {
+export async function updateCodeSandboxSnapshot(id, metadata) {
     if (metadata.name || metadata.description) {
         await requestDatalayerAPI({
-            url: URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/runtime-snapshots/${id}`),
+            url: URLExt.join(runtimesStore.getState().runtimesRunUrl, `api/runtimes/v1/sandbox-snapshots/${id}`),
             method: 'PATCH',
             body: { ...metadata },
             token: iamStore.getState().token,
@@ -220,19 +200,19 @@ export async function updateRuntimeSnapshot(id, metadata) {
     }
 }
 /**
- * Upload a Runtime Snapshot.
+ * Upload a Code Sandbox Snapshot.
  *
  * Note: The promise will be rejected if the runtime state is empty.
  */
-export async function uploadRuntimeSnapshot(options) {
+export async function uploadCodeSandboxSnapshot(options) {
     if (options.file.size === 0) {
-        return Promise.reject('Empty Runtime Snapshot.');
+        return Promise.reject('Empty Code Sandbox Snapshot.');
     }
     const tracker = new PromiseDelegate();
     // Create a new tus upload.
     const upload = new Upload(options.file, {
         // Endpoint is the upload creation URL from your tus server.
-        endpoint: `${runtimesStore.getState().runtimesRunUrl}/api/runtimes/v1/runtime-snapshots/upload`,
+        endpoint: `${runtimesStore.getState().runtimesRunUrl}/api/runtimes/v1/sandbox-snapshots/upload`,
         headers: { Authorization: `Bearer ${iamStore.getState().token}` },
         // Retry delays will enable tus-js-client to automatically retry on errors.
         // retryDelays: [0, 3000, 5000, 10000, 20000],

package/lib/stateful/runtimes/apis.d.ts

@@ -5,7 +5,7 @@ import { ISessionContext } from '@jupyterlab/apputils';
 import { ServiceManager, Kernel, ServerConnection } from '@jupyterlab/services';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
-import type { IRuntimeSnapshot, IRuntimeCapabilities, IRuntimeModel, IDatalayerEnvironment, IRuntimeType, IRuntimeLocation } from '../../models';
+import type { ICodeSandboxSnapshot, IRuntimeCapabilities, IRuntimeModel, IDatalayerEnvironment, IRuntimeType, IRuntimeLocation } from '../../models';
 /**
  * Abstract interface for the Datalayer session context.
  * It extends the JupyterLab session context
@@ -188,13 +188,13 @@ export interface IRemoteRuntimesManager extends IDisposable {
          * Whether to stop the kernel after the snapshot completion or not.
          */
         stop?: boolean;
-    }): Promise<IRuntimeSnapshot | undefined>;
+    }): Promise<ICodeSandboxSnapshot | undefined>;
     /**
      * Load a snapshot within a runtim
      *
      * The runtime may be given by its `id` or `podName`.
      */
-    loadRuntimeSnapshot(options: {
+    loadSandboxSnapshot(options: {
         /**
          * The kernel id
          */

package/lib/stateful/runtimes/snapshots.d.ts

@@ -12,13 +12,13 @@ type Props = {
  *
  * Note: You should use this only for browser runtimes.
  */
-export declare function createRuntimeSnapshot(props: Props): Promise<void>;
+export declare function createSandboxSnapshot(props: Props): Promise<void>;
 /**
  * Load a snapshot within a browser kernel.
  *
  * Note: You should use this only for browser kernels.
  */
-export declare function loadBrowserRuntimeSnapshot({ connection, id, }: {
+export declare function loadBrowserSandboxSnapshot({ connection, id, }: {
     connection: Kernel.IKernelConnection;
     id: string;
 }): Promise<void>;

package/lib/stateful/runtimes/snapshots.js

@@ -3,13 +3,13 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { KernelExecutor } from '@datalayer/jupyter-react';
-import { createRuntimeSnapshotDownloadURL, uploadRuntimeSnapshot } from './index.js';
+import { createSandboxSnapshotDownloadURL, uploadCodeSandboxSnapshot } from './index.js';
 /**
  * Snapshot a runtime through the frontend and upload it to the cloud.
  *
  * Note: You should use this only for browser runtimes.
  */
-export async function createRuntimeSnapshot(props) {
+export async function createSandboxSnapshot(props) {
     const { connection, metadata, onUploadProgress } = props;
     const dump = await new KernelExecutor({ connection }).execute(GET_RUNTIME_SNAPSHOT_SNIPPET, {
         storeHistory: false,
@@ -19,7 +19,7 @@ export async function createRuntimeSnapshot(props) {
     // Convert the data to blob.
     const bytes = base64ToBytes(serializedData);
     const file = new Blob([bytes.buffer]);
-    return uploadRuntimeSnapshot({
+    return uploadCodeSandboxSnapshot({
         file,
         metadata,
         onProgress: onUploadProgress,
@@ -36,14 +36,14 @@ function base64ToBytes(base64) {
  *
  * Note: You should use this only for browser kernels.
  */
-export async function loadBrowserRuntimeSnapshot({ connection, id, }) {
-    const downloadURL = createRuntimeSnapshotDownloadURL(id);
+export async function loadBrowserSandboxSnapshot({ connection, id, }) {
+    const downloadURL = createSandboxSnapshotDownloadURL(id);
     const response = await fetch(downloadURL);
     const buffer = await response.arrayBuffer();
     const base64 = bytesToBase64(new Uint8Array(buffer));
     await new KernelExecutor({
         connection,
-    }).execute(getLoadRuntimeSnapshotSnippet(base64), {
+    }).execute(getLoadSandboxSnapshotSnippet(base64), {
         storeHistory: false,
         silent: true,
     });
@@ -104,7 +104,7 @@ const GET_RUNTIME_SNAPSHOT_SNIPPET = `def _create_snapshot():
 _create_snapshot()
 del _create_snapshot
 `;
-function getLoadRuntimeSnapshotSnippet(content) {
+function getLoadSandboxSnapshotSnippet(content) {
     return `async def _load_snapshot():
     import os
     import logging

package/lib/utils/Format.d.ts

@@ -9,6 +9,12 @@ export declare const MEMORY_UNIT_LIMITS: {
     readonly [U in MemoryUnit]: number;
 };
 export declare function formatForDisplay(numBytes: number | undefined, units?: MemoryUnit | undefined): string;
+/**
+ * Format a byte size value using a human-friendly unit.
+ *
+ * Examples: 0 B, 532 B, 1.2 KB, 24 MB, 1.45 GB
+ */
+export declare function formatByteSize(numBytes: number | string | null | undefined): string;
 /**
  * Given a number of bytes, convert to the most human-readable
  * format, (GB, TB, etc).

package/lib/utils/Format.js

@@ -17,6 +17,23 @@ export function formatForDisplay(numBytes, units) {
     const lu = convertToLargestUnit(numBytes, units);
     return lu[0].toFixed(2) + ' ' + lu[1];
 }
+/**
+ * Format a byte size value using a human-friendly unit.
+ *
+ * Examples: 0 B, 532 B, 1.2 KB, 24 MB, 1.45 GB
+ */
+export function formatByteSize(numBytes) {
+    const normalizedNumBytes = typeof numBytes === 'string' ? Number(numBytes) : numBytes;
+    if (!Number.isFinite(normalizedNumBytes) || !normalizedNumBytes || normalizedNumBytes < 0) {
+        return '0 B';
+    }
+    const [value, unit] = convertToLargestUnit(normalizedNumBytes);
+    const decimals = value >= 100 ? 0 : value >= 10 ? 1 : 2;
+    const formattedValue = value
+        .toFixed(decimals)
+        .replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1');
+    return `${formattedValue} ${unit}`;
+}
 /**
  * Given a number of bytes, convert to the most human-readable
  * format, (GB, TB, etc).

package/lib/utils/Snapshot.d.ts

@@ -4,4 +4,4 @@
  * @param suffix Name prefix
  * @returns The kernel snapshot name
  */
-export declare function createRuntimeSnapshotName(suffix: string): string;
+export declare function createSandboxSnapshotName(suffix: string): string;

package/lib/utils/Snapshot.js

@@ -16,6 +16,6 @@ const KERNEL_SNAPSHOT_DESCRIPTION_CONFIGURATION = {
  * @param suffix Name prefix
  * @returns The kernel snapshot name
  */
-export function createRuntimeSnapshotName(suffix) {
+export function createSandboxSnapshotName(suffix) {
     return `${uniqueNamesGenerator(KERNEL_SNAPSHOT_DESCRIPTION_CONFIGURATION)}-${suffix}`;
 }

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

@@ -1,2 +1,8 @@
-export declare const DatasourceDetail: () => import("react/jsx-runtime").JSX.Element;
+export type DatasourceDetailProps = {
+    /** Optional principal uid used to scope datasource reads/updates. */
+    principalUid?: string;
+    /** Optional principal kind used to scope datasource reads/updates. */
+    principalKind?: 'user' | 'organization' | 'team';
+};
+export declare const DatasourceDetail: ({ principalUid, principalKind, }?: DatasourceDetailProps) => import("react/jsx-runtime").JSX.Element;
 export default DatasourceDetail;

package/lib/views/datasources/DatasourceDetail.js

@@ -1,27 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { PageHeader, Heading, Text, Button, TextInput, FormControl, Textarea, Label, } from '@primer/react';
+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 { BoringAvatar } from '../../components/avatars/index.js';
 import { useCache, useToast } from '../../hooks/index.js';
 import { useRunStore } from '../../state/index.js';
-export const DatasourceDetail = () => {
+export const DatasourceDetail = ({ principalUid, principalKind, } = {}) => {
     const { datasourceId } = useParams();
     const runStore = useRunStore();
     const { enqueueToast } = useToast();
     const { useUpdateDatasource, useDatasource } = useCache();
-    const updateDatasourceMutation = useUpdateDatasource();
-    const datasourceQuery = useDatasource(datasourceId);
+    const updateDatasourceMutation = useUpdateDatasource({
+        principalUid,
+        principalKind,
+    });
+    const datasourceQuery = useDatasource(datasourceId ?? '', {
+        principalUid,
+        principalKind,
+    });
     const [datasource, setDatasource] = useState();
     const [formValues, setFormValues] = useState({
-        name: datasource?.name,
-        description: datasource?.description,
+        name: '',
+        description: '',
     });
     const [validationResult, setValidationResult] = useState({
         name: undefined,
@@ -32,7 +38,10 @@ export const DatasourceDetail = () => {
         if (datasourceQuery.data) {
             const datasource = datasourceQuery.data;
             setDatasource(datasource);
-            setFormValues({ ...datasource });
+            setFormValues({
+                name: datasource.name || '',
+                description: datasource.description || '',
+            });
         }
     }, [datasourceQuery.data]);
     const nameNameChange = (event) => {
@@ -48,8 +57,8 @@ export const DatasourceDetail = () => {
         }));
     };
     useEffect(() => {
-        setValidationResult({
-            ...validationResult,
+        setValidationResult(prev => ({
+            ...prev,
             name: formValues.name === undefined
                 ? undefined
                 : formValues.name.length > 2
@@ -60,19 +69,28 @@ export const DatasourceDetail = () => {
                 : formValues.description.length > 2
                     ? true
                     : false,
-        });
+        }));
     }, [formValues]);
     const nameSubmit = async () => {
+        if (!datasource) {
+            return;
+        }
         runStore.layout().showBackdrop();
-        datasource.name = formValues.name;
-        datasource.description = formValues.description;
-        updateDatasourceMutation.mutate(datasource, {
+        const updatedDatasource = {
+            ...datasource,
+            name: formValues.name,
+            description: formValues.description,
+        };
+        updateDatasourceMutation.mutate(updatedDatasource, {
             onSuccess: (resp) => {
-                if (resp.success) {
+                if (typeof resp === 'object' &&
+                    resp !== null &&
+                    'success' in resp &&
+                    resp.success) {
                     enqueueToast('The datasource is successfully updated.', {
                         variant: 'success',
                     });
-                    setDatasource(datasource);
+                    setDatasource(updatedDatasource);
                 }
             },
             onSettled: () => {
@@ -80,12 +98,32 @@ export const DatasourceDetail = () => {
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "Datasource" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: datasource?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: datasource?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: datasource?.variant }) })] }), _jsx(Box, { ml: 10, 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, contrast: true, size: "large", type: passwordVisibility ? 'text' : 'password', value: datasource?.database, 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, contrast: true, size: "large", type: passwordVisibility ? 'text' : 'password', value: datasource?.outputBucket, 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(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: nameSubmit, children: "Update datasource" })] }) })] })] }));
+    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" }) })] }) })] }) })] }) }) }));
 };
 export default DatasourceDetail;

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

@@ -1,8 +1,15 @@
+import { ReactNode } from 'react';
 export type DatasourceNewProps = {
     /** Route to navigate after creating a datasource. Defaults to '/settings/integrations/datasources'. */
     datasourcesListRoute?: string;
     /** Route to navigate to the secrets page. Defaults to '/settings/iam/secrets'. */
     secretsRoute?: string;
+    /** Optional principal uid used to scope datasource creation. */
+    principalUid?: string;
+    /** Optional principal kind used to scope datasource creation. */
+    principalKind?: 'user' | 'organization' | 'team';
+    /** Optional contextual principal summary rendered below the page intro. */
+    accountPrincipal?: ReactNode;
 };
-export declare const DatasourceNew: ({ datasourcesListRoute, secretsRoute, }?: DatasourceNewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatasourceNew: ({ datasourcesListRoute, secretsRoute, principalUid, principalKind, accountPrincipal, }?: DatasourceNewProps) => import("react/jsx-runtime").JSX.Element;
 export default DatasourceNew;

package/lib/views/datasources/DatasourceNew.js

@@ -4,14 +4,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useState } from 'react';
-import { PageHeader, FormControl, Button, TextInput, Text, Textarea, Select, Flash, Link, } from '@primer/react';
+import { PageLayout, FormControl, Button, 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', } = {}) => {
+export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/datasources', secretsRoute = '/settings/iam/secrets', principalUid, principalKind, accountPrincipal, } = {}) => {
     const runStore = useRunStore();
     const { useCreateDatasource } = useCache();
-    const createDatasourceMutation = useCreateDatasource();
+    const createDatasourceMutation = useCreateDatasource({
+        principalUid,
+        principalKind,
+    });
     const navigate = useNavigate();
     const { enqueueToast } = useToast();
     const [formValues, setFormValues] = useState({
@@ -59,8 +62,8 @@ export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/d
         }));
     };
     useEffect(() => {
-        setValidationResult({
-            ...validationResult,
+        setValidationResult(prev => ({
+            ...prev,
             name: formValues.name === undefined
                 ? undefined
                 : formValues.name.length > 2
@@ -85,9 +88,12 @@ export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/d
                     : formValues.outputBucket.length > 0
                         ? true
                         : false,
-        });
+        }));
     }, [formValues]);
     const submitCreate = () => {
+        if (!formValues.name || !formValues.description) {
+            return;
+        }
         runStore.layout().showBackdrop('Creating an datasource...');
         createDatasourceMutation.mutate({
             name: formValues.name,
@@ -97,8 +103,15 @@ export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/d
             description: formValues.description,
         }, {
             onSuccess: (resp) => {
-                if (resp.success) {
-                    enqueueToast(resp.message, { variant: 'success' });
+                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);
                 }
             },
@@ -107,12 +120,12 @@ export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/d
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", 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" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "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 ||
+    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" })] }) }) })] }));
+                                }, children: "Create a datasource" })] })] }) }) }));
 };
 export default DatasourceNew;

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

@@ -3,6 +3,10 @@ export type DatasourcesProps = {
     newDatasourceRoute?: string;
     /** Base route for the datasources list (used for edit navigation). Defaults to current relative path. */
     datasourcesListRoute?: string;
+    /** Optional principal uid used to scope datasource reads. */
+    principalUid?: string;
+    /** Optional principal kind used to scope datasource reads. */
+    principalKind?: 'user' | 'organization' | 'team';
 };
-export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, principalUid, principalKind, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
 export default Datasources;