From b2bbbc3bde4b2b211ab97a8ccd75128f81b2d968 Mon Sep 17 00:00:00 2001 From: Bhavya Wahie <34278282+Bhavyawahie@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:23:06 +0530 Subject: [PATCH] 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 Co-authored-by: Alaister Young Co-authored-by: Joshen Lim --- .../RowEditor/JsonEditor/JsonEditor.tsx | 2 +- .../SidePanelEditor/RowEditor/RowEditor.tsx | 2 +- .../SidePanelEditor/SidePanelEditor.tsx | 25 +++++++++++-------- studio/lib/helpers.ts | 12 ++++++--- 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx index ba3e10903d2..38bf50df84b 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx +++ b/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 = ({ diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx index 669c8a0a699..e561ef83f9f 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx +++ b/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) }} diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx index 22d656b7267..0118f6135ef 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx +++ b/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 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) {} } diff --git a/studio/lib/helpers.ts b/studio/lib/helpers.ts index fd74478d6bb..6a1a1962442 100644 --- a/studio/lib/helpers.ts +++ b/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 }