mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 14:19:11 +03:00
Stojan DimitrovskiandIvan Vasilov
4945ba1861
* original files from previous PR * get rid of router in jwt-secrets to make it show up * rename jwt-secrets page to jwt-signing-keys * add jwt-signing-keys query * add legacy jwt signing keys query * wire-up JwtSecretKeysTable with queries * add jwt signing keys page to settings menu * deduplicate labels, descriptions, etc * add create, update jwt-signing-key mutations * update types * remove unused components, to be refactored later * make everything into a mostly working state * legacy migration added * put jwt keys page like api keys * fully migrate legacy jwt secret page * fix prettier * fix typecheck ts-expect-error * rm unneeded file * Fix compile errors. * Rename the files and move them to the same folder. * Merge the two constant files. * Fix the imports. * Fix a bug in the API keys page when opening it in a new tab. * Change the page to be at /signing-keys * Fix some minor types. * Break apart some of the components in the signing keys UI. * Use a feature banner for the initial action. * Make a create key dialog and move functionality there. * Fix some cosmetic issues. * Minor cosmetic fixes. * Remove extra keys in RQ cache. * Add a missing link * Add a banner when the feature flag is false. * Minor type fix. * more tiny type fix * fix error on create standby key * add alert to prevent revoking legacy jwt secret without disabling legacy api keys first --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { useParams } from 'common'
|
|
import Link from 'next/link'
|
|
import { Button, Badge, Menu } from 'ui'
|
|
import { ArrowUpRight } from 'lucide-react'
|
|
import { ProductMenu } from 'components/ui/ProductMenu'
|
|
import type { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
|
|
import { Sidebar } from 'components/interfaces/Sidebar'
|
|
|
|
export const ApiKeysMoved = () => {
|
|
const { ref: projectRef } = useParams()
|
|
|
|
// Create menu structure matching the ProductMenu expected format
|
|
const mockMenu: ProductMenuGroup[] = [
|
|
{
|
|
title: 'Project Settings',
|
|
items: [
|
|
{ name: 'General', key: 'general', url: '#' },
|
|
{ name: 'Compute and Disk', key: 'compute-and-disk', url: '#' },
|
|
{ name: 'Infrastructure', key: 'infrastructure', url: '#' },
|
|
{ name: 'Integrations', key: 'integrations', url: '#' },
|
|
{ name: 'API Keys', key: 'api-keys', url: '#', label: 'NEW' },
|
|
{ name: 'JWT Keys', key: 'jwt-keys', url: '#', label: 'NEW' },
|
|
{ name: 'Add Ons', key: 'addons', url: '#' },
|
|
{
|
|
name: 'Vault',
|
|
key: 'vault',
|
|
url: '#',
|
|
label: 'Alpha',
|
|
rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Configuration',
|
|
items: [{ name: 'Database', key: 'database', url: '#' }],
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="pb-36 pt-10 relative w-full flex flex-col xl:flex-row border xl:py-10 px-10 rounded-md overflow-hidden">
|
|
<div className="flex flex-col gap-2 z-[2]">
|
|
<p className="text-sm text-foreground">API keys and JWT settings have moved</p>
|
|
<p className="text-sm text-foreground-lighter mb-4">
|
|
They can now be found in their own respective pages.
|
|
</p>
|
|
<div className="flex flex-row gap-4">
|
|
<Link href={`/project/${projectRef}/settings/api-keys`}>
|
|
<Button type="default">Go to API Keys</Button>
|
|
</Link>
|
|
<Link href={`/project/${projectRef}/settings/api-keys`}>
|
|
<Button type="default">Go to JWT Keys</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Menu illustration using the actual ProductMenu component */}
|
|
|
|
<div className="absolute right-20 -top-[80px] w-fit scale-80 origin-top-right">
|
|
<div className="absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-r from-transparent to-background-200/75 z-10" />
|
|
|
|
<div className="bg-studio-sidebar border rounded-md overflow-hidden shadow-sm opacity-75 flex flex-row w-[280px]">
|
|
<div className="opacity-50">
|
|
<Sidebar />
|
|
</div>
|
|
<ProductMenu page="api-keys" menu={mockMenu} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|