Files
Danny WhiteandJoshen Lim 7d6995bbfe refactor(studio): clean up ProjectLayout title API (#43742)
## 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>
2026-03-16 18:03:10 +11:00

36 lines
1.1 KiB
TypeScript

import { useParams } from 'common'
import { GitHubStatus } from 'components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus'
import { ProductMenu } from 'components/ui/ProductMenu'
import { withAuth } from 'hooks/misc/withAuth'
import { useRouter } from 'next/router'
import { PropsWithChildren } from 'react'
import { ProjectLayout } from '../ProjectLayout'
import { generateBranchMenu } from './BranchLayout.utils'
const BranchProductMenu = () => {
const router = useRouter()
const { ref: projectRef = 'default' } = useParams()
const page = router.pathname.split('/')[4] ?? 'branches'
return (
<>
<ProductMenu page={page} menu={generateBranchMenu(projectRef)} />
<div className="px-6">
<h3 className="text-sm font-mono text-foreground-lighter uppercase mb-3">Configure</h3>
<GitHubStatus />
</div>
</>
)
}
const BranchLayout = ({ children }: PropsWithChildren<{}>) => {
return (
<ProjectLayout product="Branching" productMenu={<BranchProductMenu />} isBlocking={false}>
{children}
</ProjectLayout>
)
}
export default withAuth(BranchLayout)