Add sender config drawer & enable sender edit

Introduce a SenderConfigDrawer component and wire it into the email editor/preview to allow editing the sender name/email per email step. EmailPreviewHeader now shows an edit button and reads values from the form (falling back to integration defaults). EmailEditor toggles the drawer and restricts body editing to DEV environment. sanitize-control-values now includes the from field and tightens typing for email controls. Also remove a Sentry breadcrumb and add a console.log for bridge outputs in the email send usecase for debugging.

apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx

@@ -1,6 +1,8 @@
 import { EnvironmentTypeEnum, UiComponentEnum, type UiSchema, UiSchemaGroupEnum } from '@novu/shared';
+import { useState } from 'react';
 import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
 import { EmailPreviewHeader } from '@/components/workflow-editor/steps/email/email-preview';
+import { SenderConfigDrawer } from '@/components/workflow-editor/steps/email/sender-config-drawer';
 import { useEnvironment } from '@/context/environment/hooks';
 import { cn } from '../../../../utils/ui';
 import { StepEditorUnavailable } from '../step-editor-unavailable';
@@ -10,6 +12,7 @@ type EmailEditorProps = { uiSchema: UiSchema; isEditorV2?: boolean };
 export const EmailEditor = (props: EmailEditorProps) => {
   const { currentEnvironment } = useEnvironment();
   const { uiSchema, isEditorV2 = false } = props;
+  const [senderDrawerOpen, setSenderDrawerOpen] = useState(false);
 
   if (uiSchema.group !== UiSchemaGroupEnum.EMAIL) {
     return null;
@@ -18,28 +21,32 @@ export const EmailEditor = (props: EmailEditorProps) => {
   const { body, subject, disableOutputSanitization, editorType, layoutId } = uiSchema.properties ?? {};
 
   return (
-    <div className="flex h-full flex-col">
-      <div className={cn('px-4 pb-0 pt-4', isEditorV2 && 'px-0 pt-0')}>
-        <div className={cn(isEditorV2 && 'border-b border-neutral-200 px-3 py-2')}>
-          <EmailPreviewHeader minimalHeader={isEditorV2}>
-            {disableOutputSanitization &&
-              getComponentByType({
-                component: disableOutputSanitization.component,
-              })}
-            {getComponentByType({ component: editorType?.component ?? UiComponentEnum.EMAIL_EDITOR_SELECT })}
-          </EmailPreviewHeader>
-        </div>
+    <>
+      <div className="flex h-full flex-col">
+        <div className={cn('px-4 pb-0 pt-4', isEditorV2 && 'px-0 pt-0')}>
+          <div className={cn(isEditorV2 && 'border-b border-neutral-200 px-3 py-2')}>
+            <EmailPreviewHeader minimalHeader={isEditorV2} onEditSenderClick={() => setSenderDrawerOpen(true)}>
+              {disableOutputSanitization &&
+                getComponentByType({
+                  component: disableOutputSanitization.component,
+                })}
+              {getComponentByType({ component: editorType?.component ?? UiComponentEnum.EMAIL_EDITOR_SELECT })}
+            </EmailPreviewHeader>
+          </div>
 
-        <div className={cn(isEditorV2 && 'px-3 py-0')}>{getComponentByType({ component: subject.component })}</div>
-        <div className="flex items-center gap-0.5 border-b border-t border-neutral-100 px-1 py-1">
-          {getComponentByType({ component: layoutId?.component ?? UiComponentEnum.LAYOUT_SELECT })}
+          <div className={cn(isEditorV2 && 'px-3 py-0')}>{getComponentByType({ component: subject.component })}</div>
+          <div className="flex items-center gap-0.5 border-b border-t border-neutral-100 px-1 py-1">
+            {getComponentByType({ component: layoutId?.component ?? UiComponentEnum.LAYOUT_SELECT })}
+          </div>
         </div>
+        {currentEnvironment?.type === EnvironmentTypeEnum.DEV ? (
+          getComponentByType({ component: body.component })
+        ) : (
+          <StepEditorUnavailable />
+        )}
       </div>
-      {currentEnvironment?.type === EnvironmentTypeEnum.DEV ? (
-        getComponentByType({ component: body.component })
-      ) : (
-        <StepEditorUnavailable />
-      )}
-    </div>
+
+      <SenderConfigDrawer open={senderDrawerOpen} onOpenChange={setSenderDrawerOpen} />
+    </>
   );
 };

apps/dashboard/src/components/workflow-editor/steps/email/email-preview.tsx

@@ -1,21 +1,28 @@
 import { ResourceOriginEnum } from '@novu/shared';
 import { HTMLAttributes, useCallback, useEffect, useRef } from 'react';
-import { RiArrowDownSFill } from 'react-icons/ri';
+import { useFormContext } from 'react-hook-form';
+import { RiArrowDownSFill, RiEdit2Line } from 'react-icons/ri';
 import { MAILY_EMAIL_WIDTH } from '@/components/maily/maily-config';
 import { Avatar, AvatarImage } from '@/components/primitives/avatar';
 import { Skeleton } from '@/components/primitives/skeleton';
 import { usePrimaryEmailIntegration } from '@/hooks/use-primary-email-integration';
 import { cn } from '@/utils/ui';
 import { NovuBranding } from './novu-branding';
 
-type EmailPreviewHeaderProps = HTMLAttributes<HTMLDivElement> & { minimalHeader?: boolean };
+type EmailPreviewHeaderProps = HTMLAttributes<HTMLDivElement> & {
+  minimalHeader?: boolean;
+  onEditSenderClick?: () => void;
+};
 
 export const EmailPreviewHeader = (props: EmailPreviewHeaderProps) => {
-  const { className, children, minimalHeader = false, ...rest } = props;
+  const { className, children, minimalHeader = false, onEditSenderClick, ...rest } = props;
   const { senderEmail, senderName, isLoading } = usePrimaryEmailIntegration();
+  const formContext = useFormContext();
+  const fromEmail = formContext?.watch('from.email');
+  const fromName = formContext?.watch('from.name');
 
-  const displaySenderName = senderName || 'Acme Inc.';
-  const displaySenderEmail = senderEmail || 'noreply@novu.co';
+  const displaySenderName = fromName || senderName || 'Acme Inc.';
+  const displaySenderEmail = fromEmail || senderEmail || 'noreply@novu.co';
 
   return (
     <div className={cn('flex gap-2', className)} {...rest}>
@@ -30,9 +37,16 @@ export const EmailPreviewHeader = (props: EmailPreviewHeaderProps) => {
             {isLoading ? (
               <Skeleton className="h-4 w-40" />
             ) : (
-              <>
+              <button
+                type="button"
+                onClick={onEditSenderClick}
+                className="group flex items-center gap-1 text-left hover:text-foreground-950 focus:outline-none"
+              >
                 {displaySenderName} <span className="text-foreground-600 text-xs">{`<${displaySenderEmail}>`}</span>
-              </>
+                {onEditSenderClick && (
+                  <RiEdit2Line className="text-foreground-600 size-3.5 opacity-0 transition-opacity group-hover:opacity-100" />
+                )}
+              </button>
             )}
           </div>
           {!minimalHeader && (

apps/dashboard/src/components/workflow-editor/steps/email/sender-config-drawer.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { RiInformation2Line } from 'react-icons/ri';
+import { FormControl, FormField, FormItem, FormLabel } from '@/components/primitives/form/form';
+import { Input } from '@/components/primitives/input';
+import { Separator } from '@/components/primitives/separator';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/primitives/sheet';
+import { Switch } from '@/components/primitives/switch';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/primitives/tooltip';
+import { usePrimaryEmailIntegration } from '@/hooks/use-primary-email-integration';
+
+type SenderConfigDrawerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function SenderConfigDrawer({ open, onOpenChange }: SenderConfigDrawerProps) {
+  const { control, watch, setValue, trigger } = useFormContext();
+  const { senderEmail: integrationEmail, senderName: integrationName } = usePrimaryEmailIntegration();
+
+  const fromEmail = watch('from.email');
+  const fromName = watch('from.name');
+  const useProviderDefaults = fromEmail === undefined && fromName === undefined;
+
+  const [localEmail, setLocalEmail] = useState(fromEmail || '');
+  const [localName, setLocalName] = useState(fromName || '');
+
+  useEffect(() => {
+    setLocalEmail(fromEmail || '');
+    setLocalName(fromName || '');
+  }, [fromEmail, fromName]);
+
+  const handleToggleDefaults = async (checked: boolean) => {
+    if (checked) {
+      setValue('from.email', undefined, { shouldDirty: true, shouldValidate: true });
+      setValue('from.name', undefined, { shouldDirty: true, shouldValidate: true });
+      setLocalEmail('');
+      setLocalName('');
+    } else {
+      setValue('from.email', '', { shouldDirty: true, shouldValidate: true });
+      setValue('from.name', '', { shouldDirty: true, shouldValidate: true });
+      setLocalEmail('');
+      setLocalName('');
+    }
+
+    await trigger();
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="flex w-[400px] flex-col p-0 sm:max-w-[400px]">
+        <SheetHeader className="space-y-1 px-3 py-4">
+          <SheetTitle className="text-label-lg flex items-center gap-2">Sender configuration</SheetTitle>
+          <SheetDescription className="text-paragraph-xs mt-0 hidden">
+            Configure the sender name and email address for this email step.
+          </SheetDescription>
+        </SheetHeader>
+        <Separator />
+
+        <div className="flex-1 space-y-4 overflow-auto p-3">
+          <div className="rounded-4 border flex items-center justify-between border-neutral-100 bg-white p-1.5">
+            <div className="text-text-strong text-label-xs flex items-center gap-1">
+              Use provider defaults
+              <Tooltip>
+                <TooltipTrigger className="flex cursor-default flex-row items-center gap-1">
+                  <RiInformation2Line className="size-3 text-neutral-400" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    When enabled, the email will use the sender name and email from your configured email integration.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Switch checked={useProviderDefaults} onCheckedChange={handleToggleDefaults} />
+          </div>
+
+          <FormField
+            control={control}
+            name="from.name"
+            render={() => (
+              <FormItem>
+                <FormLabel>Sender name</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder={integrationName || 'e.g. Acme Security'}
+                    disabled={useProviderDefaults}
+                    value={localName}
+                    onChange={(e) => {
+                      setLocalName(e.target.value);
+                    }}
+                    onBlur={() => {
+                      setValue('from.name', localName, { shouldDirty: true, shouldValidate: true });
+                      trigger();
+                    }}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="from.email"
+            render={() => (
+              <FormItem>
+                <FormLabel>Sender email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder={integrationEmail || 'e.g. noreply@acme.com'}
+                    disabled={useProviderDefaults}
+                    value={localEmail}
+                    onChange={(e) => {
+                      setLocalEmail(e.target.value);
+                    }}
+                    onBlur={() => {
+                      setValue('from.email', localEmail, { shouldDirty: true, shouldValidate: true });
+                      trigger();
+                    }}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/worker/src/app/workflow/usecases/send-message/send-message-email.usecase.ts

@@ -43,7 +43,6 @@ import {
   WebhookEventEnum,
   WebhookObjectTypeEnum,
 } from '@novu/shared';
-import { addBreadcrumb } from '@sentry/node';
 import inlineCss from 'inline-css';
 
 import { PlatformException } from '../../../shared/utils';
@@ -132,10 +131,6 @@ export class SendMessageEmail extends SendMessageBase {
     if (!step) throw new PlatformException('Email channel step not found');
     if (!step.template) throw new PlatformException('Email channel template not found');
 
-    addBreadcrumb({
-      message: 'Sending Email',
-    });
-
     if (!integration) {
       await this.createExecutionDetails.execute(
         CreateExecutionDetailsCommand.create({
@@ -162,6 +157,7 @@ export class SendMessageEmail extends SendMessageBase {
     }
 
     const bridgeOutputs = command.bridgeData?.outputs;
+    console.log('bridgeOptions', JSON.stringify(bridgeOutputs, null, 2));
     const [template, overrideLayoutId] = await Promise.all([
       this.processVariants(command),
       this.getOverrideLayoutId(command, !!bridgeOutputs),

libs/application-generic/src/utils/sanitize-control-values.ts

@@ -82,12 +82,14 @@ function sanitizeEmail(controlValues: EmailControlType) {
     content: [{ type: 'paragraph' }],
   });
 
-  const emailControls: EmailControlType = {
+  const emailControls: Required<EmailControlType> = {
+    editorType: controlValues.editorType,
     subject: sanitizeEmptyInput(controlValues.subject, ' '),
     body: sanitizeEmptyInput(controlValues.body, EMPTY_TIP_TAP),
     skip: controlValues.skip,
     disableOutputSanitization: controlValues.disableOutputSanitization,
     layoutId: controlValues.layoutId,
+    from: controlValues.from,
   };
 
   return filterNullishValues(emailControls);