index.tsx91 lines · main

1	import { LOCAL_STORAGE_KEYS, useParams } from 'common'
2	import { useState } from 'react'
3	import { PageContainer } from 'ui-patterns/PageContainer'
4	import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
5
6	import { TableList } from '@/components/interfaces/Database/Tables/TableList'
7	import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
8	import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
9	import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
10	import DefaultLayout from '@/components/layouts/DefaultLayout'
11	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
12	import { AutoEnableRLSNotice } from '@/components/ui/AutoEnableRLSNotice'
13	import { Entity, isTableLike, postgresTableToEntity } from '@/data/table-editor/table-editor-types'
14	import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
15	import { useTableEditorStateSnapshot } from '@/state/table-editor'
16	import { TableEditorTableStateContextProvider } from '@/state/table-editor-table'
17	import type { NextPageWithLayout } from '@/types'
18
19	const DatabaseTables: NextPageWithLayout = () => {
20	const { ref: projectRef } = useParams()
21	const snap = useTableEditorStateSnapshot()
22	const [selectedTableToEdit, setSelectedTableToEdit] = useState<Entity>()
23
24	const [isAutoEnableRLSMinimized] = useLocalStorageQuery(
25	LOCAL_STORAGE_KEYS.RLS_EVENT_TRIGGER_BANNER_DISMISSED(projectRef ?? ''),
26	false
27	)
28
29	return (
30	<>
31	<PageLayout
32	title="Database Tables"
33	size="large"
34	primaryActions={isAutoEnableRLSMinimized && <AutoEnableRLSNotice iconOnly />}
35	>
36	<PageContainer size="large">
37	<PageSection>
38	{!isAutoEnableRLSMinimized && <AutoEnableRLSNotice />}
39
40	<PageSectionContent>
41	<TableList
42	onAddTable={snap.onAddTable}
43	onEditTable={(table) => {
44	setSelectedTableToEdit(postgresTableToEntity(table))
45	snap.onEditTable()
46	}}
47	onDeleteTable={(table) => {
48	setSelectedTableToEdit(postgresTableToEntity(table))
49	snap.onDeleteTable()
50	}}
51	onDuplicateTable={(table) => {
52	setSelectedTableToEdit(postgresTableToEntity(table))
53	snap.onDuplicateTable()
54	}}
55	/>
56	</PageSectionContent>
57	</PageSection>
58	</PageContainer>
59	</PageLayout>
60
61	{projectRef !== undefined &&
62	selectedTableToEdit !== undefined &&
63	isTableLike(selectedTableToEdit) && (
64	<TableEditorTableStateContextProvider
65	key={`table-editor-table-${selectedTableToEdit.id}`}
66	projectRef={projectRef}
67	table={selectedTableToEdit}
68	>
69	<DeleteConfirmationDialogs selectedTable={selectedTableToEdit} />
70	</TableEditorTableStateContextProvider>
71	)}
72
73	<SidePanelEditor
74	includeColumns
75	selectedTable={
76	selectedTableToEdit !== undefined && isTableLike(selectedTableToEdit)
77	? selectedTableToEdit
78	: undefined
79	}
80	/>
81	</>
82	)
83	}
84
85	DatabaseTables.getLayout = (page) => (
86	<DefaultLayout>
87	<DatabaseLayout title="Tables">{page}</DatabaseLayout>
88	</DefaultLayout>
89	)
90
91	export default DatabaseTables