Fix: Delete JSON Data from Table Editor's Side Panel Editor (#17107)

* deletion of json blob data from table editor's side panel code editor fixed

* ensure null json values are saved and fix ts error

* Fix

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx

@@ -16,7 +16,7 @@ interface JsonEditProps {
   applyButtonLabel?: string
   readOnly?: boolean
   closePanel: () => void
-  onSaveJSON: (value: string | number) => void
+  onSaveJSON: (value: string | number | null) => void
 }
 
 const JsonEdit = ({

studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx

@@ -196,7 +196,7 @@ const RowEditor = ({
               column={selectedValueForJsonEdit?.column ?? ''}
               jsonString={selectedValueForJsonEdit?.jsonString ?? ''}
               closePanel={() => setSelectedValueForJsonEdit(undefined)}
-              onSaveJSON={(value: string | number) => {
+              onSaveJSON={(value) => {
                 onUpdateField({ [selectedValueForJsonEdit?.column ?? '']: value })
                 setSelectedValueForJsonEdit(undefined)
               }}

studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx

@@ -2,6 +2,7 @@ import type { PostgresColumn, PostgresTable } from '@supabase/postgres-meta'
 import { QueryKey, useQueryClient } from '@tanstack/react-query'
 import { isEmpty, isUndefined, noop } from 'lodash'
 import { useState } from 'react'
+import { toast } from 'react-hot-toast'
 import { Modal } from 'ui'
 
 import { Dictionary } from 'components/grid'
@@ -123,13 +124,13 @@ const SidePanelEditor = ({
     payload: any,
     isNewRecord: boolean,
     configuration: { identifiers: any; rowIdx: number },
-    onComplete: Function
+    onComplete: (err?: any) => void
   ) => {
     if (!project || selectedTable === undefined) {
       return console.error('no project or table selected')
     }
 
-    let saveRowError = false
+    let saveRowError: Error | undefined
     if (isNewRecord) {
       try {
         const result = await createTableRows({
@@ -141,7 +142,7 @@ const SidePanelEditor = ({
         })
         onRowCreated(result[0])
       } catch (error: any) {
-        saveRowError = true
+        saveRowError = error
       }
     } else {
       const hasChanges = !isEmpty(payload)
@@ -157,11 +158,11 @@ const SidePanelEditor = ({
               enumArrayColumns,
             })
             onRowUpdated(result[0], configuration.rowIdx)
-          } catch (error) {
-            saveRowError = true
+          } catch (error: any) {
+            saveRowError = error
           }
         } else {
-          saveRowError = true
+          saveRowError = new Error('No primary key')
           ui.setNotification({
             category: 'error',
             message:
@@ -171,27 +172,31 @@ const SidePanelEditor = ({
       }
     }
 
-    onComplete()
+    onComplete(saveRowError)
     if (!saveRowError) {
       setIsEdited(false)
       snap.closeSidePanel()
     }
   }
 
-  const onSaveJSON = async (value: string | number) => {
+  const onSaveJSON = async (value: string | number | null) => {
     if (selectedTable === undefined || !(snap.sidePanel?.type === 'json')) return
     const selectedValueForJsonEdit = snap.sidePanel.jsonValue
 
     try {
       const { row, column } = selectedValueForJsonEdit
-      const payload = { [column]: JSON.parse(value as any) }
+      const payload = { [column]: value === null ? null : JSON.parse(value as any) }
       const identifiers = {} as Dictionary<any>
       selectedTable.primary_keys.forEach((column) => (identifiers[column.name] = row![column.name]))
 
       const isNewRecord = false
       const configuration = { identifiers, rowIdx: row.idx }
 
-      saveRow(payload, isNewRecord, configuration, () => {})
+      saveRow(payload, isNewRecord, configuration, (error) => {
+        if (error) {
+          toast.error(error?.message ?? 'Something went wrong while trying to save the JSON value')
+        }
+      })
     } catch (error: any) {}
   }
 

studio/lib/helpers.ts

@@ -14,9 +14,15 @@ export const tryParseJson = (jsonString: any) => {
 
 export const minifyJSON = (prettifiedJSON: string) => {
   try {
-    const res = JSON.stringify(JSON.parse(prettifiedJSON))
-    if (!isNaN(Number(res))) return Number(res)
-    else return res
+    if (prettifiedJSON.trim() === '') {
+      return null;
+    }
+    const res = JSON.stringify(JSON.parse(prettifiedJSON));
+    if (!isNaN(Number(res))) {
+      return Number(res)
+    } else {
+      return res
+    }
   } catch (err) {
     throw err
   }