feat: Better UX for input blocks

build/esbuild/build.ts

@@ -379,6 +379,11 @@ async function buildAll() {
             path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'integrations', 'index.tsx'),
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'integrations', 'index.js'),
             { target: 'web', watch: watchAll }
+        ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'selectInputSettings', 'index.tsx'),
+            path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'selectInputSettings', 'index.js'),
+            { target: 'web', watch: watchAll }
         )
     );
 

src/messageTypes.ts

@@ -235,6 +235,24 @@ export type LocalizedMessages = {
     integrationsRequiredField: string;
     integrationsOptionalField: string;
     integrationsUnnamedIntegration: string;
+    // Select input settings strings
+    selectInputSettingsTitle: string;
+    allowMultipleValues: string;
+    allowEmptyValue: string;
+    valueSourceTitle: string;
+    fromOptions: string;
+    fromOptionsDescription: string;
+    addOptionPlaceholder: string;
+    addButton: string;
+    fromVariable: string;
+    fromVariableDescription: string;
+    variablePlaceholder: string;
+    optionNameLabel: string;
+    variableNameLabel: string;
+    removeOptionAriaLabel: string;
+    saveButton: string;
+    cancelButton: string;
+    failedToSave: string;
 };
 // Map all messages to specific payloads
 export class IInteractiveWindowMapping {

src/notebooks/deepnote/converters/inputConverters.ts

@@ -1,6 +1,7 @@
 import { NotebookCellData, NotebookCellKind } from 'vscode';
 import { z } from 'zod';
 
+import { logger } from '../../../platform/logging';
 import type { BlockConverter } from './blockConverter';
 import type { DeepnoteBlock } from '../../../platform/deepnote/deepnoteTypes';
 import {
@@ -14,57 +15,69 @@ import {
     DeepnoteFileInputMetadataSchema,
     DeepnoteButtonMetadataSchema
 } from '../deepnoteSchemas';
-import { parseJsonWithFallback } from '../dataConversionUtils';
 import { DEEPNOTE_VSCODE_RAW_CONTENT_KEY } from './constants';
+import { formatInputBlockCellContent } from '../inputBlockContentFormatter';
 
 export abstract class BaseInputBlockConverter<T extends z.ZodObject> implements BlockConverter {
     abstract schema(): T;
     abstract getSupportedType(): string;
     abstract defaultConfig(): z.infer<T>;
 
-    applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+    /**
+     * Helper method to update block metadata with common logic.
+     * Clears block.content, parses schema, deletes DEEPNOTE_VSCODE_RAW_CONTENT_KEY,
+     * and merges metadata with updates.
+     *
+     * If metadata is missing or invalid, applies default config.
+     * Otherwise, preserves existing metadata and only applies updates.
+     */
+    protected updateBlockMetadata(block: DeepnoteBlock, updates: Partial<z.infer<T>>): void {
         block.content = '';
 
-        const config = this.schema().safeParse(parseJsonWithFallback(cell.value));
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        // Check if existing metadata is valid
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const hasValidMetadata =
+            existingMetadata.success && block.metadata != null && Object.keys(block.metadata).length > 0;
 
-        if (config.success !== true) {
+        if (hasValidMetadata) {
+            // Preserve existing metadata and only apply updates
             block.metadata = {
                 ...(block.metadata ?? {}),
-                [DEEPNOTE_VSCODE_RAW_CONTENT_KEY]: cell.value
+                ...updates
+            };
+        } else {
+            // Apply defaults when metadata is missing or invalid
+            block.metadata = {
+                ...this.defaultConfig(),
+                ...updates
             };
-            return;
-        }
-
-        if (block.metadata != null) {
-            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
         }
+    }
 
-        block.metadata = {
-            ...(block.metadata ?? {}),
-            ...config.data
-        };
+    applyChangesToBlock(block: DeepnoteBlock, _cell: NotebookCellData): void {
+        // Default implementation: preserve existing metadata
+        // Readonly blocks (select, checkbox, date, date-range, button) use this default behavior
+        // Editable blocks override this method to update specific metadata fields
+        this.updateBlockMetadata(block, {});
     }
 
     canConvert(blockType: string): boolean {
-        return blockType.toLowerCase() === this.getSupportedType();
+        return this.getSupportedTypes().includes(blockType.toLowerCase());
     }
 
     convertToCell(block: DeepnoteBlock): NotebookCellData {
-        const deepnoteJupyterRawContentResult = z.string().safeParse(block.metadata?.[DEEPNOTE_VSCODE_RAW_CONTENT_KEY]);
         const deepnoteMetadataResult = this.schema().safeParse(block.metadata);
 
         if (deepnoteMetadataResult.error != null) {
-            console.error('Error parsing deepnote input metadata:', deepnoteMetadataResult.error);
-            console.debug('Metadata:', JSON.stringify(block.metadata));
+            logger.error('Error parsing deepnote input metadata', deepnoteMetadataResult.error);
         }
 
-        const configStr = deepnoteJupyterRawContentResult.success
-            ? deepnoteJupyterRawContentResult.data
-            : deepnoteMetadataResult.success
-            ? JSON.stringify(deepnoteMetadataResult.data, null, 2)
-            : JSON.stringify(this.defaultConfig(), null, 2);
-
-        const cell = new NotebookCellData(NotebookCellKind.Code, configStr, 'json');
+        // Default fallback: empty plaintext cell; subclasses render content/language
+        const cell = new NotebookCellData(NotebookCellKind.Code, '', 'plaintext');
 
         return cell;
     }
@@ -86,6 +99,21 @@ export class InputTextBlockConverter extends BaseInputBlockConverter<typeof Deep
     defaultConfig() {
         return this.DEFAULT_INPUT_TEXT_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-text', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'plaintext');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        // The cell value contains the text value
+        const value = cell.value;
+
+        this.updateBlockMetadata(block, {
+            deepnote_variable_value: value
+        });
+    }
 }
 
 export class InputTextareaBlockConverter extends BaseInputBlockConverter<typeof DeepnoteTextareaInputMetadataSchema> {
@@ -100,6 +128,21 @@ export class InputTextareaBlockConverter extends BaseInputBlockConverter<typeof
     defaultConfig() {
         return this.DEFAULT_INPUT_TEXTAREA_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-textarea', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'plaintext');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        // The cell value contains the text value
+        const value = cell.value;
+
+        this.updateBlockMetadata(block, {
+            deepnote_variable_value: value
+        });
+    }
 }
 
 export class InputSelectBlockConverter extends BaseInputBlockConverter<typeof DeepnoteSelectInputMetadataSchema> {
@@ -114,6 +157,15 @@ export class InputSelectBlockConverter extends BaseInputBlockConverter<typeof De
     defaultConfig() {
         return this.DEFAULT_INPUT_SELECT_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-select', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    // Select blocks are readonly - edits are reverted by DeepnoteInputBlockEditProtection
+    // Uses base class applyChangesToBlock which preserves existing metadata
 }
 
 export class InputSliderBlockConverter extends BaseInputBlockConverter<typeof DeepnoteSliderInputMetadataSchema> {
@@ -128,6 +180,30 @@ export class InputSliderBlockConverter extends BaseInputBlockConverter<typeof De
     defaultConfig() {
         return this.DEFAULT_INPUT_SLIDER_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-slider', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        // Parse numeric value; fall back to existing/default
+        const str = cell.value.trim();
+        const parsed = Number(str);
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+
+        const existingValue = existingMetadata.success
+            ? Number(existingMetadata.data.deepnote_variable_value)
+            : Number(this.defaultConfig().deepnote_variable_value);
+        const fallback = Number.isFinite(existingValue) ? existingValue : 0;
+        const value = Number.isFinite(parsed) ? parsed : fallback;
+
+        this.updateBlockMetadata(block, {
+            deepnote_variable_value: String(value)
+        });
+    }
 }
 
 export class InputCheckboxBlockConverter extends BaseInputBlockConverter<typeof DeepnoteCheckboxInputMetadataSchema> {
@@ -142,6 +218,15 @@ export class InputCheckboxBlockConverter extends BaseInputBlockConverter<typeof
     defaultConfig() {
         return this.DEFAULT_INPUT_CHECKBOX_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-checkbox', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    // Checkbox blocks are readonly - edits are reverted by DeepnoteInputBlockEditProtection
+    // Uses base class applyChangesToBlock which preserves existing metadata
 }
 
 export class InputDateBlockConverter extends BaseInputBlockConverter<typeof DeepnoteDateInputMetadataSchema> {
@@ -156,6 +241,15 @@ export class InputDateBlockConverter extends BaseInputBlockConverter<typeof Deep
     defaultConfig() {
         return this.DEFAULT_INPUT_DATE_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-date', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    // Date blocks are readonly - edits are reverted by DeepnoteInputBlockEditProtection
+    // Uses base class applyChangesToBlock which preserves existing metadata
 }
 
 export class InputDateRangeBlockConverter extends BaseInputBlockConverter<typeof DeepnoteDateRangeInputMetadataSchema> {
@@ -170,6 +264,15 @@ export class InputDateRangeBlockConverter extends BaseInputBlockConverter<typeof
     defaultConfig() {
         return this.DEFAULT_INPUT_DATE_RANGE_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-date-range', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    // Date range blocks are readonly - edits are reverted by DeepnoteInputBlockEditProtection
+    // Uses base class applyChangesToBlock which preserves existing metadata
 }
 
 export class InputFileBlockConverter extends BaseInputBlockConverter<typeof DeepnoteFileInputMetadataSchema> {
@@ -184,6 +287,21 @@ export class InputFileBlockConverter extends BaseInputBlockConverter<typeof Deep
     defaultConfig() {
         return this.DEFAULT_INPUT_FILE_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-file', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        // Remove quotes from the cell value
+        const value = cell.value.trim().replace(/^["']|["']$/g, '');
+
+        this.updateBlockMetadata(block, {
+            deepnote_variable_value: value
+        });
+    }
 }
 
 export class ButtonBlockConverter extends BaseInputBlockConverter<typeof DeepnoteButtonMetadataSchema> {
@@ -198,4 +316,13 @@ export class ButtonBlockConverter extends BaseInputBlockConverter<typeof Deepnot
     defaultConfig() {
         return this.DEFAULT_BUTTON_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('button', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    // Button blocks don't store any value from the cell content
+    // Uses base class applyChangesToBlock which preserves existing metadata
 }