feat: fix navigation sometimes not working when switching graph

[wilsonrivera]

Summary by CodeRabbit

• New Features

  • Normalized graph URLs with parameterized graph-area routing for more consistent deep-linking.
  • Namespace selector added to Feature Flag pages for faster context switching.
  • Namespace selector and workspace now show loading state to reduce UI jumps.
  • Improved workspace search with more precise matching and better handling of namespaces without graphs.

• Style

  • Adjusted header/breadcrumb height for consistent layout.
  • Removed fixed height from Workspace selector wrapper to improve alignment.

Checklist

• I have discussed my proposed changes in an issue and have received approval to proceed.
• I have followed the coding standards of the project.
• Tests or benchmarks have been added or updated.
• Documentation has been updated on https://github.com/wundergraph/cosmo-docs.
• I have read the Contributors Guide.

[coderabbitai]

Walkthrough

Normalizes graph route construction with parameterized graph areas; adjusts namespace/workspace search and loading behavior (including a loading placeholder and disabling auto-reconciliation); minor layout height tweaks; consolidates icon imports; adds NamespaceSelector to the feature-flag page layout.

Changes

Cohort / File(s)	Summary
Graph routing and command behavior studio/src/components/dashboard/graph-command-group.tsx	Adds a canonical graph URL template, derives segments from router.pathname, treats subgraphs specially, and routes non-subgraph graphs to a normalized /[org]/[namespace]/graph/[slug] path or to parameterized graph-area paths when applicable.
Namespace/workspace filtering and loading studio/src/components/dashboard/workspace-command-wrapper.tsx, studio/src/components/dashboard/namespace-selector.tsx, studio/src/components/dashboard/workspace-provider.tsx	Lowers Fuse threshold and enables includeScore; replaces per-namespace Fuse search with direct case-insensitive substring name checks; preserves Fuse for graph/subgraph matching; adds isLoading handling and a loading placeholder in NamespaceSelector; currentNamespace memo now returns a placeholder while loading and includes isLoading in deps; disables prior auto-namespace reconciliation effect.
Layout and sizing studio/src/components/dashboard/workspace-selector.tsx, studio/src/components/layout/title-layout.tsx	Removes h-9 from WorkspaceSelector wrapper and adds h-9 to the breadcrumbs container in TitleLayout (styling/layout only).
Feature flag page integration studio/src/pages/[organizationSlug]/feature-flags/[featureFlagSlug]/index.tsx	Inserts NamespaceSelector into the page layout before existing breadcrumbs and updates layout array ordering and keys.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: filter by namespace #2226 — Modifies namespace filtering logic in workspace-command-wrapper.tsx; this PR replaces a Fuse-based namespace match path with direct substring matching.
• feat: improve namespace selector UI/UX #2161 — Related workspace/namespace selector and workspace context changes (NamespaceSelector, WorkspaceProvider, routing/URL handling) that overlap with these updates.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "feat: fix navigation sometimes not working when switching graph" accurately and concisely reflects the primary intent of the changeset — fixing navigation behavior when switching graphs — and matches the substantive edits in graph-command-group.tsx (route normalization and segment handling) and related workspace/namespace adjustments. It is specific enough for a teammate scanning PR history to understand the main purpose.

✨ Finishing touches

• 📝 Generate Docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 97d0ba4 and 60a4130.

📒 Files selected for processing (1)

• studio/src/components/dashboard/workspace-provider.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• studio/src/components/dashboard/workspace-provider.tsx

⏰ 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). (4)

• GitHub Check: build_test
• GitHub Check: build_push_image
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: Analyze (go)

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

studio/src/components/dashboard/namespace-selector.tsx (1)

9-9: Icon import consolidation improves maintainability.

Consolidating the icon imports into a single import statement is a good practice that reduces import clutter and improves code organization.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b696681 and 97d0ba4.

📒 Files selected for processing (7)

• studio/src/components/dashboard/graph-command-group.tsx (2 hunks)
• studio/src/components/dashboard/namespace-selector.tsx (3 hunks)
• studio/src/components/dashboard/workspace-command-wrapper.tsx (1 hunks)
• studio/src/components/dashboard/workspace-provider.tsx (2 hunks)
• studio/src/components/dashboard/workspace-selector.tsx (1 hunks)
• studio/src/components/layout/title-layout.tsx (1 hunks)
• studio/src/pages/[organizationSlug]/feature-flags/[featureFlagSlug]/index.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (4)

studio/src/pages/[organizationSlug]/feature-flags/[featureFlagSlug]/index.tsx (1)

studio/src/components/dashboard/namespace-selector.tsx (1)

• NamespaceSelector (19-155)

studio/src/components/dashboard/namespace-selector.tsx (2)

studio/src/hooks/use-workspace.ts (1)

• useWorkspace (4-11)

studio/src/lib/utils.ts (1)

• cn (6-8)

studio/src/components/dashboard/workspace-provider.tsx (1)

connect/src/wg/cosmo/platform/v1/platform_pb.ts (1)

• WorkspaceNamespace (20148-20192)

studio/src/components/dashboard/workspace-command-wrapper.tsx (2)

connect/src/wg/cosmo/platform/v1/platform_pb.ts (1)

• WorkspaceNamespace (20148-20192)

connect-go/gen/proto/wg/cosmo/platform/v1/platform.pb.go (3)

• WorkspaceNamespace (24417-24425)
• WorkspaceNamespace (24440-24440)
• WorkspaceNamespace (24455-24457)

⏰ 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_test
• GitHub Check: build_push_image
• GitHub Check: Analyze (go)

🔇 Additional comments (12)

studio/src/components/dashboard/workspace-selector.tsx (1)

42-42: Layout height adjustment looks appropriate.

The removal of h-9 from this wrapper aligns with the coordinated height adjustments across the layout components. This change works in tandem with the addition of h-9 to the breadcrumbs container in title-layout.tsx to maintain consistent spacing.

studio/src/components/layout/title-layout.tsx (1)

46-46: Fixed height addition maintains layout consistency.

The addition of h-9 to the breadcrumbs container compensates for the height removal in workspace-selector.tsx, ensuring consistent layout spacing across the application. This coordinated change prevents layout shifts when switching between different views.

studio/src/components/dashboard/graph-command-group.tsx (2)

70-77: Well-defined navigation constants enhance maintainability.

The introduction of defaultGraphTemplate and graphAreasWithParameters creates a clear, centralized definition for graph routing logic. This improves maintainability and reduces the likelihood of routing inconsistencies.

---

94-110: Robust pathname logic addresses navigation issues.

The enhanced pathname calculation logic properly handles different routing scenarios:

• Uses segmentSplit for more reliable path parsing
• Provides fallback to defaultGraphTemplate when not in graph context
• Handles parametrized graph areas correctly
• Preserves existing subgraph routing behavior

This addresses the core navigation issue described in the PR title by ensuring consistent route construction.

studio/src/components/dashboard/workspace-command-wrapper.tsx (2)

42-42: Fuse configuration improvements enhance search accuracy.

The threshold reduction from 0.3 to 0.2 makes the search more restrictive, and the addition of includeScore: true enables score-based sorting, which are both good practices for search optimization.

---

46-55: Namespace filtering logic is more intuitive.

The change to direct case-insensitive substring matching (wns.name.toLowerCase().includes(filterValue)) for namespace names is more user-friendly than fuzzy search for namespace-level filtering. The addition of the graph count check prevents unnecessary processing for empty namespaces while still allowing name-matched namespaces to be included.

studio/src/pages/[organizationSlug]/feature-flags/[featureFlagSlug]/index.tsx (2)

14-14: Import addition supports enhanced navigation.

The import of NamespaceSelector is correctly added to support the breadcrumb navigation improvements.

---

93-100: NamespaceSelector integration improves navigation consistency.

The addition of NamespaceSelector as the first breadcrumb element with appropriate props (isViewingGraphOrSubgraph={false}, truncateNamespace) provides consistent navigation experience across different page types. The updated keys maintain proper React reconciliation.

studio/src/components/dashboard/namespace-selector.tsx (2)

22-22: Loading state integration enhances user experience.

The destructuring of isLoading from useWorkspace enables proper loading state handling, which is essential for preventing navigation issues during data transitions.

---

32-47: Loading state UI provides clear feedback.

The loading state implementation with a pulsing animation and proper styling provides good user feedback during data loading. The early return pattern keeps the loading logic clean and separate from the main rendering logic.

studio/src/components/dashboard/workspace-provider.tsx (2)

62-69: Loading-aware namespace memoization prevents stale data issues.

The conditional logic that returns a placeholder WorkspaceNamespace when isLoading is true prevents the component from using potentially stale namespace data during loading states. The inclusion of isLoading in the dependency array follows React's best practice of including all reactive values that affect the computation.

---

35-58: Verify intentional disabling of automatic namespace reconciliation

The useEffect in studio/src/components/dashboard/workspace-provider.tsx (lines 35–58) is commented out; this removes automatic namespace reconciliation and changes namespace-sync behavior, which can cause navigation/state mismatches.

• Action: Confirm this change is intentional and that an alternative sync exists (router.query.namespace handling, setStoredNamespace usage, applyParams usage, or server-side default); add tests or restore reconciliation if not.
• Verification note: automated scan failed with "unrecognized file type: tsx". Run locally and paste results for patterns: rg -nP -C3 'applyParams.*namespace|router.query.namespace|setStoredNamespace|setNamespace' studio and re-run verification if needed.