konnosDashboard
BrivenGrid.tsx117 lines · main
1// @ts-nocheck
2import { keepPreviousData } from '@tanstack/react-query'
3import { useParams } from 'common'
4import { PropsWithChildren, useRef } from 'react'
5import { DataGridHandle } from 'react-data-grid'
6
7import { Shortcuts } from './components/common/Shortcuts'
8import { Footer } from './components/footer/Footer'
9import { Grid } from './components/grid/Grid'
10import { Header, HeaderProps } from './components/header/Header'
11import { useTableSort } from './hooks/useTableSort'
12import { validateMsSqlSorting } from './MsSqlValidation'
13import { GridProps } from './types'
14import { formatGridDataWithOperationValues } from './utils/queueOperationUtils'
15import { isMsSqlForeignTable } from '@/data/table-editor/table-editor-types'
16import { useTableRowsQuery } from '@/data/table-rows/table-rows-query'
17import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
18import { RoleImpersonationState } from '@/lib/role-impersonation'
19import { EMPTY_ARR } from '@/lib/void'
20import { useRoleImpersonationStateSnapshot } from '@/state/role-impersonation-state'
21import { useTableEditorStateSnapshot } from '@/state/table-editor'
22import { QueuedOperation } from '@/state/table-editor-operation-queue.types'
23import { useTableEditorTableStateSnapshot } from '@/state/table-editor-table'
24
25export const BrivenGrid = ({
26 customHeader,
27 gridProps,
28 children,
29}: PropsWithChildren<
30 Pick<HeaderProps, 'customHeader'> & {
31 gridProps?: GridProps
32 }
33>) => {
34 const { id: _id } = useParams()
35 const tableId = _id ? Number(_id) : undefined
36
37 const { data: project } = useSelectedProjectQuery()
38 const tableEditorSnap = useTableEditorStateSnapshot()
39 const snap = useTableEditorTableStateSnapshot()
40 const preflightCheck = !tableEditorSnap.tablesToIgnorePreflightCheck.includes(tableId ?? -1)
41
42 const gridRef = useRef<DataGridHandle>(null)
43
44 const filters = snap.filters
45 const { sorts, onApplySorts } = useTableSort()
46
47 const roleImpersonationState = useRoleImpersonationStateSnapshot()
48
49 const msSqlWarning = isMsSqlForeignTable(snap.originalTable)
50 ? validateMsSqlSorting({ filters, sorts, table: snap.originalTable })
51 : { warning: null }
52 const tableQueriesEnabled = msSqlWarning.warning === null
53
54 const {
55 data,
56 error,
57 isSuccess,
58 isError,
59 isPending: isLoading,
60 isRefetching,
61 } = useTableRowsQuery(
62 {
63 projectRef: project?.ref,
64 tableId,
65 sorts,
66 filters,
67 page: snap.page,
68 preflightCheck,
69 limit: tableEditorSnap.rowsPerPage,
70 roleImpersonationState: roleImpersonationState as RoleImpersonationState,
71 },
72 {
73 placeholderData: keepPreviousData,
74 enabled: tableQueriesEnabled,
75 retry: (_, error: any) => {
76 const doesNotExistError = error && error.message?.includes('does not exist')
77 if (doesNotExistError) onApplySorts([])
78 return false
79 },
80 }
81 )
82
83 const operations = (tableEditorSnap.operationQueue.operations as QueuedOperation[]).filter(
84 (op) => op.tableId === tableId
85 )
86 const baseRows = data?.rows ?? EMPTY_ARR
87 const rows = formatGridDataWithOperationValues({ operations, rows: baseRows })
88
89 return (
90 <div className="sb-grid h-full flex flex-col">
91 <Header
92 customHeader={customHeader}
93 isRefetching={isRefetching}
94 tableQueriesEnabled={tableQueriesEnabled}
95 />
96
97 {msSqlWarning.warning !== null && <msSqlWarning.Component />}
98
99 {children || (
100 <>
101 <Grid
102 ref={gridRef}
103 {...gridProps}
104 rows={rows}
105 error={error}
106 isDisabled={!tableQueriesEnabled}
107 isLoading={isLoading}
108 isSuccess={isSuccess}
109 isError={isError}
110 />
111 <Footer enableForeignRowsQuery={tableQueriesEnabled} />
112 <Shortcuts gridRef={gridRef} rows={rows} />
113 </>
114 )}
115 </div>
116 )
117}