@datalayer/core 0.0.1 → 0.0.3

package/lib/components/runtimes/RuntimeCellVariables.js

@@ -0,0 +1,172 @@
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { nullTranslator } from '@jupyterlab/translation';
+import { JSONExt } from '@lumino/coreutils';
+import { Autocomplete, FormControl, TextInputWithTokens } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+/**
+ * Kernel variables picker
+ */
+export function KernelCellVariables(props) {
+    const { getInputOptions, inputs, setInputs, getOutputOptions, output, setOutput, translator } = props;
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const inputForOutputRef = useRef(null);
+    const [willSaveOutput, setWillSaveOutput] = useState(false);
+    const [inputLoading, setInputLoading] = useState(!!getInputOptions);
+    const [outputsState, setOutputsState] = useState(null);
+    const [inputsState, setInputsState] = useState(inputs.map(id => ({ id, text: id, selected: true })));
+    const [filterVal, setFilterVal] = useState('');
+    // Add inputs prop in inputsState
+    useEffect(() => {
+        const candidates = inputs.filter(item => !inputsState.find(localItem => localItem.text === item));
+        if (candidates.length) {
+            setInputsState([
+                ...inputsState,
+                ...candidates.map(text => ({ id: text, text, selected: true }))
+            ]);
+        }
+    }, [inputs]);
+    // Update inputs with selected inputsState
+    useEffect(() => {
+        const candidates = inputsState
+            .filter(item => item.selected)
+            .map(item => item.text);
+        if (!JSONExt.deepEqual(inputs, candidates)) {
+            setInputs(candidates);
+        }
+    }, [inputsState]);
+    // Fetch the input candidates
+    useEffect(() => {
+        if (!inputLoading) {
+            return;
+        }
+        if (getInputOptions) {
+            getInputOptions().then(ins => {
+                const oldItems = inputsState.map(i => i.text);
+                setInputsState([
+                    ...inputsState,
+                    ...ins
+                        .sort()
+                        .filter(item => !oldItems.includes(item))
+                        .map(text => ({
+                        id: text,
+                        text,
+                        selected: false
+                    }))
+                ]);
+                setInputLoading(false);
+            });
+        }
+        else {
+            setInputLoading(false);
+        }
+    }, [inputsState, getInputOptions]);
+    // Fetch the output candidates
+    useEffect(() => {
+        if (getOutputOptions) {
+            Promise.all([getOutputOptions(), getInputOptions?.()])
+                .then(([outs, ins]) => {
+                setOutputsState(
+                // Add input variables as output candidate to cover
+                // mutation case
+                outs
+                    .sort()
+                    .concat((ins ?? []).sort())
+                    // Remove duplicated variables; it may happen if
+                    // the code introspection matches an input.
+                    .reduce((agg, value) => {
+                    if (!agg.includes(value)) {
+                        agg.push(value);
+                    }
+                    return agg;
+                }, [])
+                    .map(text => ({
+                    id: text,
+                    text,
+                    selected: false
+                })));
+            })
+                .catch(err => {
+                console.error('Failed to get the cell output candidates', err);
+                setOutputsState([]);
+            });
+        }
+    }, [getOutputOptions, getInputOptions]);
+    const onTokenRemove = useCallback((tokenId) => {
+        const idx = inputsState.findIndex(item => item.id === tokenId);
+        if (idx >= 0) {
+            inputsState.splice(idx, 1);
+            setInputsState([...inputsState]);
+        }
+    }, [inputsState]);
+    const onSelectedInputsChange = useCallback((newlySelectedItems) => {
+        if (!Array.isArray(newlySelectedItems)) {
+            newlySelectedItems = [newlySelectedItems];
+        }
+        const selectedIds = newlySelectedItems.map(i => i.id);
+        setInputsState([
+            ...inputsState.map(localItem => selectedIds.includes(localItem.id)
+                ? Object.assign(localItem, { selected: true })
+                : Object.assign(localItem, { selected: false }))
+        ]);
+    }, [inputsState]);
+    const onItemSelect = useCallback((item) => {
+        const oldItem = inputsState.find(localItem => localItem.id === item.id);
+        if (!oldItem) {
+            setInputsState([...inputsState, item]);
+        }
+        else {
+            oldItem.selected = true;
+            setInputsState([...inputsState]);
+        }
+    }, [inputsState]);
+    const handleChange = useCallback((e) => {
+        if (e.currentTarget) {
+            setFilterVal(e.currentTarget.value);
+        }
+    }, []);
+    const onOutputChange = useCallback((e) => {
+        if (e.currentTarget) {
+            setOutput(e.currentTarget.value);
+        }
+    }, []);
+    const handleOutputMenuOpenChange = useCallback(
+    // There is a bug in primer Autocomplete that lead to the suggestion
+    // not triggering the `onChange` callback. So to fix it here, we
+    // use a pointer to the underlying input element to get the value
+    // and set it when the autocompletion menu closes.
+    (open) => {
+        if (!willSaveOutput) {
+            if (open) {
+                setWillSaveOutput(true);
+            }
+            return;
+        }
+        if (inputForOutputRef.current && !open) {
+            setOutput(inputForOutputRef.current.value);
+            setWillSaveOutput(false);
+        }
+    }, [willSaveOutput]);
+    return (_jsxs(Box, { as: "form", sx: { p: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-input-variables", children: trans.__('Inputs') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { as: TextInputWithTokens, tokens: inputsState.filter(item => item.selected), onTokenRemove: onTokenRemove, onChange: handleChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { addNewItem: filterVal &&
+                                        !inputsState.find(localItem => localItem.text === filterVal)
+                                        ? {
+                                            id: filterVal,
+                                            text: trans.__("Add '%1'", filterVal),
+                                            handleAddItem: item => {
+                                                onItemSelect({
+                                                    ...item,
+                                                    text: filterVal,
+                                                    selected: true
+                                                });
+                                                setFilterVal('');
+                                            }
+                                        }
+                                        : undefined, items: inputsState, selectedItemIds: inputsState
+                                        .filter(item => item.selected)
+                                        .map(item => item.id), onSelectedChange: onSelectedInputsChange, "aria-labelledby": "cell-input-variables", selectionVariant: "multiple", emptyStateText: trans.__('No available variables.'), loading: inputLoading }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-output-variables", children: trans.__('Output') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { ref: inputForOutputRef, value: output, onChange: onOutputChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: outputsState ?? [], selectedItemIds: output ? [output] : [], "aria-labelledby": "cell-output-variables", loading: getOutputOptions && !outputsState, emptyStateText: trans.__('Not among the available variables.'), onOpenChange: handleOutputMenuOpenChange }) })] })] })] }));
+}
+export default KernelCellVariables;

package/lib/components/runtimes/RuntimeCellVariablesDialog.d.ts

@@ -0,0 +1,37 @@
+import { ISessionContext } from '@jupyterlab/apputils';
+import { CodeCellModel } from '@jupyterlab/cells';
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link RuntimeCellVariablesDialog} properties
+ */
+export interface IRuntimeCellVariablesDialogProps {
+    /**
+     * Code cell model
+     */
+    model: CodeCellModel;
+    /**
+     * Callback request the dialog closure.
+     */
+    onClose: () => void;
+    /**
+     * Session preference
+     */
+    preference?: {
+        id?: string;
+        kernelDisplayName?: string;
+        language?: string;
+    };
+    /**
+     * Document session context
+     */
+    sessionContext?: ISessionContext;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Dialog to define the runtime cell variables to transfer
+ */
+export declare function RuntimeCellVariablesDialog(props: IRuntimeCellVariablesDialogProps): JSX.Element;
+export default RuntimeCellVariablesDialog;

package/lib/components/runtimes/RuntimeCellVariablesDialog.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Dialog } from '@primer/react/experimental';
+import { nullTranslator } from '@jupyterlab/translation';
+import { JSONExt } from '@lumino/coreutils';
+import { KernelExecutor } from '@datalayer/jupyter-react';
+import { RuntimeSnippetsFacade } from '../../api';
+import { KernelCellVariables } from './RuntimeCellVariables';
+/**
+ * Dialog to define the runtime cell variables to transfer
+ */
+export function RuntimeCellVariablesDialog(props) {
+    const { onClose, model, preference, sessionContext, translator } = props;
+    const [inputs, setInputs] = useState([]);
+    const [output, setOutput] = useState();
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    useEffect(() => {
+        const updateState = (model) => {
+            const datalayerMeta = model.getMetadata('datalayer') ?? {};
+            if (datalayerMeta.in && !JSONExt.deepEqual(inputs, datalayerMeta.in)) {
+                setInputs(datalayerMeta.in);
+            }
+            if (datalayerMeta.out && datalayerMeta.out !== output) {
+                setOutput(datalayerMeta.out);
+            }
+        };
+        updateState(model);
+        model.metadataChanged.connect(updateState);
+        return () => {
+            model.metadataChanged.disconnect(updateState);
+        };
+    }, [model, inputs, output]);
+    const setVariables = useCallback(() => {
+        const datalayerMeta = model.getMetadata('datalayer') ?? {};
+        if (inputs.length) {
+            datalayerMeta.in = inputs;
+        }
+        else {
+            delete datalayerMeta.in;
+        }
+        if (output) {
+            datalayerMeta.out = output;
+        }
+        else {
+            delete datalayerMeta.out;
+        }
+        model.setMetadata('datalayer', { ...datalayerMeta });
+        onClose();
+    }, [model, inputs, output, onClose]);
+    const getInputCandidates = useCallback(async () => {
+        if (!sessionContext) {
+            return [];
+        }
+        const connection = sessionContext.session.kernel;
+        const spec = sessionContext.specsManager.specs.kernelspecs[connection.model.name];
+        const snippets = new RuntimeSnippetsFacade(spec.language);
+        const outputs = await new KernelExecutor({ connection }).execute(snippets.listVariables());
+        const content = outputs.get(0).data['text/plain'];
+        if (content) {
+            const runtimeVariables = JSON.parse(
+            // We need to remove the quotes prior to parsing
+            content.slice(1, content.length - 1));
+            return Object.keys(runtimeVariables ?? {});
+        }
+        return [];
+    }, [preference, sessionContext]);
+    const getOutputCandidates = useCallback(async () => {
+        // TODO this is only valid for python - using cell mimetype?
+        return new RuntimeSnippetsFacade('python').getOutputCandidates(model.sharedModel.source);
+    }, [model]);
+    const datalayerMeta = model.getMetadata('datalayer') ?? {};
+    let title = 'Define cell variables to transfer';
+    const kernel = datalayerMeta.kernel ?? {};
+    const kernelName = (kernel.displayName || kernel.name) ?? '';
+    if (kernelName) {
+        if (kernel.params?.notebook !== false && kernel.id) {
+            title += ` with running ${kernelName} (${kernel.id.slice(0, 7)})`;
+        }
+        else {
+            title += ` with ${kernelName}`;
+        }
+    }
+    return (_jsx(Dialog, { title: title, onClose: onClose, footerButtons: [
+            {
+                buttonType: 'default',
+                content: trans.__('Cancel'),
+                onClick: onClose
+            },
+            {
+                buttonType: 'primary',
+                content: trans.__('Set variables'),
+                onClick: setVariables,
+                autoFocus: true
+            }
+        ], children: _jsx(KernelCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
+}
+export default RuntimeCellVariablesDialog;

package/lib/components/runtimes/RuntimeLauncherDialog.d.ts

@@ -0,0 +1,53 @@
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+import type { IRemoteServicesManager } from '../../api';
+import type { IRuntimeSnapshot, IRuntimeDesc } from '../../models';
+/**
+ * {@link KernelLauncherDialog} properties.
+ */
+export interface IKernelLauncherDialogProps {
+    /**
+     * Dialog title
+     */
+    dialogTitle?: string;
+    /**
+     * Remote Jupyter service manager
+     */
+    manager: IRemoteServicesManager;
+    /**
+     * Form submission callback
+     */
+    onSubmit: (spec?: IRuntimeDesc) => void;
+    /**
+     * Whether to start the kernel or not.
+     *
+     * If `with-example`, a kernel will be started an
+     * an example document will be opened (if available).
+     * If `defer`, a kernel will not be started but the
+     * kernel params will have a `creditsLimit` defined
+     * for spinning a runtime.
+     *
+     * Default: `true`
+     */
+    startKernel?: boolean | 'with-example' | 'defer';
+    /**
+     * Markdown parser
+     */
+    markdownParser?: IMarkdownParser;
+    /**
+     * If provided the kernel will be started and will
+     * restore the provided snapshot in the kernel.
+     */
+    kernelSnapshot?: IRuntimeSnapshot;
+    /**
+     * HTML sanitizer
+     */
+    sanitizer?: IRenderMime.ISanitizer;
+    /**
+     * Upgrade subscription URL
+     */
+    upgradeSubscription?: string;
+}
+/**
+ * Start Remote Runtime Dialog.
+ */
+export declare function KernelLauncherDialog(props: IKernelLauncherDialogProps): JSX.Element;

package/lib/components/runtimes/RuntimeLauncherDialog.js

@@ -0,0 +1,250 @@
+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 { 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 { Dialog } from '@primer/react/experimental';
+import { AlertIcon } from '@primer/octicons-react';
+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 { 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';
+/**
+ * Initial time in milliseconds before retrying in case no kernels are available
+ */
+const NOT_AVAILABLE_INIT_RETRY = 10_000;
+/**
+ * Number of trials in case of unavailable kernels
+ */
+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 hasExample = startKernel === 'with-example';
+    const user = iamStore.getState().user;
+    const environments = manager.environments.get();
+    const { configuration } = useCoreStore();
+    const { credits, refreshCredits } = useIAMStore();
+    let navigate;
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        navigate = useNavigate();
+    }
+    catch (reason) {
+        // TODO when would this component be shown outside of a react-router? navigation is only available within a react-router.
+        console.warn(reason);
+    }
+    const { jupyterLabAdapter } = useRuntimesStore();
+    const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
+    const [timeLimit, setTimeLimit] = useState(Math.min(credits?.available ?? 0, 10));
+    const [runtimeName, setRuntimeName] = useState(environments[0]?.kernel?.givenNameTemplate || environments[0]?.title || '');
+    // Whether the runtim name has been changed by the user or not
+    const [hasCustomRuntimeName, setHasCustomRuntimeName] = useState(false);
+    const [userStorage, setUserStorage] = useState(false);
+    const [openExample, setOpenExample] = useState(false);
+    const [waitingForRuntime, setWaitingForRuntime] = useState(false);
+    const [error, setError] = useState();
+    const [flashLevel, setFlashLevel] = useState('danger');
+    const isMounted = useIsMounted();
+    useEffect(() => {
+        if (startKernel) {
+            refreshCredits();
+        }
+    }, [startKernel]);
+    const spec = useMemo(() => environments.find(spec => spec.name === selection), [environments, selection]);
+    const description = spec?.description ?? '';
+    const burningRate = spec?.burning_rate ?? 1;
+    const creditsToMinutes = 1.0 / burningRate / 60.0;
+    const max = Math.floor((credits?.available ?? 0) * creditsToMinutes);
+    const outOfCredits = startKernel && (!credits?.available || max < Number.EPSILON);
+    const handleSelectionChange = useCallback((e) => {
+        const selection = e.target.value;
+        setSelection(selection);
+        if (!hasCustomRuntimeName) {
+            const spec = environments.find(env => env.name === selection);
+            setRuntimeName(spec?.kernel?.givenNameTemplate || spec?.title || '');
+        }
+    }, [setSelection, hasCustomRuntimeName]);
+    const handleSubmitKernel = useCallback(async () => {
+        if (selection) {
+            setError(undefined);
+            setWaitingForRuntime(true);
+            const spec = environments.find(s => s.name === selection);
+            const desc = {
+                name: selection,
+                language: spec?.language ?? '',
+                location: 'remote',
+                displayName: runtimeName ?? spec?.title,
+            };
+            const creditsLimit = Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) / creditsToMinutes;
+            desc.params = {};
+            if (startKernel === 'defer') {
+                desc.params['creditsLimit'] = creditsLimit;
+            }
+            if (userStorage) {
+                desc.params['capabilities'] = ['user_storage'];
+            }
+            let success = true;
+            if (startKernel && startKernel !== 'defer') {
+                success = false;
+                let availableTrial = 1;
+                let retryDelay = NOT_AVAILABLE_INIT_RETRY;
+                // Should return success status.
+                const startNewKernel = async () => {
+                    try {
+                        const connection = await manager.runtimesManager.startNew({
+                            environmentName: selection,
+                            type: 'notebook',
+                            givenName: runtimeName,
+                            creditsLimit: creditsLimit,
+                            capabilities: userStorage
+                                ? ['user_storage']
+                                : undefined,
+                            snapshot: kernelSnapshot?.id
+                        }, {
+                            username: user?.handle,
+                            handleComms: true
+                        });
+                        desc.kernelId = connection.id;
+                        if (jupyterLabAdapter?.jupyterLab && hasExample && openExample) {
+                            const example = environments.find(spec => spec.name === selection)?.example;
+                            if (example) {
+                                const options = {
+                                    kernelId: connection.id,
+                                    kernelName: connection.name
+                                };
+                                createNotebook({
+                                    app: jupyterLabAdapter.jupyterLab,
+                                    name: selection,
+                                    url: example,
+                                    options
+                                });
+                            }
+                        }
+                        // Close the connection as we are not using it.
+                        connection.dispose();
+                    }
+                    catch (error) {
+                        let msg = _jsx(Text, { children: "Failed to create the remote runtime\u2026" });
+                        let level = 'danger';
+                        let retry = false;
+                        if (error.response?.status === 503) {
+                            if (availableTrial++ <= NOT_AVAILABLE_RETRIES) {
+                                retry = true;
+                                msg = (_jsxs(Text, { children: ["The runtime you have requested is currently not available due to resource limitations. Leave this dialog open, new trial in ", _jsx(Timer, { duration: retryDelay * 0.001 }), ` (${availableTrial - 1}/${NOT_AVAILABLE_RETRIES}).`] }));
+                            }
+                            else {
+                                msg = _jsx(Text, { children: NO_RUNTIME_AVAILABLE_LABEL });
+                            }
+                            level = 'warning';
+                        }
+                        else if (error.name === 'MaxRuntimesExceededError') {
+                            msg = (_jsx(Text, { children: "You reached your remote runtime limits. Stop existing runtimes before starting new ones." }));
+                            level = 'warning';
+                        }
+                        else if (error.name === 'RuntimeUnreachable') {
+                            msg = (_jsx(Text, { children: "The runtime has been created but can not be accessed. Please contact your IT support team to report this issue." }));
+                        }
+                        setFlashLevel(level);
+                        console.error(msg, error);
+                        setError(msg);
+                        if (retry) {
+                            await sleep(retryDelay);
+                            retryDelay *= 2;
+                            if (isMounted()) {
+                                return await startNewKernel();
+                            }
+                        }
+                        return false;
+                    }
+                    finally {
+                        setWaitingForRuntime(false);
+                    }
+                    return true;
+                };
+                // Start the kernel if the reservation succeeded.
+                success = await startNewKernel();
+            }
+            if (success && isMounted()) {
+                onSubmit(desc);
+            }
+        }
+    }, [
+        manager,
+        selection,
+        startKernel,
+        runtimeName,
+        onSubmit,
+        userStorage,
+        openExample,
+        jupyterLabAdapter,
+        timeLimit,
+        isMounted
+    ]);
+    const handleUserStorageChange = useCallback((e) => {
+        e.preventDefault();
+        setUserStorage(!userStorage);
+    }, [userStorage]);
+    const handleSwitchClick = useCallback((e) => {
+        e.preventDefault();
+        setOpenExample(!openExample);
+    }, [openExample]);
+    const handleUpgrade = useCallback(() => {
+        if (upgradeSubscription) {
+            navigate?.(upgradeSubscription);
+        }
+    }, [navigate, upgradeSubscription]);
+    const handleKernelNameChange = useCallback((e) => {
+        if (typeof e.target.value === 'string') {
+            setRuntimeName(e.target.value);
+            setHasCustomRuntimeName(true);
+        }
+    }, []);
+    return (_jsx(Dialog, { title: dialogTitle || 'Launch a new Runtime', onClose: () => { onSubmit(undefined); }, footerButtons: [
+            {
+                buttonType: 'default',
+                onClick: () => { onSubmit(undefined); },
+                content: 'Cancel',
+                disabled: waitingForRuntime
+            },
+            {
+                buttonType: 'primary',
+                onClick: handleSubmitKernel,
+                content: waitingForRuntime ?
+                    _jsx(Spinner, { size: "small" })
+                    :
+                        startKernel ?? true ? 'Launch' : 'Assign from the Environment',
+                disabled: waitingForRuntime || outOfCredits || timeLimit < Number.EPSILON,
+                autoFocus: true
+            }
+        ], children: _jsxs(Box, { as: "form", onKeyDown: event => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                if (event.key === 'Enter') {
+                    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 })] }) }));
+}