discriminated union for select box options

Author: jankuca

src/notebooks/deepnote/selectInputSettingsWebview.ts

@@ -103,13 +103,25 @@ export class SelectInputSettingsWebviewProvider {
 
         const metadata = this.currentCell.metadata as Record<string, unknown> | undefined;
 
-        const settings: SelectInputSettings = {
-            allowMultipleValues: (metadata?.deepnote_allow_multiple_values as boolean) ?? false,
-            allowEmptyValue: (metadata?.deepnote_allow_empty_values as boolean) ?? false,
-            selectType: (metadata?.deepnote_variable_select_type as 'from-options' | 'from-variable') ?? 'from-options',
-            options: (metadata?.deepnote_variable_custom_options as string[]) ?? [],
-            selectedVariable: (metadata?.deepnote_variable_selected_variable as string) ?? ''
-        };
+        const allowMultipleValues = (metadata?.deepnote_allow_multiple_values as boolean) ?? false;
+        const allowEmptyValue = (metadata?.deepnote_allow_empty_values as boolean) ?? false;
+        const selectType =
+            (metadata?.deepnote_variable_select_type as 'from-options' | 'from-variable') ?? 'from-options';
+
+        const settings: SelectInputSettings =
+            selectType === 'from-options'
+                ? {
+                      allowMultipleValues,
+                      allowEmptyValue,
+                      selectType: 'from-options',
+                      options: (metadata?.deepnote_variable_custom_options as string[]) ?? []
+                  }
+                : {
+                      allowMultipleValues,
+                      allowEmptyValue,
+                      selectType: 'from-variable',
+                      selectedVariable: (metadata?.deepnote_variable_selected_variable as string) ?? ''
+                  };
 
         await this.currentPanel.webview.postMessage({
             type: 'init',
@@ -195,14 +207,15 @@ export class SelectInputSettingsWebviewProvider {
         metadata.deepnote_allow_multiple_values = settings.allowMultipleValues;
         metadata.deepnote_allow_empty_values = settings.allowEmptyValue;
         metadata.deepnote_variable_select_type = settings.selectType;
-        metadata.deepnote_variable_custom_options = settings.options;
-        metadata.deepnote_variable_selected_variable = settings.selectedVariable;
 
         // Update the options field based on the select type
         if (settings.selectType === 'from-options') {
+            metadata.deepnote_variable_custom_options = settings.options;
             metadata.deepnote_variable_options = settings.options;
+            delete metadata.deepnote_variable_selected_variable;
         } else {
-            // Clear stale options when not using 'from-options' mode
+            metadata.deepnote_variable_selected_variable = settings.selectedVariable;
+            delete metadata.deepnote_variable_custom_options;
             delete metadata.deepnote_variable_options;
         }
 

src/platform/notebooks/deepnote/types.ts

@@ -4,15 +4,21 @@ import { EnvironmentVariables } from '../../common/variables/types';
 import { IntegrationConfig } from './integrationTypes';
 
 /**
- * Settings for select input blocks
+ * Settings for select input blocks - discriminated union based on selectType
  */
-export interface SelectInputSettings {
-    allowMultipleValues: boolean;
-    allowEmptyValue: boolean;
-    selectType: 'from-options' | 'from-variable';
-    options: string[];
-    selectedVariable: string;
-}
+export type SelectInputSettings =
+    | {
+          allowMultipleValues: boolean;
+          allowEmptyValue: boolean;
+          selectType: 'from-options';
+          options: string[];
+      }
+    | {
+          allowMultipleValues: boolean;
+          allowEmptyValue: boolean;
+          selectType: 'from-variable';
+          selectedVariable: string;
+      };
 
 /**
  * Message types for select input settings webview

src/webviews/webview-side/selectInputSettings/SelectInputSettingsPanel.tsx

@@ -13,8 +13,7 @@ export const SelectInputSettingsPanel: React.FC<ISelectInputSettingsPanelProps>
         allowMultipleValues: false,
         allowEmptyValue: false,
         selectType: 'from-options',
-        options: [],
-        selectedVariable: ''
+        options: []
     });
 
     const [newOption, setNewOption] = React.useState('');
@@ -51,13 +50,30 @@ export const SelectInputSettingsPanel: React.FC<ISelectInputSettingsPanelProps>
     };
 
     const handleSelectTypeChange = (selectType: 'from-options' | 'from-variable') => {
-        setSettings((prev) => ({
-            ...prev,
-            selectType
-        }));
+        setSettings((prev) => {
+            if (selectType === 'from-options') {
+                return {
+                    allowMultipleValues: prev.allowMultipleValues,
+                    allowEmptyValue: prev.allowEmptyValue,
+                    selectType: 'from-options',
+                    options: prev.selectType === 'from-options' ? prev.options : []
+                };
+            } else {
+                return {
+                    allowMultipleValues: prev.allowMultipleValues,
+                    allowEmptyValue: prev.allowEmptyValue,
+                    selectType: 'from-variable',
+                    selectedVariable: prev.selectType === 'from-variable' ? prev.selectedVariable : ''
+                };
+            }
+        });
     };
 
     const handleAddOption = () => {
+        if (settings.selectType !== 'from-options') {
+            return;
+        }
+
         const trimmedValue = newOption.trim();
 
         // Check if the trimmed value is non-empty
@@ -76,25 +92,40 @@ export const SelectInputSettingsPanel: React.FC<ISelectInputSettingsPanelProps>
         }
 
         // Add the trimmed value and clear input
-        setSettings((prev) => ({
-            ...prev,
-            options: [...prev.options, trimmedValue]
-        }));
+        setSettings((prev) => {
+            if (prev.selectType !== 'from-options') {
+                return prev;
+            }
+            return {
+                ...prev,
+                options: [...prev.options, trimmedValue]
+            };
+        });
         setNewOption('');
     };
 
     const handleRemoveOption = (index: number) => {
-        setSettings((prev) => ({
-            ...prev,
-            options: prev.options.filter((_, i) => i !== index)
-        }));
+        setSettings((prev) => {
+            if (prev.selectType !== 'from-options') {
+                return prev;
+            }
+            return {
+                ...prev,
+                options: prev.options.filter((_, i) => i !== index)
+            };
+        });
     };
 
     const handleVariableChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSettings((prev) => ({
-            ...prev,
-            selectedVariable: e.target.value
-        }));
+        setSettings((prev) => {
+            if (prev.selectType !== 'from-variable') {
+                return prev;
+            }
+            return {
+                ...prev,
+                selectedVariable: e.target.value
+            };
+        });
     };
 
     const handleSave = () => {