mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
kemal.earth
8ffdcfc145
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Introduces UI for Scoped PAT's. ## Additional context WIP. Testing endpoints. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Scoped access tokens: create, view, delete, and manage granular resource/action permissions with custom expiry options and scoped creation flows. * New scoped token UI: modal/sheet creation flow, resource access selectors, permissions editor, and a scoped token list. * **UI Improvements** * Tabbed Classic vs Scoped tokens layout, refreshed tokens page, improved forms, search/filtering, and table tweaks. * **Bug Fixes / Maintenance** * New data hooks and utilities for scoped tokens and token handling. * **Removed** * Legacy account settings layout and legacy token banner. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { PropsWithChildren } from 'react'
|
|
|
|
import { useFlag } from 'common'
|
|
import { NavMenu, NavMenuItem } from 'ui'
|
|
import { PageContainer } from 'ui-patterns/PageContainer'
|
|
import {
|
|
PageHeader,
|
|
PageHeaderDescription,
|
|
PageHeaderMeta,
|
|
PageHeaderNavigationTabs,
|
|
PageHeaderSummary,
|
|
PageHeaderTitle,
|
|
} from 'ui-patterns/PageHeader'
|
|
|
|
const AccessTokensLayout = ({ children }: PropsWithChildren) => {
|
|
const router = useRouter()
|
|
const scopedTokensEnabled = useFlag('scopedPAT')
|
|
|
|
const navigationItems = [
|
|
{
|
|
label: 'Classic Tokens',
|
|
href: `/account/tokens`,
|
|
id: 'classic-tokens',
|
|
},
|
|
...(scopedTokensEnabled
|
|
? [
|
|
{
|
|
label: 'Scoped Tokens',
|
|
href: `/account/tokens/scoped`,
|
|
id: 'scoped-tokens',
|
|
},
|
|
]
|
|
: []),
|
|
]
|
|
|
|
const title = 'Access Tokens'
|
|
const description = 'Create and manage access tokens for API authentication.'
|
|
|
|
return (
|
|
<>
|
|
<PageHeader size="small">
|
|
<PageHeaderMeta>
|
|
<PageHeaderSummary>
|
|
<PageHeaderTitle>{title}</PageHeaderTitle>
|
|
<PageHeaderDescription>{description}</PageHeaderDescription>
|
|
</PageHeaderSummary>
|
|
</PageHeaderMeta>
|
|
{navigationItems.length > 0 && (
|
|
<PageHeaderNavigationTabs>
|
|
<NavMenu>
|
|
{navigationItems.map((item) => {
|
|
const isActive = router.asPath.split('?')[0] === item.href
|
|
return (
|
|
<NavMenuItem key={item.label} active={isActive}>
|
|
<Link href={item.href}>{item.label}</Link>
|
|
</NavMenuItem>
|
|
)
|
|
})}
|
|
</NavMenu>
|
|
</PageHeaderNavigationTabs>
|
|
)}
|
|
</PageHeader>
|
|
<PageContainer size="small" className="pt-8 pb-16">
|
|
{children}
|
|
</PageContainer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AccessTokensLayout
|