feat: Better UX for input blocks (#115)

* feat: input block code editors with variable name change button

* add options to input blocks

* show input values in editors

* live update of input editor when value changes

* fix date values

* feat: make non-text input block editors readonly

* fix date format

* fix: prevent language change of input block editors

* feat: add Step option to slider inputs

* feat: add file picker button to file inputs

* add select input settings screen

* feat: add multi-select support to select inputs

* fix: improve UX of multi-select

* fix empty value handling for multi-select inputs

* feat: add warning comment to button blocks

* fix ts issues: add localization for select box webview

* fix: normalize 'None' to null in select input parsing

* fix: parse slider value as number instead of string

* fix: use null instead of empty string for date-range parse failures

* fix: localize tooltip strings and wrap switch-case declarations in blocks

* fix: replace deprecated onKeyPress with onKeyDown

* fix: add 'cancel' to WebviewMessage type union

* fix: remove duplicate SelectInputSettings interface

* fix: add accessibility improvements to SelectInputSettingsPanel

* fix: improve webview content loading and localization

* fix: use updateCellMetadata to preserve cell outputs and attachments

* fix: properly parse slider values as numbers in applyChangesToBlock

When falling back to existing or default values, the slider converter now
properly parses string values to numbers to ensure consistent numeric types.

* fix: update input-file status bar test to expect 3 items

The test was expecting 2 items but the provider now returns 3:
- Type label
- Variable name
- Choose File button

* fix: resolve all lint issues

- Remove 'any' types in inputConverters.ts by using proper type inference from Zod schemas
- Remove 'any' type in deepnoteInputBlockEditProtection.ts by using Uri type
- Fix import restriction by moving SelectInputSettings and SelectInputWebviewMessage types to src/platform/notebooks/deepnote/types.ts
- Re-export types from platform in webview-side types file for backward compatibility

* fix: remove invalid content parsing for variable names

* refactor: remove dead input value parsing logic

* fix: handle lineCount=0

* add logs for failed reverts

* remove unnecessary base logic

* simplify input converters

* fix lang in text input tests

* remove outdated input value logic

* add handling for start>end date ranges

* improve empty selection handling when not allowed

* fix file input paths

* ease test

* improve uri typing

* handle special chars in input values

* delete unused html

* add focus outlines

* aria for inputs

* tighten typing in converotrs

* refactor mock logger

* refactor canConvert

* fix comment

* fix type

* void->undefined

* remove copyright

* fix tests of numeric values

* show "Set variable name" when not set

* fix extension filter

* Fix date input timezone shifts in input block status bar

- Add formatDateToYYYYMMDD helper to avoid UTC conversion shifts
- Check if date already matches YYYY-MM-DD pattern and use directly
- Otherwise construct from local date components (year, month, day)
- Apply fix to dateInputChooseDate, dateRangeChooseStart, dateRangeChooseEnd
- Prevents dates from shifting by one day in non-UTC timezones

* Fix accessibility issues in SelectInputSettingsPanel radio buttons

- Replace non-semantic div with role='radio' with semantic <label> elements
- Remove manual role, tabIndex, aria-checked attributes from wrapper
- Remove manual keyboard handlers (Enter/Space) - native radio behavior
- Associate labels with radio inputs for proper click handling
- Remove stopPropagation calls - no longer needed with semantic structure
- Radio inputs now work natively for screen readers and keyboard users
- Maintains existing visual styling via .radio-option CSS class

* fix css importing

* add tests for command handlers in the input status bar provider

* remove unused imports

* polish input converter tests

* respect cancl token

* fix: avoid max<min in sliders

* localize file input block status bar

* fix: prevent invalid dates

* polish select variable metadata cleanup

* replace event.data cast with type param

* polish localization of select input settings webview

* avoid dupe select box options

* add accessible labels to select input settings

* polish localization of select input settings

* disposable in test

* reorganize imports in input block tests

* fixup token

* empty function -> return undefined

* fix package lock file

* fix: fix default metadata logic

* test: add more tests for sql block status bar provider

* localize select input strings

* tighten typing of select box webview messages

* test: add more tests for sql statu sbar

* test: add more tests for input block status bar provider

* convert to typed error

* remove generated copyright

* discriminated union for select box options

* polish sql status bar test

* swap data and localization string sending

* Revert "discriminated union for select box options"

d6cae8a

I changed my mind, let's not mess with this.

* refactor: centralize error localization and improve error handling in select input settings

- Add failedToSave localization key to SelectInputSettings namespace
- Update LocalizedMessages type to include failedToSave key
- Replace hardcoded error message with centralized localization key
- Wrap workspace.applyEdit in try-catch to capture underlying errors
- Include error cause in logger.error, window.showErrorMessage, and WrappedError
- Remove unused l10n import

* improve test

* remove generated copyright header

* fix deduplication

* Fix promise handling in select input settings save failure

Remove promise resolution from the catch block when save fails so the
promise stays pending until the user explicitly retries or cancels.
Previously, calling resolvePromise(null) made callers think the flow
finished even though the panel remained open and interactive.

Now when save fails:
- The error is logged via logger.error for debugging
- The error is already shown to the user via saveSettings
- The promise remains pending (not resolved)
- The panel stays open so the user can retry or cancel
- Only explicit cancel or successful save resolves the promise

* fix select box option detection

* fix dispose race conditions in select box settings webview

* fix select box message type use

* cancel token in the webview

* hide error cause from ui

* consolidate input block language options

* fix text input block execution

Author: jankuca

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
 }