mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45: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>
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { useParams } from 'common'
|
|
import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
|
|
import Error from 'components/ui/Error'
|
|
import { ProductMenu } from 'components/ui/ProductMenu'
|
|
import { useOpenAPISpecQuery } from 'data/open-api/api-spec-query'
|
|
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
|
|
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
|
import { withAuth } from 'hooks/misc/withAuth'
|
|
import { PROJECT_STATUS } from 'lib/constants'
|
|
import { useRouter } from 'next/router'
|
|
import { ReactElement } from 'react'
|
|
|
|
import { ProjectLayout } from '../ProjectLayout'
|
|
import { generateDocsMenu, getActivePage } from './DocsLayout.utils'
|
|
|
|
function DocsLayout({ title, children }: { title: string; children: ReactElement }) {
|
|
const router = useRouter()
|
|
const { ref } = useParams()
|
|
const { data: selectedProject } = useSelectedProjectQuery()
|
|
const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
|
|
|
|
const {
|
|
data,
|
|
isPending: isLoading,
|
|
error,
|
|
} = useOpenAPISpecQuery({ projectRef: ref }, { enabled: !isPaused })
|
|
|
|
const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
|
|
const hideMenu = isNewAPIDocsEnabled && router.pathname.endsWith('/graphiql')
|
|
|
|
const { projectAuthAll: authEnabled } = useIsFeatureEnabled(['project_auth:all'])
|
|
|
|
const getPage = () => {
|
|
if (router.pathname.endsWith('graphiql')) return 'graphiql'
|
|
|
|
const { page, rpc, resource } = router.query
|
|
return getActivePage({
|
|
page: page as string | undefined,
|
|
resource: resource as string | undefined,
|
|
rpc: rpc as string | undefined,
|
|
})
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<ProjectLayout product="API Docs">
|
|
<Error error={error} />
|
|
</ProjectLayout>
|
|
)
|
|
}
|
|
|
|
const projectRef = selectedProject?.ref ?? 'default'
|
|
const tableNames = (data?.tables ?? []).map((table: any) => table.name)
|
|
const functionNames = (data?.functions ?? []).map((fn: any) => fn.name)
|
|
|
|
return (
|
|
<ProjectLayout
|
|
isLoading={isLoading}
|
|
product="API Docs"
|
|
browserTitle={{ section: title || 'API Docs' }}
|
|
productMenu={
|
|
!hideMenu && (
|
|
<ProductMenu
|
|
page={getPage()}
|
|
menu={generateDocsMenu(projectRef, tableNames, functionNames, { authEnabled })}
|
|
/>
|
|
)
|
|
}
|
|
>
|
|
{children}
|
|
</ProjectLayout>
|
|
)
|
|
}
|
|
|
|
export default withAuth(DocsLayout)
|