Skip to content

fix: Polish CLI sidebar interactions and layout overflow - #733

Merged
ilyabo merged 6 commits into
mainfrom
cli-improve-sidebar-ui
Jun 19, 2026
Merged

ilyabo merged 6 commits into
mainfrom
cli-improve-sidebar-ui

Conversation

@ilyabo

@ilyabo ilyabo commented Jun 19, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • Replace dropdown menus in the CLI sidebar with searchable command popovers for artifacts and tables
  • Add table preview support via DataTableModal when selecting a table
  • Tighten sidebar and chart overflow handling so panels scroll more predictably
  • Reverse artifact ordering in the compact sidebar view and close the assistant panel explicitly

Testing

  • Not run (not requested)

Summary by CodeRabbit

Release Notes

  • New Features

    • Added searchable navigation for data and artifacts in collapsed sidebar mode, improving quick access to items.
  • Bug Fixes

    • Fixed assistant panel collapse button to explicitly close instead of toggle.
  • Improvements

    • Enhanced scrolling and layout behavior across charts, panels, and schema explorer views for better content display and navigation.

@coderabbitai

coderabbitai Bot commented Jun 19, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The PR refactors both collapsed sidebar sections (CliArtifactsSidebarSection, CliDataSidebarSection) from DropdownMenu to searchable Popover+Command UIs, adds ScrollArea wrappers across grid layout, mosaic, and SQL editor components replacing overflow-auto divs, reverses artifact tab order, switches AssistantPanel close to setCollapsed, and reformats mosaicTableReference source and tests.

Changes

Sidebar Popover/Command UI Refactor

Layer / File(s) Summary
Assistant sidebar collapse & artifact order fixes
apps/sqlrooms-cli-ui/src/components/AssistantPanel.tsx, apps/sqlrooms-cli-ui/src/workspace/sidebar/useCliArtifactSidebarTabs.ts, apps/sqlrooms-cli-ui/src/components/AssistantChatContainer.tsx
Close-panel button calls setCollapsed('assistant-sidebar', true) instead of toggling; artifact tabs are reversed via slice().reverse(); messagesPane switches to overflow-hidden.
CliArtifactsSidebarSection: Popover+Command collapsed UI
apps/sqlrooms-cli-ui/src/workspace/sidebar/CliArtifactsSidebarSection.tsx
Imports switch from DropdownMenu to Command/Popover; expanded state gains a ScrollArea wrapper; collapsed state replaces DropdownMenu with a controlled Popover containing CommandInput and CommandItems for artifact selection and new-artifact creation.
CliDataSidebarSection: Popover+Command collapsed UI & DataTableModal wiring
apps/sqlrooms-cli-ui/src/workspace/sidebar/CliDataSidebarSection.tsx, apps/sqlrooms-cli-ui/package.json
Adds popoverOpen, previewTable state, and useDisclosure; handlePreviewTable selects a table and opens DataTableModal; collapsed state uses Popover+Command with table search; DataTableModal query derives from previewTable; adds @sqlrooms/data-table workspace dependency.
CliWorkspaceSidebar collapsed-icon layout classes
apps/sqlrooms-cli-ui/src/workspace/sidebar/CliWorkspaceSidebar.tsx
SidebarContent and both SidebarGroup containers receive updated classNames for overflow, flex sizing, min-height, and conditional padding in the icon-collapsed state.

ScrollArea & Overflow Layout Fixes

Layer / File(s) Summary
GridLayout: ScrollArea + horizontal ScrollBar
packages/layout/src/node-renderers/grid-node-renderer/GridLayout.tsx
Replaces the overflow-auto wrapper div with ScrollArea using viewportRef={scrollContainerElementRef} and appends a horizontal ScrollBar.
Mosaic chart & panel ScrollArea wrapping
packages/mosaic/src/charts/MosaicChart.tsx, packages/mosaic/src/charts/chart-settings/MosaicChartSpecViewerPanel.tsx, packages/mosaic/src/dashboard/panel/MosaicDashboardPanelLayout.tsx
MosaicChart container switches to overflow-hidden with min-h-0/min-w-0; MosaicChartSpecViewerPanel wraps editor in ScrollArea; MosaicDashboardPanelLayout wraps settings in ScrollArea in both narrow and split-view branches.
SchemaExplorer & TableStructurePanel layout fixes
packages/sql-editor/src/components/SchemaExplorer.tsx, packages/sql-editor/src/components/TableStructurePanel.tsx
SchemaExplorerRoot's ScrollArea class removes overflow-auto and adds flex layout; TableSchemaTree gains overflow-visible in both components.
mosaicTableReference formatting cleanup
packages/mosaic/src/mosaicTableReference.ts, packages/mosaic/__tests__/mosaicTableReference.test.ts
getMosaicTableIdentity and getMosaicTableReferenceParts are reformatted without logic changes; test assertions are collapsed to single-line toBe calls.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • sqlrooms/sqlrooms#616: Previously wired the assistant sidebar close button to toggleCollapsed('assistant-sidebar'); this PR replaces that with the explicit setCollapsed('assistant-sidebar', true) call in the same component.
  • sqlrooms/sqlrooms#699: Directly touches the same sidebar components (CliArtifactsSidebarSection, CliDataSidebarSection, CliWorkspaceSidebar, useCliArtifactSidebarTabs) modified in this PR.
  • sqlrooms/sqlrooms#732: Modifies CliDataSidebarSection.tsx to refactor table sourcing, overlapping directly with this PR's collapsed-state Popover/modal wiring changes in that file.

Suggested reviewers

  • dmitriy-kostianetskiy

Poem

🐰 A rabbit hops through sidebar lanes,
No more dropdowns — popovers reign!
ScrollArea wraps each overflow tight,
Artifacts reversed, displayed just right.
setCollapsed snaps the panel shut —
Clean layout wins, no ifs or buts! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 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 main focus of the PR: polishing CLI sidebar interactions and fixing layout overflow issues across multiple components.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch cli-improve-sidebar-ui
⚔️ Resolve merge conflicts
  • Resolve merge conflict in branch cli-improve-sidebar-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@ilyabo ilyabo changed the title Polish CLI sidebar interactions and layout overflow fix: Polish CLI sidebar interactions and layout overflow Jun 19, 2026
@ilyabo
ilyabo marked this pull request as ready for review June 19, 2026 09:42
# Conflicts:
#	packages/mosaic/src/charts/MosaicChart.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/sqlrooms-cli-ui/src/workspace/sidebar/CliDataSidebarSection.tsx (1)

78-173: 🏗️ Heavy lift

Add regression tests for the new collapsed Data sidebar flows.

This introduces new behavior (search/select table, modal preview opening, and add-data command in collapsed mode) but no test updates are included in the provided changes. Please add/update tests to lock this interaction path.

As per coding guidelines, "Add or update tests when changing behavior or public API, when practical."

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/sqlrooms-cli-ui/src/workspace/sidebar/CliDataSidebarSection.tsx` around
lines 78 - 173, The new collapsed mode functionality for CliDataSidebarSection
component is missing test coverage. Add tests that verify the collapsed state
branch (when state is not 'expanded') including: the popover opens and closes
correctly using the popoverOpen state and setPopoverOpen handler, table search
and selection works via the CommandItem elements that invoke handlePreviewTable,
the DataTableModal opens with the correct preview table data when a table is
selected, and the add-data CommandItem properly calls addData and closes the
popover (by setting popoverOpen to false) when selected.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/sqlrooms-cli-ui/src/workspace/sidebar/CliDataSidebarSection.tsx`:
- Around line 78-173: The new collapsed mode functionality for
CliDataSidebarSection component is missing test coverage. Add tests that verify
the collapsed state branch (when state is not 'expanded') including: the popover
opens and closes correctly using the popoverOpen state and setPopoverOpen
handler, table search and selection works via the CommandItem elements that
invoke handlePreviewTable, the DataTableModal opens with the correct preview
table data when a table is selected, and the add-data CommandItem properly calls
addData and closes the popover (by setting popoverOpen to false) when selected.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2f6379e4-a7b1-4967-a34e-c5e58e5f21d4

📥 Commits

Reviewing files that changed from the base of the PR and between c58e0a1 and f7ae6fc.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (15)
  • apps/sqlrooms-cli-ui/package.json
  • apps/sqlrooms-cli-ui/src/components/AssistantChatContainer.tsx
  • apps/sqlrooms-cli-ui/src/components/AssistantPanel.tsx
  • apps/sqlrooms-cli-ui/src/workspace/sidebar/CliArtifactsSidebarSection.tsx
  • apps/sqlrooms-cli-ui/src/workspace/sidebar/CliDataSidebarSection.tsx
  • apps/sqlrooms-cli-ui/src/workspace/sidebar/CliWorkspaceSidebar.tsx
  • apps/sqlrooms-cli-ui/src/workspace/sidebar/useCliArtifactSidebarTabs.ts
  • packages/layout/src/node-renderers/grid-node-renderer/GridLayout.tsx
  • packages/mosaic/__tests__/mosaicTableReference.test.ts
  • packages/mosaic/src/charts/MosaicChart.tsx
  • packages/mosaic/src/charts/chart-settings/MosaicChartSpecViewerPanel.tsx
  • packages/mosaic/src/dashboard/panel/MosaicDashboardPanelLayout.tsx
  • packages/mosaic/src/mosaicTableReference.ts
  • packages/sql-editor/src/components/SchemaExplorer.tsx
  • packages/sql-editor/src/components/TableStructurePanel.tsx

@ilyabo
ilyabo merged commit 36dbc67 into main Jun 19, 2026
3 checks passed
@ilyabo
ilyabo deleted the cli-improve-sidebar-ui branch June 19, 2026 11:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant