From dcc78b5454dabea142716f3fab7289790264137d Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Sun, 2 Oct 2022 21:18:37 +1100
Subject: [PATCH 1/2] fix: allow null in RowField value

---
 .../SidePanelEditor/RowEditor/InputField.tsx       | 14 +++++++-------
 .../SidePanelEditor/RowEditor/RowEditor.types.ts   |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
index 7fb90d8e9d5..699e8e99ae0 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
@@ -28,7 +28,7 @@ const InputField: FC<Props> = ({
       <Select
         size="medium"
         layout="horizontal"
-        value={field.value}
+        value={field.value ?? ''}
         label={field.name}
         labelOptional={field.format}
         descriptionText={field.comment}
@@ -51,7 +51,7 @@ const InputField: FC<Props> = ({
       <Input
         layout="horizontal"
         label={field.name}
-        value={field.value}
+        value={field.value ?? ''}
         // @ts-ignore This is creating some validateDOMNesting errors
         // because descriptionText is a <p> element as a parent
         descriptionText={
@@ -73,7 +73,7 @@ const InputField: FC<Props> = ({
         onChange={(event: any) => onUpdateField({ [field.name]: event.target.value })}
         actions={
           <Button
-            disabled={field.value.length === 0}
+            disabled={field.value === null || field.value?.length === 0}
             type="default"
             htmlType="button"
             onClick={onViewForeignKey}
@@ -98,7 +98,7 @@ const InputField: FC<Props> = ({
           disabled={!isEditable}
           error={errors[field.name]}
           rows={5}
-          value={field.value}
+          value={field.value ?? ''}
           placeholder={
             typeof field.defaultValue === 'string' && field.defaultValue.length === 0
               ? 'Default: Empty string'
@@ -114,7 +114,7 @@ const InputField: FC<Props> = ({
     return (
       <Input
         layout="horizontal"
-        value={field.value}
+        value={field.value ?? ''}
         label={field.name}
         descriptionText={field.comment}
         labelOptional={field.format}
@@ -141,7 +141,7 @@ const InputField: FC<Props> = ({
       <DateTimeInput
         name={field.name}
         format={field.format}
-        value={field.value}
+        value={field.value ?? ''}
         description={field.comment}
         onChange={(value: any) => onUpdateField({ [field.name]: value })}
       />
@@ -155,7 +155,7 @@ const InputField: FC<Props> = ({
       descriptionText={field.comment}
       labelOptional={field.format}
       error={errors[field.name]}
-      value={field.value}
+      value={field.value ?? ''}
       placeholder={field.isIdentity ? 'Automatically generated as identity' : field.defaultValue}
       disabled={!isEditable}
       onChange={(event: any) => onUpdateField({ [field.name]: event.target.value })}
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.types.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.types.ts
index 06bc45db52a..2dd7f8d5b70 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.types.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.types.ts
@@ -17,7 +17,7 @@ export interface RowField {
   comment: string
   format: string
   enums: string[]
-  value: string
+  value: string | null
   defaultValue: string
   foreignKey?: PostgresRelationship
   isNullable: boolean

From d616375e992077c274f6705fbe9a994f62fda985 Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Sun, 2 Oct 2022 21:28:05 +1100
Subject: [PATCH 2/2] fix nullable field value in RowEditor utils

---
 .../SidePanelEditor/RowEditor/RowEditor.utils.ts          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils.ts
index e6863a4269e..942be27d3d3 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils.ts
@@ -60,16 +60,16 @@ export const generateRowFields = (
 export const validateFields = (fields: RowField[]) => {
   const errors = {} as any
   fields.forEach((field) => {
-    if (field.format.startsWith('_') && field.value?.length > 0) {
+    if (field.format.startsWith('_') && (field.value?.length ?? 0) > 0) {
       try {
-        minifyJSON(field.value)
+        minifyJSON(field.value ?? '')
       } catch {
         errors[field.name] = 'Invalid array'
       }
     }
-    if (field.format.includes('json') && field.value?.length > 0) {
+    if (field.format.includes('json') && (field.value?.length ?? 0) > 0) {
       try {
-        minifyJSON(field.value)
+        minifyJSON(field.value ?? '')
       } catch {
         errors[field.name] = 'Invalid JSON'
       }