Files
supabase/studio/components/grid/services/row/SqlRowService.ts
T
8057309e51 chore: upgrade next 13 + react 18 (#17839)
* update deps + image codemod (studio)

* update next links (studio)

* update deps

* update links (ui)

* remove next-transpile-modules

* move next-themes dependency

* chore: update ConfirmDialog

* chore: remove old ConfirmModal js file. migrated to TS

* dependency wrangling

* remove empty page

* update next links (www)

* First run bump react-data-grid-v7 beta 4

* fix package-lock.json

* more deps wrangling

* update recharts

* update sentry options

* fix some broken things in www

* studio fixes

* fix graphiql

* fix studio build

* fix menu hydration

* small build error

* update turbo

* fix www typescript errors

* docs image codemod

* links codemod docs

* fix docs typescript errors

* move useConsent to ui to prevent circular deps

* Fix links

* Fix homepage

* Fix links

* move studio/ to apps/

* Revert "move studio/ to apps/"

This reverts commit 1b0a985fcb.

* disable outputFileTracingRoot

* remove outputFileTracingRoot

* fix homepage product cards

* fix PrivacySettings links

* Fix links

* Fix the build for www.

* Minor fixes for JWTGenerator.

* Fix the docs and ui tests.

* Revert codehike back to 0.8.3

* remove ConfirmAlert()

* reenable babel because mobx hates me

* fix blog image and comparison page avatar

* Fix svg errors

* update image synthax

* Fix code hike

* Move the button in a div so that it doesn't inherit its parent height and make the button look weird.

* When components are defined in a component, they get recreated on each render. This makes them unstable in certain cases and causes infinite rerenders.

* Replace the next/head usage with next/script.

* Chore/upgrade next 13 fix table editor (#18431)

* fix table editor styling and fix row deletion logic

* Fix deleting selected rows from header, and fix checkboxes not clearing up

* Fix deleting all rows when filter applied, and fix deleting all rows

* Fix grid size styling issue

* Fix TS error

* Hydration errors

* studio org pages fixes

* fix more studio links

* audit logs fixes

* dropdown icon styling fixes

* fix some images in www

* upgrade to next 14

* try new sentry wrapper for api

* see if this is even invoked

* Revert "see if this is even invoked"

This reverts commit 86c3973ffa.

* Revert "try new sentry wrapper for api"

This reverts commit f67623ebad.

* Revert "upgrade to next 14"

This reverts commit a24dd6131e.

* chore: allow node version 19/20

* Try to fix the LogTable so that it renders with the newer "react-data-grid" version.

* Fix type errors in the log renderer code.

* Fix the replication screen.

* Add the CSS for the GraphiQL.

* Fix SQL editor results rendering

* Lint

* Fix SQL editor results height issue

* Fix auth RLS not invalidating RQ when toggling RLS

* Fix database tables new/edit column regressed

* Fix migrations page empty state if migrations schema not yet created

* Fix API side panel docs temp remove postgrest text for column description PK and FK

* Fix + improve timeout handling in SQL editor

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2023-10-31 05:51:46 +00:00

240 lines
7.5 KiB
TypeScript

import { IRowService } from '.'
import { Filter, ServiceError, Sort, SupaRow, SupaTable } from '../../types'
import { ERROR_PRIMARY_KEY_NOTFOUND, SupabaseGridQueue } from '../../constants'
import Query from '../../query'
import { isNumericalColumn } from '../../utils'
export class SqlRowService implements IRowService {
protected query = new Query()
constructor(
protected table: SupaTable,
protected onSqlQuery: (query: string) => Promise<{ data?: any; error?: any }>,
protected onError: (error: any) => void
) {}
async count(filters: Filter[]) {
let queryChains = this.query.from(this.table.name, this.table.schema ?? undefined).count()
filters
.filter((x) => x.value && x.value != '')
.forEach((x) => {
const value = this.formatFilterValue(x)
queryChains = queryChains.filter(x.column, x.operator, value)
})
const query = queryChains.toSql()
const { data, error } = await this.onSqlQuery(query)
if (error) {
return { error }
} else {
if (data?.length == 1) {
return { data: data[0].count }
} else {
return { error: { message: 'fetch rows count failed' } }
}
}
}
async delete(rows: SupaRow[]) {
const { primaryKeys, error } = this.getPrimaryKeys()
if (error) return { error }
let queryChains = this.query.from(this.table.name, this.table.schema ?? undefined).delete()
primaryKeys!.forEach((key) => {
const primaryKeyValues = rows.map((x) => x[key])
queryChains = queryChains.filter(key, 'in', primaryKeyValues)
})
const query = queryChains.toSql()
return await this.onSqlQuery(query)
}
// For deleting all rows based on a given filter
async deleteAll(filters: Filter[]) {
let queryChains = this.query.from(this.table.name, this.table.schema ?? undefined).delete()
filters
.filter((x) => x.value && x.value !== '')
.forEach((x) => {
const value = this.formatFilterValue(x)
queryChains = queryChains.filter(x.column, x.operator, value)
})
const query = queryChains.toSql()
return await this.onSqlQuery(query)
}
// For deleting all rows without any filter (clear entire table)
async truncate() {
let queryChains = this.query.from(this.table.name, this.table.schema ?? undefined).truncate()
const query = queryChains.toSql()
return await this.onSqlQuery(query)
}
async fetchPage(page: number, rowsPerPage: number, filters: Filter[], sorts: Sort[]) {
const pageFromZero = page > 0 ? page - 1 : page
const from = pageFromZero * rowsPerPage
const to = (pageFromZero + 1) * rowsPerPage - 1
const enumArrayColumns = this.table.columns
.filter((column) => {
return (column?.enum ?? []).length > 0 && column.dataType.toLowerCase() === 'array'
})
.map((column) => column.name)
let queryChains =
enumArrayColumns.length > 0
? this.query
.from(this.table.name, this.table.schema ?? undefined)
.select(`*,${enumArrayColumns.map((x) => `"${x}"::text[]`).join(',')}`)
: this.query.from(this.table.name, this.table.schema ?? undefined).select()
filters
.filter((x) => x.value && x.value != '')
.forEach((x) => {
const value = this.formatFilterValue(x)
queryChains = queryChains.filter(x.column, x.operator, value)
})
sorts.forEach((x) => {
queryChains = queryChains.order(x.column, x.ascending, x.nullsFirst)
})
const query = queryChains.range(from, to).toSql()
const { data, error } = await this.onSqlQuery(query)
if (error) {
this.onError(error)
return { data: { rows: [] } }
} else if (Array.isArray(data)) {
const rows = data?.map((x: any, index: number) => {
return { idx: index, ...x } as SupaRow
})
return { data: { rows } }
} else {
console.error('Fetch page:', data)
this.onError({ message: 'Data received is not formatted properly' })
return { data: { rows: [] } }
}
}
async fetchAllData(filters: Filter[], sorts: Sort[]) {
// Paginate the request for very large tables to prevent stalling of API
const rows: any[] = []
let queryChains = this.query.from(this.table.name, this.table.schema ?? undefined).select()
filters
.filter((x) => x.value && x.value != '')
.forEach((x) => {
const value = this.formatFilterValue(x)
queryChains = queryChains.filter(x.column, x.operator, value)
})
sorts.forEach((x) => {
queryChains = queryChains.order(x.column, x.ascending, x.nullsFirst)
})
// Starting from page 0, fetch 500 records per call
let page = -1
let from = 0
let to = 0
let pageData = []
const rowsPerPage = 500
await (async () => {
do {
page += 1
from = page * rowsPerPage
to = (page + 1) * rowsPerPage - 1
const query = queryChains.range(from, to).toSql()
const { data, error } = await this.onSqlQuery(query)
if (error) {
this.onError(error)
return { data: { rows: [] } }
} else {
rows.push(...data)
pageData = data
}
} while (pageData.length === rowsPerPage)
})()
return rows
}
update(
row: SupaRow,
originalRow: SupaRow,
changedColumn?: string,
onRowUpdate?: (value: any) => void
) {
const { primaryKeys, error } = this.getPrimaryKeys()
if (error) {
return { error }
}
const { idx, ...value } = row
// Optimistic rendering
if (onRowUpdate) onRowUpdate({ row: value, idx })
const matchValues: any = {}
primaryKeys!.forEach((key) => {
matchValues[key] = row[key]
// fix: https://github.com/supabase/grid/issues/94
// remove primary key from updated value object
delete value[key]
})
const enumArrayColumns = this.table.columns
.filter((column) => {
return (column?.enum ?? []).length > 0 && column.dataType.toLowerCase() === 'array'
})
.map((column) => column.name)
const query = this.query
.from(this.table.name, this.table.schema ?? undefined)
.update(
changedColumn
? {
[changedColumn]: value[changedColumn],
}
: value,
{ returning: true, enumArrayColumns }
)
.match(matchValues)
.toSql()
SupabaseGridQueue.add(async () => {
const { data, error } = await this.onSqlQuery(query)
if (error) throw error
if (onRowUpdate) onRowUpdate({ row: data[0], idx })
}).catch((error) => {
const { idx, ...originalRowData } = originalRow
// Revert optimistic rendering if any errors
if (onRowUpdate) onRowUpdate({ row: originalRowData, idx })
this.onError(error)
})
return {}
}
getPrimaryKeys(): { primaryKeys?: string[]; error?: ServiceError } {
const pkColumns = this.table.columns.filter((x) => x.isPrimaryKey)
if (!pkColumns || pkColumns.length == 0) {
return { error: { message: ERROR_PRIMARY_KEY_NOTFOUND } }
}
return { primaryKeys: pkColumns.map((x) => x.name) }
}
/**
* temporary fix until we impliment a better filter UI
* which validate input value base on the column type
*/
formatFilterValue(filter: Filter) {
const column = this.table.columns.find((x) => x.name == filter.column)
if (column && isNumericalColumn(column.format)) {
const numberValue = Number(filter.value)
if (Number.isNaN(numberValue)) return filter.value
else return Number(filter.value)
}
return filter.value
}
}