From 088e980c3858e7de30484aca737c039635996960 Mon Sep 17 00:00:00 2001
From: Konsti Wohlwend <n2d4xc@gmail.com>
Date: Thu, 25 Jul 2024 09:33:16 -0700
Subject: [PATCH] Metadata fields should be set to null when left empty (#145)

---
 .../src/components/data-table/user-table.tsx       | 14 +++++++-------
 apps/dashboard/src/components/form-fields.tsx      |  4 ++++
 packages/stack-shared/src/schema-fields.ts         |  9 +++++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/dashboard/src/components/data-table/user-table.tsx b/apps/dashboard/src/components/data-table/user-table.tsx
index 9b641b103..e6ac78a17 100644
--- a/apps/dashboard/src/components/data-table/user-table.tsx
+++ b/apps/dashboard/src/components/data-table/user-table.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { ServerUser } from '@stackframe/stack';
 import { standardProviders } from "@stackframe/stack-shared/dist/interface/clientInterface";
-import { jsonStringSchema } from "@stackframe/stack-shared/dist/schema-fields";
+import { jsonStringOrEmptySchema, jsonStringSchema } from "@stackframe/stack-shared/dist/schema-fields";
 import { ColumnDef, Row, Table } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import * as yup from "yup";
@@ -55,8 +55,8 @@ const userEditFormSchema = yup.object({
   primaryEmail: yup.string().email("Primary Email must be a valid email address"),
   signedUpAt: yup.date().required(),
   primaryEmailVerified: yup.boolean().required(),
-  clientMetadata: jsonStringSchema,
-  serverMetadata: jsonStringSchema,
+  clientMetadata: jsonStringOrEmptySchema.default("null"),
+  serverMetadata: jsonStringOrEmptySchema.default("null"),
 });
 
 function EditUserDialog(props: {
@@ -69,8 +69,8 @@ function EditUserDialog(props: {
     primaryEmail: props.user.primaryEmail || undefined,
     primaryEmailVerified: props.user.primaryEmailVerified,
     signedUpAt: props.user.signedUpAt,
-    clientMetadata: props.user.clientMetadata ? JSON.stringify(props.user.clientMetadata) : undefined,
-    serverMetadata: props.user.serverMetadata ? JSON.stringify(props.user.serverMetadata) : undefined,
+    clientMetadata: props.user.clientMetadata == null ? "" : JSON.stringify(props.user.clientMetadata, null, 2),
+    serverMetadata: props.user.serverMetadata == null ? "" : JSON.stringify(props.user.serverMetadata, null, 2),
   };
 
   return <FormDialog
@@ -96,8 +96,8 @@ function EditUserDialog(props: {
 
         <DateField control={form.control} label="Signed Up At" name="signedUpAt" />
 
-        <TextAreaField rows={3} control={form.control} label="Client Metadata" name="clientMetadata" />
-        <TextAreaField rows={3} control={form.control} label="Server Metadata" name="serverMetadata" />
+        <TextAreaField rows={3} control={form.control} label="Client Metadata" name="clientMetadata" placeholder="null" monospace />
+        <TextAreaField rows={3} control={form.control} label="Server Metadata" name="serverMetadata" placeholder="null" monospace />
       </>
     )}
     onSubmit={async (values) => { await props.user.update({
diff --git a/apps/dashboard/src/components/form-fields.tsx b/apps/dashboard/src/components/form-fields.tsx
index 7b978b45d..fef3e920a 100644
--- a/apps/dashboard/src/components/form-fields.tsx
+++ b/apps/dashboard/src/components/form-fields.tsx
@@ -32,6 +32,7 @@ export function TextAreaField<F extends FieldValues>(props: {
   control: Control<F>,
   name: Path<F>,
   label: React.ReactNode,
+  monospace?: boolean,
 }) {
   return (
     <FormField
@@ -47,6 +48,9 @@ export function TextAreaField<F extends FieldValues>(props: {
                 rows={props.rows}
                 placeholder={props.placeholder}
                 value={field.value ?? ""}
+                style={{
+                  fontFamily: props.monospace ? "ui-monospace, monospace" : undefined,
+                }}
               />
             </FormControl>
             <FormMessage />
diff --git a/packages/stack-shared/src/schema-fields.ts b/packages/stack-shared/src/schema-fields.ts
index ed92690b7..ee214cad3 100644
--- a/packages/stack-shared/src/schema-fields.ts
+++ b/packages/stack-shared/src/schema-fields.ts
@@ -94,6 +94,15 @@ export const jsonStringSchema = yupString().test("json", "Invalid JSON format",
     return false;
   }
 });
+export const jsonStringOrEmptySchema = yupString().test("json", "Invalid JSON format", (value) => {
+  if (!value) return true;
+  try {
+    JSON.parse(value);
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
 export const emailSchema = yupString().email();
 
 // Request auth