refactor: Group Add input block buttons in toolbar by tkislan · Pull Request #287 · deepnote/vscode-deepnote

tkislan · 2026-01-08T18:25:47Z

Summary by CodeRabbit

New Features
- Added a unified "Add Input Block" action that opens a picker to choose input types (text, textarea, select, slider, checkbox, date, date-range).
UI Improvements
- Streamlined the notebook toolbar by consolidating multiple input-block entries into the single unified action and adjusted toolbar grouping for text blocks.
Localization
- Added a translatable label for the new "Add Input Block" action.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-08T18:26:00Z

📝 Walkthrough

Walkthrough

Consolidates multiple specialized input-block commands into a single deepnote.addInputBlock command. Adds INPUT_BLOCK_TYPES, a picker-driven method addInputBlockThroughPicker(), and a localization key for the new command. Removes the separate commands for textarea, select, slider, checkbox, date, and date-range; updates notebook toolbar entries and command registration to route deepnote.addInputBlock through the picker which then calls the existing insertion logic with the selected type.

Sequence Diagram

sequenceDiagram
    actor User
    participant CommandListener as DeepnoteNotebookCommandListener
    participant QuickPick as Quick Pick UI
    participant Editor as Notebook Editor

    User->>CommandListener: Trigger deepnote.addInputBlock
    CommandListener->>CommandListener: addInputBlockThroughPicker()
    CommandListener->>CommandListener: Validate active notebook editor
    CommandListener->>QuickPick: Show INPUT_BLOCK_TYPES picker
    User->>QuickPick: Select input type (e.g., text, slider)
    QuickPick->>CommandListener: Return selected type
    CommandListener->>CommandListener: addInputBlock(selectedType)
    CommandListener->>Editor: Insert input block cell
    CommandListener->>Editor: Reveal and start edit on new cell

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary change: consolidating multiple input block commands into a single grouped entry in the toolbar.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @src/notebooks/deepnote/deepnoteNotebookCommandListener.ts:
- Around line 449-459: The QuickPick items array (items) for input block types
lacks description fields and should mirror the text block picker by adding
descriptive strings; update each object in the items array inside
deepnoteNotebookCommandListener (where items: (QuickPickItem & { inputBlockType:
InputBlockType })[] is defined) to include a description property using
l10n.t(...) (e.g., short localized descriptions like "Single-line text input",
"Multi-line textarea", "Choose from options", etc.) so each QuickPickItem has
label, description, and inputBlockType for consistent UX.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between fd111ce and 5e51de0.

📒 Files selected for processing (4)

package.json
package.nls.json
src/notebooks/deepnote/deepnoteNotebookCommandListener.ts
src/platform/common/constants.ts

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Use l10n.t() for all user-facing strings in TypeScript files
Use typed error classes from src/platform/errors/ instead of generic errors
Use ILogger service instead of console.log for logging
Preserve error details in error messages while scrubbing personally identifiable information (PII)
Prefer async/await over promise chains
Handle cancellation with CancellationToken

Order method, fields and properties first by accessibility (public/private/protected) and then by alphabetical order

Files:

src/platform/common/constants.ts
src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/platform/**/*.ts

📄 CodeRabbit inference engine (.github/instructions/platform.instructions.md)

src/platform/**/*.ts: Use Inversify-based dependency injection with IServiceManager and IServiceContainer for managing service relationships and dependencies
Define service interfaces using Symbol-based exports (e.g., export const IFileSystem = Symbol('IFileSystem')) paired with corresponding TypeScript interfaces
Register types using the pattern serviceManager.addSingleton<IService>(IService, ServiceImplementation) in registerTypes functions
Use @Injectable() and @Inject() decorators from Inversify for class dependency injection configuration
Implement unified interfaces for cross-platform services (IFileSystem, IPlatformService, etc.) with graceful degradation for web environment limitations
Use structured logging with context via logger.info, logger.error, etc. rather than console.log
Provide platform capability checks and feature detection before using advanced platform-specific features
Register separate service implementations for desktop and web environments, allowing the DI container to resolve the correct platform implementation

Files:

src/platform/common/constants.ts

**/*.ts

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.ts: ALWAYS check the 'Core - Build' task output for TypeScript compilation errors before running any script or declaring work complete
ALWAYS run npm run format-fix before committing changes to ensure proper code formatting
FIX all TypeScript compilation errors before moving forward with development
Use npm run format-fix to auto-fix TypeScript formatting issues before committing
Use npm run lint to check for linter issues in TypeScript files and attempt to fix before committing

Files:

src/platform/common/constants.ts
src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

src/**/*.{ts,tsx}: Don't add the Microsoft copyright header to new files
Use Uri.joinPath() for constructing file paths instead of string concatenation with / to ensure platform-correct path separators
Follow established patterns when importing new packages, using helper imports rather than direct imports (e.g., use import { generateUuid } from '../platform/common/uuid' instead of importing uuid directly)
Add blank lines after const groups and before return statements for readability
Separate third-party and local file imports

Files:

src/platform/common/constants.ts
src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/notebooks/deepnote/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Deepnote integration located in src/notebooks/deepnote/ with refactored architecture: deepnoteTypes.ts (type definitions), deepnoteNotebookManager.ts (state management), deepnoteNotebookSelector.ts (UI selection logic), deepnoteDataConverter.ts (data transformations), deepnoteSerializer.ts (main serializer/orchestration), deepnoteActivationService.ts (VSCode activation)

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

🧬 Code graph analysis (1)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts (1)

src/platform/logging/index.ts (1)

logger (35-48)

🔇 Additional comments (6)

src/platform/common/constants.ts (1)

239-239: LGTM!

Constant placement and naming align with existing conventions.

package.nls.json (1)

269-269: LGTM!

Localization key and value follow established patterns.

package.json (2)

233-238: LGTM!

Command definition follows established patterns. Icon choice $(symbol-parameter) appropriately represents input parameters.

1031-1037: LGTM!

Toolbar consolidation reduces clutter. Group reordering is logical.
src/notebooks/deepnote/deepnoteNotebookCommandListener.ts (2)
191-193: LGTM!

Command binding follows established pattern.

443-472: Fix incorrect placeholder text.

Line 462: The placeholder says "Select an environment for this notebook" but should describe input block selection. Copy/paste error from addTextBlockThroughPicker.
🐛 Proposed fix
         const selected = await window.showQuickPick(items, {
-            placeHolder: l10n.t('Select an environment for this notebook')
+            placeHolder: l10n.t('Select an input block type')
         });
Likely an incorrect or invalid review comment.

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

…nds' into tomaskislan/group-add-input-block-commands-toolbar

… add description to input block picker items

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In @src/notebooks/deepnote/deepnoteNotebookCommandListener.ts:
- Around line 446-487: The public method addInputBlockThroughPicker is out of
alphabetical order; move its declaration so it appears before addTextBlock (and
reorder other public methods as needed) to maintain alphabetical ordering of
public methods in the class (reorder the entire class's public methods to follow
alphabetical ordering).
- Around line 476-478: In the showQuickPick call that assigns const selected in
addInputBlockThroughPicker (the block starting with "const selected = await
window.showQuickPick(items, { placeHolder: l10n.t('Select an input block type')
});"), add the same QuickPick search options used in addTextBlockThroughPicker —
specifically set matchOnDescription: true and matchOnDetail: true — so the items
array can be filtered by description and detail; keep the existing placeHolder
and any other options intact.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 5e51de0 and 68228a8.

📒 Files selected for processing (1)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Use l10n.t() for all user-facing strings in TypeScript files
Use typed error classes from src/platform/errors/ instead of generic errors
Use ILogger service instead of console.log for logging
Preserve error details in error messages while scrubbing personally identifiable information (PII)
Prefer async/await over promise chains
Handle cancellation with CancellationToken

Order method, fields and properties first by accessibility (public/private/protected) and then by alphabetical order

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

**/*.ts

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.ts: ALWAYS check the 'Core - Build' task output for TypeScript compilation errors before running any script or declaring work complete
ALWAYS run npm run format-fix before committing changes to ensure proper code formatting
FIX all TypeScript compilation errors before moving forward with development
Use npm run format-fix to auto-fix TypeScript formatting issues before committing
Use npm run lint to check for linter issues in TypeScript files and attempt to fix before committing

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

src/**/*.{ts,tsx}: Don't add the Microsoft copyright header to new files
Use Uri.joinPath() for constructing file paths instead of string concatenation with / to ensure platform-correct path separators
Follow established patterns when importing new packages, using helper imports rather than direct imports (e.g., use import { generateUuid } from '../platform/common/uuid' instead of importing uuid directly)
Add blank lines after const groups and before return statements for readability
Separate third-party and local file imports

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/notebooks/deepnote/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Deepnote integration located in src/notebooks/deepnote/ with refactored architecture: deepnoteTypes.ts (type definitions), deepnoteNotebookManager.ts (state management), deepnoteNotebookSelector.ts (UI selection logic), deepnoteDataConverter.ts (data transformations), deepnoteSerializer.ts (main serializer/orchestration), deepnoteActivationService.ts (VSCode activation)

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

🧬 Code graph analysis (1)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts (1)

src/platform/logging/index.ts (1)

logger (35-48)

🔇 Additional comments (2)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts (2)

40-52: LGTM: Clean refactor to constant array.

Centralizing input block types improves maintainability while preserving type safety. Mirrors the TEXT_BLOCK_TYPES pattern.

194-196: LGTM: Command registration follows established pattern.

Consistent with the Commands.AddTextBlock registration below.

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

…-input-block-commands-toolbar

codecov · 2026-01-09T17:21:07Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0%. Comparing base (44483f7) to head (85d6af2).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@     Coverage Diff     @@
##   main   #287   +/-   ##
===========================
===========================

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In @src/notebooks/deepnote/deepnoteNotebookCommandListener.ts:
- Line 446: The public method addInputBlockThroughPicker is out of alphabetical
order relative to other public methods (it should appear before
addTextBlockCommandHandler); reorder the method declarations so public methods
follow alphabetical ordering — specifically move addInputBlockThroughPicker to
the position before addTextBlockCommandHandler among the class's public methods
to comply with the coding guideline.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 68228a8 and 85d6af2.

📒 Files selected for processing (1)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Use l10n.t() for all user-facing strings in TypeScript files
Use typed error classes from src/platform/errors/ instead of generic errors
Use ILogger service instead of console.log for logging
Preserve error details in error messages while scrubbing personally identifiable information (PII)
Prefer async/await over promise chains
Handle cancellation with CancellationToken

Order method, fields and properties first by accessibility (public/private/protected) and then by alphabetical order

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

**/*.ts

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.ts: ALWAYS check the 'Core - Build' task output for TypeScript compilation errors before running any script or declaring work complete
ALWAYS run npm run format-fix before committing changes to ensure proper code formatting
FIX all TypeScript compilation errors before moving forward with development
Use npm run format-fix to auto-fix TypeScript formatting issues before committing
Use npm run lint to check for linter issues in TypeScript files and attempt to fix before committing

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

src/**/*.{ts,tsx}: Don't add the Microsoft copyright header to new files
Use Uri.joinPath() for constructing file paths instead of string concatenation with / to ensure platform-correct path separators
Follow established patterns when importing new packages, using helper imports rather than direct imports (e.g., use import { generateUuid } from '../platform/common/uuid' instead of importing uuid directly)
Add blank lines after const groups and before return statements for readability
Separate third-party and local file imports

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

src/notebooks/deepnote/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Deepnote integration located in src/notebooks/deepnote/ with refactored architecture: deepnoteTypes.ts (type definitions), deepnoteNotebookManager.ts (state management), deepnoteNotebookSelector.ts (UI selection logic), deepnoteDataConverter.ts (data transformations), deepnoteSerializer.ts (main serializer/orchestration), deepnoteActivationService.ts (VSCode activation)

Files:

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

🧬 Code graph analysis (1)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts (1)

src/platform/logging/index.ts (1)

logger (35-48)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Build & Package Extension
GitHub Check: Lint & Format
GitHub Check: Build & Test

🔇 Additional comments (3)

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts (3)

40-52: LGTM! Type derivation from const tuple is solid.

The pattern ensures runtime values and types stay synchronized. Matches the existing TEXT_BLOCK_TYPES approach.

194-196: LGTM! Command registration is correct.

Properly routes to the picker method and follows the established pattern.

446-489: LGTM! Implementation follows established patterns.

The method correctly:

Uses l10n.t() for all user-facing strings

Validates active editor before proceeding

Leverages logger.info() for diagnostics

Handles cancellation properly

Delegates to the existing addInputBlock() method

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts

tkislan added 3 commits January 8, 2026 16:10

feat: Add commands to add Text blocks to notebooks

bae7134

Minor changes

fd111ce

refactor: Group Add input block buttons in toolbar

5e51de0

coderabbitai bot requested changes Jan 8, 2026

View reviewed changes

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts Outdated Show resolved Hide resolved

tkislan added 5 commits January 9, 2026 09:29

Fix typo

a2126b0

Minor changes

d568dc3

Change picker items labels

52f0c02

Merge remote-tracking branch 'origin/tomaskislan/add-text-block-comma…

1abee26

…nds' into tomaskislan/group-add-input-block-commands-toolbar

refactor: Replace InputBlockType definition with a constant array and…

68228a8

… add description to input block picker items

coderabbitai bot requested changes Jan 9, 2026

View reviewed changes

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts Show resolved Hide resolved

Base automatically changed from tomaskislan/add-text-block-commands to main January 9, 2026 13:46

tkislan added 2 commits January 9, 2026 17:08

feat: Enhance input block picker with description and detail matching

851aea4

Merge remote-tracking branch 'origin/main' into tomaskislan/group-add…

85d6af2

…-input-block-commands-toolbar

coderabbitai bot requested changes Jan 9, 2026

View reviewed changes

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts Show resolved Hide resolved

src/notebooks/deepnote/deepnoteNotebookCommandListener.ts Show resolved Hide resolved

tkislan marked this pull request as ready for review January 11, 2026 20:12

tkislan requested a review from a team as a code owner January 11, 2026 20:12

Artmann approved these changes Jan 12, 2026

View reviewed changes

coderabbitai bot approved these changes Jan 12, 2026

View reviewed changes

tkislan merged commit 3f44449 into main Jan 12, 2026
13 checks passed

tkislan deleted the tomaskislan/group-add-input-block-commands-toolbar branch January 12, 2026 08:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Group Add input block buttons in toolbar#287

refactor: Group Add input block buttons in toolbar#287
tkislan merged 10 commits intomainfrom
tomaskislan/group-add-input-block-commands-toolbar

tkislan commented Jan 8, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 8, 2026 •

edited

Loading

Walkthrough

Sequence Diagram

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

codecov bot commented Jan 9, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

tkislan commented Jan 8, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Sequence Diagram

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov bot commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tkislan commented Jan 8, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 8, 2026 •

edited

Loading

codecov bot commented Jan 9, 2026 •

edited

Loading