refactor: Group Add input block buttons in toolbar (#287)

* feat: Add commands to add Text blocks to notebooks

* Minor changes

* refactor: Group Add input block buttons in toolbar

* Fix typo

* Minor changes

* Change picker items labels

* refactor: Replace InputBlockType definition with a constant array and add description to input block picker items

* feat: Enhance input block picker with description and detail matching

Author: tkislan

package.json

@@ -230,6 +230,12 @@
                 "category": "Deepnote",
                 "icon": "$(add)"
             },
+            {
+                "command": "deepnote.addInputBlock",
+                "title": "%deepnote.commands.addInputBlock.title%",
+                "category": "Deepnote",
+                "icon": "$(symbol-parameter)"
+            },
             {
                 "command": "deepnote.addTextBlock",
                 "title": "%deepnote.commands.addTextBlock.title%",
@@ -1022,43 +1028,13 @@
                     "when": "notebookType == 'deepnote'"
                 },
                 {
-                    "command": "deepnote.addInputTextBlock",
+                    "command": "deepnote.addInputBlock",
                     "group": "navigation@6",
                     "when": "notebookType == 'deepnote'"
                 },
-                {
-                    "command": "deepnote.addInputTextareaBlock",
-                    "group": "navigation@7",
-                    "when": "notebookType == 'deepnote'"
-                },
-                {
-                    "command": "deepnote.addInputSelectBlock",
-                    "group": "navigation@8",
-                    "when": "notebookType == 'deepnote'"
-                },
-                {
-                    "command": "deepnote.addInputSliderBlock",
-                    "group": "navigation@9",
-                    "when": "notebookType == 'deepnote'"
-                },
-                {
-                    "command": "deepnote.addInputCheckboxBlock",
-                    "group": "navigation@10",
-                    "when": "notebookType == 'deepnote'"
-                },
-                {
-                    "command": "deepnote.addInputDateBlock",
-                    "group": "navigation@11",
-                    "when": "notebookType == 'deepnote'"
-                },
-                {
-                    "command": "deepnote.addInputDateRangeBlock",
-                    "group": "navigation@12",
-                    "when": "notebookType == 'deepnote'"
-                },
                 {
                     "command": "deepnote.addTextBlock",
-                    "group": "navigation@13",
+                    "group": "navigation@7",
                     "when": "notebookType == 'deepnote'"
                 },
                 {

package.nls.json

@@ -266,6 +266,7 @@
     "deepnote.commands.addInputDateRangeBlock.title": "Add Input Date Range Block",
     "deepnote.commands.addInputFileBlock.title": "Add Input File Block",
     "deepnote.commands.addButtonBlock.title": "Add Button Block",
+    "deepnote.commands.addInputBlock.title": "Add Input Block",
     "deepnote.commands.addTextBlock.title": "Add Text Block",
     "deepnote.commands.addTextBlockParagraph.title": "Add Paragraph Block",
     "deepnote.commands.addTextBlockHeading1.title": "Add Heading 1 Block",

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

@@ -37,16 +37,19 @@ import {
 import { DATAFRAME_SQL_INTEGRATION_ID } from '../../platform/notebooks/deepnote/integrationTypes';
 import { Pocket } from '../../platform/deepnote/pocket';
 
-export type InputBlockType =
-    | 'input-text'
-    | 'input-textarea'
-    | 'input-select'
-    | 'input-slider'
-    | 'input-checkbox'
-    | 'input-date'
-    | 'input-date-range'
-    | 'input-file'
-    | 'button';
+export const INPUT_BLOCK_TYPES = [
+    'input-text',
+    'input-textarea',
+    'input-select',
+    'input-slider',
+    'input-checkbox',
+    'input-date',
+    'input-date-range',
+    'input-file',
+    'button'
+] as const;
+
+export type InputBlockType = (typeof INPUT_BLOCK_TYPES)[number];
 
 export const TEXT_BLOCK_TYPES = ['text-cell-p', 'text-cell-h1', 'text-cell-h2', 'text-cell-h3'] as const;
 
@@ -188,6 +191,9 @@ export class DeepnoteNotebookCommandListener implements IExtensionSyncActivation
         this.disposableRegistry.push(
             commands.registerCommand(Commands.AddButtonBlock, () => this.addInputBlock('button'))
         );
+        this.disposableRegistry.push(
+            commands.registerCommand(Commands.AddInputBlock, () => this.addInputBlockThroughPicker())
+        );
         this.disposableRegistry.push(
             commands.registerCommand(Commands.AddTextBlock, () => this.addTextBlockThroughPicker())
         );
@@ -437,6 +443,51 @@ export class DeepnoteNotebookCommandListener implements IExtensionSyncActivation
         await this.addTextBlock({ editor, textBlockType: selected.textBlockType });
     }
 
+    public async addInputBlockThroughPicker(): Promise<void> {
+        const INPUT_BLOCK_TYPE_LABELS = {
+            'input-text': l10n.t('Text Input'),
+            'input-textarea': l10n.t('Textarea'),
+            'input-select': l10n.t('Select Dropdown'),
+            'input-slider': l10n.t('Slider'),
+            'input-checkbox': l10n.t('Checkbox'),
+            'input-date': l10n.t('Date'),
+            'input-date-range': l10n.t('Date Range'),
+            'input-file': l10n.t('File Upload'),
+            button: l10n.t('Button')
+        } as const satisfies Record<InputBlockType, string>;
+
+        const editor = window.activeNotebookEditor;
+        if (!editor) {
+            throw new Error(l10n.t('No active notebook editor found'));
+        }
+
+        const items: (QuickPickItem & { inputBlockType: InputBlockType })[] = INPUT_BLOCK_TYPES.map(
+            (inputBlockType) => {
+                const label = INPUT_BLOCK_TYPE_LABELS[inputBlockType];
+                const description = l10n.t('Add a {0} block', label);
+                return {
+                    label,
+                    description,
+                    inputBlockType
+                };
+            }
+        );
+
+        const selected = await window.showQuickPick(items, {
+            placeHolder: l10n.t('Select an input block type'),
+            matchOnDescription: true,
+            matchOnDetail: true
+        });
+
+        if (selected == null) {
+            return;
+        }
+
+        logger.info(`Selected input block type: ${selected.inputBlockType}`);
+
+        await this.addInputBlock(selected.inputBlockType);
+    }
+
     public async addTextBlockCommandHandler({ textBlockType }: { textBlockType: TextBlockType }): Promise<void> {
         const editor = window.activeNotebookEditor;
         if (!editor) {

src/platform/common/constants.ts

@@ -236,6 +236,7 @@ export namespace Commands {
     export const AddInputDateRangeBlock = 'deepnote.addInputDateRangeBlock';
     export const AddInputFileBlock = 'deepnote.addInputFileBlock';
     export const AddButtonBlock = 'deepnote.addButtonBlock';
+    export const AddInputBlock = 'deepnote.addInputBlock';
     export const AddTextBlock = 'deepnote.addTextBlock';
     export const AddTextBlockParagraph = 'deepnote.addTextBlockParagraph';
     export const AddTextBlockHeading1 = 'deepnote.addTextBlockHeading1';