[id].tsx61 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { useParams } from 'common'
3	import { PageContainer, PageSection, PageSectionContent, ShimmeringLoader } from 'ui-patterns'
4
5	import { PublicationsTables } from '@/components/interfaces/Database/Publications/PublicationsTables'
6	import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
7	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
8	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
9	import { NoPermission } from '@/components/ui/NoPermission'
10	import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query'
11	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
12	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
13	import type { NextPageWithLayout } from '@/types'
14
15	const DatabasePublications: NextPageWithLayout = () => {
16	const { ref, id } = useParams()
17	const { data: project } = useSelectedProjectQuery()
18	const { can: canViewPublications, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions(
19	PermissionAction.TENANT_SQL_ADMIN_READ,
20	'publications'
21	)
22
23	const { data: publications = [], isPending } = useDatabasePublicationsQuery({
24	projectRef: project?.ref,
25	connectionString: project?.connectionString,
26	})
27	const selectedPublication = publications.find((pub) => pub.id === Number(id))
28
29	if (isPermissionsLoaded && !canViewPublications) {
30	return <NoPermission isFullPage resourceText="view database publications" />
31	}
32
33	return (
34	<PageLayout
35	title={isPending ? <ShimmeringLoader className="w-40" /> : (selectedPublication?.name ?? '')}
36	breadcrumbs={[
37	{
38	label: 'Publications',
39	href: `/project/${ref}/database/publications`,
40	},
41	]}
42	size="large"
43	>
44	<PageContainer size="large">
45	<PageSection>
46	<PageSectionContent>
47	<PublicationsTables />
48	</PageSectionContent>
49	</PageSection>
50	</PageContainer>
51	</PageLayout>
52	)
53	}
54
55	DatabasePublications.getLayout = (page) => (
56	<DefaultLayout>
57	<DatabaseLayout title="Publications">{page}</DatabaseLayout>
58	</DefaultLayout>
59	)
60
61	export default DatabasePublications