index.tsx58 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { useParams } from 'common'
3	import { useMemo } from 'react'
4	import { Separator } from 'ui'
5
6	import {
7	ApiKeysCreateCallout,
8	ApiKeysFeedbackBanner,
9	} from '@/components/interfaces/APIKeys/ApiKeysIllustrations'
10	import { PublishableAPIKeys } from '@/components/interfaces/APIKeys/PublishableAPIKeys'
11	import { SecretAPIKeys } from '@/components/interfaces/APIKeys/SecretAPIKeys'
12	import ApiKeysLayout from '@/components/layouts/APIKeys/APIKeysLayout'
13	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
14	import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
15	import { DisableInteraction } from '@/components/ui/DisableInteraction'
16	import { useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
17	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
18	import type { NextPageWithLayout } from '@/types'
19
20	const ApiKeysNewPage: NextPageWithLayout = () => {
21	const { ref: projectRef } = useParams()
22	const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
23	const { data: apiKeysData = [] } = useAPIKeysQuery(
24	{
25	projectRef,
26	reveal: false,
27	},
28	{ enabled: canReadAPIKeys }
29	)
30
31	const newApiKeys = useMemo(
32	() => apiKeysData.filter(({ type }) => type === 'publishable' || type === 'secret'),
33	[apiKeysData]
34	)
35	const hasNewApiKeys = newApiKeys.length > 0
36
37	return (
38	<>
39	{canReadAPIKeys && !hasNewApiKeys && <ApiKeysCreateCallout />}
40	{hasNewApiKeys && <ApiKeysFeedbackBanner />}
41	<DisableInteraction disabled={!hasNewApiKeys} className="flex flex-col gap-8">
42	<PublishableAPIKeys />
43	<Separator />
44	<SecretAPIKeys />
45	</DisableInteraction>
46	</>
47	)
48	}
49
50	ApiKeysNewPage.getLayout = (page) => (
51	<DefaultLayout>
52	<SettingsLayout title="api keys">
53	<ApiKeysLayout>{page}</ApiKeysLayout>
54	</SettingsLayout>
55	</DefaultLayout>
56	)
57
58	export default ApiKeysNewPage