Merge pull request #9279 from supabase/fix/allow-null-in-row-field

fix: allow null in RowField value

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

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

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'
       }