remove trailing commas (#20781)

* remove trailing commas

* test cases added

* Opt for immutable way in JsonEditor

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

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,7 +36,8 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
   }, [])
 
   const saveChanges = useCallback((newValue: string | null) => {
-    if (newValue !== value) commitChange(newValue)
+    const updatedValue = newValue !== null ? removeJSONTrailingComma(newValue) : newValue
+    if (updatedValue !== value) commitChange(newValue)
   }, [])
 
   const onChange = (_value: string | undefined) => {

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()

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()
 }

apps/studio/tests/components/Editor/RemoveJSONTrailingComma.utils.test.js

@@ -0,0 +1,36 @@
+import { removeJSONTrailingComma } from '/apps/studio/lib/helpers.ts'
+
+describe('removeJSONTrailingComma', () => {
+  it('should handle an empty object', () => {
+    const jsonString = '{}'
+    expect(removeJSONTrailingComma(jsonString)).toEqual(jsonString)
+  })
+
+  it('should handle an empty array', () => {
+    const jsonString = '[]'
+    expect(removeJSONTrailingComma(jsonString)).toEqual(jsonString)
+  })
+
+  it('should handle a JSON string without a trailing comma', () => {
+    const jsonString = '{"name": "John", "age": 25}'
+    expect(removeJSONTrailingComma(jsonString)).toEqual(jsonString)
+  })
+
+  it('should remove a trailing comma for JSON object', () => {
+    const jsonString = '{"name": "John", "age": 25,}'
+    const expectedOutput = '{"name": "John", "age": 25}'
+    expect(removeJSONTrailingComma(jsonString)).toEqual(expectedOutput)
+  })
+
+  it('should remove a trailing commas in an array of objects', () => {
+    const jsonString = '[{"fruit1": "apple","fruit2": "banana",}]'
+    const expectedOutput = '[{"fruit1": "apple","fruit2": "banana"}]'
+    expect(removeJSONTrailingComma(jsonString)).toEqual(expectedOutput)
+  })
+
+  it('should remove all trailing commas in an array of objects', () => {
+    const jsonString = '[{"fruit1": "apple","fruit2": "banana",},]'
+    const expectedOutput = '[{"fruit1": "apple","fruit2": "banana"}]'
+    expect(removeJSONTrailingComma(jsonString)).toEqual(expectedOutput)
+  })
+})