@datalayer/core 1.0.23 → 1.0.25

package/lib/views/{iam-tokens/IAMTokenEdit.js → api-keys/APIKeyEdit.js}

@@ -10,20 +10,20 @@ import { Box } from '@datalayer/primer-addons';
 import { BoringAvatar } from '../../components/avatars/index.js';
 import { useCache, useNavigate, useToast } from '../../hooks/index.js';
 import { useRunStore } from '../../state/index.js';
-export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
-    const { tokenId } = useParams();
+export const APIKeyEdit = ({ apiKeysListRoute = '/settings/iam/api-keys', showTitle = true, } = {}) => {
+    const { tokenId: apiKeyId } = useParams();
     const runStore = useRunStore();
     const navigate = useNavigate();
     const { enqueueToast } = useToast();
-    const { useUpdateToken, useToken, useDeleteToken } = useCache();
-    const getTokenQuery = useToken(tokenId);
-    const updateTokenMutation = useUpdateToken();
-    const deleteTokenMutation = useDeleteToken();
-    const [token, setToken] = useState();
+    const { useUpdateToken: useUpdateAPIKey, useToken: useAPIKey, useDeleteToken: useDeleteAPIKey, } = useCache();
+    const getAPIKeyQuery = useAPIKey(apiKeyId);
+    const updateAPIKeyMutation = useUpdateAPIKey();
+    const deleteAPIKeyMutation = useDeleteAPIKey();
+    const [apiKey, setAPIKey] = useState();
     const [formValues, setFormValues] = useState({
-        name: token?.name,
+        name: apiKey?.name,
         nameConfirm: '',
-        description: token?.description,
+        description: apiKey?.description,
     });
     const [validationResult, setValidationResult] = useState({
         name: undefined,
@@ -31,12 +31,12 @@ export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {})
         description: undefined,
     });
     useEffect(() => {
-        if (getTokenQuery.data) {
-            const token = getTokenQuery.data;
-            setToken(token);
-            setFormValues({ ...token, nameConfirm: '' });
+        if (getAPIKeyQuery.data) {
+            const key = getAPIKeyQuery.data;
+            setAPIKey(key);
+            setFormValues({ ...key, nameConfirm: '' });
         }
-    }, [getTokenQuery.data]);
+    }, [getAPIKeyQuery.data]);
     const nameNameChange = (event) => {
         setFormValues(prevFormValues => ({
             ...prevFormValues,
@@ -63,7 +63,7 @@ export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {})
                 : formValues.name.length > 2
                     ? true
                     : false,
-            nameConfirm: formValues.nameConfirm === token?.name ? true : false,
+            nameConfirm: formValues.nameConfirm === apiKey?.name ? true : false,
             description: formValues.description === undefined
                 ? undefined
                 : formValues.description.length > 2
@@ -71,20 +71,20 @@ export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {})
                     : false,
         });
     }, [formValues]);
-    const nameSubmit = async () => {
+    const submitAPIKey = async () => {
         runStore.layout().showBackdrop();
-        const updatedToken = {
-            ...token,
+        const updatedAPIKey = {
+            ...apiKey,
             name: formValues.name,
             description: formValues.description,
         };
-        updateTokenMutation.mutate(updatedToken, {
+        updateAPIKeyMutation.mutate(updatedAPIKey, {
             onSuccess: (resp) => {
                 if (resp.success) {
-                    enqueueToast('The token is successfully updated.', {
+                    enqueueToast('The API key was updated successfully.', {
                         variant: 'success',
                     });
-                    setToken(updatedToken);
+                    setAPIKey(updatedAPIKey);
                 }
             },
             onSettled: () => {
@@ -92,31 +92,31 @@ export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {})
             },
         });
     };
-    const handleDelete = async () => {
-        runStore.layout().showBackdrop('Deleting the token...');
-        deleteTokenMutation.mutate(token.id, {
+    const deleteAPIKey = async () => {
+        runStore.layout().showBackdrop('Deleting the API key...');
+        deleteAPIKeyMutation.mutate(apiKey.id, {
             onSuccess: (resp) => {
                 if (resp.success) {
-                    enqueueToast('The token is successfully deleted.', {
+                    enqueueToast('The API key was deleted successfully.', {
                         variant: 'success',
                     });
-                    navigate(tokensListRoute);
+                    navigate(apiKeysListRoute);
                 }
                 else {
-                    enqueueToast(resp.message || 'Failed to delete token.', {
+                    enqueueToast(resp.message || 'Failed to delete API key.', {
                         variant: 'error',
                     });
                 }
             },
             onError: () => {
-                enqueueToast('Failed to delete token.', { variant: 'error' });
+                enqueueToast('Failed to delete API key.', { variant: 'error' });
             },
             onSettled: () => {
                 runStore.layout().hideBackdrop();
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "API Key" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: token?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: token?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: token?.variant }) })] }), _jsxs(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: "Expiration date" }), _jsx(TextInput, { block: true, value: token?.expirationDate.toLocaleDateString(), onChange: nameNameChange, disabled: true })] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: nameSubmit, children: "Update token" })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
+    return (_jsxs(_Fragment, { children: [showTitle && (_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "API Key" }) })), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: apiKey?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: apiKey?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: apiKey?.variant }) })] }), _jsxs(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: "Expiration date" }), _jsx(TextInput, { block: true, value: apiKey?.expirationDate.toLocaleDateString(), onChange: nameNameChange, disabled: true })] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: submitAPIKey, children: "Update API key" })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
                                             fontSize: 4,
                                             fontWeight: 'normal',
                                             color: 'danger.fg',
@@ -130,6 +130,6 @@ export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {})
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             gap: 3,
-                                        }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the token name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: nameConfirmChange }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: handleDelete, children: "Delete token" })] })] })] })] })] }));
+                                        }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the API key name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: nameConfirmChange }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: deleteAPIKey, children: "Delete API key" })] })] })] })] })] }));
 };
-export default IAMTokenEdit;
+export default APIKeyEdit;

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

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

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,119 @@
+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 = ({ 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);
+    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: [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/views/api-keys/index.js

@@ -0,0 +1,7 @@
+/*
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "type": "module",
   "workspaces": [
     ".",

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

@@ -1,6 +0,0 @@
-export type IAMTokenEditProps = {
-    /** Route to navigate after delete. Defaults to '/settings/iam/tokens'. */
-    tokensListRoute?: string;
-};
-export declare const IAMTokenEdit: ({ tokensListRoute, }?: IAMTokenEditProps) => import("react/jsx-runtime").JSX.Element;
-export default IAMTokenEdit;

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

@@ -1,8 +0,0 @@
-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, showTitle, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
-export default IAMTokenNew;