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

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

@ -4,9 +4,9 @@
* See the LICENSE file for details. * See the LICENSE file for details.
*/ */
import { Tab } from "@headlessui/react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Tabs } from "@plane/propel/tabs";
// plane web components // plane web components
import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane"; import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
@ -15,29 +15,15 @@ export function PageNavigationPaneTabsList() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Tab.List className="relative mx-3.5 flex items-center rounded-md bg-layer-3 p-0.5"> <div className="mx-3.5">
{({ selectedIndex }) => ( <Tabs.List>
<>
{ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => ( {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
<Tab <Tabs.Trigger key={tab.key} value={tab.key}>
key={tab.key}
type="button"
className="relative z-[1] flex-1 py-1.5 text-13 font-semibold outline-none"
>
{t(tab.i18n_label)} {t(tab.i18n_label)}
</Tab> </Tabs.Trigger>
))} ))}
{/* active tab indicator */} <Tabs.Indicator />
<div </Tabs.List>
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" </div>
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>
); );
} }