binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: migrate page navigation pane tabs from headless ui to propel (#8805)

Browse source
This commit is contained in:
M. Palanikannan 2026-03-26 20:43:03 +05:30 • committed by GitHub
parent ce401c723e
commit 113bba46ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/web/core/components/pages/navigation-pane/root.tsx
View file

@ -4,13 +4,13 @@
* See the LICENSE file for details.
*/
import React, { useCallback } from "react";
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter, useSearchParams } from "next/navigation";
import { ArrowRightCircle } from "lucide-react";
import { Tab } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Tabs } from "@plane/propel/tabs";
import { Tooltip } from "@plane/propel/tooltip";
// hooks
import { useQueryParams } from "@/hooks/use-query-params";
@ -26,7 +26,6 @@ import { PageNavigationPaneTabsList } from "./tabs-list";
import type { INavigationPaneExtension } from "./types/extensions";
import {
PAGE_NAVIGATION_PANE_TAB_KEYS,
PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
PAGE_NAVIGATION_PANE_WIDTH,
@ -55,7 +54,6 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
) as TPageNavigationPaneTab | null;
const activeTab: TPageNavigationPaneTab = navigationPaneQueryParam || "outline";
const selectedIndex = PAGE_NAVIGATION_PANE_TAB_KEYS.indexOf(activeTab);
// Check if any extension is currently active based on query parameters
const ActiveExtension = extensions.find((extension) => {
@ -75,8 +73,8 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
const { t } = useTranslation();
const handleTabChange = useCallback(
(index: number) => {
const updatedTab = PAGE_NAVIGATION_PANE_TAB_KEYS[index];
(value: string) => {
const updatedTab = value as TPageNavigationPaneTab;
const isUpdatedTabInfo = updatedTab === "info";
const updatedRoute = updateQueryParams({
paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: updatedTab },
@ -112,10 +110,10 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
{ActiveExtension ? (
<ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
) : showNavigationTabs ? (
<Tab.Group as={React.Fragment} selectedIndex={selectedIndex} onChange={handleTabChange}>
<Tabs value={activeTab} onValueChange={handleTabChange}>
<PageNavigationPaneTabsList />
<PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
</Tab.Group>
</Tabs>
) : null}
</div>
</aside>

36
apps/web/core/components/pages/navigation-pane/tabs-list.tsx
View file

@ -4,9 +4,9 @@
* See the LICENSE file for details.
*/
import { Tab } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Tabs } from "@plane/propel/tabs";
// plane web components
import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
@ -15,29 +15,15 @@ export function PageNavigationPaneTabsList() {
const { t } = useTranslation();
return (
<Tab.List className="relative mx-3.5 flex items-center rounded-md bg-layer-3 p-0.5">
{({ selectedIndex }) => (
<>
{ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
<Tab
key={tab.key}
type="button"
className="relative z-[1] flex-1 py-1.5 text-13 font-semibold outline-none"
>
{t(tab.i18n_label)}
</Tab>
))}
{/* active tab indicator */}
<div
className="pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-sm bg-layer-3-selected transition-all duration-500 ease-in-out"
style={{
left: `calc(${(selectedIndex / ORDERED_PAGE_NAVIGATION_TABS_LIST.length) * 100}% + 2px)`,
height: "calc(100% - 4px)",
width: `calc(${100 / ORDERED_PAGE_NAVIGATION_TABS_LIST.length}% - 4px)`,
}}
/>
</>
)}
</Tab.List>
<div className="mx-3.5">
<Tabs.List>
{ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
<Tabs.Trigger key={tab.key} value={tab.key}>
{t(tab.i18n_label)}
</Tabs.Trigger>
))}
<Tabs.Indicator />
</Tabs.List>
</div>
);
}