mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
## What kind of change does this PR introduce? UI change ## What is the current behavior? Organization settings are currently spread across a NavMenu. This is getting unweildy as the amount of children within Organization settings grows. ## What is the new behavior? Organization settings are now on a sidebar, just like Project Settings and most other surfaces. | Before | After | | --- | --- | | <img width="1024" height="563" alt="Supabase" src="https://github.com/user-attachments/assets/3889858c-157a-4deb-8714-71fe9cf002e6" /> | <img width="1024" height="563" alt="General Supabase" src="https://github.com/user-attachments/assets/1b4eb2c3-a67c-4eda-ab3c-e6610dd5ccf4" /> | ## Additional context @fsansalvadore and the design team have have other efforts going on to reduce interface clutter, e.g. nested sidebars.
155 lines
3.9 KiB
TypeScript
155 lines
3.9 KiB
TypeScript
import type { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
|
|
import type { Project } from 'data/projects/project-detail-query'
|
|
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
|
|
import { ArrowUpRight } from 'lucide-react'
|
|
import type { Organization } from 'types'
|
|
|
|
export const generateSettingsMenu = (
|
|
ref?: string,
|
|
project?: Project,
|
|
organization?: Organization,
|
|
features?: {
|
|
auth?: boolean
|
|
authProviders?: boolean
|
|
edgeFunctions?: boolean
|
|
storage?: boolean
|
|
invoices?: boolean
|
|
legacyJwtKeys?: boolean
|
|
logDrains?: boolean
|
|
billing?: boolean
|
|
}
|
|
): ProductMenuGroup[] => {
|
|
if (!IS_PLATFORM) {
|
|
return [
|
|
{
|
|
title: 'Configuration',
|
|
items: [
|
|
{
|
|
name: `Log Drains`,
|
|
key: `log-drains`,
|
|
url: `/project/${ref}/settings/log-drains`,
|
|
items: [],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
}
|
|
|
|
const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
|
|
|
|
const legacyJwtKeysEnabled = features?.legacyJwtKeys ?? true
|
|
const billingEnabled = features?.billing ?? true
|
|
|
|
return [
|
|
{
|
|
title: 'Configuration',
|
|
items: [
|
|
{
|
|
name: 'General',
|
|
key: 'general',
|
|
url: `/project/${ref}/settings/general`,
|
|
items: [],
|
|
},
|
|
{
|
|
name: 'Compute and Disk',
|
|
key: 'compute-and-disk',
|
|
url: `/project/${ref}/settings/compute-and-disk`,
|
|
items: [],
|
|
disabled: !isProjectActive,
|
|
},
|
|
{
|
|
name: 'Infrastructure',
|
|
key: 'infrastructure',
|
|
url: `/project/${ref}/settings/infrastructure`,
|
|
items: [],
|
|
disabled: !isProjectActive,
|
|
},
|
|
|
|
{
|
|
name: 'Integrations',
|
|
key: 'integrations',
|
|
url: `/project/${ref}/settings/integrations`,
|
|
items: [],
|
|
disabled: !isProjectActive,
|
|
},
|
|
|
|
{
|
|
name: 'API Keys',
|
|
key: 'api-keys',
|
|
url: `/project/${ref}/settings/api-keys/new`,
|
|
items: [],
|
|
disabled: !isProjectActive,
|
|
},
|
|
{
|
|
name: 'JWT Keys',
|
|
key: 'jwt',
|
|
url: legacyJwtKeysEnabled
|
|
? `/project/${ref}/settings/jwt`
|
|
: `/project/${ref}/settings/jwt/signing-keys`,
|
|
items: [],
|
|
disabled: !isProjectActive,
|
|
},
|
|
|
|
{
|
|
name: `Log Drains`,
|
|
key: `log-drains`,
|
|
url: `/project/${ref}/settings/log-drains`,
|
|
items: [],
|
|
disabled: !isProjectActive,
|
|
},
|
|
{
|
|
name: 'Add Ons',
|
|
key: 'addons',
|
|
url: `/project/${ref}/settings/addons`,
|
|
items: [],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Integrations',
|
|
items: [
|
|
{
|
|
name: 'Data API',
|
|
key: 'api',
|
|
url: `/project/${ref}/integrations/data_api/overview`,
|
|
items: [],
|
|
rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
|
|
disabled: !isProjectActive,
|
|
},
|
|
{
|
|
name: 'Vault',
|
|
key: 'vault',
|
|
url: `/project/${ref}/integrations/vault/overview`,
|
|
items: [],
|
|
rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
|
|
label: 'Beta',
|
|
disabled: !isProjectActive,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Billing',
|
|
items: [
|
|
...(billingEnabled
|
|
? [
|
|
{
|
|
name: 'Subscription',
|
|
key: 'subscription',
|
|
url: `/org/${organization?.slug}/billing`,
|
|
items: [],
|
|
rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
name: 'Usage',
|
|
key: 'usage',
|
|
url: `/org/${organization?.slug}/usage?projectRef=${ref}`,
|
|
items: [],
|
|
rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
|
|
},
|
|
],
|
|
},
|
|
]
|
|
}
|