Files
Danny WhiteandJoshen Lim 817a2710da feat(studio): page titles for account and org surfaces (#43536)
Stacked PR 4/5 for page title improvements. Includes account and
organization-level title updates plus organization list/selector page
titles.

_Base:
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)_

---

## What kind of change does this PR introduce?

- Resolves FE-1960
- Resolves FE-1983
- Resolves DEPR-207

## What is the current behavior?

Page titles between surfaces are inconsistent and vague. Sometimes they
say the product name:

```
My Project | My Org | Supabase
```

...even when on a specific surface like Database > Tables.

Other times they show the entity name but skip over the project or org
name :

```
Edge Functions | Supabase
```

## What is the new behavior?

Account and organization-level title updates plus organization
list/selector page titles, adopting the layout title format introduced
in https://github.com/supabase/supabase/pull/43538:

```
users | Table Editor | My Project | My Org | Supabase
hello-world | Logs | Edge Functions | My Project | My Org | Supabase
Backups | Database | My Project | My Org | Supabase
Authentication | My Project | My Org | Supabase
```

That format is:

entity, section, surface, project, org, brand

## Additional context

Related stacked PRs also based on the the original
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)
branch:

- https://github.com/supabase/supabase/pull/43534
- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43537

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-13 12:18:13 +11:00

78 lines
2.3 KiB
TypeScript

import { SupportLink } from 'components/interfaces/Support/SupportLink'
import {
ScaffoldContainer,
ScaffoldDivider,
ScaffoldSection,
ScaffoldSectionDetail,
} from 'components/layouts/Scaffold'
import { InlineLinkClassName } from 'components/ui/InlineLink'
import { useCustomContent } from 'hooks/custom-content/useCustomContent'
import { Fragment } from 'react'
import { CustomDocument } from './CustomDocument'
import { DPA } from './DPA'
import { HIPAA } from './HIPAA'
import { SecurityQuestionnaire } from './SecurityQuestionnaire'
import { SOC2 } from './SOC2'
import { TIA } from './TIA'
export const Documents = () => {
const { organizationLegalDocuments } = useCustomContent(['organization:legal_documents'])
if (Array.isArray(organizationLegalDocuments)) {
return organizationLegalDocuments.map((doc, idx) => {
return (
<Fragment key={doc.id}>
<CustomDocument doc={doc} />
{idx !== organizationLegalDocuments.length - 1 && <ScaffoldDivider />}
</Fragment>
)
})
}
return (
<>
<ScaffoldContainer id="dpa" className="px-6 xl:px-10">
<DPA />
</ScaffoldContainer>
<ScaffoldDivider />
<ScaffoldContainer id="tia" className="px-6 xl:px-10">
<TIA />
</ScaffoldContainer>
<ScaffoldDivider />
<ScaffoldContainer id="soc2" className="px-6 xl:px-10">
<SOC2 />
</ScaffoldContainer>
<ScaffoldDivider />
<ScaffoldContainer id="hipaa" className="px-6 xl:px-10">
<HIPAA />
</ScaffoldContainer>
<ScaffoldDivider />
<ScaffoldContainer id="security-questionnaire" className="px-6 xl:px-10">
<SecurityQuestionnaire />
</ScaffoldContainer>
<ScaffoldDivider />
<ScaffoldContainer className="px-6 xl:px-10">
<ScaffoldSection className="py-12">
<ScaffoldSectionDetail className="col-span-full">
<p className="text-sm text-foreground-light m-0">
<SupportLink className={InlineLinkClassName}>Submit a support request</SupportLink> if
you require additional documents for financial or tax reasons, such as a W-9 form.
</p>
</ScaffoldSectionDetail>
</ScaffoldSection>
</ScaffoldContainer>
</>
)
}