({
+ ...tab,
+ ...(tab.children ? { children: cloneTabs(tab.children) } : {}),
+ }))
+}
+
+function pathMatchesKey(path: string, key: string): boolean {
+ const normalizedPath = path.replace(/\/$/, '').toLowerCase()
+ const normalizedKey = key.replace(/\/$/, '').toLowerCase()
+ return normalizedPath === normalizedKey || normalizedPath.startsWith(`${normalizedKey}/`)
+}
+
+export function pathMatchesTab(tab: Tab, path: string): boolean {
+ if (tab.children?.length)
+ return tab.children.some(child => pathMatchesTab(child, path))
+ return pathMatchesKey(path, tab.key)
+}
+
+export function findActiveTabKey(tabs: Tab[], path: string): string | undefined {
+ const grouped = tabs.find(tab => tab.children?.length && pathMatchesTab(tab, path))
+ if (grouped)
+ return grouped.key
+
+ const leaves = tabs.filter(tab => !tab.children?.length)
+ const match = [...leaves]
+ .sort((a, b) => b.key.length - a.key.length)
+ .find(tab => pathMatchesKey(path, tab.key))
+
+ return match?.key ?? tabs[0]?.key
+}
+
+export function findActiveChildKey(tab: Tab | undefined, path: string): string | undefined {
+ if (!tab?.children?.length)
+ return undefined
+ return findActiveTabKey(tab.children, path)
+}
+
+export function defaultChild(tab: Tab | undefined): Tab | undefined {
+ return tab?.children?.[0]
+}
diff --git a/tests/organization-tabs.unit.test.ts b/tests/organization-tabs.unit.test.ts
new file mode 100644
index 0000000000..05dd5b24a9
--- /dev/null
+++ b/tests/organization-tabs.unit.test.ts
@@ -0,0 +1,78 @@
+import type { Tab } from '../src/components/comp_def'
+import { describe, expect, it } from 'vitest'
+import {
+ BILLING_TAB_KEY,
+ cloneTabs,
+ defaultChild,
+ findActiveChildKey,
+ findActiveTabKey,
+ pathMatchesTab,
+ TEAM_TAB_KEY,
+} from '../src/utils/organizationTabs'
+
+const organizationTabs: Tab[] = [
+ { label: 'general', key: '/settings/organization' },
+ {
+ label: 'team',
+ key: TEAM_TAB_KEY,
+ children: [
+ { label: 'members', key: '/settings/organization/members' },
+ { label: 'groups', key: '/settings/organization/groups' },
+ { label: 'security', key: '/settings/organization/security' },
+ ],
+ },
+ {
+ label: 'billing',
+ key: BILLING_TAB_KEY,
+ children: [
+ { label: 'plans', key: '/settings/organization/plans' },
+ { label: 'credits', key: '/settings/organization/credits' },
+ ],
+ },
+ { label: 'usage', key: '/settings/organization/usage' },
+ { label: 'webhooks', key: '/settings/organization/webhooks' },
+]
+
+describe('organization settings tab groups', () => {
+ it.concurrent('defaults team to members and billing to plans', () => {
+ const team = organizationTabs.find(tab => tab.key === TEAM_TAB_KEY)
+ const billing = organizationTabs.find(tab => tab.key === BILLING_TAB_KEY)
+
+ expect(defaultChild(team)?.key).toBe('/settings/organization/members')
+ expect(defaultChild(billing)?.key).toBe('/settings/organization/plans')
+ expect(team?.children?.map(tab => tab.label)).toEqual(['members', 'groups', 'security'])
+ expect(billing?.children?.map(tab => tab.label)).toEqual(['plans', 'credits'])
+ })
+
+ it.concurrent('keeps grouped parent tabs active for nested routes', () => {
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/members')).toBe(TEAM_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/groups/abc')).toBe(TEAM_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/security')).toBe(TEAM_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/plans')).toBe(BILLING_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/credits')).toBe(BILLING_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/Credits')).toBe(BILLING_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/Members')).toBe(TEAM_TAB_KEY)
+ expect(findActiveTabKey(organizationTabs, '/settings/organization')).toBe('/settings/organization')
+ expect(findActiveTabKey(organizationTabs, '/settings/organization/webhooks')).toBe('/settings/organization/webhooks')
+ })
+
+ it.concurrent('matches the active child inside a group', () => {
+ const tabs = cloneTabs(organizationTabs)
+ const team = tabs.find(tab => tab.key === TEAM_TAB_KEY)
+
+ expect(findActiveChildKey(team, '/settings/organization/groups/new')).toBe('/settings/organization/groups')
+ expect(findActiveChildKey(team, '/settings/organization/Groups/new')).toBe('/settings/organization/groups')
+ expect(pathMatchesTab(team!, '/settings/organization/members')).toBe(true)
+ expect(pathMatchesTab(team!, '/settings/organization/plans')).toBe(false)
+ })
+
+ it.concurrent('clones nested children without sharing arrays', () => {
+ const tabs = cloneTabs(organizationTabs)
+ const source = organizationTabs.find(tab => tab.key === TEAM_TAB_KEY)!
+ const clone = tabs.find(tab => tab.key === TEAM_TAB_KEY)!
+
+ expect(clone.children).not.toBe(source.children)
+ clone.children = clone.children!.filter(child => child.key !== '/settings/organization/security')
+ expect(source.children?.map(child => child.key)).toContain('/settings/organization/security')
+ })
+})