From 9cf3935d7a614c282c6046f1262fcb5b4fd2e1c1 Mon Sep 17 00:00:00 2001 From: Nick Rayburn <52075362+nrayburn-tech@users.noreply.github.com> Date: Mon, 29 May 2023 21:16:09 -0500 Subject: [PATCH 1/3] Dont stringify nil values for JSON editor --- studio/components/grid/components/editor/JsonEditor.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/studio/components/grid/components/editor/JsonEditor.tsx b/studio/components/grid/components/editor/JsonEditor.tsx index 93ea44dbc9a..bcafd2444da 100644 --- a/studio/components/grid/components/editor/JsonEditor.tsx +++ b/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 extends EditorProps { onExpandEditor: (column: string, row: TRow) => void @@ -21,7 +22,7 @@ export function JsonEditor({ 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(jsonString) From a7e0f659487ad21ebcd58128a15c6de8d8a51c91 Mon Sep 17 00:00:00 2001 From: Nick Rayburn <52075362+nrayburn-tech@users.noreply.github.com> Date: Mon, 29 May 2023 21:17:02 -0500 Subject: [PATCH 2/3] Add JsonFormatter for json columns --- .../grid/components/formatter/JsonFormatter.tsx | 16 ++++++++++++++++ .../grid/components/formatter/index.ts | 1 + studio/components/grid/utils/gridColumns.tsx | 4 ++++ 3 files changed, 21 insertions(+) create mode 100644 studio/components/grid/components/formatter/JsonFormatter.tsx diff --git a/studio/components/grid/components/formatter/JsonFormatter.tsx b/studio/components/grid/components/formatter/JsonFormatter.tsx new file mode 100644 index 00000000000..b34c4f745dc --- /dev/null +++ b/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>) => { + let value = p.row[p.column.key] + + if (value === null) return + if (value === '') return + try { + value = JSON.stringify(value) + } catch (err) {} + + return <>{value} +} diff --git a/studio/components/grid/components/formatter/index.ts b/studio/components/grid/components/formatter/index.ts index 3a1f31f3b94..8d5314afe5d 100644 --- a/studio/components/grid/components/formatter/index.ts +++ b/studio/components/grid/components/formatter/index.ts @@ -1,3 +1,4 @@ export * from './BooleanFormatter' export * from './DefaultFormatter' export * from './ForeignKeyFormatter' +export * from './JsonFormatter'; diff --git a/studio/components/grid/utils/gridColumns.tsx b/studio/components/grid/utils/gridColumns.tsx index e85da89d8d7..a6964bb8b04 100644 --- a/studio/components/grid/utils/gridColumns.tsx +++ b/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 } From 0e33a26f3d124e9b0569e0563129eafd42e076b5 Mon Sep 17 00:00:00 2001 From: Nick Rayburn <52075362+nrayburn-tech@users.noreply.github.com> Date: Mon, 29 May 2023 21:28:04 -0500 Subject: [PATCH 3/3] Fix formatting --- .../grid/components/editor/JsonEditor.tsx | 2 +- .../components/formatter/JsonFormatter.tsx | 22 +++++++++---------- .../grid/components/formatter/index.ts | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/studio/components/grid/components/editor/JsonEditor.tsx b/studio/components/grid/components/editor/JsonEditor.tsx index bcafd2444da..43c688281f2 100644 --- a/studio/components/grid/components/editor/JsonEditor.tsx +++ b/studio/components/grid/components/editor/JsonEditor.tsx @@ -6,7 +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"; +import { isNil } from 'lodash' interface JsonEditorProps extends EditorProps { onExpandEditor: (column: string, row: TRow) => void diff --git a/studio/components/grid/components/formatter/JsonFormatter.tsx b/studio/components/grid/components/formatter/JsonFormatter.tsx index b34c4f745dc..f53b0a49bfb 100644 --- a/studio/components/grid/components/formatter/JsonFormatter.tsx +++ b/studio/components/grid/components/formatter/JsonFormatter.tsx @@ -1,16 +1,16 @@ -import * as React from "react"; -import { FormatterProps } from "@supabase/react-data-grid"; -import { SupaRow } from "../../types"; -import { EmptyValue, NullValue } from "../common"; +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>) => { - let value = p.row[p.column.key] + let value = p.row[p.column.key] - if (value === null) return - if (value === '') return - try { - value = JSON.stringify(value) - } catch (err) {} + if (value === null) return + if (value === '') return + try { + value = JSON.stringify(value) + } catch (err) {} - return <>{value} + return <>{value} } diff --git a/studio/components/grid/components/formatter/index.ts b/studio/components/grid/components/formatter/index.ts index 8d5314afe5d..f53ab6cc653 100644 --- a/studio/components/grid/components/formatter/index.ts +++ b/studio/components/grid/components/formatter/index.ts @@ -1,4 +1,4 @@ export * from './BooleanFormatter' export * from './DefaultFormatter' export * from './ForeignKeyFormatter' -export * from './JsonFormatter'; +export * from './JsonFormatter'