Enhance project settings and webhooks functionality

- Introduced default values for project details in the project settings dialog.
- Added a 'disabled' state to webhooks endpoints, improving status visibility in the UI.
- Updated the SmartForm component to support default values and handle form resets more effectively.

Author: Developing-Gamer

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx

@@ -168,6 +168,11 @@ export default function PageClient() {
     await project.update(values);
   }, [project]);
 
+  const projectDetailsDefaultValues = useMemo(() => ({
+    displayName: project.displayName,
+    description: project.description || undefined,
+  }), [project.displayName, project.description]);
+
   // Memoize project delete callback
   const handleProjectDelete = useCallback(async () => {
     await project.delete();
@@ -272,6 +277,7 @@ export default function PageClient() {
         onOpenChange={setIsProjectDetailsDialogOpen}
         title="Edit Project Details"
         formSchema={projectInformationSchema}
+        defaultValues={projectDetailsDefaultValues}
         onSubmit={handleProjectDetailsSubmit}
         okButton={{ label: "Save" }}
         cancelButton

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/webhooks/page-client.tsx

@@ -74,6 +74,7 @@ type Endpoint = {
   id: string,
   url: string,
   description?: string,
+  disabled: boolean,
 };
 
 function CreateDialog(props: {
@@ -114,6 +115,7 @@ function CreateDialog(props: {
       id: created.id,
       url: created.url,
       description: created.description,
+      disabled: created.disabled ?? false,
     });
   });
 
@@ -415,10 +417,10 @@ function Endpoints(props: { updateFn: () => void, onTestRequested: (endpoint: En
       {
         id: "status",
         header: "Status",
-        cell: () => (
+        cell: ({ row }) => (
           <DesignBadge
-            label="Active"
-            color="green"
+            label={row.original.disabled ? "Disabled" : "Active"}
+            color={row.original.disabled ? "red" : "green"}
             size="sm"
           />
         ),
@@ -438,6 +440,12 @@ function Endpoints(props: { updateFn: () => void, onTestRequested: (endpoint: En
       },
     ];
 
+    const endpointRows: Endpoint[] = endpoints.data.map((endpoint) => ({
+      ...endpoint,
+      description: endpoint.description,
+      disabled: endpoint.disabled ?? false,
+    }));
+
     return (
       <DesignCard
         title="Endpoints"
@@ -453,7 +461,7 @@ function Endpoints(props: { updateFn: () => void, onTestRequested: (endpoint: En
         )}
       >
         <DesignDataTable
-          data={endpoints.data}
+          data={endpointRows}
           columns={columns}
           defaultColumnFilters={[]}
           defaultSorting={[]}

apps/dashboard/src/components/form-dialog.tsx

@@ -11,6 +11,7 @@ import { SmartForm } from "./smart-form";
 export function SmartFormDialog<S extends yup.ObjectSchema<any, any, any, any>>(
   props: Omit<ActionDialogProps, 'children'> & {
     formSchema: S,
+    defaultValues?: Partial<yup.InferType<S>>,
     onSubmit: (values: yup.InferType<S>) => Promise<void | 'prevent-close'> | void | 'prevent-close',
   },
 ) {
@@ -45,7 +46,14 @@ export function SmartFormDialog<S extends yup.ObjectSchema<any, any, any, any>>(
         },
       }}
     >
-      <SmartForm formSchema={props.formSchema} onSubmit={handleSubmit} onChangeIsSubmitting={setSubmitting} formId={formId} />
+      <SmartForm
+        formSchema={props.formSchema}
+        onSubmit={handleSubmit}
+        onChangeIsSubmitting={setSubmitting}
+        formId={formId}
+        defaultValues={props.defaultValues}
+        isOpen={props.open ?? openState}
+      />
     </ActionDialog>
   );
 }

apps/dashboard/src/components/smart-form.tsx

@@ -4,7 +4,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { Form } from "@/components/ui";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { CheckboxField, DateField, InputField, NumberField, TextAreaField } from "./form-fields";
@@ -26,10 +26,13 @@ export function SmartForm<S extends yup.ObjectSchema<any>>(props: {
   onSubmit: (values: yup.InferType<S>) => Promise<void>,
   formId?: string,
   onChangeIsSubmitting?: (isSubmitting: boolean) => void,
+  defaultValues?: Partial<yup.InferType<S>>,
+  isOpen?: boolean,
 }) {
+  const resolvedDefaultValues = props.defaultValues ?? props.formSchema.getDefault();
   const form = useForm({
     resolver: yupResolver(props.formSchema),
-    defaultValues: props.formSchema.getDefault(),
+    defaultValues: resolvedDefaultValues,
     mode: "onChange",
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -40,16 +43,25 @@ export function SmartForm<S extends yup.ObjectSchema<any>>(props: {
       await form.handleSubmit(async (values: yup.InferType<S>, e?: React.BaseSyntheticEvent) => {
         e!.preventDefault();
         await props.onSubmit(values);
-        form.reset();
+        form.reset(resolvedDefaultValues);
       })(e);
     } finally {
       props.onChangeIsSubmitting?.(false);
       setIsSubmitting(false);
     }
-  }, [props, form]);
+  }, [props, form, resolvedDefaultValues]);
+
+  const prevOpen = useRef(props.isOpen ?? false);
+  useEffect(() => {
+    const currentOpen = props.isOpen ?? false;
+    if (currentOpen && !prevOpen.current) {
+      form.reset(resolvedDefaultValues);
+    }
+    prevOpen.current = currentOpen;
+  }, [props.isOpen, resolvedDefaultValues, form]);
 
   const details = props.formSchema.describe();
-  const defaults = props.formSchema.getDefault();
+  const defaults = resolvedDefaultValues;
 
   return (
     <Form {...form}>