From 223d86300bcc5d2bbf60d377388cf16bd645ce0a Mon Sep 17 00:00:00 2001
From: Faizan Rasool <faizanraso@outlook.com>
Date: Fri, 26 Jan 2024 16:45:21 -0500
Subject: [PATCH] remove trailing commas

---
 .../components/grid/components/editor/JsonEditor.tsx      | 5 ++++-
 .../SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx   | 5 +++--
 apps/studio/lib/helpers.ts                                | 8 ++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/grid/components/editor/JsonEditor.tsx b/apps/studio/components/grid/components/editor/JsonEditor.tsx
index 1d6de055297..67e6d4ee348 100644
--- a/apps/studio/components/grid/components/editor/JsonEditor.tsx
+++ b/apps/studio/components/grid/components/editor/JsonEditor.tsx
@@ -5,7 +5,7 @@ import { IconMaximize, Popover } from 'ui'
 
 import { BlockKeys, MonacoEditor, NullValue } from 'components/grid/components/common'
 import { useTrackedState } from 'components/grid/store'
-import { prettifyJSON, tryParseJson } from 'lib/helpers'
+import { prettifyJSON, tryParseJson, removeJSONTrailingComma } from 'lib/helpers'
 import { isNil } from 'lodash'
 
 interface JsonEditorProps<TRow, TSummaryRow = unknown>
@@ -36,6 +36,9 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
   }, [])
 
   const saveChanges = useCallback((newValue: string | null) => {
+    if (newValue) {
+      newValue = removeJSONTrailingComma(newValue)
+    }
     if (newValue !== value) commitChange(newValue)
   }, [])
 
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
index 9b7340ddc5e..28cf419760d 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { Button, IconAlignLeft, SidePanel } from 'ui'
 
 import TwoOptionToggle from 'components/ui/TwoOptionToggle'
-import { minifyJSON, prettifyJSON, tryParseJson } from 'lib/helpers'
+import { minifyJSON, prettifyJSON, tryParseJson, removeJSONTrailingComma } from 'lib/helpers'
 import toast from 'react-hot-toast'
 import ActionBar from '../../ActionBar'
 import DrilldownViewer from './DrilldownViewer'
@@ -42,7 +42,8 @@ const JsonEdit = ({
 
   const validateJSON = async (resolve: () => void) => {
     try {
-      const minifiedJSON = minifyJSON(jsonStr)
+      const newJsonStr = removeJSONTrailingComma(jsonStr)
+      const minifiedJSON = minifyJSON(newJsonStr)
       if (onSaveJSON) onSaveJSON(minifiedJSON, resolve)
     } catch (error: any) {
       resolve()
diff --git a/apps/studio/lib/helpers.ts b/apps/studio/lib/helpers.ts
index 6b3cfa9868f..a2d231eb837 100644
--- a/apps/studio/lib/helpers.ts
+++ b/apps/studio/lib/helpers.ts
@@ -42,6 +42,14 @@ export const prettifyJSON = (minifiedJSON: string) => {
   }
 }
 
+export const removeJSONTrailingComma = (jsonString: string) => {
+  /**
+   * Remove trailing commas: Delete any comma immediately preceding the closing brace '}' or
+   * bracket ']' using a regular expression.
+   */
+  return jsonString.replace(/,\s*(?=[\}\]])/g, '')
+}
+
 export const uuidv4 = () => {
   return _uuidV4()
 }