@datalayer/core 0.0.3 → 0.0.5

package/lib/components/runtimes/RuntimeLauncherDialog.js

@@ -5,19 +5,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIsMounted } from 'usehooks-ts';
-import { Button, FormControl, Select, Spinner, Text, TextInput, ToggleSwitch, Tooltip, IconButton } from '@primer/react';
+import { Button, FormControl, Select, Spinner, Text, TextInput, ToggleSwitch, Tooltip, IconButton, } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { USAGE_ROUTE } from '../../routes';
 import { useNavigate } from '../../hooks';
 import { NO_RUNTIME_AVAILABLE_LABEL } from '../../i18n';
-import { iamStore, useCoreStore, useIAMStore, useRuntimesStore } from '../../state';
+import { iamStore, useCoreStore, useIAMStore, useRuntimesStore, } from '../../state';
 import { createNotebook, sleep } from '../../utils';
 import { Markdown } from '../display';
 import { Timer } from '../progress';
 import { FlashClosable } from '../flashes';
-import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES } from './RuntimeReservationControl';
+import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES, } from './RuntimeReservationControl';
 /**
  * Initial time in milliseconds before retrying in case no kernels are available
  */
@@ -30,7 +30,7 @@ const NOT_AVAILABLE_RETRIES = 5;
  * Start Remote Runtime Dialog.
  */
 export function KernelLauncherDialog(props) {
-    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, startKernel = true } = props;
+    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, startKernel = true, } = props;
     const hasExample = startKernel === 'with-example';
     const user = iamStore.getState().user;
     const environments = manager.environments.get();
@@ -87,7 +87,8 @@ export function KernelLauncherDialog(props) {
                 location: 'remote',
                 displayName: runtimeName ?? spec?.title,
             };
-            const creditsLimit = Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) / creditsToMinutes;
+            const creditsLimit = Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) /
+                creditsToMinutes;
             desc.params = {};
             if (startKernel === 'defer') {
                 desc.params['creditsLimit'] = creditsLimit;
@@ -108,13 +109,11 @@ export function KernelLauncherDialog(props) {
                             type: 'notebook',
                             givenName: runtimeName,
                             creditsLimit: creditsLimit,
-                            capabilities: userStorage
-                                ? ['user_storage']
-                                : undefined,
-                            snapshot: kernelSnapshot?.id
+                            capabilities: userStorage ? ['user_storage'] : undefined,
+                            snapshot: kernelSnapshot?.id,
                         }, {
                             username: user?.handle,
-                            handleComms: true
+                            handleComms: true,
                         });
                         desc.kernelId = connection.id;
                         if (jupyterLabAdapter?.jupyterLab && hasExample && openExample) {
@@ -122,13 +121,13 @@ export function KernelLauncherDialog(props) {
                             if (example) {
                                 const options = {
                                     kernelId: connection.id,
-                                    kernelName: connection.name
+                                    kernelName: connection.name,
                                 };
                                 createNotebook({
                                     app: jupyterLabAdapter.jupyterLab,
                                     name: selection,
                                     url: example,
-                                    options
+                                    options,
                                 });
                             }
                         }
@@ -190,7 +189,7 @@ export function KernelLauncherDialog(props) {
         openExample,
         jupyterLabAdapter,
         timeLimit,
-        isMounted
+        isMounted,
     ]);
     const handleUserStorageChange = useCallback((e) => {
         e.preventDefault();
@@ -211,23 +210,24 @@ export function KernelLauncherDialog(props) {
             setHasCustomRuntimeName(true);
         }
     }, []);
-    return (_jsx(Dialog, { title: dialogTitle || 'Launch a new Runtime', onClose: () => { onSubmit(undefined); }, footerButtons: [
+    return (_jsx(Dialog, { title: dialogTitle || 'Launch a new Runtime', onClose: () => {
+            onSubmit(undefined);
+        }, footerButtons: [
             {
                 buttonType: 'default',
-                onClick: () => { onSubmit(undefined); },
+                onClick: () => {
+                    onSubmit(undefined);
+                },
                 content: 'Cancel',
-                disabled: waitingForRuntime
+                disabled: waitingForRuntime,
             },
             {
                 buttonType: 'primary',
                 onClick: handleSubmitKernel,
-                content: waitingForRuntime ?
-                    _jsx(Spinner, { size: "small" })
-                    :
-                        startKernel ?? true ? 'Launch' : 'Assign from the Environment',
+                content: waitingForRuntime ? (_jsx(Spinner, { size: "small" })) : (startKernel ?? true) ? ('Launch') : ('Assign from the Environment'),
                 disabled: waitingForRuntime || outOfCredits || timeLimit < Number.EPSILON,
-                autoFocus: true
-            }
+                autoFocus: true,
+            },
         ], children: _jsxs(Box, { as: "form", onKeyDown: event => {
                 if (event.defaultPrevented) {
                     return;
@@ -236,15 +236,11 @@ export function KernelLauncherDialog(props) {
                     event.preventDefault();
                     handleSubmitKernel();
                 }
-            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))) }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : (description) }) })] }), startKernel &&
-                    _jsx(RuntimeReservationControl, { addCredits: navigate ?
-                            () => { navigate(USAGE_ROUTE); }
-                            :
-                                undefined, disabled: outOfCredits, label: 'Time reservation', max: max, time: timeLimit, burningRate: burningRate, onTimeChange: setTimeLimit, error: outOfCredits ? 'You must add credits to your account.' : undefined }), !configuration.whiteLabel &&
-                    _jsxs(FormControl, { layout: "horizontal", children: [_jsxs(FormControl.Label, { children: ["User storage", _jsx(Tooltip, { text: 'The runtime will be slower to start.', direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { checked: userStorage, size: "small", onClick: handleUserStorageChange })] }), _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Runtime name" }), _jsx(TextInput, { name: "name", value: runtimeName, onChange: handleKernelNameChange, block: true })] }), hasExample && jupyterLabAdapter?.jupyterLab && !configuration.whiteLabel &&
-                    _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Open example notebook" }), _jsx(ToggleSwitch, { disabled: !environments.find(spec => spec.name === selection)?.example, checked: openExample, size: "small", onClick: handleSwitchClick })] }), error &&
-                    _jsx(FlashClosable, { variant: flashLevel, actions: navigate && upgradeSubscription && flashLevel === 'warning' ?
-                            _jsx(Button, { onClick: handleUpgrade, title: 'Upgrade your subscription.', children: "Upgrade" })
-                            :
-                                undefined, children: error })] }) }));
+            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))) }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : (description) }) })] }), startKernel && (_jsx(RuntimeReservationControl, { addCredits: navigate
+                        ? () => {
+                            navigate(USAGE_ROUTE);
+                        }
+                        : undefined, disabled: outOfCredits, label: 'Time reservation', max: max, time: timeLimit, burningRate: burningRate, onTimeChange: setTimeLimit, error: outOfCredits ? 'You must add credits to your account.' : undefined })), !configuration.whiteLabel && (_jsxs(FormControl, { layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "user-storage-label", children: ["User storage", _jsx(Tooltip, { text: 'The runtime will be slower to start.', direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { checked: userStorage, size: "small", onClick: handleUserStorageChange, "aria-labelledby": "user-storage-label" })] })), _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Runtime name" }), _jsx(TextInput, { name: "name", value: runtimeName, onChange: handleKernelNameChange, block: true })] }), hasExample &&
+                    jupyterLabAdapter?.jupyterLab &&
+                    !configuration.whiteLabel && (_jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { id: "open-example-label", children: "Open example notebook" }), _jsx(ToggleSwitch, { disabled: !environments.find(spec => spec.name === selection)?.example, checked: openExample, size: "small", onClick: handleSwitchClick, "aria-labelledby": "open-example-label" })] })), error && (_jsx(FlashClosable, { variant: flashLevel, actions: navigate && upgradeSubscription && flashLevel === 'warning' ? (_jsx(Button, { onClick: handleUpgrade, title: 'Upgrade your subscription.', children: "Upgrade" })) : undefined, children: error }))] }) }));
 }

package/lib/components/runtimes/RuntimePickerBase.js

@@ -6,9 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 //import { kernelIcon } from '@jupyterlab/ui-components';
-import { ActionList, ActionMenu, IconButton, Text, RadioGroup, Radio, FormControl, LabelGroup, Label } from '@primer/react';
+import { ActionList, ActionMenu, IconButton, Text, RadioGroup, Radio, FormControl, LabelGroup, Label, } from '@primer/react';
 import CloudUploadIcon from '@datalayer/icons-react/data1/CloudUploadIcon';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { CpuIcon } from '@primer/octicons-react';
 import { BrowserIcon, LaptopSimpleIcon } from '@datalayer/icons-react';
 import { CreditsIndicator } from '../../components/progress';
@@ -29,7 +29,7 @@ export function RuntimePickerBase(props) {
     // Trick because overflow is an unknown prop of ActionMenu.Overlay.
     const overlayProps = {
         maxHeight: 'large',
-        width: (variant === 'cell' ? 'small' : 'auto')
+        width: (variant === 'cell' ? 'small' : 'auto'),
     };
     /*
     // TODO this effect generates refresh of the react components which discards any change in the selection.
@@ -77,33 +77,44 @@ export function RuntimePickerBase(props) {
     // For cell using submenu instead of group would be nice unfortunately the feature
     // is not yet implemented in the component there has been a not-great demo story.
     // https://github.com/primer/react/pull/3585
-    return (_jsx(_Fragment, { children: display === 'menu' ?
-            /*
-             * Section for Menu display.
-             */
-            _jsxs(ActionMenu, { children: [variant === 'cell' ?
-                        _jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedKernelDescs === null, 
-                                //                icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
-                                icon: () => _jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) }), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })
-                        :
-                            _jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedKernelDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] }), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' &&
-                                    _jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => { setRuntimeDesc(undefined); }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? _jsx(LaptopSimpleIcon, {}) : preference.location === 'browser' ? _jsx(BrowserIcon, {}) : _jsx(CloudUploadIcon, {}) })), trans.__('Assign the Notebook Runtime')] }, 'null'), !!preActions && preActions, Object.entries(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
-                                            const annotation = runtimeDesc.podName ? ` - ${runtimeDesc.podName.split('-', 2).reverse()[0]}` : runtimeDesc.kernelId ? ` - ${runtimeDesc.kernelId}` : '';
-                                            const fullDisplayName = (runtimeDesc.displayName ?? '') + annotation;
-                                            const displayName = (runtimeDesc.displayName?.length ?? 0) > RUNTIME_DISPLAY_NAME_MAX_LENGTH ? runtimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…' : runtimeDesc.displayName ?? '';
-                                            return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (runtimeDesc.location === runtimeDesc?.location || (isRuntimeRemote(runtimeDesc.location) &&
-                                                    isRuntimeRemote(runtimeDesc?.location ?? 'local'))) && (runtimeDesc.kernelId ?? runtimeDesc.name) === (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => { setRuntimeDesc(runtimeDesc); }, children: [_jsx(ActionList.LeadingVisual, { children: runtimeDesc.location === 'local' ? _jsx(LaptopSimpleIcon, {}) : runtimeDesc.location === 'browser' ? _jsx(BrowserIcon, {}) : _jsx(CloudUploadIcon, {}) }), displayName + annotation.slice(0, 10)] }, runtimeDesc.name));
-                                        })] }, group))), !!postActions &&
-                                    _jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] })] }) })] })
-            :
-                /*
-                 * Section for Radio display.
-                 */
-                _jsxs(_Fragment, { children: [defaultSet &&
-                            _jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
-                                            return _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => { setRuntimeDesc(k); }, checked: (k.location === k?.location || (isRuntimeRemote(k.location) &&
-                                                                    isRuntimeRemote(k?.location ?? 'local'))) && (k.kernelId ?? k.name) === (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: k.displayName }), k.kernelId && k.location === "remote" &&
-                                                                            _jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") })] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && _jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] }), k.gpu && _jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" })] }) })] }), _jsx(ActionList.Divider, {})] }, k.kernelId);
-                                        })] }, group))) }), !!postActions && _jsx(_Fragment, { children: postActions })] }) }));
+    return (_jsx(_Fragment, { children: display === 'menu' ? (
+        /*
+         * Section for Menu display.
+         */
+        _jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedKernelDescs === null, 
+                        //                icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
+                        icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedKernelDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
+                                    setRuntimeDesc(undefined);
+                                }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
+                                        const annotation = runtimeDesc.podName
+                                            ? ` - ${runtimeDesc.podName.split('-', 2).reverse()[0]}`
+                                            : runtimeDesc.kernelId
+                                                ? ` - ${runtimeDesc.kernelId}`
+                                                : '';
+                                        const fullDisplayName = (runtimeDesc.displayName ?? '') + annotation;
+                                        const displayName = (runtimeDesc.displayName?.length ?? 0) >
+                                            RUNTIME_DISPLAY_NAME_MAX_LENGTH
+                                            ? runtimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…'
+                                            : (runtimeDesc.displayName ?? '');
+                                        return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (runtimeDesc.location === runtimeDesc?.location ||
+                                                (isRuntimeRemote(runtimeDesc.location) &&
+                                                    isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
+                                                (runtimeDesc.kernelId ?? runtimeDesc.name) ===
+                                                    (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
+                                                setRuntimeDesc(runtimeDesc);
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: runtimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : runtimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, runtimeDesc.name));
+                                    })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
+        /*
+         * Section for Radio display.
+         */
+        _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
+                                return (_jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
+                                                        setRuntimeDesc(k);
+                                                    }, checked: (k.location === k?.location ||
+                                                        (isRuntimeRemote(k.location) &&
+                                                            isRuntimeRemote(k?.location ?? 'local'))) &&
+                                                        (k.kernelId ?? k.name) ===
+                                                            (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: k.displayName }), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, k.kernelId));
+                            })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })) }));
 }
 export default RuntimePickerBase;

package/lib/components/runtimes/RuntimePickerCell.js

@@ -18,7 +18,7 @@ import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
  * Kernel picker component for a cell.
  */
 export function RuntimePickerCell(props) {
-    const { logIn, markdownParser, model, preference, sanitizer, multiServiceManager, sessionContext, translator } = props;
+    const { logIn, markdownParser, model, preference, sanitizer, multiServiceManager, sessionContext, translator, } = props;
     const { token } = useIAMStore();
     const { configuration } = useCoreStore();
     const [isForeign, setIsForeign] = useState(false);
@@ -37,7 +37,9 @@ export function RuntimePickerCell(props) {
             setHasCellKernel(kernel?.params?.notebook === false);
             const newSnippets = new Array();
             if (kernel) {
-                const spec = multiServiceManager.remote?.environments.get().find(env => env.name === kernel.name);
+                const spec = multiServiceManager.remote?.environments
+                    .get()
+                    .find(env => env.name === kernel.name);
                 setLanguage(spec?.language ?? '');
                 if (spec?.snippets) {
                     newSnippets.push(...spec.snippets);
@@ -57,7 +59,9 @@ export function RuntimePickerCell(props) {
             (!preference?.language || desc.language === preference?.language));
     }, [preference]);
     const setSelectedKernelDesc = useCallback((kernel) => {
-        const datalayerMeta = model.getMetadata('datalayer') ?? { kernel: undefined };
+        const datalayerMeta = model.getMetadata('datalayer') ?? {
+            kernel: undefined,
+        };
         if (!kernel) {
             delete datalayerMeta.kernel;
             model.setMetadata('datalayer', datalayerMeta);
@@ -85,7 +89,7 @@ export function RuntimePickerCell(props) {
         if (desc) {
             desc.params = {
                 ...desc.params,
-                notebook: false
+                notebook: false,
             };
             setSelectedKernelDesc(desc);
         }
@@ -94,13 +98,6 @@ export function RuntimePickerCell(props) {
     const datalayerMeta = model.getMetadata('datalayer') ?? {};
     return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterKernel: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedKernelDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellKernel, title: !multiServiceManager.remote
                         ? 'You are not connected with Datalayer.'
-                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ?
-                    _jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel &&
-                                _jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') })] })
-                    :
-                        _jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) }), translator: translator }), isVariableDialogOpen &&
-                _jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator }), isSnippetDialogOpen &&
-                _jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer }), isKernelDialogOpen &&
-                _jsx(KernelLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startKernel: false, markdownParser: markdownParser, sanitizer: sanitizer })] }));
+                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(KernelLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startKernel: false, markdownParser: markdownParser, sanitizer: sanitizer }))] }));
 }
 export default RuntimePickerCell;

package/lib/components/runtimes/RuntimePickerNotebook.js

@@ -4,8 +4,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useCallback, useEffect, useState } from 'react';
-import { ActionList, FormControl, ToggleSwitch, Tooltip, IconButton } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { ActionList, FormControl, ToggleSwitch, Tooltip, IconButton, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { AlertIcon } from '@primer/octicons-react';
 import { JSONExt } from '@lumino/coreutils';
 import { KernelExecutor } from '@datalayer/jupyter-react';
@@ -13,7 +13,7 @@ import { DatalayerThemeProvider } from '../../theme';
 import { RuntimeSnippetsFacade } from '../../api';
 import { ExternalTokenSilentLogin } from '../../components/iam';
 import { useCoreStore, useIAMStore } from '../../state';
-import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES } from './RuntimeReservationControl';
+import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES, } from './RuntimeReservationControl';
 import { RuntimeVariables } from './RuntimeVariables';
 import { RuntimePickerBase } from './RuntimePickerBase';
 /**
@@ -45,7 +45,7 @@ export function RuntimePickerNotebook(props) {
                     kernelId: sessionContext.session.kernel.id,
                     location: sessionContext.location,
                     language: spec.language,
-                    displayName: sessionContext.kernelDisplayName
+                    displayName: sessionContext.kernelDisplayName,
                 });
                 setTransferFrom(RuntimeSnippetsFacade.supports(spec.language));
             }
@@ -102,7 +102,8 @@ export function RuntimePickerNotebook(props) {
             }
             return;
         }
-        if (selectedRuntimeDesc?.displayName !== runtimeDesc.displayName || selectedRuntimeDesc?.kernelId !== runtimeDesc.kernelId) {
+        if (selectedRuntimeDesc?.displayName !== runtimeDesc.displayName ||
+            selectedRuntimeDesc?.kernelId !== runtimeDesc.kernelId) {
             setSelectedRuntimeDesc({ ...runtimeDesc });
             setTransferTo(RuntimeSnippetsFacade.supports(runtimeDesc.language));
         }
@@ -112,57 +113,56 @@ export function RuntimePickerNotebook(props) {
         setUserStorage(!userStorage);
     }, [userStorage]);
     useEffect(() => {
-        const creditsLimit = selectedRuntimeDesc?.location === 'remote' && selectedRuntimeDesc.burningRate
+        const creditsLimit = selectedRuntimeDesc?.location === 'remote' &&
+            selectedRuntimeDesc.burningRate
             ? Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) *
                 selectedRuntimeDesc.burningRate *
                 60
             : undefined;
-        setValue(creditsLimit !== 0 ?
-            {
+        setValue(creditsLimit !== 0
+            ? {
                 kernel: selectedRuntimeDesc
-                    ?
-                        {
-                            environmentName: ['browser', 'remote'].includes(selectedRuntimeDesc.location)
-                                ? `${selectedRuntimeDesc.location}-${selectedRuntimeDesc.name}`
-                                : selectedRuntimeDesc.name,
-                            id: selectedRuntimeDesc.kernelId,
-                            creditsLimit,
-                            capabilities: userStorage ? ['user_storage'] : undefined
-                        }
-                    :
-                        null,
+                    ? {
+                        environmentName: ['browser', 'remote'].includes(selectedRuntimeDesc.location)
+                            ? `${selectedRuntimeDesc.location}-${selectedRuntimeDesc.name}`
+                            : selectedRuntimeDesc.name,
+                        id: selectedRuntimeDesc.kernelId,
+                        creditsLimit,
+                        capabilities: userStorage ? ['user_storage'] : undefined,
+                    }
+                    : null,
                 selectedVariables: toTransfer,
             }
             : new Error('Credits limit must be strictly positive.'));
     }, [selectedRuntimeDesc, userStorage, toTransfer, timeLimit]);
-    const { kernelPreference: { canStart } } = sessionContext;
+    const { kernelPreference: { canStart }, } = sessionContext;
     const max = Math.floor((credits?.available ?? 0) / (selectedRuntimeDesc?.burningRate ?? -1) / 60.0);
     const outOfCredits = !credits?.available || max < Number.EPSILON;
     return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { as: "form", className: "dla-Runtimes-picker", children: [_jsx(Box, { sx: { padding: 'var(--stack-padding-condensed) 0' }, children: _jsx(RuntimePickerBase, { display: "radio", disabled: canStart === false, preference: {
                             id: sessionContext.session?.id,
-                            kernelDisplayName: sessionContext.kernelPreference.shouldStart ? sessionContext.kernelDisplayName : undefined,
-                        }, sessionContext: sessionContext, multiServiceManager: multiServiceManager, translator: translator, runtimeDesc: selectedRuntimeDesc, setRuntimeDesc: setRuntimeDesc, postActions: token || !props.logIn ?
-                            /*
-                            <Button
-                              variant="default"
-                              onClick={e => {
-                                e.preventDefault();
-                                commands.execute(CommandIDs.launchRemoteRuntime);
-                                close();
-                              }}
-                            >
-                              Launch a New Runtime
-                            </Button>
-                            */
-                            _jsx(_Fragment, {})
-                            :
-                                _jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) }) }) }), !selectedRuntimeDesc?.kernelId && selectedRuntimeDesc?.location === 'remote' &&
-                    _jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: max < 0 ? 1 : max, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && max >= 0 ?
-                                    'You must add credits to your account.'
-                                    : timeLimit === 0
-                                        ? 'You must set a time limit.'
-                                        : undefined, burningRate: selectedRuntimeDesc.burningRate }), !configuration.whiteLabel &&
-                                _jsxs(FormControl, { disabled: !!selectedRuntimeDesc?.kernelId || selectedRuntimeDesc?.location !== 'remote', layout: "horizontal", children: [_jsxs(FormControl.Label, { children: ["User storage", _jsx(Tooltip, { text: 'The runtime will be slower to start.', direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: !!selectedRuntimeDesc?.kernelId || selectedRuntimeDesc?.location !== 'remote', checked: userStorage, size: "small", onClick: handleUserStorageChange })] })] }), canTransferFrom && canTransferTo &&
-                    _jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator })] }) }));
+                            kernelDisplayName: sessionContext.kernelPreference.shouldStart
+                                ? sessionContext.kernelDisplayName
+                                : undefined,
+                        }, sessionContext: sessionContext, multiServiceManager: multiServiceManager, translator: translator, runtimeDesc: selectedRuntimeDesc, setRuntimeDesc: setRuntimeDesc, postActions: token || !props.logIn ? (
+                        /*
+                      <Button
+                        variant="default"
+                        onClick={e => {
+                          e.preventDefault();
+                          commands.execute(CommandIDs.launchRemoteRuntime);
+                          close();
+                        }}
+                      >
+                        Launch a New Runtime
+                      </Button>
+                      */
+                        _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })) }) }), !selectedRuntimeDesc?.kernelId &&
+                    selectedRuntimeDesc?.location === 'remote' && (_jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: max < 0 ? 1 : max, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && max >= 0
+                                ? 'You must add credits to your account.'
+                                : timeLimit === 0
+                                    ? 'You must set a time limit.'
+                                    : undefined, burningRate: selectedRuntimeDesc.burningRate }), !configuration.whiteLabel && (_jsxs(FormControl, { disabled: !!selectedRuntimeDesc?.kernelId ||
+                                selectedRuntimeDesc?.location !== 'remote', layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "user-storage-picker-label", children: ["User storage", _jsx(Tooltip, { text: "The runtime will be slower to start.", direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: !!selectedRuntimeDesc?.kernelId ||
+                                        selectedRuntimeDesc?.location !== 'remote', checked: userStorage, size: "small", onClick: handleUserStorageChange, "aria-labelledby": "user-storage-picker-label" })] }))] })), canTransferFrom && canTransferTo && (_jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator }))] }) }));
 }
 export default RuntimePickerNotebook;

package/lib/components/runtimes/RuntimeReservationControl.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { FormControl, IconButton, Text, TextInput } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { PlusIcon } from '@primer/octicons-react';
 import { Slider } from '@datalayer/primer-addons';
 /**
@@ -21,18 +21,13 @@ export function RuntimeReservationControl(props) {
     const max = Math.min(maxProps, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES);
     // Temporary workaround to not show disabled components.
     const hidden = disabled;
-    return (!hidden ?
-        _jsxs(FormControl, { disabled: disabled, sx: { paddingBottom: 'var(--stack-padding-condensed)' }, children: [_jsx(FormControl.Label, { children: label }), _jsxs(Box, { style: {
-                        alignItems: 'center',
-                        display: 'grid',
-                        gridTemplateColumns: 'max-content 1fr max-content max-content',
-                        gridGap: 'var(--stack-gap-condensed)',
-                        width: '100%'
-                    }, children: [_jsx(Slider, { step: 1, min: 1, max: max, value: time, onChange: onTimeChange, disabled: disabled, label: "", displayValue: false }), _jsx(TextInput, { type: "number", step: "1", min: "1", max: max, disabled: disabled, value: Math.min(max, time).toFixed(2), onChange: event => {
-                                onTimeChange(parseFloat(event.target.value));
-                            } }), (max === 0 || max > Number.EPSILON) && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: ["out of ", maxProps, " available minutes"] }), addCredits &&
-                                    _jsx(IconButton, { icon: PlusIcon, "aria-label": "Add credits", onClick: () => addCredits() })] }))] }), _jsxs(FormControl.Caption, { children: ["Maximum execution time that can be consumed by the runtime. It must be less than ", (MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES / 60).toFixed(0), ' ', " hours.", burningRate &&
-                            _jsxs(_Fragment, { children: [_jsx("br", {}), `With the current value, the runtime execution will consume at most ${(time * burningRate * 60).toFixed(2)} credits.`] })] }), error && _jsx(FormControl.Validation, { variant: "error", children: error })] })
-        :
-            _jsx(_Fragment, {}));
+    return !hidden ? (_jsxs(FormControl, { disabled: disabled, sx: { paddingBottom: 'var(--stack-padding-condensed)' }, children: [_jsx(FormControl.Label, { children: label }), _jsxs(Box, { style: {
+                    alignItems: 'center',
+                    display: 'grid',
+                    gridTemplateColumns: 'max-content 1fr max-content max-content',
+                    gridGap: 'var(--stack-gap-condensed)',
+                    width: '100%',
+                }, children: [_jsx(Slider, { step: 1, min: 1, max: max, value: time, onChange: onTimeChange, disabled: disabled, label: "", displayValue: false }), _jsx(TextInput, { type: "number", step: "1", min: "1", max: max, disabled: disabled, value: Math.min(max, time).toFixed(2), onChange: event => {
+                            onTimeChange(parseFloat(event.target.value));
+                        } }), (max === 0 || max > Number.EPSILON) && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: ["out of ", maxProps, " available minutes"] }), addCredits && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "Add credits", onClick: () => addCredits() }))] }))] }), _jsxs(FormControl.Caption, { children: ["Maximum execution time that can be consumed by the runtime. It must be less than ", (MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES / 60).toFixed(0), ' ', "hours.", burningRate && (_jsxs(_Fragment, { children: [_jsx("br", {}), `With the current value, the runtime execution will consume at most ${(time * burningRate * 60).toFixed(2)} credits.`] }))] }), error && (_jsx(FormControl.Validation, { variant: "error", children: error }))] })) : (_jsx(_Fragment, {}));
 }

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -76,7 +76,7 @@ export function RuntimeSimplePicker(props) {
                             runtimeDesc,
                             runtimeModel: multiServiceManager?.remote?.runtimesManager
                                 .get()
-                                .find(model => model.id === runtimeDesc.kernelId)
+                                .find(model => model.id === runtimeDesc.kernelId),
                         });
                     });
                     break;
@@ -92,11 +92,11 @@ export function RuntimeSimplePicker(props) {
         if (jupyterLabAdapter) {
             Promise.all([
                 jupyterLabAdapter.jupyterLab.resolveOptionalService(IMarkdownParser),
-                jupyterLabAdapter.jupyterLab.resolveOptionalService(ISanitizer)
+                jupyterLabAdapter.jupyterLab.resolveOptionalService(ISanitizer),
             ]).then(services => {
                 setLuminoServices({
                     [IMarkdownParser.name]: services[0],
-                    [ISanitizer.name]: services[1]
+                    [ISanitizer.name]: services[1],
                 });
             });
         }
@@ -114,11 +114,8 @@ export function RuntimeSimplePicker(props) {
                                     return _jsx(EyeIcon, {});
                             }
                             return _jsx(ArtifactIcon, { type: "runtime" });
-                        }, trailingVisual: () => sessionConnection
-                            ?
-                                _jsx(Box, { sx: { paddingTop: '5px' }, children: _jsx(KernelIndicator, { kernel: sessionConnection.kernel }) })
-                            :
-                                _jsx(_Fragment, {}), size: "small", variant: "invisible", children: _jsx(Tooltip, { text: status, direction: "s", children: _jsx(Button, { variant: "invisible", size: "small", children: sessionConnection?.kernel?.name ?? 'Runtimes' }) }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { selectionVariant: "single", showDividers: true, children: [_jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: runtimeLocation === undefined && sessionConnection === undefined, onSelect: () => {
+                        }, trailingVisual: () => sessionConnection ? (_jsx(Box, { sx: { paddingTop: '5px' }, children: _jsx(KernelIndicator, { kernel: sessionConnection.kernel }) })) : (_jsx(_Fragment, {})), size: "small", variant: "invisible", children: _jsx(Tooltip, { text: status, direction: "s", children: _jsx(Button, { variant: "invisible", size: "small", children: sessionConnection?.kernel?.name ?? 'Runtimes' }) }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { selectionVariant: "single", showDividers: true, children: [_jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: runtimeLocation === undefined &&
+                                                sessionConnection === undefined, onSelect: () => {
                                                 setRuntimeLocation(undefined);
                                                 assignRuntime({ runtimeDesc: undefined });
                                             }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(EyeIcon, {}) }), "Viewer", _jsx(ActionList.Description, { variant: "block", children: "A simple Notebook Viewer without Runtime." })] }), _jsxs(ActionList.Item, { selected: runtimeLocation === 'browser', onSelect: () => {
@@ -127,8 +124,8 @@ export function RuntimeSimplePicker(props) {
                                                     runtimeDesc: {
                                                         name: 'pyodide',
                                                         location: 'browser',
-                                                        language: 'python'
-                                                    }
+                                                        language: 'python',
+                                                    },
                                                 });
                                             }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(BrowserIcon, {}) }), "Browser Runtime", _jsx(ActionList.Description, { variant: "block", children: "A Browser Runtime based on Pyodide." })] })] }), runtimeModels.length > 0 && (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Cloud Runtimes" }), runtimeModels.map(kernelModel => {
                                             return (_jsxs(ActionList.Item, { selected: sessionConnection?.kernel?.id === kernelModel.id, onSelect: () => {
@@ -141,9 +138,9 @@ export function RuntimeSimplePicker(props) {
                                                             displayName: kernelModel.given_name,
                                                             kernelId: kernelModel.id,
                                                             burningRate: kernelModel.burning_rate,
-                                                            podName: kernelModel.pod_name
+                                                            podName: kernelModel.pod_name,
                                                         },
-                                                        runtimeModel: kernelModel
+                                                        runtimeModel: kernelModel,
                                                     });
                                                 }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment_name })] }, kernelModel.id));
                                         })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Runtime\u2026"] }), _jsxs(ActionList.Item, { disabled: runtimeLocation !== 'browser', selected: false, onSelect: () => {