Merge pull request #14677 from nrayburn-tech/fix/json-column-boolean

Fix/json column boolean

studio/components/grid/components/editor/JsonEditor.tsx

@@ -6,6 +6,7 @@ import { EditorProps } from '@supabase/react-data-grid'
 import { useTrackedState } from 'components/grid/store'
 import { BlockKeys, MonacoEditor, NullValue } from 'components/grid/components/common'
 import { tryParseJson } from 'lib/helpers'
+import { isNil } from 'lodash'
 
 interface JsonEditorProps<TRow, TSummaryRow = unknown> extends EditorProps<TRow, TSummaryRow> {
   onExpandEditor: (column: string, row: TRow) => void
@@ -21,7 +22,7 @@ export function JsonEditor<TRow, TSummaryRow = unknown>({
 
   const gridColumn = state.gridColumns.find((x) => x.name == column.key)
   const initialValue = row[column.key as keyof TRow] as unknown
-  const jsonString = prettifyJSON(initialValue ? JSON.stringify(initialValue) : '')
+  const jsonString = prettifyJSON(!isNil(initialValue) ? JSON.stringify(initialValue) : '')
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(true)
   const [value, setValue] = useState<string | null>(jsonString)

studio/components/grid/components/formatter/JsonFormatter.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { FormatterProps } from '@supabase/react-data-grid'
+import { SupaRow } from '../../types'
+import { EmptyValue, NullValue } from '../common'
+
+export const JsonFormatter = (p: React.PropsWithChildren<FormatterProps<SupaRow, unknown>>) => {
+  let value = p.row[p.column.key]
+
+  if (value === null) return <NullValue />
+  if (value === '') return <EmptyValue />
+  try {
+    value = JSON.stringify(value)
+  } catch (err) {}
+
+  return <>{value}</>
+}

studio/components/grid/components/formatter/index.ts

@@ -1,3 +1,4 @@
 export * from './BooleanFormatter'
 export * from './DefaultFormatter'
 export * from './ForeignKeyFormatter'
+export * from './JsonFormatter'

studio/components/grid/utils/gridColumns.tsx

@@ -31,6 +31,7 @@ import {
   BooleanFormatter,
   DefaultFormatter,
   ForeignKeyFormatter,
+  JsonFormatter,
 } from 'components/grid/components/formatter'
 
 export const ESTIMATED_CHARACTER_PIXEL_WIDTH = 9
@@ -149,6 +150,9 @@ function getColumnFormatter(columnDef: SupaColumn, columnType: ColumnType) {
         return ForeignKeyFormatter
       }
     }
+    case 'json': {
+      return JsonFormatter
+    }
     default: {
       return DefaultFormatter
     }