Files
supabase/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.test.ts
Danny White 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

106 lines
3.1 KiB
TypeScript

import { describe, expect, it } from 'vitest'
import {
generateOrganizationSettingsMenuItems,
generateOrganizationSettingsSections,
normalizeOrganizationSettingsPath,
} from './OrganizationSettingsLayout'
describe('generateOrganizationSettingsMenuItems', () => {
it('includes webhooks entry for organization settings nav', () => {
const items = generateOrganizationSettingsMenuItems({
slug: 'my-org',
showSecuritySettings: true,
showSsoSettings: true,
showLegalDocuments: true,
})
expect(items.some((item) => item.label === 'Webhooks')).toBe(true)
expect(items.some((item) => item.href === '/org/my-org/webhooks')).toBe(true)
})
})
describe('OrganizationSettingsLayout helpers', () => {
it('returns expected organization settings sections and links', () => {
const sections = generateOrganizationSettingsSections({
slug: 'my-org',
currentPath: '/org/my-org/general',
showSecuritySettings: true,
showSsoSettings: true,
showLegalDocuments: true,
})
expect(sections.map((section) => section.heading)).toEqual([
'Configuration',
'Connections',
'Compliance',
])
expect(sections.flatMap((section) => section.links.map((item) => item.label))).toEqual([
'General',
'Security',
'SSO',
'OAuth Apps',
'Webhooks',
'Audit Logs',
'Legal Documents',
])
expect(
sections.flatMap((section) => section.links).find((item) => item.label === 'General')
?.isActive
).toBe(true)
})
it('hides feature-flagged items when flags are disabled', () => {
const sections = generateOrganizationSettingsSections({
slug: 'my-org',
currentPath: '/org/my-org/general',
showSecuritySettings: false,
showSsoSettings: false,
showLegalDocuments: false,
})
expect(sections.map((section) => section.heading)).toEqual([
'Configuration',
'Connections',
'Compliance',
])
expect(sections.flatMap((section) => section.links.map((item) => item.label))).toEqual([
'General',
'OAuth Apps',
'Webhooks',
'Audit Logs',
])
})
it('normalizes hash paths for active state checks', () => {
const currentPath = normalizeOrganizationSettingsPath('/org/my-org/security#sso')
const sections = generateOrganizationSettingsSections({
slug: 'my-org',
currentPath,
showSecuritySettings: true,
showSsoSettings: true,
showLegalDocuments: true,
})
expect(
sections.flatMap((section) => section.links).find((item) => item.label === 'Security')
?.isActive
).toBe(true)
})
it('keeps webhooks nav item active for nested endpoint routes', () => {
const sections = generateOrganizationSettingsSections({
slug: 'my-org',
currentPath: '/org/my-org/webhooks/org-endpoint-1',
showSecuritySettings: true,
showSsoSettings: true,
showLegalDocuments: true,
})
expect(
sections.flatMap((section) => section.links).find((item) => item.label === 'Webhooks')
?.isActive
).toBe(true)
})
})