fix: migrate page navigation pane tabs from Headless UI to Propel

[Palanikannan1437]

Description

Migrates the page navigation pane tabs from @headlessui/react Tab components to @plane/propel/tabs (Tabs) components. The tab panels (tab-panels/root.tsx) were already using Tabs.Content from Propel, but the parent (root.tsx) and tabs list (tabs-list.tsx) were still using Headless UI's Tab.Group, Tab.List, and Tab. This mismatch caused the error:

Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>.

Changes:

• root.tsx: Replaced Tab.Group with <Tabs value={...} onValueChange={...}>, updated handler from index-based to value-based
• tabs-list.tsx: Replaced Tab.List/Tab with Tabs.List/Tabs.Trigger/Tabs.Indicator
• Removed unused PAGE_NAVIGATION_PANE_TAB_KEYS import

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Screenshots and Media (if applicable)

N/A

Test Scenarios

• Open a page and toggle the navigation pane — tabs (Outline, Info, Assets) render and switch correctly without console errors

References

N/A

Summary by CodeRabbit

• Refactor
  • Modernized navigation pane component implementation for improved stability and maintainability.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactored navigation pane tab components to replace HeadlessUI's Tab components with Plane's custom Tabs component. Changes include switching from index-based to string-value-based tab selection, updating handler signatures, and delegating indicator rendering to the new Tabs component API.

Changes

Cohort / File(s)	Summary
Navigation Pane Tab Refactoring apps/web/core/components/pages/navigation-pane/root.tsx, apps/web/core/components/pages/navigation-pane/tabs-list.tsx	Replaced HeadlessUI Tab.Group/Tab.List/Tab implementation with Plane's Tabs, Tabs.List, Tabs.Trigger, and Tabs.Indicator components. Converted tab selection from index-based (selectedIndex) to string-value-based (activeTab), updated handler signatures from (index: number) to (value: string), and removed custom indicator styling logic now delegated to Tabs.Indicator.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Tabs once bound by headless chains,
Now dance in Plane's fresh domains,
From index counts to values true,
Our navigation pane renewed anew! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: migrating page navigation pane tabs from Headless UI to Propel components, which is the core objective of this PR.
Description check	✅ Passed	The description includes all key sections from the template: detailed description of changes with rationale (error context), type of change marked correctly, test scenarios provided, and references section completed. All critical information is present.

_{✏️ 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 fix/navigation-pane-tabs-propel-migration

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/core/components/pages/navigation-pane/root.tsx (1)

75-86: ⚠️ Potential issue | 🟡 Minor

Guard against null/undefined value in onValueChange callback.

The onValueChange callback from @base-ui-components/react Tabs can pass null or undefined (e.g., when no tab is selected). The Propel Tabs Controlled story demonstrates guarding against this with value &&. Without this check, the navigation could be triggered with an invalid value.

Proposed fix

  const handleTabChange = useCallback(
-   (value: string) => {
+   (value: string | null) => {
+     if (!value) return;
      const updatedTab = value as TPageNavigationPaneTab;
      const isUpdatedTabInfo = updatedTab === "info";
      const updatedRoute = updateQueryParams({
        paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: updatedTab },
        paramsToRemove: !isUpdatedTabInfo ? [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM] : undefined,
      });
      router.push(updatedRoute);
    },
    [router, updateQueryParams]
  );

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/core/components/pages/navigation-pane/root.tsx` around lines 75 -
86, The handleTabChange callback doesn't guard against null/undefined values
from the Tabs onValueChange, which can cause routing with an invalid tab; update
handleTabChange to first check that value is non-null/undefined (e.g., if (value
== null) return) before casting to TPageNavigationPaneTab and building
updatedRoute using PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM, updateQueryParams, and router.push so
navigation only occurs for valid tab values.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@apps/web/core/components/pages/navigation-pane/root.tsx`:
- Around line 75-86: The handleTabChange callback doesn't guard against
null/undefined values from the Tabs onValueChange, which can cause routing with
an invalid tab; update handleTabChange to first check that value is
non-null/undefined (e.g., if (value == null) return) before casting to
TPageNavigationPaneTab and building updatedRoute using
PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM, PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
updateQueryParams, and router.push so navigation only occurs for valid tab
values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1dea6751-588d-4523-8c99-451ba05c1f75

📥 Commits

Reviewing files that changed from the base of the PR and between ce401c7 and 1062860.

📒 Files selected for processing (2)

• apps/web/core/components/pages/navigation-pane/root.tsx
• apps/web/core/components/pages/navigation-pane/tabs-list.tsx