Skip to content

feat(studio): Refactor Studio SideNav - #1209

Merged
nakolean merged 5 commits into
mainfrom
nkolean/refactor-navigation
Aug 11, 2026
Merged

feat(studio): Refactor Studio SideNav#1209
nakolean merged 5 commits into
mainfrom
nkolean/refactor-navigation

Conversation

@nakolean

@nakolean nakolean commented Aug 10, 2026

Copy link
Copy Markdown
Contributor
Screen.Recording.2026-08-10.at.1.13.11.PM.mov

Summary

Related Issue

Changes

Type of Change

  • Code change (feature, bug fix, or refactor)
  • Code change with documentation updates
  • Documentation only
  • Contributor tooling or automation
  • CI, build, or test infrastructure

Quality Gates

  • Tests added or updated for changed behavior
  • Existing tests cover changed behavior — justification:
  • Tests not applicable — justification:
  • Documentation updated for user-visible behavior
  • Documentation not applicable — justification:

Verification

  • Pull request title follows the repository's Conventional Commit format
  • Every commit includes an appropriate Signed-off-by: trailer
  • uv run pre-commit run -a passes, or any blocked checks are identified below
  • Targeted tests pass, or tests are marked not applicable above
  • No secrets, API keys, or credentials are included

Targeted validation:

Summary by CodeRabbit

New Features

  • Redesigned Studio navigation with clearer grouped sections and nested links.
  • Added expandable navigation groups with accessible controls and route-aware expansion.
  • Added support for parent links alongside expandable submenus.
  • Improved collapsed navigation with reachable links, active-state indicators, and fallback icons.

Improvements

  • Unified navigation scrolling, spacing, labels, dividers, and visual styling.
  • Reorganized workspace areas, including Agents, Models, Datasets, Deployments, and System tools.
  • Navigation now reopens relevant groups when returning to their routes.

Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
@nakolean
nakolean requested review from a team as code owners August 10, 2026 18:29
@github-actions github-actions Bot added the feat label Aug 10, 2026
@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 13256607-f194-49f2-b9d8-2741c3bc956d

📥 Commits

Reviewing files that changed from the base of the PR and between f264b10 and 92b007d.

📒 Files selected for processing (1)
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/CollapsedNavItem.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/CollapsedNavItem.tsx

📝 Walkthrough

Walkthrough

The PR replaces navigation item rendering with shared link and expandable components. It unifies drawer scrolling, adds collapsed-rail flattening, reorganizes workspace navigation groups, and adds route-aware expansion and interaction coverage.

Changes

Navigation drawer restructuring

Layer / File(s) Summary
Navigation item components
web/packages/studio/src/components/Layouts/NavigationDrawer/components/*, web/packages/studio/src/components/Layouts/NavigationDrawer/utils.ts, web/packages/studio/src/components/Layouts/NavigationDrawer/styles.ts, web/packages/studio/src/components/Layouts/NavigationDrawer/types.ts
Shared components render leaf links, expandable items, sub-items, and collapsed items. Active-state resolution and collapsed-rail flattening use shared utilities.
Drawer layout and rail behavior
web/packages/studio/src/components/Layouts/NavigationDrawer/index.tsx, web/packages/studio/src/components/Layouts/NavigationDrawer/index.test.tsx
The drawer uses one scrollable root. Collapsed groups render named dividers and flattened links. Tests cover links, headings, separators, disclosure buttons, active states, and sub-item visibility.
Workspace navigation groups
web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx, web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.test.tsx, web/packages/studio/src/routes/groups/agentRoutes.tsx
Workspace navigation uses Observability, Components, Evaluations, Data, Governance, and System groups. Nested routes control default expansion. Agent route entries and icons are updated.

Sequence Diagram(s)

sequenceDiagram
  participant WorkspaceSideNav
  participant NavigationDrawer
  participant NavItem
  participant ExpandableNavItem
  participant NavSubItem
  WorkspaceSideNav->>NavigationDrawer: Pass grouped navigation and route state
  NavigationDrawer->>NavItem: Render each item
  NavItem->>ExpandableNavItem: Render grouped item
  ExpandableNavItem->>NavSubItem: Render visible sub-items
  ExpandableNavItem->>ExpandableNavItem: Toggle disclosure state
Loading

Possibly related PRs

Suggested labels: refactor

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: refactoring the Studio side navigation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✨ 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 nkolean/refactor-navigation

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

@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.

Actionable comments posted: 2

🤖 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.

Inline comments:
In
`@web/packages/studio/src/components/Layouts/NavigationDrawer/components/CollapsedNavItem.tsx`:
- Line 28: Update the collapsed-mode VerticalNavListItem usage in
CollapsedNavItem to forward the caller-provided list-item attributes, matching
NavLinkItem and ExpandableNavItem. Preserve the existing collapsed rendering
while ensuring ARIA, data, class, and other VerticalNavListItem props reach the
rendered list item.

In `@web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.test.tsx`:
- Around line 44-53: Update the expected section list in the
renders-six-RFC-sections test to include the “Evaluations” heading, while
preserving the existing assertions for the other sections and superseded
headings.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 62337fca-c403-4d70-965a-dde2de3f52d0

📥 Commits

Reviewing files that changed from the base of the PR and between f365be9 and 6fda8df.

📒 Files selected for processing (15)
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/CollapsedNavItem.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/NavItem.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/NavItem/ExpandableNavItem.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/NavItem/NavLinkItem.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/NavItem/NavSubItem.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/NavItem/index.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/StudioNavItem.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/index.test.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/index.tsx
  • web/packages/studio/src/components/Layouts/NavigationDrawer/styles.ts
  • web/packages/studio/src/components/Layouts/NavigationDrawer/types.ts
  • web/packages/studio/src/components/Layouts/NavigationDrawer/utils.ts
  • web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.test.tsx
  • web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx
  • web/packages/studio/src/routes/groups/agentRoutes.tsx
💤 Files with no reviewable changes (1)
  • web/packages/studio/src/components/Layouts/NavigationDrawer/components/NavItem.tsx

@github-actions

github-actions Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor
Suite Lines Covered Line Rate Branch Rate
Unit Tests 31999/40616 78.8% 63.5%
Integration Tests 18557/38542 48.1% 20.8%

@rrhyne rrhyne 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.

Some things we decided to address after the merge, but otherwise, looks great.

Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
@nakolean
nakolean added this pull request to the merge queue Aug 11, 2026
Merged via the queue into main with commit 58453d3 Aug 11, 2026
56 checks passed
@nakolean
nakolean deleted the nkolean/refactor-navigation branch August 11, 2026 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants