@datalayer/core 1.0.24 → 1.1.41

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

@@ -0,0 +1,143 @@
+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 { useEffect, useState } from 'react';
+import { PageHeader, FormControl, Button, TextInput, Textarea, Select, Text, IconButton, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CopyIcon } from '@primer/octicons-react';
+import { Calendar, defaultCalendarStrings } from '@fluentui/react';
+import { useCache, useNavigate, useToast } from '../../hooks/index.js';
+import { useRunStore } from '../../state/index.js';
+export const APIKeyNew = ({ apiKeysListRoute = '/settings/iam/api-keys', showTitle = true, } = {}) => {
+    const runStore = useRunStore();
+    const { useCreateToken: useCreateAPIKey } = useCache();
+    const createAPIKeyMutation = useCreateAPIKey();
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const [today, _] = useState(new Date());
+    const [showAPIKey, setShowAPIKey] = useState(false);
+    const [apiKey, setAPIKey] = useState();
+    const [formValues, setFormValues] = useState({
+        variant: 'secret',
+        name: undefined,
+        description: undefined,
+        expirationDate: undefined,
+    });
+    const [validationResult, setValidationResult] = useState({
+        variant: undefined,
+        name: undefined,
+        description: undefined,
+        expirationDate: undefined,
+    });
+    const valueVariantChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            variant: event.target.value,
+        }));
+    };
+    const valueNameChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            name: event.target.value,
+        }));
+    };
+    const valueDescriptionChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            description: event.target.value,
+        }));
+    };
+    const expirationDateChange = (expirationDate) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            expirationDate,
+        }));
+    };
+    useEffect(() => {
+        setValidationResult({
+            ...validationResult,
+            name: formValues.name === undefined
+                ? undefined
+                : formValues.name.length > 2
+                    ? true
+                    : false,
+            description: formValues.description === undefined
+                ? undefined
+                : formValues.description.length > 2
+                    ? true
+                    : false,
+            expirationDate: formValues.expirationDate === undefined
+                ? undefined
+                : formValues.expirationDate.getTime() > today.getTime()
+                    ? true
+                    : false,
+        });
+    }, [formValues]);
+    const submitAPIKey = () => {
+        runStore.layout().showBackdrop('Creating an API key...');
+        createAPIKeyMutation.mutate({
+            name: formValues.name,
+            variant: formValues.variant,
+            description: formValues.description,
+            expirationDate: formValues.expirationDate,
+        }, {
+            onSuccess: (resp) => {
+                if (resp.success && resp.token) {
+                    enqueueToast(resp.message, { variant: 'success' });
+                    setAPIKey(resp.token);
+                    setShowAPIKey(true);
+                }
+            },
+            onSettled: () => {
+                runStore.layout().hideBackdrop();
+            },
+        });
+    };
+    return (_jsx(Box, { children: showAPIKey ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Your API Key Is Created" }) }) }), _jsxs(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'accent.muted',
+                        borderRadius: 2,
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        mb: 3,
+                    }, children: [_jsx(Text, { sx: { fontWeight: 600, color: 'accent.fg' }, children: "Important" }), _jsx(Text, { as: "p", sx: { mt: 1, color: 'fg.muted' }, children: "Save this API key now. You will not be able to see the full value again after leaving this page." })] }), _jsxs(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 3,
+                        bg: 'canvas.default',
+                    }, children: [_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(120px, 180px) 1fr", sx: { rowGap: 2, columnGap: 3, mb: 3 }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Name" }), _jsx(Text, { sx: { fontWeight: 600 }, children: apiKey?.name || '-' }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Description" }), _jsx(Text, { children: apiKey?.description || '-' }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expiration date" }), _jsx(Text, { children: apiKey?.expirationDate
+                                        ? `${apiKey.expirationDate.toLocaleString()} (${apiKey.expirationDate.toISOString()})`
+                                        : '-' })] }), _jsx(Text, { sx: { color: 'fg.muted', mb: 2 }, children: "API key value" }), _jsxs(Box, { display: "flex", sx: {
+                                alignItems: 'flex-start',
+                                gap: 2,
+                            }, children: [_jsx(Text, { as: "code", sx: {
+                                        color: 'fg.default',
+                                        bg: 'canvas.inset',
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        borderRadius: 2,
+                                        p: 2,
+                                        overflowWrap: 'anywhere',
+                                        fontSize: 0,
+                                        lineHeight: '20px',
+                                        flex: 1,
+                                        maxHeight: 140,
+                                        overflowY: 'auto',
+                                    }, children: apiKey?.value }), _jsx(IconButton, { "aria-label": "Copy API key to clipboard", icon: CopyIcon, size: "small", onClick: () => {
+                                        if (apiKey?.value) {
+                                            navigator.clipboard.writeText(apiKey.value);
+                                            enqueueToast('API key copied to clipboard', {
+                                                variant: 'success',
+                                            });
+                                        }
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(apiKeysListRoute, e), children: "List my API Keys" }) })] })) : (_jsxs(_Fragment, { children: [showTitle ? (_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New API Key" }) }) })) : null, _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "secret", children: "Secret" }), _jsx(Select.Option, { value: "publishable", disabled: true, children: "Publishable (coming soon)" }), _jsx(Select.Option, { value: "restricted", disabled: true, children: "Restricted (coming soon)" }), _jsx(Select.Option, { value: "temporary", disabled: true, children: "Temporary (coming soon)" })] }), _jsx(FormControl.Caption, { children: "Secret is currently available. Additional API key types are coming soon." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
+                                        !validationResult.description ||
+                                        !validationResult.expirationDate, sx: { marginTop: 2 }, onClick: e => {
+                                        e.preventDefault();
+                                        submitAPIKey();
+                                    }, children: "Create an API key" })] }) }) })] })) }));
+};
+export default APIKeyNew;

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

@@ -0,0 +1,12 @@
+export type APIKeysProps = {
+    /** Route to navigate when clicking "New API Key" button. Defaults to '/new/api-key'. */
+    newAPIKeyRoute?: string;
+    /** Base route for the API keys list (used for edit navigation). Defaults to current relative path. */
+    apiKeysListRoute?: string;
+    /** Whether to display view titles/headings. Defaults to true. */
+    showTitle?: boolean;
+    /** Whether to render the "New API Key" button in this component header. Defaults to true. */
+    showNewButton?: boolean;
+};
+export declare const APIKeys: ({ newAPIKeyRoute, apiKeysListRoute, showTitle, showNewButton, }?: APIKeysProps) => import("react/jsx-runtime").JSX.Element;
+export default APIKeys;

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

@@ -0,0 +1,128 @@
+import { jsx as _jsx, Fragment as _Fragment, 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, useRef } from 'react';
+import { PageLayout, Button, IconButton, Spinner, TextInput, Text, Label, RelativeTime, } from '@primer/react';
+import { Blankslate, Dialog, PageHeader, Table, DataTable, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { EditIcon } from '@datalayer/icons-react';
+import { TrashIcon } from '@primer/octicons-react';
+import { useCache, useNavigate, useToast } from '../../hooks/index.js';
+const APIKeysTable = ({ apiKeysListRoute, showTitle = true, }) => {
+    const { useTokens: useAPIKeys, useDeleteToken: useDeleteAPIKey } = useCache();
+    const { enqueueToast } = useToast();
+    const getAPIKeysQuery = useAPIKeys();
+    const deleteAPIKeyMutation = useDeleteAPIKey();
+    const navigate = useNavigate();
+    const [apiKeys, setApiKeys] = useState([]);
+    const [deletingAPIKey, setDeletingAPIKey] = useState(null);
+    const [deleteNameConfirm, setDeleteNameConfirm] = useState('');
+    const returnFocusRef = useRef(null);
+    const showInitialSpinner = apiKeys.length === 0
+        && (getAPIKeysQuery.isLoading
+            || getAPIKeysQuery.isFetching
+            || !Array.isArray(getAPIKeysQuery.data));
+    useEffect(() => {
+        if (getAPIKeysQuery.data) {
+            const normalized = getAPIKeysQuery.data.filter((apiKey) => Boolean(apiKey));
+            setApiKeys(normalized);
+        }
+    }, [getAPIKeysQuery.data]);
+    const confirmDeleteAPIKey = () => {
+        if (!deletingAPIKey)
+            return;
+        if (deleteNameConfirm.trim() !== deletingAPIKey.name) {
+            enqueueToast('Please type the API key name exactly to confirm deletion.', {
+                variant: 'error',
+            });
+            return;
+        }
+        deleteAPIKeyMutation.mutate(deletingAPIKey.id, {
+            onSuccess: (resp) => {
+                if (resp?.success) {
+                    enqueueToast(`API key "${deletingAPIKey.name}" deleted.`, {
+                        variant: 'success',
+                    });
+                }
+                else {
+                    enqueueToast(resp?.message || 'Failed to delete API key.', {
+                        variant: 'error',
+                    });
+                }
+            },
+            onError: () => {
+                enqueueToast('Failed to delete API key.', { variant: 'error' });
+            },
+            onSettled: () => {
+                setDeletingAPIKey(null);
+                setDeleteNameConfirm('');
+            },
+        });
+    };
+    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: [
+                            {
+                                header: 'Type',
+                                field: 'variant',
+                                renderCell: apiKey => _jsx(Label, { children: apiKey.variant }),
+                            },
+                            {
+                                header: 'Name',
+                                field: 'name',
+                                rowHeader: true,
+                            },
+                            {
+                                header: 'Description',
+                                field: 'description',
+                            },
+                            {
+                                header: 'Expiration date',
+                                field: 'expirationDate',
+                                renderCell: apiKey => (_jsx(RelativeTime, { date: new Date(apiKey.expirationDate) })),
+                            },
+                            {
+                                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: () => {
+                                                setDeletingAPIKey(apiKey);
+                                                setDeleteNameConfirm('');
+                                            } })] })),
+                            },
+                        ] })] }), deletingAPIKey && (_jsxs(Dialog, { title: "Delete API key", onClose: () => {
+                    setDeletingAPIKey(null);
+                    setDeleteNameConfirm('');
+                }, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Cancel',
+                        onClick: () => {
+                            setDeletingAPIKey(null);
+                            setDeleteNameConfirm('');
+                        },
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Delete',
+                        disabled: deleteNameConfirm.trim() !== deletingAPIKey.name,
+                        onClick: event => {
+                            if (!event.defaultPrevented) {
+                                event.preventDefault();
+                                confirmDeleteAPIKey();
+                            }
+                        },
+                    },
+                ], 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 APIKeys = ({ newAPIKeyRoute = '/new/api-key', apiKeysListRoute, showTitle = true, showNewButton = true, } = {}) => {
+    const navigate = useNavigate();
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [showTitle || showNewButton ? (_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [showTitle && (_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "API Keys" }) })), showNewButton && (_jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newAPIKeyRoute, e), children: "New API Key" }) }))] }) })) : null, _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(APIKeysTable, { apiKeysListRoute: apiKeysListRoute, showTitle: showTitle }) }) })] }));
+};
+export default APIKeys;

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

@@ -0,0 +1,2 @@
+export declare const APIKeysStandalone: () => import("react/jsx-runtime").JSX.Element;
+export default APIKeysStandalone;

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

@@ -0,0 +1,117 @@
+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, useRef } from 'react';
+import { PageLayout, Button, IconButton, TextInput, Text, Label, RelativeTime, } from '@primer/react';
+import { Blankslate, Dialog, PageHeader, Table, DataTable, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { EditIcon } from '@datalayer/icons-react';
+import { TrashIcon } from '@primer/octicons-react';
+import { useCache, useNavigate, useToast } from '../../hooks/index.js';
+const APIKeysTable = () => {
+    const { useTokens: useAPIKeys, useDeleteToken: useDeleteAPIKey } = useCache();
+    const { enqueueToast } = useToast();
+    const getAPIKeysQuery = useAPIKeys();
+    const deleteAPIKeyMutation = useDeleteAPIKey();
+    const navigate = useNavigate();
+    const [apiKeys, setApiKeys] = useState([]);
+    const [deletingAPIKey, setDeletingAPIKey] = useState(null);
+    const [deleteNameConfirm, setDeleteNameConfirm] = useState('');
+    const returnFocusRef = useRef(null);
+    useEffect(() => {
+        if (getAPIKeysQuery.data) {
+            const normalized = getAPIKeysQuery.data.filter((apiKey) => Boolean(apiKey));
+            setApiKeys(normalized);
+        }
+    }, [getAPIKeysQuery.data]);
+    const confirmDeleteAPIKey = () => {
+        if (!deletingAPIKey)
+            return;
+        if (deleteNameConfirm.trim() !== deletingAPIKey.name) {
+            enqueueToast('Please type the API key name exactly to confirm deletion.', {
+                variant: 'error',
+            });
+            return;
+        }
+        deleteAPIKeyMutation.mutate(deletingAPIKey.id, {
+            onSuccess: (resp) => {
+                if (resp?.success) {
+                    enqueueToast(`API key "${deletingAPIKey.name}" deleted.`, {
+                        variant: 'success',
+                    });
+                }
+                else {
+                    enqueueToast(resp?.message || 'Failed to delete API key.', {
+                        variant: 'error',
+                    });
+                }
+            },
+            onError: () => {
+                enqueueToast('Failed to delete API key.', { variant: 'error' });
+            },
+            onSettled: () => {
+                setDeletingAPIKey(null);
+                setDeleteNameConfirm('');
+            },
+        });
+    };
+    return apiKeys.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_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: [_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',
+                                renderCell: apiKey => _jsx(Label, { children: apiKey.variant }),
+                            },
+                            {
+                                header: 'Name',
+                                field: 'name',
+                                rowHeader: true,
+                            },
+                            {
+                                header: 'Description',
+                                field: 'description',
+                            },
+                            {
+                                header: 'Expiration date',
+                                field: 'expirationDate',
+                                renderCell: apiKey => (_jsx(RelativeTime, { date: new Date(apiKey.expirationDate) })),
+                            },
+                            {
+                                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(`${apiKey.id}`, e) }), _jsx(IconButton, { ref: returnFocusRef, icon: TrashIcon, "aria-label": "Delete", size: "small", variant: "invisible", sx: { color: 'danger.fg' }, onClick: () => {
+                                                setDeletingAPIKey(apiKey);
+                                                setDeleteNameConfirm('');
+                                            } })] })),
+                            },
+                        ] })] }), deletingAPIKey && (_jsxs(Dialog, { title: "Delete API key", onClose: () => {
+                    setDeletingAPIKey(null);
+                    setDeleteNameConfirm('');
+                }, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Cancel',
+                        onClick: () => {
+                            setDeletingAPIKey(null);
+                            setDeleteNameConfirm('');
+                        },
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Delete',
+                        disabled: deleteNameConfirm.trim() !== deletingAPIKey.name,
+                        onClick: event => {
+                            if (!event.defaultPrevented) {
+                                event.preventDefault();
+                                confirmDeleteAPIKey();
+                            }
+                        },
+                    },
+                ], 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 = () => {
+    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, {}) }) })] }));
+};
+export default APIKeysStandalone;

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

@@ -0,0 +1,3 @@
+export * from './APIKeyEdit';
+export * from './APIKeyNew';
+export * from './APIKeys';

package/lib/{mocks/jupyter → views/api-keys}/index.js

@@ -1,5 +1,7 @@
-export {};
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+export * from './APIKeyEdit.js';
+export * from './APIKeyNew.js';
+export * from './APIKeys.js';

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

@@ -2,7 +2,7 @@ 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';
+    principalKind?: 'personal' | 'organization' | 'team';
 };
 export declare const DatasourceDetail: ({ principalUid, principalKind, }?: DatasourceDetailProps) => import("react/jsx-runtime").JSX.Element;
 export default DatasourceDetail;

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

@@ -7,7 +7,7 @@ export type DatasourceNewProps = {
     /** Optional principal uid used to scope datasource creation. */
     principalUid?: string;
     /** Optional principal kind used to scope datasource creation. */
-    principalKind?: 'user' | 'organization' | 'team';
+    principalKind?: 'personal' | 'organization' | 'team';
     /** Optional contextual principal summary rendered below the page intro. */
     accountPrincipal?: ReactNode;
 };

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

@@ -6,7 +6,7 @@ export type DatasourcesProps = {
     /** Optional principal uid used to scope datasource reads. */
     principalUid?: string;
     /** Optional principal kind used to scope datasource reads. */
-    principalKind?: 'user' | 'organization' | 'team';
+    principalKind?: 'personal' | 'organization' | 'team';
 };
 export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, principalUid, principalKind, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
 export default Datasources;

package/lib/views/datasources/Datasources.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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 { PageLayout, Button, IconButton, Text, Label, Heading, } from '@primer/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';
@@ -15,12 +15,21 @@ const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }
     const datasourcesQuery = useDatasources({ principalUid, principalKind });
     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 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
+    return datasources.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: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
                 // @ts-ignore
                 {
                     header: 'Type',

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

@@ -5,7 +5,7 @@
  * `{ handle, password }`, then calls `onSignIn(token, handle)` on
  * success so the caller can persist credentials as needed.
  *
- * @module views/signin
+ * @module views/iam
  */
 import React from 'react';
 export interface SignInSimpleProps {
@@ -25,19 +25,55 @@ export interface SignInSimpleProps {
      * `{ success: boolean; token?: string; message?: string }`.
      */
     loginUrl?: string;
+    /**
+     * Optional product/app name shown as heading.
+     */
+    name?: string;
     /**
      * Optional heading text.  Defaults to `"Datalayer OTEL"`.
+     * @deprecated Use `name`.
      */
     title?: string;
     /**
      * Optional subtitle / description.
      */
     description?: string;
+    /**
+     * Optional icon element rendered next to the heading.
+     */
+    icon?: React.ReactNode;
     /**
      * Leading icon element rendered next to the title.
      * Defaults to `<TelescopeIcon size={24} />`.
+     * @deprecated Use `icon`.
      */
     leadingIcon?: React.ReactNode;
+    /**
+     * Show GitHub OAuth sign-in button.
+     */
+    github?: boolean;
+    /**
+     * Show Google OAuth sign-in button.
+     */
+    google?: boolean;
+    /**
+     * Show LinkedIn OAuth sign-in button.
+     */
+    linkedin?: boolean;
+    /**
+     * Show API key sign-in button.
+     */
+    apiKey?: boolean;
+    /**
+     * Show sign up button.
+     */
+    signUp?: boolean;
+    /**
+     * Optional target route to navigate to after social sign-in callback.
+     * - `undefined` keeps current behavior (use current route when not `/`).
+     * - `null`/empty disables forwarding any callback navigation target.
+     */
+    socialSignInNavigationTarget?: string | null;
 }
 export declare const SignInSimple: React.FC<SignInSimpleProps>;
 export default SignInSimple;