feat(dashboard): in-app editor form driven by BE schema

apps/api/src/app/workflows-v2/shared/schemas/in-app-control.schema.ts

@@ -9,33 +9,36 @@ const redirectSchema = {
     url: {
       type: 'string',
       pattern: ABSOLUTE_AND_RELATIVE_URL_REGEX,
+      default: '',
     },
     target: {
       type: 'string',
       enum: ['_self', '_blank', '_parent', '_top', '_unfencedTop'],
-      default: '_blank', // Default value for target
+      default: '_self', // Default value for target
     },
   },
   required: ['url'], // url remains required
   additionalProperties: false, // No additional properties allowed
+  default: { url: '', target: '_self' },
 } as const satisfies JSONSchema;
 
 const actionSchema = {
   type: 'object',
   properties: {
-    label: { type: 'string' },
+    label: { type: 'string', default: '' },
     redirect: redirectSchema,
   },
   required: ['label'],
   additionalProperties: false,
+  default: null,
 } as const satisfies JSONSchema;
 
 export const inAppControlSchema = {
   type: 'object',
   properties: {
-    subject: { type: 'string' },
-    body: { type: 'string' },
-    avatar: { type: 'string', format: 'uri' },
+    subject: { type: 'string', default: '' },
+    body: { type: 'string', default: '' },
+    avatar: { type: 'string', format: 'uri', default: '' },
     primaryAction: actionSchema, // Nested primaryAction
     secondaryAction: actionSchema, // Nested secondaryAction
     data: { type: 'object', additionalProperties: true },

apps/dashboard/package.json

@@ -76,6 +76,7 @@
   "devDependencies": {
     "@clerk/types": "^4.6.1",
     "@eslint/js": "^9.9.0",
+    "@hookform/devtools": "^4.3.0",
     "@playwright/test": "^1.44.0",
     "@sentry/vite-plugin": "^2.22.6",
     "@types/lodash.debounce": "^4.0.9",

apps/dashboard/src/api/steps.ts

@@ -0,0 +1,14 @@
+import { getV2 } from './api.client';
+import type { StepDataDto } from '@novu/shared';
+
+export const fetchStep = async ({
+  workflowSlug,
+  stepSlug,
+}: {
+  workflowSlug: string;
+  stepSlug: string;
+}): Promise<StepDataDto> => {
+  const { data } = await getV2<{ data: StepDataDto }>(`/workflows/${workflowSlug}/steps/${stepSlug}`);
+
+  return data;
+};

apps/dashboard/src/components/primitives/form/avatar-picker.tsx

@@ -1,15 +1,14 @@
-'use client';
-
 import { Avatar, AvatarImage } from '@/components/primitives/avatar';
 import { Button } from '@/components/primitives/button';
-import { FormControl, FormMessage } from '@/components/primitives/form/form';
+import { FormMessage } from '@/components/primitives/form/form';
 import { Input, InputField } from '@/components/primitives/input';
 import { Label } from '@/components/primitives/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover';
 import { Separator } from '@/components/primitives/separator';
 import TextSeparator from '@/components/primitives/text-separator';
 import { useState, forwardRef } from 'react';
-import { RiEdit2Line, RiImageEditFill } from 'react-icons/ri';
+import { RiEdit2Line, RiErrorWarningFill, RiImageEditFill } from 'react-icons/ri';
+import { useFormField } from './form-context';
 
 const predefinedAvatars = [
   `${window.location.origin}/images/avatar.svg`,
@@ -30,6 +29,7 @@ type AvatarPickerProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ id, ...props }, ref) => {
   const [isOpen, setIsOpen] = useState(false);
+  const { error } = useFormField();
 
   const handlePredefinedAvatarClick = (url: string) => {
     props.onChange?.({ target: { value: url } } as React.ChangeEvent<HTMLInputElement>);
@@ -40,14 +40,17 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ i
     <div className="space-y-2">
       <Popover modal={true} open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger asChild>
-          <Button variant="outline" size="icon" className="text-foreground-600 size-10">
+          <Button variant="outline" size="icon" className="text-foreground-600 relative size-10">
             {props.value ? (
-              <Avatar>
+              <Avatar className="p-[1px]">
                 <AvatarImage src={props.value as string} />
               </Avatar>
             ) : (
               <RiImageEditFill className="size-5" />
             )}
+            {error && (
+              <RiErrorWarningFill className="text-destructive outline-destructive absolute right-0 top-0 size-3 -translate-y-1/2 translate-x-1/2 rounded-full outline outline-1 outline-offset-1" />
+            )}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[300px] p-4">
@@ -59,11 +62,9 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ i
               <Separator />
               <div className="space-y-1">
                 <Label>Avatar URL</Label>
-                <FormControl>
-                  <InputField>
-                    <Input type="url" id={id} placeholder="Enter avatar URL" ref={ref} {...props} />
-                  </InputField>
-                </FormControl>
+                <InputField>
+                  <Input type="url" id={id} placeholder="Enter avatar URL" ref={ref} {...props} />
+                </InputField>
                 <FormMessage />
               </div>
             </div>
@@ -80,7 +81,6 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ i
           </div>
         </PopoverContent>
       </Popover>
-      <FormMessage />
     </div>
   );
 });

apps/dashboard/src/components/primitives/form/form.tsx

@@ -101,28 +101,35 @@ const formMessageVariants = cva('flex items-center gap-1', {
   },
 });
 
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
+const FormMessagePure = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement> & { error?: string }
+>(({ className, children, error, id, ...props }, ref) => {
+  const body = error ? error : children;
+
+  if (!body) {
+    return null;
+  }
 
-    if (!body) {
-      return null;
-    }
+  return (
+    <p
+      ref={ref}
+      id={id}
+      className={formMessageVariants({ variant: error ? 'error' : 'default', className })}
+      {...props}
+    >
+      {error ? <RiErrorWarningFill className="size-4" /> : <RiInformationFill className="size-4" />}
+      <span className="mt-[1px] text-xs leading-3">{body}</span>
+    </p>
+  );
+});
+FormMessagePure.displayName = 'FormMessagePure';
 
-    return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={formMessageVariants({ variant: error ? 'error' : 'default', className })}
-        {...props}
-      >
-        {error ? <RiErrorWarningFill className="size-4" /> : <RiInformationFill className="size-4" />}
-        <span className="mt-[1px] text-xs leading-3">{body}</span>
-      </p>
-    );
-  }
-);
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>((props, ref) => {
+  const { error, formMessageId } = useFormField();
+
+  return <FormMessagePure ref={ref} id={formMessageId} error={error ? String(error?.message) : undefined} {...props} />;
+});
 FormMessage.displayName = 'FormMessage';
 
-export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormMessagePure, FormField };

apps/dashboard/src/components/primitives/sonner.tsx

@@ -91,7 +91,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg text-foreground-950',
+            'group toast group-[.toaster]:bg-transparent group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg text-foreground-950',
           description: 'group-[.toast]:text-foreground-600',
           actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
           cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',