mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Danny WhiteandJoshen Lim
7d6995bbfe
## What kind of change does this PR introduce? Refactor, cleanup, and docs update. ## What is the current behavior? After the page-title rollout, `ProjectLayout` is still in a transitional state: - it accepts a deprecated `title` prop - it still supports a separate `browserTitle.surface` - wrapper layouts are split between passing `title` directly and passing `browserTitle.section` That makes the API harder to reason about than it needs to be, even though the rendered titles are already correct. ## What is the new behavior? This cleanup finishes the API simplification that came out of the stacked PR review: - wrapper layouts stay `title`-first for DX - `ProjectLayout` no longer accepts `title` - `product` is now the single source of truth for the project-surface title segment - `browserTitle` is now only used for extra browser-title metadata (`entity`, `section`, `override`) - the remaining project-scoped callers now pass `browserTitle.section` when they need a section label - docs now reflect the final pattern instead of the transitional one Rendered page titles stay the same. ## Additional context Checks run: - `pnpm --filter studio exec vitest --run lib/page-title.test.ts components/layouts/ProjectLayout/index.test.tsx` - `pnpm --filter studio typecheck` - `pnpm exec prettier --check ...` on touched files This is intended as the post-rollout cleanup PR based on Joshen's review feedback across the stacked title changes. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { useParams } from 'common'
|
|
import { usePathname } from 'next/navigation'
|
|
import { ComponentProps, ReactNode } from 'react'
|
|
import { useTabsStateSnapshot } from 'state/tabs'
|
|
import { cn } from 'ui'
|
|
|
|
import { ProjectLayoutWithAuth } from '../ProjectLayout'
|
|
import { CollapseButton } from '../Tabs/CollapseButton'
|
|
import { EditorTabs } from '../Tabs/Tabs'
|
|
import { useEditorType } from './EditorsLayout.hooks'
|
|
|
|
export interface ExplorerLayoutProps extends ComponentProps<typeof ProjectLayoutWithAuth> {
|
|
children: ReactNode
|
|
title?: string
|
|
product?: string
|
|
productMenuClassName?: string
|
|
}
|
|
|
|
export const EditorBaseLayout = ({
|
|
children,
|
|
title,
|
|
product,
|
|
productMenuClassName,
|
|
productMenu,
|
|
browserTitle,
|
|
}: ExplorerLayoutProps) => {
|
|
const { ref } = useParams()
|
|
const pathname = usePathname()
|
|
const editor = useEditorType()
|
|
const tabs = useTabsStateSnapshot()
|
|
|
|
const hasNoOpenTabs =
|
|
editor === 'table' ? tabs.openTabs.filter((x) => !x.startsWith('sql')).length === 0 : false
|
|
const hideTabs =
|
|
pathname === `/project/${ref}/editor` || pathname === `/project/${ref}/sql` || hasNoOpenTabs
|
|
|
|
const activeEditorTab = tabs.activeTab ? tabs.tabsMap[tabs.activeTab] : undefined
|
|
const activeEditorTabEntity =
|
|
activeEditorTab === undefined
|
|
? undefined
|
|
: editor === 'sql'
|
|
? activeEditorTab.type === 'sql'
|
|
? activeEditorTab.metadata?.name || activeEditorTab.label
|
|
: undefined
|
|
: editor === 'table'
|
|
? activeEditorTab.type !== 'sql'
|
|
? activeEditorTab.metadata?.name || activeEditorTab.label
|
|
: undefined
|
|
: undefined
|
|
|
|
const mergedBrowserTitle = {
|
|
...browserTitle,
|
|
section: title ?? browserTitle?.section,
|
|
entity: browserTitle?.entity ?? activeEditorTabEntity,
|
|
}
|
|
|
|
return (
|
|
<ProjectLayoutWithAuth
|
|
resizableSidebar
|
|
product={product}
|
|
browserTitle={mergedBrowserTitle}
|
|
productMenuClassName={productMenuClassName}
|
|
productMenu={productMenu}
|
|
>
|
|
<div className="flex flex-col h-full">
|
|
<div
|
|
className={cn(
|
|
'h-10 md:min-h-[var(--header-height)] flex items-center',
|
|
!hideTabs ? 'bg-surface-200 dark:bg-alternative' : 'bg-surface-100'
|
|
)}
|
|
>
|
|
{hideTabs ? <CollapseButton hideTabs={hideTabs} /> : <EditorTabs />}
|
|
</div>
|
|
<div className="h-full">{children}</div>
|
|
</div>
|
|
</ProjectLayoutWithAuth>
|
|
)
|
|
}
|