feat/export-as-sql (supabase#28670)

* feat/export-as-sql * Rename export items * EntityListItem change dropdown menu items for exporting data to a sub menu * Set width * Pull out SQL formatting logic into formatTableRowsToSQL and start a test * Fix export function * Do not stringify null values * Add comment * Add blank test cases * Wrap up formatTableRowsToSQL * Add max export row count validation to exporting actions in EntityListItem + add link to pg _dump docs --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

Author: saltcod

apps/studio/components/grid/components/header/Header.tsx

@@ -9,6 +9,7 @@ import toast from 'react-hot-toast'
 
 import { useDispatch, useTrackedState } from 'components/grid/store/Store'
 import type { Filter, Sort, SupaTable } from 'components/grid/types'
+import { formatTableRowsToSQL } from 'components/interfaces/TableGridEditor/TableEntity.utils'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useTableRowsCountQuery } from 'data/table-rows/table-rows-count-query'
 import { fetchAllTableRows, useTableRowsQuery } from 'data/table-rows/table-rows-query'
@@ -21,19 +22,21 @@ import {
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import {
  Button,
+ cn,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
- cn,
 } from 'ui'
 import FilterPopover from './filter/FilterPopover'
 import { SortPopover } from './sort'
+import { Markdown } from 'components/interfaces/Markdown'
 
 // [Joshen] CSV exports require this guard as a fail-safe if the table is
 // just too large for a browser to keep all the rows in memory before
 // exporting. Either that or export as multiple CSV sheets with max n rows each
-const MAX_EXPORT_ROW_COUNT = 500000
+export const MAX_EXPORT_ROW_COUNT = 500000
+export const MAX_EXPORT_ROW_COUNT_MESSAGE = `Sorry! We're unable to support exporting row counts larger than ${MAX_EXPORT_ROW_COUNT.toLocaleString()} at the moment. Alternatively, you may consider using [pg_dump](https://supabase.com/docs/reference/cli/supabase-db-dump) via our CLI instead.`
 
 export type HeaderProps = {
  table: SupaTable
@@ -288,9 +291,7 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
  setIsExporting(true)
 
  if (allRowsSelected && totalRows > MAX_EXPORT_ROW_COUNT) {
- toast.error(
- `Sorry! We're unable to support exporting of CSV for row counts larger than ${MAX_EXPORT_ROW_COUNT.toLocaleString()} at the moment.`
- )
+ toast.error(<Markdown content={MAX_EXPORT_ROW_COUNT_MESSAGE} className="text-foreground" />)
  return setIsExporting(false)
  }
 
@@ -327,6 +328,35 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
  setIsExporting(false)
  }
 
+ async function onRowsExportSQL() {
+ setIsExporting(true)
+
+ if (allRowsSelected && totalRows > MAX_EXPORT_ROW_COUNT) {
+ toast.error(<Markdown content={MAX_EXPORT_ROW_COUNT_MESSAGE} className="text-foreground" />)
+ return setIsExporting(false)
+ }
+
+ if (!project) {
+ toast.error('Project is required')
+ return setIsExporting(false)
+ }
+
+ const rows = allRowsSelected
+ ? await fetchAllTableRows({
+ projectRef: project.ref,
+ connectionString: project.connectionString,
+ table,
+ filters,
+ sorts,
+ impersonatedRole: roleImpersonationState.role,
+ })
+ : allRows.filter((x) => selectedRows.has(x.idx))
+
+ const sqlStatements = formatTableRowsToSQL(table, rows)
+ const sqlData = new Blob([sqlStatements], { type: 'text/sql;charset=utf-8;' })
+ saveAs(sqlData, `${state.table!.name}_rows.sql`)
+ setIsExporting(false)
+ }
  function deselectRows() {
  dispatch({
  type: 'SELECTED_ROWS_CHANGE',
@@ -363,16 +393,26 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
  </div>
  <div className="h-[20px] border-r border-strong" />
  <div className="flex items-center gap-2">
- <Button
- type="primary"
- size="tiny"
- icon={<Download />}
- loading={isExporting}
- disabled={isExporting}
- onClick={onRowsExportCSV}
- >
- Export to CSV
- </Button>
+ <DropdownMenu>
+ <DropdownMenuTrigger>
+ <Button
+ type="primary"
+ size="tiny"
+ icon={<Download />}
+ loading={isExporting}
+ disabled={isExporting}
+ >
+ Export
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent className="w-40">
+ <DropdownMenuItem onClick={onRowsExportCSV}>
+ <span className="text-foreground-light">Export to CSV</span>
+ </DropdownMenuItem>
+ <DropdownMenuItem onClick={onRowsExportSQL}>Export to SQL</DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+
  {editable && (
  <Tooltip.Root delayDuration={0}>
  <Tooltip.Trigger asChild>

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx

@@ -187,7 +187,7 @@ const UtilityActions = ({
  {isFavorite ? 'Remove from' : 'Add to'} favorites
  </DropdownMenuItem>
  <DropdownMenuItem className="gap-x-2" onClick={prettifyQuery}>
- <AlignLeft size={14} strokeWidth={2} />
+ <AlignLeft size={14} strokeWidth={2} className="text-foreground-light" />
  Prettify SQL
  </DropdownMenuItem>
  </DropdownMenuContent>
@@ -243,7 +243,7 @@ const UtilityActions = ({
  type="text"
  onClick={prettifyQuery}
  className="px-1"
- icon={<AlignLeft strokeWidth={2} />}
+ icon={<AlignLeft strokeWidth={2} className="text-foreground-light" />}
  />
  </TooltipTrigger_Shadcn_>
  <TooltipContent_Shadcn_ side="bottom">Prettify SQL</TooltipContent_Shadcn_>

apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.test.ts

@@ -0,0 +1,115 @@
+import { formatTableRowsToSQL } from './TableEntity.utils'
+
+describe('TableEntity.utils: formatTableRowsToSQL', () => {
+ it('should format rows into a single SQL INSERT statement', () => {
+ const table = {
+ id: 1,
+ columns: [
+ { name: 'id', dataType: 'bigint', format: 'int8', position: 0 },
+ { name: 'name', dataType: 'text', format: 'text', position: 1 },
+ ],
+ name: 'people',
+ schema: 'public',
+ comment: undefined,
+ estimateRowCount: 1,
+ }
+ const rows = [
+ { id: 1, name: 'Person 1' },
+ { id: 2, name: 'Person 2' },
+ { id: 3, name: 'Person 3' },
+ ]
+
+ const result = formatTableRowsToSQL(table, rows)
+ const expected = `INSERT INTO "public"."people" ("id", "name") VALUES ('1', 'Person 1'), ('2', 'Person 2'), ('3', 'Person 3');`
+ expect(result).toBe(expected)
+ })
+
+ it('should not stringify null values', () => {
+ const table = {
+ id: 1,
+ columns: [
+ { name: 'id', dataType: 'bigint', format: 'int8', position: 0 },
+ { name: 'name', dataType: 'text', format: 'text', position: 1 },
+ ],
+ name: 'people',
+ schema: 'public',
+ comment: undefined,
+ estimateRowCount: 1,
+ }
+ const rows = [
+ { id: 1, name: 'Person 1' },
+ { id: 2, name: null },
+ { id: 3, name: 'Person 3' },
+ ]
+
+ const result = formatTableRowsToSQL(table, rows)
+ const expected = `INSERT INTO "public"."people" ("id", "name") VALUES ('1', 'Person 1'), ('2', null), ('3', 'Person 3');`
+ expect(result).toBe(expected)
+ })
+
+ it('should handle PG JSON and array columns', () => {
+ const table = {
+ id: 1,
+ columns: [
+ { name: 'id', dataType: 'bigint', format: 'int8', position: 0 },
+ { name: 'name', dataType: 'text', format: 'text', position: 1 },
+ { name: 'tags', dataType: 'ARRAY', format: '_text', position: 2 },
+ { name: 'metadata', dataType: 'jsonb', format: 'jsonb', position: 3 },
+ ],
+ name: 'demo',
+ schema: 'public',
+ comment: undefined,
+ estimateRowCount: 1,
+ }
+ const rows = [
+ {
+ idx: 1,
+ id: 2,
+ name: 'Person 1',
+ tags: ['tag-a', 'tag-c'],
+ metadata: '{"version": 1}',
+ },
+ ]
+ const result = formatTableRowsToSQL(table, rows)
+ const expected = `INSERT INTO "public"."demo" ("id", "name", "tags", "metadata") VALUES ('2', 'Person 1', '{"tag-a","tag-c"}', '{"version": 1}');`
+ expect(result).toBe(expected)
+ })
+
+ it('should return an empty string for empty rows', () => {
+ const table = {
+ id: 1,
+ columns: [
+ { name: 'id', dataType: 'bigint', format: 'int8', position: 0 },
+ { name: 'name', dataType: 'text', format: 'text', position: 1 },
+ ],
+ name: 'people',
+ schema: 'public',
+ comment: undefined,
+ estimateRowCount: 1,
+ }
+ const result = formatTableRowsToSQL(table, [])
+ expect(result).toBe('')
+ })
+
+ it('should remove the idx property', () => {
+ const table = {
+ id: 1,
+ columns: [
+ { name: 'id', dataType: 'bigint', format: 'int8', position: 0 },
+ { name: 'name', dataType: 'text', format: 'text', position: 1 },
+ ],
+ name: 'people',
+ schema: 'public',
+ comment: undefined,
+ estimateRowCount: 1,
+ }
+ const rows = [
+ { idx: 0, id: 1, name: 'Person 1' },
+ { idx: 1, id: 2, name: 'Person 2' },
+ ]
+
+ const result = formatTableRowsToSQL(table, rows)
+ const expected = `INSERT INTO "public"."people" ("id", "name") VALUES ('1', 'Person 1'), ('2', 'Person 2');`
+ expect(result).toBe(expected)
+ })
+})

apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.ts

@@ -1,3 +1,4 @@
+import { SupaTable } from 'components/grid/types'
 import { Lint } from '../../../data/lint/lint-query'
 
 export const getEntityLintDetails = (
@@ -22,3 +23,36 @@ export const getEntityLintDetails = (
  matchingLint,
  }
 }
+
+export const formatTableRowsToSQL = (table: SupaTable, rows: any[]) => {
+ if (rows.length === 0) return ''
+
+ const columns = table.columns.map((col) => `"${col.name}"`).join(', ')
+
+ const valuesSets = rows
+ .map((row) => {
+ const filteredRow = { ...row }
+ if ('idx' in filteredRow) delete filteredRow.idx
+
+ const values = Object.entries(filteredRow).map(([key, val]) => {
+ const { dataType, format } = table.columns.find((col) => col.name === key) ?? {}
+
+ // We only check for NULL, array and JSON types, everything else we stringify
+ // given that Postgres can implicitly cast the right type based on the column type
+ if (val === null) {
+ return 'null'
+ } else if (dataType === 'ARRAY') {
+ return `'${JSON.stringify(val).replace('[', '{').replace(/.$/, '}')}'`
+ } else if (format?.includes('json')) {
+ return `${JSON.stringify(val).replace(/\\"/g, '"').replace('"', "'").replace(/.$/, "'")}`
+ } else {
+ return `'${val}'`
+ }
+ })
+
+ return `(${values.join(', ')})`
+ })
+ .join(', ')
+
+ return `INSERT INTO "${table.schema}"."${table.name}" (${columns}) VALUES ${valuesSets};`
+}