@datalayer/core 1.0.20 → 1.0.22

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;

package/lib/views/datasources/Datasources.js

@@ -4,14 +4,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState, useEffect } from 'react';
-import { PageLayout, Button, IconButton, Text, Label } from '@primer/react';
-import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experimental';
+import { PageLayout, Button, IconButton, 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, }) => {
+const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }) => {
     const { useDatasources } = useCache();
-    const datasourcesQuery = useDatasources();
+    const datasourcesQuery = useDatasources({ principalUid, principalKind });
     const navigate = useNavigate();
     const [datasources, setDatasources] = useState([]);
     useEffect(() => {
@@ -19,33 +20,40 @@ const DatasourcesTable = ({ datasourcesListRoute, }) => {
             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." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "datasources", children: "Datasources" }), _jsx(Table.Subtitle, { as: "p", id: "datasources-subtitle", children: "Your datasources." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
-                    // @ts-ignore
-                    {
-                        header: 'Type',
-                        field: 'variant',
-                        renderCell: datasource => _jsx(Label, { children: datasource.variant }),
-                    },
-                    {
-                        header: 'Name',
-                        field: 'name',
-                        rowHeader: true,
-                    },
-                    {
-                        header: 'Description',
-                        field: 'description',
-                    },
-                    {
-                        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) })),
-                    },
-                ] })] }));
+    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: [
+                // @ts-ignore
+                {
+                    header: 'Type',
+                    field: 'variant',
+                    renderCell: datasource => _jsx(Label, { children: datasource.variant }),
+                },
+                {
+                    header: 'Name',
+                    field: 'name',
+                    rowHeader: true,
+                },
+                {
+                    header: 'Description',
+                    field: 'description',
+                },
+                {
+                    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) })),
+                },
+            ] }) }));
 };
-export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, } = {}) => {
+export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, principalUid, principalKind, } = {}) => {
     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: "Datasources" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute }) }) })] }));
+    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 })] }) }) }));
 };
 export default Datasources;

package/lib/views/iam-tokens/IAMTokenNew.d.ts

@@ -1,6 +1,8 @@
 export type IAMTokenNewProps = {
     /** Route to navigate when clicking "List my Tokens". Defaults to '/settings/iam/tokens'. */
     tokensListRoute?: string;
+    /** Whether to render the "New API Key" title header in create mode. Defaults to true. */
+    showTitle?: boolean;
 };
-export declare const IAMTokenNew: ({ tokensListRoute, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokenNew: ({ tokensListRoute, showTitle, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenNew;

package/lib/views/iam-tokens/IAMTokenNew.js

@@ -10,7 +10,7 @@ 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 IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
+export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', showTitle = true, } = {}) => {
     const runStore = useRunStore();
     const { useCreateToken } = useCache();
     const createTokenMutation = useCreateToken();
@@ -108,7 +108,7 @@ export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {})
                                                 variant: 'success',
                                             });
                                         }
-                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my API Keys" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New API Key" }) }) }), _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: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token 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 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 ||
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, 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: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token 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 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();

package/lib/views/iam-tokens/IAMTokens.d.ts

@@ -5,6 +5,8 @@ export type IAMTokensProps = {
     tokensListRoute?: 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 IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, showNewButton, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokens;

package/lib/views/iam-tokens/IAMTokens.js

@@ -80,8 +80,8 @@ const TokensTable = ({ tokensListRoute, showTitle = true, }) => {
                         setDeletingToken(null);
                 }, confirmButtonContent: "Delete", confirmButtonType: "danger", children: ["Are you sure you want to delete the token", ' ', _jsx("strong", { children: deletingToken.name }), "? This action cannot be undone."] }))] }));
 };
-export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, showTitle = true, } = {}) => {
+export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, showTitle = true, showNewButton = true, } = {}) => {
     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: [showTitle && (_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(newTokenRoute, e), children: "New API Key" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute, showTitle: showTitle }) }) })] }));
+    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(newTokenRoute, e), children: "New API Key" }) }))] }) })) : null, _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute, showTitle: showTitle }) }) })] }));
 };
 export default IAMTokens;

package/lib/views/otel/OtelHeader.d.ts

@@ -29,5 +29,10 @@ export interface OtelHeaderProps {
      * where data is generated by agents, not manually).
      */
     showGenerateButtons?: boolean;
+    /**
+     * Whether to show account controls (token badge + sign out).
+     * Defaults to `true`.
+     */
+    showAccountControls?: boolean;
 }
 export declare const OtelHeader: React.FC<OtelHeaderProps>;

package/lib/views/otel/OtelHeader.js

@@ -14,7 +14,7 @@ import { useState, useCallback, useRef } from 'react';
 import { Box, Text, Button, Dialog } from '@primer/react';
 import { TelescopeIcon, SignOutIcon } from '@primer/octicons-react';
 import { UserBadge } from '../profile/index.js';
-export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, }) => {
+export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, showAccountControls = true, }) => {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogTitle, setDialogTitle] = useState('');
     const [dialogRequest, setDialogRequest] = useState('');
@@ -33,7 +33,7 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
             onNavigate(signalMap[kind]);
         }
         setGenerating(true);
-        const url = `${baseUrl}/api/generate/${kind}?count=${count}`;
+        const url = `${baseUrl}/api/otel/v1/generate/${kind}?count=${count}`;
         setDialogRequest(`POST ${url}`);
         try {
             const headers = {};
@@ -70,7 +70,7 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
                     flexShrink: 0,
                     // Allow overflow visible so the JWT popover can extend below the header.
                     overflow: 'visible',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, token && _jsx(UserBadge, { token: token }), onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, showAccountControls && token && _jsx(UserBadge, { token: token }), showAccountControls && onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
                     {
                         content: 'Close',
                         onClick: () => setDialogOpen(false),

package/lib/views/profile/UserBadge.d.ts

@@ -27,10 +27,15 @@ export interface UserBadgeProps {
      * Threshold (in milliseconds) below which the expiration timestamp is
      * rendered in ``attention.fg`` (yellow) to warn that the token is about
      * to expire.  Tokens already past ``exp`` render in ``danger.fg`` (red);
-     * tokens further out than this threshold render in ``success.fg``
-     * (green).  Defaults to ``3_600_000`` (1 hour).
+     * tokens further out than this threshold render in ``success.fg`` (green).
+     * Defaults to ``10_800_000`` (3 hours).
      */
     expirationWarningMs?: number;
+    /**
+     * Optional callback fired when the claims popover is open and the token is
+     * already expired.
+     */
+    onTokenExpired?: () => void;
 }
 export declare const UserBadge: React.FC<UserBadgeProps>;
 export default UserBadge;

package/lib/views/profile/UserBadge.js

@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module views/profile
  */
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { Box, Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt.js';
 import { getRelativeTime } from '../../utils/Date.js';
 // ── Component ─────────────────────────────────────────────────────
-export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, expirationWarningMs = 60 * 60 * 1000, }) => {
+export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, expirationWarningMs = 3 * 60 * 60 * 1000, onTokenExpired, }) => {
     const [open, setOpen] = useState(false);
     const [expanded, setExpanded] = useState(false);
     const closeTimer = useRef(null);
@@ -52,6 +52,15 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
         : expiringSoon
             ? 'attention.fg'
             : 'fg.muted';
+    const expiredNotifiedForTokenRef = useRef(null);
+    useEffect(() => {
+        if (!onTokenExpired || !open || !expired)
+            return;
+        if (expiredNotifiedForTokenRef.current === token)
+            return;
+        expiredNotifiedForTokenRef.current = token;
+        onTokenExpired();
+    }, [expired, onTokenExpired, open, token]);
     return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
                     fontSize: 1,
                     color: triggerColor,

package/lib/views/secrets/Secrets.js

@@ -19,27 +19,27 @@ const SecretsTable = () => {
             setSecrets(secretsQuery.data || []);
         }
     }, [secretsQuery.data]);
-    return secrets.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Secrets" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Secrets found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "secrets", children: "Secrets" }), _jsx(DataTable, { "aria-labelledby": "secrets", "aria-describedby": "secrets-subtitle", data: secrets, columns: [
-                    {
-                        header: 'Type',
-                        field: 'variant',
-                        renderCell: secret => _jsx(Label, { children: secret.variant }),
-                    },
-                    {
-                        header: 'Name',
-                        field: 'name',
-                        rowHeader: true,
-                    },
-                    {
-                        header: 'Description',
-                        field: 'description',
-                    },
-                    {
-                        header: '',
-                        field: 'id',
-                        renderCell: secret => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${secret.id}`, e) })),
-                    },
-                ] })] }));
+    return secrets.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Secrets" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Secrets found." }) })] })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "secrets", "aria-describedby": "secrets-subtitle", data: secrets, columns: [
+                {
+                    header: 'Type',
+                    field: 'variant',
+                    renderCell: secret => _jsx(Label, { children: secret.variant }),
+                },
+                {
+                    header: 'Name',
+                    field: 'name',
+                    rowHeader: true,
+                },
+                {
+                    header: 'Description',
+                    field: 'description',
+                },
+                {
+                    header: '',
+                    field: 'id',
+                    renderCell: secret => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${secret.id}`, e) })),
+                },
+            ] }) }));
 };
 export const Secrets = () => {
     const navigate = useNavigate();