From 6eb5f66b0ecae4b03d02a5bedb15df259ff9c055 Mon Sep 17 00:00:00 2001
From: ManvendraPSdev <welcome2github@gmail.com>
Date: Sun, 23 Jun 2024 14:14:30 +0530
Subject: [PATCH] Added clientMetadata and serverMetadata in JSON values format

---
 apps/backend/prisma/schema.prisma             |  2 +-
 apps/dashboard/prisma/schema.prisma           |  2 +-
 .../src/components/data-table/user-table.tsx  | 30 ++++++++++++++--
 apps/dashboard/src/components/form-fields.tsx | 36 +++++++++++++++++++
 4 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
index 6bfa006ba9..e45572a2f2 100644
--- a/apps/backend/prisma/schema.prisma
+++ b/apps/backend/prisma/schema.prisma
@@ -7,7 +7,7 @@ generator client {
 
 datasource db {
   provider  = "postgresql"
-  url       = env("DATABASE_CONNECTION_STRING")
+  url       = "postgresql://postgres:postgres@localhost:5432/stackframe"
   directUrl = env("DIRECT_DATABASE_CONNECTION_STRING")
 }
 
diff --git a/apps/dashboard/prisma/schema.prisma b/apps/dashboard/prisma/schema.prisma
index 6bfa006ba9..e45572a2f2 100644
--- a/apps/dashboard/prisma/schema.prisma
+++ b/apps/dashboard/prisma/schema.prisma
@@ -7,7 +7,7 @@ generator client {
 
 datasource db {
   provider  = "postgresql"
-  url       = env("DATABASE_CONNECTION_STRING")
+  url       = "postgresql://postgres:postgres@localhost:5432/stackframe"
   directUrl = env("DIRECT_DATABASE_CONNECTION_STRING")
 }
 
diff --git a/apps/dashboard/src/components/data-table/user-table.tsx b/apps/dashboard/src/components/data-table/user-table.tsx
index fe840b80f4..075cd059e7 100644
--- a/apps/dashboard/src/components/data-table/user-table.tsx
+++ b/apps/dashboard/src/components/data-table/user-table.tsx
@@ -10,7 +10,7 @@ import { standardProviders } from "@stackframe/stack-shared/dist/interface/clien
 import { ActionCell, AvatarCell, BadgeCell, DateCell, TextCell } from "./elements/cells";
 import { SearchToolbarItem } from "./elements/toolbar-items";
 import { FormDialog } from "../form-dialog";
-import { DateField, InputField, SwitchField } from "../form-fields";
+import { DateField, InputField, SwitchField, TextAreaField } from "../form-fields";
 import { ActionDialog } from "../action-dialog";
 import Typography from "../ui/typography";
 import { standardFilterFn } from "./elements/utils";
@@ -45,11 +45,25 @@ function userToolbarRender<TData>(table: Table<TData>) {
   );
 }
 
+const yupJsonValidator =  yup.string().test("json", "Invalid JSON format", (value) => {
+  if(!value){
+    return true ;
+  }
+  try {
+    JSON.parse(value);
+    return true;
+  } catch (error) {
+    return false;
+  }
+})
+
 const userEditFormSchema = yup.object({
   displayName: yup.string(),
   primaryEmail: yup.string().email("Primary Email must be a valid email address"),
   signedUpAt: yup.date().required(),
   primaryEmailVerified: yup.boolean().required(),
+  clientMetadata: yupJsonValidator,
+  serverMetadata: yupJsonValidator
 });
 
 function EditUserDialog(props: { 
@@ -62,6 +76,8 @@ function EditUserDialog(props: {
     primaryEmail: props.user.primaryEmail || undefined,
     primaryEmailVerified: props.user.primaryEmailVerified,
     signedUpAt: props.user.signedUpAt,
+    clientMetadata: JSON.stringify(props.user.clientMetadata || undefined),
+    serverMetadata:JSON.stringify(props.user.serverMetadata || undefined)
   };
 
   return <FormDialog
@@ -86,9 +102,19 @@ function EditUserDialog(props: {
         </div>
 
         <DateField control={form.control} label="Signed Up At" name="signedUpAt" />
+        <TextAreaField control={form.control} label="clientMetadata" name="clientMetadata" />
+        <TextAreaField control={form.control} label="serverMetadata" name="serverMetadata" />
       </>
     )}
-    onSubmit={async (values) => { await props.user.update(values); }}
+    onSubmit={async (values) => { 
+      
+      console.log("Values are ",values)
+      const updatedValues = {
+        ...values ,
+        serverMetadata: values.serverMetadata ? JSON.parse(values.serverMetadata) : undefined ,
+        clientMetadata:values.clientMetadata ? JSON.parse(values.clientMetadata) : undefined
+      }
+      await props.user.update(updatedValues); }}
     cancelButton
   />;
 }
diff --git a/apps/dashboard/src/components/form-fields.tsx b/apps/dashboard/src/components/form-fields.tsx
index b1d38424e3..475f42bd70 100644
--- a/apps/dashboard/src/components/form-fields.tsx
+++ b/apps/dashboard/src/components/form-fields.tsx
@@ -10,6 +10,7 @@ import { Button } from "./ui/button";
 import { cn } from "@/lib/utils";
 import { Checkbox } from "./ui/checkbox";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { Textarea } from "./ui/textarea";
 
 
 export function FieldLabel(props: {
@@ -23,6 +24,41 @@ export function FieldLabel(props: {
   </FormLabel>;
 }
 
+
+
+export function TextAreaField<F extends FieldValues>(props: {
+  rows ?: number ; 
+  control: Control<F>, 
+  name: Path<F>,
+  label: React.ReactNode,
+  placeholder?: string,
+  required?: boolean,
+}) {
+  return (
+    <FormField
+      control={props.control}
+      name={props.name}
+      render={({ field }) => (
+        <FormItem>
+          <label className="flex flex-col gap-2">
+            <FieldLabel required={props.required}>{props.label}</FieldLabel>
+            <FormControl>
+            <Textarea
+                {...field} 
+                rows={props.rows}
+                placeholder={props.placeholder} 
+                value={field.value ?? ""}
+                />
+            </FormControl>
+            <FormMessage />
+          </label>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+
 export function InputField<F extends FieldValues>(props: { 
   control: Control<F>, 
   name: Path<F>,