@datalayer/core 0.0.19 → 0.0.21

package/lib/state/substates/LayoutState.d.ts

@@ -6,12 +6,12 @@ export type BackdropDisplay = {
     open: boolean;
     message?: string | void;
 };
-type BannerDisplay = {
+export type BannerDisplay = {
     message: string;
     variant: BannerDisplayVariant;
     timestamp?: Date;
 };
-type PortalDisplay = {
+export type PortalDisplay = {
     portal: ReactPortal;
     pinned: boolean;
 };

package/lib/state/substates/NbformatState.d.ts

@@ -1,4 +1,4 @@
-type SaveRequest = {
+export type SaveRequest = {
     counter: number;
 };
 export type INbformatState = {

package/lib/state/substates/index.d.ts

@@ -1,4 +1,3 @@
-export * from './AIAgentState';
 export * from './CellState';
 export * from './CoreState';
 export * from './DatasourceState';

package/lib/state/substates/index.js

@@ -2,7 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './AIAgentState';
 export * from './CellState';
 export * from './CoreState';
 export * from './DatasourceState';

package/lib/utils/File.d.ts

@@ -2,6 +2,6 @@
  * creates name of file.
  *
  * @param {string} extension
- * @param {string[]} parts of file name
+ * @param {string[]} names parts of file name
  */
 export declare const createFileName: (extension?: string, ...names: any[]) => string;

package/lib/utils/File.js

@@ -6,7 +6,7 @@
  * creates name of file.
  *
  * @param {string} extension
- * @param {string[]} parts of file name
+ * @param {string[]} names parts of file name
  */
 export const createFileName = (extension = '', ...names) => {
     if (!extension) {

package/lib/utils/Notebook.d.ts

@@ -2,9 +2,11 @@ import { JupyterLab } from '@jupyterlab/application';
 /**
  * Create a notebook
  *
- * @param app JupyterLab application
- * @param name Notebook name
- * @param url Notebook content URL
+ * @param params Configuration object
+ * @param params.app JupyterLab application
+ * @param params.name Notebook name
+ * @param params.url Notebook content URL
+ * @param params.options Additional options for notebook creation
  */
 export declare const createNotebook: ({ app, name, url, options, }: {
     app: JupyterLab;

package/lib/utils/Notebook.js

@@ -5,9 +5,11 @@
 /**
  * Create a notebook
  *
- * @param app JupyterLab application
- * @param name Notebook name
- * @param url Notebook content URL
+ * @param params Configuration object
+ * @param params.app JupyterLab application
+ * @param params.name Notebook name
+ * @param params.url Notebook content URL
+ * @param params.options Additional options for notebook creation
  */
 export const createNotebook = async ({ app, name, url, options, }) => {
     const notebook = await app.commands.execute('notebook:create-new', options);

package/lib/utils/cli/index.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 /**
  * CLI utilities
  */

package/lib/utils/cli/query.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { QueryClient } from '@tanstack/react-query';
 /**
  * Shared QueryClient instance for TanStack Query

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

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

package/lib/views/datasources/DatasourceDetail.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { PageHeader, Heading, Text, Button, TextInput, FormControl, Textarea, Label, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { EyeIcon, EyeClosedIcon } from '@primer/octicons-react';
+import { BoringAvatar } from '../../components/avatars';
+import { useCache, useToast } from '../../hooks';
+import { useRunStore } from '../../state';
+export const DatasourceDetail = () => {
+    const { datasourceId } = useParams();
+    const runStore = useRunStore();
+    const { enqueueToast } = useToast();
+    const { useUpdateDatasource, useDatasource } = useCache();
+    const updateDatasourceMutation = useUpdateDatasource();
+    const datasourceQuery = useDatasource(datasourceId);
+    const [datasource, setDatasource] = useState();
+    const [formValues, setFormValues] = useState({
+        name: datasource?.name,
+        description: datasource?.description,
+    });
+    const [validationResult, setValidationResult] = useState({
+        name: undefined,
+        description: undefined,
+    });
+    const [passwordVisibility, setPasswordVisibility] = useState(false);
+    useEffect(() => {
+        if (datasourceQuery.data) {
+            const datasource = datasourceQuery.data;
+            setDatasource(datasource);
+            setFormValues({ ...datasource });
+        }
+    }, [datasourceQuery.data]);
+    const nameNameChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            name: event.target.value,
+        }));
+    };
+    const nameDescriptionChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            description: event.target.value,
+        }));
+    };
+    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,
+        });
+    }, [formValues]);
+    const nameSubmit = async () => {
+        runStore.layout().showBackdrop();
+        datasource.name = formValues.name;
+        datasource.description = formValues.description;
+        updateDatasourceMutation.mutate(datasource, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    enqueueToast('The datasource is successfully updated.', {
+                        variant: 'success',
+                    });
+                    setDatasource(datasource);
+                }
+            },
+            onSettled: () => {
+                runStore.layout().hideBackdrop();
+            },
+        });
+    };
+    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" })] }) })] })] }));
+};
+export default DatasourceDetail;

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

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

package/lib/views/datasources/DatasourceNew.js

@@ -0,0 +1,118 @@
+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, Text, Textarea, Select, Flash, Link, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useCache, useNavigate, useToast } from '../../hooks';
+import { useRunStore } from '../../state';
+export const DatasourceNew = () => {
+    const runStore = useRunStore();
+    const { useCreateDatasource } = useCache();
+    const createDatasourceMutation = useCreateDatasource();
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const [formValues, setFormValues] = useState({
+        variant: 'athena',
+        database: undefined,
+        outputBucket: undefined,
+        name: undefined,
+        description: undefined,
+    });
+    const [validationResult, setValidationResult] = useState({
+        variant: undefined,
+        database: undefined,
+        outputBucket: undefined,
+        name: undefined,
+        description: undefined,
+    });
+    const valueVariantChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            variant: event.target.value,
+        }));
+    };
+    const valueDatabaseChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            database: event.target.value,
+        }));
+    };
+    const valueOutputBucketChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            outputBucket: event.target.value,
+        }));
+    };
+    const valueNameChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            name: event.target.value,
+        }));
+    };
+    const valueDescriptionChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            description: event.target.value,
+        }));
+    };
+    useEffect(() => {
+        setValidationResult({
+            ...validationResult,
+            name: formValues.name === undefined
+                ? undefined
+                : formValues.name.length > 2
+                    ? true
+                    : false,
+            description: formValues.description === undefined
+                ? undefined
+                : formValues.description.length > 2
+                    ? true
+                    : false,
+            database: formValues.variant !== 'athena'
+                ? true
+                : formValues.database === undefined
+                    ? undefined
+                    : formValues.database.length > 0
+                        ? true
+                        : false,
+            outputBucket: formValues.variant !== 'athena'
+                ? true
+                : formValues.outputBucket === undefined
+                    ? undefined
+                    : formValues.outputBucket.length > 0
+                        ? true
+                        : false,
+        });
+    }, [formValues]);
+    const submitCreate = () => {
+        runStore.layout().showBackdrop('Creating an datasource...');
+        createDatasourceMutation.mutate({
+            name: formValues.name,
+            variant: formValues.variant,
+            database: formValues.database ?? '',
+            outputBucket: formValues.outputBucket ?? '',
+            description: formValues.description,
+        }, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    enqueueToast(resp.message, { variant: 'success' });
+                    navigate(`/settings/integrations/datasources`);
+                }
+            },
+            onSettled: () => {
+                runStore.layout().hideBackdrop();
+            },
+        });
+    };
+    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('/settings/iam/secrets', 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('/settings/iam/secrets', 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('/settings/iam/secrets', 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('/settings/iam/secrets', 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 ||
+                                    !validationResult.outputBucket ||
+                                    !validationResult.name ||
+                                    !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
+                                    e.preventDefault();
+                                    submitCreate();
+                                }, children: "Create a datasource" })] }) }) })] }));
+};
+export default DatasourceNew;

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

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

package/lib/views/datasources/Datasources.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { PageLayout, Button, IconButton, Text, Label } from '@primer/react';
+import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { EditIcon } from '@datalayer/icons-react';
+import { useCache, useNavigate } from '../../hooks';
+const DatasourcesTable = () => {
+    const { useDatasources } = useCache();
+    const datasourcesQuery = useDatasources();
+    const navigate = useNavigate();
+    const [datasources, setDatasources] = useState([]);
+    useEffect(() => {
+        if (datasourcesQuery.data) {
+            setDatasources(datasourcesQuery.data || []);
+        }
+    }, [datasourcesQuery.data]);
+    return datasources.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) : (_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(`${datasource.id}`, e) })),
+                    },
+                ] })] }));
+};
+export const Datasources = () => {
+    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('/new/datasource', e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, {}) }) })] }));
+};
+export default Datasources;

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

@@ -0,0 +1,3 @@
+export * from './DatasourceDetail';
+export * from './DatasourceNew';
+export * from './Datasources';

package/lib/views/datasources/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './DatasourceDetail';
+export * from './DatasourceNew';
+export * from './Datasources';

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

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

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { PageHeader, Heading, Text, Button, TextInput, FormControl, Textarea, Label, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { BoringAvatar } from '../../components/avatars';
+import { useCache, useToast } from '../../hooks';
+import { useRunStore } from '../../state';
+export const IAMTokenEdit = () => {
+    const { tokenId } = useParams();
+    const runStore = useRunStore();
+    const { enqueueToast } = useToast();
+    const { useUpdateToken, useToken } = useCache();
+    const getTokenQuery = useToken(tokenId);
+    const updateTokenMutation = useUpdateToken();
+    const [token, setToken] = useState();
+    const [formValues, setFormValues] = useState({
+        name: token?.name,
+        description: token?.description,
+    });
+    const [validationResult, setValidationResult] = useState({
+        name: undefined,
+        description: undefined,
+    });
+    useEffect(() => {
+        if (getTokenQuery.data) {
+            const token = getTokenQuery.data;
+            setToken(token);
+            setFormValues({ ...token });
+        }
+    }, [getTokenQuery.data]);
+    const nameNameChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            name: event.target.value,
+        }));
+    };
+    const nameDescriptionChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            description: event.target.value,
+        }));
+    };
+    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,
+        });
+    }, [formValues]);
+    const nameSubmit = async () => {
+        runStore.layout().showBackdrop();
+        const updatedToken = {
+            ...token,
+            name: formValues.name,
+            description: formValues.description,
+        };
+        updateTokenMutation.mutate(updatedToken, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    enqueueToast('The token is successfully updated.', {
+                        variant: 'success',
+                    });
+                    setToken(updatedToken);
+                }
+            },
+            onSettled: () => {
+                runStore.layout().hideBackdrop();
+            },
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "IAM Token" }) }), _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 }) })] }), _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: "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" })] }) })] })] }));
+};
+export default IAMTokenEdit;

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

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

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

@@ -0,0 +1,118 @@
+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';
+import { useRunStore } from '../../state';
+export const IAMTokenNew = () => {
+    const runStore = useRunStore();
+    const { useCreateToken } = useCache();
+    const createTokenMutation = useCreateToken();
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const [today, _] = useState(new Date());
+    const [showToken, setShowToken] = useState(false);
+    const [token, setToken] = useState();
+    const [formValues, setFormValues] = useState({
+        variant: 'user_token',
+        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 valueSubmit = () => {
+        runStore.layout().showBackdrop('Creating an token...');
+        createTokenMutation.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' });
+                    setToken(resp.token);
+                    setShowToken(true);
+                }
+            },
+            onSettled: () => {
+                runStore.layout().hideBackdrop();
+            },
+        });
+    };
+    return (_jsx(Box, { children: showToken ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Your Token is created" }) }) }), _jsx(Box, { children: _jsx(Text, { children: "Take note of the Token value, you won't be able to see it after." }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Name: ", token?.name] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Description: ", token?.description] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Expiration date: ", token?.expirationDate.toISOString()] }) }), _jsxs(Box, { children: [_jsx(Text, { mb: 2, children: "Value: " }), _jsxs(Box, { display: "flex", sx: { alignItems: 'center', gap: 2 }, children: [_jsx(Text, { as: "code", sx: {
+                                        color: 'fg.onEmphasis',
+                                        bg: 'neutral.emphasis',
+                                        p: 2,
+                                        overflowWrap: 'anywhere',
+                                        flex: 1,
+                                    }, children: token?.value }), _jsx(IconButton, { "aria-label": "Copy token to clipboard", icon: CopyIcon, size: "small", onClick: () => {
+                                        if (token?.value) {
+                                            navigator.clipboard.writeText(token.value);
+                                            enqueueToast('Token copied to clipboard', {
+                                                variant: 'success',
+                                            });
+                                        }
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate('/settings/iam/tokens', e), children: "List my Tokens" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New IAM Token" }) }) }), _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();
+                                        valueSubmit();
+                                    }, children: "Create a token" })] }) }) })] })) }));
+};
+export default IAMTokenNew;

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

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