konnosDashboard
TableEditorLayout.tsx78 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { LOCAL_STORAGE_KEYS, useParams } from 'common'
3import { PropsWithChildren, useEffect } from 'react'
4
5import { ProjectLayoutWithAuth } from '../ProjectLayout'
6import { SaveQueueActionBar } from '@/components/grid/components/footer/operations/SaveQueueActionBar'
7import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
8import { BannerTableEditorQueueOperations } from '@/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations'
9import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
10import NoPermission from '@/components/ui/NoPermission'
11import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
12import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
13
14export const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
15 const { ref } = useParams()
16 const { addBanner, dismissBanner } = useBannerStack()
17 const isTableQueueOperationsEnabled = useIsQueueOperationsEnabled()
18
19 const [isTableEditorQueueOperationsBannerDismissed] = useLocalStorageQuery(
20 LOCAL_STORAGE_KEYS.TABLE_EDITOR_QUEUE_OPERATIONS_BANNER_DISMISSED(ref ?? ''),
21 false
22 )
23
24 const { can: canReadTables, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions(
25 PermissionAction.TENANT_SQL_ADMIN_READ,
26 'tables'
27 )
28
29 const { can: canWriteTables } = useAsyncCheckPermissions(
30 PermissionAction.TENANT_SQL_ADMIN_WRITE,
31 'tables'
32 )
33
34 useEffect(() => {
35 if (!isPermissionsLoaded) return
36
37 if (
38 canWriteTables &&
39 !isTableEditorQueueOperationsBannerDismissed &&
40 !isTableQueueOperationsEnabled
41 ) {
42 addBanner({
43 id: 'table-editor-queue-operations-banner',
44 priority: 2,
45 isDismissed: false,
46 content: <BannerTableEditorQueueOperations />,
47 })
48 } else {
49 dismissBanner('table-editor-queue-operations-banner')
50 }
51
52 return () => {
53 dismissBanner('table-editor-queue-operations-banner')
54 }
55 }, [
56 addBanner,
57 dismissBanner,
58 isPermissionsLoaded,
59 canWriteTables,
60 isTableEditorQueueOperationsBannerDismissed,
61 isTableQueueOperationsEnabled,
62 ])
63
64 if (isPermissionsLoaded && !canReadTables) {
65 return (
66 <ProjectLayoutWithAuth isBlocking={false}>
67 <NoPermission isFullPage resourceText="view tables from this project" />
68 </ProjectLayoutWithAuth>
69 )
70 }
71
72 return (
73 <>
74 {children}
75 <SaveQueueActionBar />
76 </>
77 )
78}