Files
supabase/apps/studio/components/layouts/APIKeys/APIKeysLayout.tsx
Ali Waseem e8f9359a98 fix(studio): hide legacy API keys on High Availability projects (#49552)
Multigres (High Availability) projects ship with legacy API keys
disabled and the management API rejects re-enabling them, so the
Dashboard should not surface them at all.

Hides the "Legacy anon, service_role API keys" tab, renders an empty
state on the legacy page for direct URL access, and drops the "Copy
anonymous API key" / "Copy service API key" commands from the command
menu. Non-HA projects are unchanged.

Fixes FE-4276

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* High Availability projects now hide legacy API key navigation and
commands.
* Legacy API key settings display an unavailable message for High
Availability projects.
  * Publishable and secret key options remain available where supported.
* Other projects continue to provide access to supported legacy API key
options.

* **Bug Fixes**
* Prevented unsupported legacy API key controls from appearing on High
Availability projects.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-26 10:17:28 +00:00

46 lines
1.4 KiB
TypeScript

import { useParams } from 'common'
import { PropsWithChildren } from 'react'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import { ScaffoldContainer } from '@/components/layouts/Scaffold'
import { DocsButton } from '@/components/ui/DocsButton'
import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { DOCS_URL } from '@/lib/constants'
const ApiKeysLayout = ({ children }: PropsWithChildren) => {
const { ref: projectRef } = useParams()
const { isHighAvailability } = useHighAvailability()
const navigationItems = [
{
label: 'Publishable and secret API keys',
href: `/project/${projectRef}/settings/api-keys`,
id: 'new-keys',
},
...(isHighAvailability
? []
: [
{
label: 'Legacy anon, service_role API keys',
href: `/project/${projectRef}/settings/api-keys/legacy`,
id: 'legacy-keys',
},
]),
]
return (
<PageLayout
title="API Keys"
subtitle="Configure API keys to securely control access to your project"
navigationItems={navigationItems}
secondaryActions={<DocsButton href={`${DOCS_URL}/guides/api/api-keys`} />}
>
<ScaffoldContainer className="flex flex-col py-8 gap-8" bottomPadding>
{children}
</ScaffoldContainer>
</PageLayout>
)
}
export default ApiKeysLayout