feat: Implement UI and API for inserting rows into tables.

Author: abdotop

api/routes.ts

@@ -34,6 +34,7 @@ import {
 import { decodeSession, decryptMessage, encryptMessage } from '/api/user.ts'
 import {
   fetchTablesData,
+  insertTableData,
   runSQL,
   SQLQueryError,
   updateTableData,
@@ -527,6 +528,19 @@ const defs = {
       rows: ARR(OBJ({}, 'A row of the result set'), 'The result set rows'),
     }),
   }),
+  'POST/api/deployment/table/insert': route({
+    authorize: withUserSession,
+    fn: (ctx, { deployment, table, data }) => {
+      const dep = withDeploymentTableAccess(ctx, deployment)
+      return insertTableData(dep, table, data)
+    },
+    input: OBJ({
+      deployment: STR("The deployment's URL"),
+      table: STR('The table name'),
+      data: OBJ({}, 'The row data to insert'),
+    }),
+    output: OBJ({}, 'The result of the insert'),
+  }),
   'POST/api/deployment/table/update': route({
     authorize: withUserSession,
     fn: (ctx, { deployment, table, pk, data }) => {

api/sql.ts

@@ -268,6 +268,44 @@ export const fetchTablesData = async (
   }
 }
 
+export const insertTableData = async (
+  deployment: Deployment,
+  table: string,
+  data: Record<string, unknown>,
+) => {
+  const { sqlEndpoint, sqlToken } = deployment
+  if (!sqlToken || !sqlEndpoint) {
+    throw Error('Missing SQL endpoint or token')
+  }
+  const projectFunctions = getProjectFunctions(deployment.projectId)
+  const transformedData = await applyWriteTransformers(
+    data,
+    deployment.projectId,
+    deployment.url,
+    table,
+    projectFunctions,
+  )
+  const columns = Object.keys(transformedData)
+  const values = Object.values(transformedData).map((v) => {
+    if (v === null) return 'NULL'
+    if (typeof v === 'string') return `'${v.replace(/'/g, "''")}'`
+    return String(v)
+  })
+  const query = `INSERT INTO ${table} (${columns.join(', ')}) VALUES (${
+    values.join(', ')
+  })`
+  const rows = await runSQL(sqlEndpoint, sqlToken, query)
+
+  // Apply read transformer pipeline
+  return await applyReadTransformers(
+    rows,
+    deployment.projectId,
+    deployment.url,
+    table,
+    projectFunctions,
+  )
+}
+
 export const updateTableData = async (
   deployment: Deployment,
   table: string,

web/pages/DeploymentPage.tsx

@@ -1717,10 +1717,125 @@ const LogDetails = () => {
   )
 }
 
+const InsertRow = () => {
+  const tableName = url.params.table || schema.data?.tables?.[0]?.table
+  const tableDef = schema.data?.tables?.find((t) => t.table === tableName)
+
+  if (!tableName || !tableDef) {
+    return (
+      <div class='p-4 text-base-content/60'>
+        Select a table from the schema panel first.
+      </div>
+    )
+  }
+
+  const onInsert = async (e: Event) => {
+    e.preventDefault()
+    const form = e.currentTarget as HTMLFormElement
+    const formData = new FormData(form)
+    const data: Record<string, unknown> = {}
+
+    for (const [key, val] of formData.entries()) {
+      const col = tableDef.columns.find((c) => c.name === key)
+      if (!col) continue
+      const type = col.type
+      if (
+        type.includes('Int') || type.includes('Float') ||
+        type.includes('Decimal')
+      ) {
+        data[key] = Number(val)
+      } else if (type.includes('Bool')) {
+        data[key] = val === 'on'
+      } else if (
+        type.includes('JSON') || type.includes('Array') || type.includes('Map')
+      ) {
+        try {
+          data[key] = JSON.parse(val as string)
+        } catch {
+          data[key] = val
+        }
+      } else {
+        data[key] = val
+      }
+    }
+
+    try {
+      await api['POST/api/deployment/table/insert'].fetch({
+        deployment: url.params.dep!,
+        table: tableName,
+        data,
+      })
+      toast('Row inserted successfully')
+      tableData.fetch()
+      navigate({ params: { drawer: null } })
+    } catch (err) {
+      toast(err instanceof Error ? err.message : String(err), 'error')
+    }
+  }
+
+  return (
+    <div class='flex flex-col h-full bg-base-100'>
+      <div class='p-4 border-b border-base-300 flex items-center justify-between sticky top-0 bg-base-100 z-10'>
+        <h3 class='font-semibold text-lg'>Insert Row: {tableName}</h3>
+        <A
+          params={{ drawer: null }}
+          replace
+          class='btn btn-ghost btn-sm btn-circle'
+        >
+          <XCircle class='h-5 w-5' />
+        </A>
+      </div>
+      <form onSubmit={onInsert} class='flex-1 flex flex-col min-h-0'>
+        <div class='flex-1 overflow-y-auto p-4 space-y-4'>
+          {tableDef.columns.map((col) => {
+            const type = col.type
+            const key = col.name
+            const isObject = type.includes('Map') || type.includes('Array') ||
+              type.includes('Tuple') || type.includes('Nested') ||
+              type.includes('JSON') || type.toLowerCase().includes('blob')
+            const isNumber = type.includes('Int') || type.includes('Float') ||
+              type.includes('Decimal')
+            const isBoolean = type.includes('Bool')
+            const isDate = type.includes('Date') || type.includes('Time')
+
+            return (
+              <div key={key} class='form-control'>
+                <label class='label py-1'>
+                  <span class='label-text text-xs font-semibold text-base-content/50 uppercase tracking-wider'>
+                    {key}
+                  </span>
+                  <span class='label-text-alt text-[10px] opacity-50'>
+                    {type}
+                  </span>
+                </label>
+                {isObject
+                  ? <ObjectInput name={key} />
+                  : isBoolean
+                  ? <BooleanInput name={key} />
+                  : isDate
+                  ? <DateInput name={key} />
+                  : isNumber
+                  ? <NumberInput name={key} />
+                  : <TextInput name={key} />}
+              </div>
+            )
+          })}
+        </div>
+        <div class='p-4 border-t border-base-300 sticky bottom-0 bg-base-100'>
+          <button type='submit' class='btn btn-primary w-full'>
+            <Plus class='h-4 w-4' />
+            Insert Row
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
 type DrawerTab = 'history' | 'insert' | 'view-row' | 'view-log'
 const drawerViews: Record<DrawerTab, JSX.Element> = {
   history: <QueryHistory />,
-  insert: <div></div>,
+  insert: <InsertRow />,
   'view-row': <RowDetails />,
   'view-log': <LogDetails />,
 } as const