mirror of
https://github.com/supabase/supabase.git
synced 2026-05-09 10:19:50 -04:00
817a2710da
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>
106 lines
3.1 KiB
TypeScript
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)
|
|
})
|
|
})
|