From e9de09a927959f734f461b81ebda2bc3c24f591e Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Wed, 8 Jan 2025 13:02:42 -0600
Subject: [PATCH] feat: add email receivers to workflow form

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>
---
 .../components/agent/AgentDropdownActions.tsx |  2 +-
 .../components/agent/AgentPublishStatus.tsx   |  2 +-
 ui/admin/app/components/composed/CopyText.tsx | 72 ++++++++++++-------
 .../app/components/composed/typography.tsx    | 10 +--
 ui/admin/app/components/tools/ToolIcon.tsx    |  2 +-
 .../CreateWorkflowTrigger.tsx                 |  2 +-
 .../workflow-triggers/EmailReceiverForm.tsx   | 35 +++++----
 .../workflow/DeleteWorkflowEmailReceiver.tsx  | 63 ++++++++++++++++
 .../workflow/DeleteWorkflowWebhook.tsx        |  2 +-
 ui/admin/app/components/workflow/Workflow.tsx |  2 +
 .../workflow/WorkflowEmailDialog.tsx          | 66 +++++++++++++++++
 .../workflow/WorkflowEmailPanel.tsx           | 69 ++++++++++++++++++
 .../workflow/WorkflowWebhookDialog.tsx        | 12 +++-
 ui/admin/app/lib/model/email-receivers.ts     |  2 +-
 ...auth.workflow-triggers.email.$receiver.tsx | 11 ++-
 15 files changed, 300 insertions(+), 52 deletions(-)
 create mode 100644 ui/admin/app/components/workflow/DeleteWorkflowEmailReceiver.tsx
 create mode 100644 ui/admin/app/components/workflow/WorkflowEmailDialog.tsx
 create mode 100644 ui/admin/app/components/workflow/WorkflowEmailPanel.tsx

diff --git a/ui/admin/app/components/agent/AgentDropdownActions.tsx b/ui/admin/app/components/agent/AgentDropdownActions.tsx
index ee7ba8e5c..12fc40813 100644
--- a/ui/admin/app/components/agent/AgentDropdownActions.tsx
+++ b/ui/admin/app/components/agent/AgentDropdownActions.tsx
@@ -42,7 +42,7 @@ export function AgentDropdownActions({ agent }: { agent: Agent }) {
     return (
         <>
             <DropdownMenu modal>
-                <DropdownMenuTrigger>
+                <DropdownMenuTrigger asChild>
                     <Button size="icon" variant="ghost">
                         <EllipsisVerticalIcon className="w-4 h-4" />
                     </Button>
diff --git a/ui/admin/app/components/agent/AgentPublishStatus.tsx b/ui/admin/app/components/agent/AgentPublishStatus.tsx
index 651f9e805..63eefd779 100644
--- a/ui/admin/app/components/agent/AgentPublishStatus.tsx
+++ b/ui/admin/app/components/agent/AgentPublishStatus.tsx
@@ -104,7 +104,7 @@ export function AgentPublishStatus({
                     className="h-8 text-muted-foreground text-sm bg-background flex-row-reverse"
                     holdStatusDelay={6000}
                     text={agentUrl}
-                    iconOnly
+                    hideText
                 />
 
                 <Link
diff --git a/ui/admin/app/components/composed/CopyText.tsx b/ui/admin/app/components/composed/CopyText.tsx
index 88f13d32e..f8540830a 100644
--- a/ui/admin/app/components/composed/CopyText.tsx
+++ b/ui/admin/app/components/composed/CopyText.tsx
@@ -11,19 +11,30 @@ import {
     TooltipTrigger,
 } from "~/components/ui/tooltip";
 
+type CopyTextProps = {
+    text: string;
+    displayText?: string;
+    className?: string;
+    holdStatusDelay?: number;
+    hideText?: boolean;
+    hideIcon?: boolean;
+    classNames?: {
+        root?: string;
+        textWrapper?: string;
+        text?: string;
+        icon?: string;
+    };
+};
+
 export function CopyText({
     text,
     displayText = text,
     className,
     holdStatusDelay,
-    iconOnly,
-}: {
-    text: string;
-    displayText?: string;
-    className?: string;
-    holdStatusDelay?: number;
-    iconOnly?: boolean;
-}) {
+    hideText,
+    hideIcon,
+    classNames = {},
+}: CopyTextProps) {
     const [isCopied, setIsCopied] = useState(false);
 
     useEffect(() => {
@@ -38,17 +49,26 @@ export function CopyText({
         <div
             className={cn(
                 "flex items-center gap-2 bg-accent rounded-md w-fit overflow-hidden",
-                className
+                className,
+                classNames.root
             )}
         >
-            {!iconOnly && (
+            {!hideText && (
                 <Tooltip>
                     <TooltipTrigger
                         type="button"
                         onClick={() => handleCopy(text)}
-                        className="decoration-dotted underline-offset-4 underline text-ellipsis overflow-hidden text-nowrap"
+                        className={cn(
+                            "decoration-dotted underline-offset-4 underline text-ellipsis overflow-hidden text-nowrap",
+                            classNames.textWrapper
+                        )}
                     >
-                        <p className="truncate break-words p-2">
+                        <p
+                            className={cn(
+                                "truncate break-words p-2",
+                                classNames.text
+                            )}
+                        >
                             {displayText}
                         </p>
                     </TooltipTrigger>
@@ -60,19 +80,21 @@ export function CopyText({
                 </Tooltip>
             )}
 
-            <Button
-                size="icon"
-                onClick={() => handleCopy(text)}
-                className="aspect-square"
-                variant="ghost"
-                type="button"
-            >
-                {isCopied ? (
-                    <ClipboardCheckIcon className="text-success" />
-                ) : (
-                    <ClipboardIcon />
-                )}
-            </Button>
+            {!hideIcon && (
+                <Button
+                    size="icon"
+                    onClick={() => handleCopy(text)}
+                    className={cn("aspect-square", classNames.icon)}
+                    variant="ghost"
+                    type="button"
+                >
+                    {isCopied ? (
+                        <ClipboardCheckIcon className="text-success" />
+                    ) : (
+                        <ClipboardIcon />
+                    )}
+                </Button>
+            )}
         </div>
     );
 
diff --git a/ui/admin/app/components/composed/typography.tsx b/ui/admin/app/components/composed/typography.tsx
index 19bf18281..4ac2b4178 100644
--- a/ui/admin/app/components/composed/typography.tsx
+++ b/ui/admin/app/components/composed/typography.tsx
@@ -13,7 +13,7 @@ export function Truncate({
     className,
     asChild,
     disableTooltip,
-    tooltipContent = <p>{children}</p>,
+    tooltipContent = children,
 }: {
     children: React.ReactNode;
     className?: string;
@@ -23,8 +23,10 @@ export function Truncate({
 }) {
     const Comp = asChild ? Slot : "p";
 
+    const content = <Comp className="truncate">{children}</Comp>;
+
     if (disableTooltip) {
-        return <Comp className="truncate">{children}</Comp>;
+        return content;
     }
 
     return (
@@ -32,9 +34,7 @@ export function Truncate({
             <TooltipContent>{tooltipContent}</TooltipContent>
 
             <TooltipTrigger asChild>
-                <div className={cn("cursor-pointer", className)}>
-                    <Comp className="truncate">{children}</Comp>
-                </div>
+                <div className={cn("cursor-pointer", className)}>{content}</div>
             </TooltipTrigger>
         </Tooltip>
     );
diff --git a/ui/admin/app/components/tools/ToolIcon.tsx b/ui/admin/app/components/tools/ToolIcon.tsx
index e27359975..7c6f74081 100644
--- a/ui/admin/app/components/tools/ToolIcon.tsx
+++ b/ui/admin/app/components/tools/ToolIcon.tsx
@@ -37,7 +37,7 @@ export function ToolIcon(props: ToolIconProps) {
     }
 
     return (
-        <Tooltip delayDuration={200}>
+        <Tooltip>
             <TooltipTrigger>{content}</TooltipTrigger>
 
             <TooltipContent>
diff --git a/ui/admin/app/components/workflow-triggers/CreateWorkflowTrigger.tsx b/ui/admin/app/components/workflow-triggers/CreateWorkflowTrigger.tsx
index cda5ebc88..fa223dac1 100644
--- a/ui/admin/app/components/workflow-triggers/CreateWorkflowTrigger.tsx
+++ b/ui/admin/app/components/workflow-triggers/CreateWorkflowTrigger.tsx
@@ -20,7 +20,7 @@ import {
 export function CreateWorkflowTrigger() {
     return (
         <Dialog>
-            <DialogTrigger>
+            <DialogTrigger asChild>
                 <Button>
                     <PlusIcon /> Create Trigger
                 </Button>
diff --git a/ui/admin/app/components/workflow-triggers/EmailReceiverForm.tsx b/ui/admin/app/components/workflow-triggers/EmailReceiverForm.tsx
index 2f6160227..0267edcdb 100644
--- a/ui/admin/app/components/workflow-triggers/EmailReceiverForm.tsx
+++ b/ui/admin/app/components/workflow-triggers/EmailReceiverForm.tsx
@@ -1,8 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router";
-import { $path } from "safe-routes";
 import { toast } from "sonner";
 import useSWR, { mutate } from "swr";
 import { z } from "zod";
@@ -32,29 +30,34 @@ const formSchema = z.object({
     description: z.string(),
     alias: z.string(),
     workflow: z.string().min(1, "Workflow is required"),
-    allowedSenders: z.array(z.string()),
+    allowedSenders: z.array(z.string()).optional(),
 });
 
 export type EmailRecieverFormValues = z.infer<typeof formSchema>;
 
 type EmailRecieverFormProps = {
-    emailReceiver?: EmailReceiver;
+    emailReceiver?: Partial<EmailReceiver>;
+    onContinue?: () => void;
+    hideTitle?: boolean;
 };
 
-export function EmailReceiverForm({ emailReceiver }: EmailRecieverFormProps) {
-    const navigate = useNavigate();
+export function EmailReceiverForm({
+    emailReceiver,
+    onContinue,
+    hideTitle,
+}: EmailRecieverFormProps) {
     const getWorkflows = useSWR(WorkflowService.getWorkflows.key(), () =>
         WorkflowService.getWorkflows()
     );
 
     const handleSubmitSuccess = () => {
-        if (emailReceiver) {
+        if (emailReceiver?.id) {
             mutate(
                 EmailReceiverApiService.getEmailReceiverById(emailReceiver.id)
             );
         }
         mutate(EmailReceiverApiService.getEmailReceivers.key());
-        navigate($path("/workflow-triggers"));
+        onContinue?.();
     };
 
     const form = useForm<EmailRecieverFormValues>({
@@ -69,6 +72,8 @@ export function EmailReceiverForm({ emailReceiver }: EmailRecieverFormProps) {
         },
     });
 
+    const { handleSubmit, reset } = form;
+
     const createEmailReceiver = useAsync(
         EmailReceiverApiService.createEmailReceiver,
         {
@@ -91,11 +96,11 @@ export function EmailReceiverForm({ emailReceiver }: EmailRecieverFormProps) {
 
     useEffect(() => {
         if (emailReceiver) {
-            form.reset(emailReceiver);
+            reset(emailReceiver);
         }
-    }, [emailReceiver, form]);
+    }, [emailReceiver, reset]);
 
-    const handleSubmit = form.handleSubmit((values: EmailRecieverFormValues) =>
+    const onSubmit = handleSubmit((values: EmailRecieverFormValues) =>
         emailReceiver?.id
             ? updateEmailReceiver.execute(emailReceiver.id, values)
             : createEmailReceiver.execute(values)
@@ -111,9 +116,11 @@ export function EmailReceiverForm({ emailReceiver }: EmailRecieverFormProps) {
             <Form {...form}>
                 <form
                     className="space-y-8 p-8 max-w-3xl mx-auto"
-                    onSubmit={handleSubmit}
+                    onSubmit={onSubmit}
                 >
-                    <h2>{isEdit ? "Edit" : "Create"} Email Receiver</h2>
+                    {!hideTitle && (
+                        <h2>{isEdit ? "Edit" : "Create"} Email Trigger</h2>
+                    )}
 
                     <ControlledInput
                         control={form.control}
@@ -162,7 +169,7 @@ export function EmailReceiverForm({ emailReceiver }: EmailRecieverFormProps) {
                         disabled={loading}
                         loading={loading}
                     >
-                        {isEdit ? "Update" : "Create"} Email Receiver
+                        {isEdit ? "Update" : "Create"} Email Trigger
                     </Button>
                 </form>
             </Form>
diff --git a/ui/admin/app/components/workflow/DeleteWorkflowEmailReceiver.tsx b/ui/admin/app/components/workflow/DeleteWorkflowEmailReceiver.tsx
new file mode 100644
index 000000000..82ffee5d9
--- /dev/null
+++ b/ui/admin/app/components/workflow/DeleteWorkflowEmailReceiver.tsx
@@ -0,0 +1,63 @@
+import { TrashIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { mutate } from "swr";
+
+import { EmailReceiverApiService } from "~/lib/service/api/emailReceiverApiService";
+
+import { Button } from "~/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "~/components/ui/popover";
+import { useAsync } from "~/hooks/useAsync";
+
+export function DeleteWorkflowEmailReceiver({
+    emailReceiverId,
+}: {
+    emailReceiverId: string;
+}) {
+    const [open, setOpen] = useState(false);
+
+    const deleteEmailReceiver = useAsync(
+        EmailReceiverApiService.deleteEmailReceiver,
+        {
+            onSuccess: () => {
+                mutate(EmailReceiverApiService.getEmailReceivers.key());
+            },
+            onError: () => toast.error(`Something went wrong.`),
+        }
+    );
+
+    const handleDelete = async () => {
+        await deleteEmailReceiver.execute(emailReceiverId);
+        setOpen(false);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <TrashIcon />
+                </Button>
+            </PopoverTrigger>
+
+            <PopoverContent>
+                <p>Are you sure you want to delete this email trigger?</p>
+                <div className="flex justify-end gap-2">
+                    <Button variant="ghost" onClick={() => setOpen(false)}>
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="destructive"
+                        onClick={handleDelete}
+                        loading={deleteEmailReceiver.isLoading}
+                    >
+                        Delete
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}
diff --git a/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx b/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx
index 911fdf642..cf6459f2d 100644
--- a/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx
+++ b/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx
@@ -30,7 +30,7 @@ export function DeleteWorkflowWebhook({ webhookId }: { webhookId: string }) {
 
     return (
         <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger>
+            <PopoverTrigger asChild>
                 <Button variant="ghost" size="icon">
                     <TrashIcon />
                 </Button>
diff --git a/ui/admin/app/components/workflow/Workflow.tsx b/ui/admin/app/components/workflow/Workflow.tsx
index 08a2b30b7..e985d5115 100644
--- a/ui/admin/app/components/workflow/Workflow.tsx
+++ b/ui/admin/app/components/workflow/Workflow.tsx
@@ -17,6 +17,7 @@ import {
     WorkflowProvider,
     useWorkflow,
 } from "~/components/workflow/WorkflowContext";
+import { WorkflowEmailPanel } from "~/components/workflow/WorkflowEmailPanel";
 import { WorkflowSchedulePanel } from "~/components/workflow/WorkflowSchedulePanel";
 import { WorkflowWebhookPanel } from "~/components/workflow/WorkflowWebhookPanel";
 import { StepsForm } from "~/components/workflow/steps/StepsForm";
@@ -172,6 +173,7 @@ function WorkflowContent({ className }: WorkflowProps) {
 
                 <WorkflowSchedulePanel workflowId={workflow.id} />
                 <WorkflowWebhookPanel workflowId={workflow.id} />
+                <WorkflowEmailPanel workflowId={workflow.id} />
             </ScrollArea>
 
             <footer className="flex justify-between items-center p-4 gap-4 border-t text-muted-foreground">
diff --git a/ui/admin/app/components/workflow/WorkflowEmailDialog.tsx b/ui/admin/app/components/workflow/WorkflowEmailDialog.tsx
new file mode 100644
index 000000000..8e8bae97d
--- /dev/null
+++ b/ui/admin/app/components/workflow/WorkflowEmailDialog.tsx
@@ -0,0 +1,66 @@
+import { EditIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
+
+import { EmailReceiver } from "~/lib/model/email-receivers";
+
+import { Button } from "~/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "~/components/ui/dialog";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { EmailReceiverForm } from "~/components/workflow-triggers/EmailReceiverForm";
+
+export function WorkflowEmailDialog({
+    workflowId,
+    emailReceiver,
+}: {
+    workflowId: string;
+    emailReceiver?: EmailReceiver;
+}) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {emailReceiver ? (
+                    <Button variant="ghost" size="icon">
+                        <EditIcon />
+                    </Button>
+                ) : (
+                    <Button variant="ghost" startContent={<PlusIcon />}>
+                        Add Email Trigger
+                    </Button>
+                )}
+            </DialogTrigger>
+            <DialogContent className="p-0 gap-0">
+                <DialogHeader className="p-8 pb-0">
+                    <DialogTitle>
+                        {emailReceiver
+                            ? "Update Workflow Email Receiver"
+                            : "Add Email Receiver To Workflow"}
+                    </DialogTitle>
+
+                    <DialogDescription>
+                        Email Receivers are used to run the workflow when an
+                        email is received.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <ScrollArea className="max-h-[60vh]">
+                    <EmailReceiverForm
+                        onContinue={() => setOpen(false)}
+                        emailReceiver={
+                            emailReceiver ?? { workflow: workflowId }
+                        }
+                        hideTitle
+                    />
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/ui/admin/app/components/workflow/WorkflowEmailPanel.tsx b/ui/admin/app/components/workflow/WorkflowEmailPanel.tsx
new file mode 100644
index 000000000..c2a323094
--- /dev/null
+++ b/ui/admin/app/components/workflow/WorkflowEmailPanel.tsx
@@ -0,0 +1,69 @@
+import { MailIcon } from "lucide-react";
+import useSWR from "swr";
+
+import { EmailReceiverApiService } from "~/lib/service/api/emailReceiverApiService";
+
+import { CopyText } from "~/components/composed/CopyText";
+import { CardDescription } from "~/components/ui/card";
+import { DeleteWorkflowEmailReceiver } from "~/components/workflow/DeleteWorkflowEmailReceiver";
+import { WorkflowEmailDialog } from "~/components/workflow/WorkflowEmailDialog";
+
+export function WorkflowEmailPanel({ workflowId }: { workflowId: string }) {
+    const { data: receivers } = useSWR(
+        EmailReceiverApiService.getEmailReceivers.key(),
+        EmailReceiverApiService.getEmailReceivers
+    );
+
+    const workflowReceivers = receivers?.filter(
+        (receiver) => receiver.workflow === workflowId
+    );
+
+    return (
+        <div className="p-4 m-4 flex flex-col gap-4">
+            <h4 className="flex items-center gap-2">
+                <MailIcon className="w-4 h-4" />
+                Email Triggers
+            </h4>
+
+            <CardDescription>
+                Add Email Triggers to run the workflow when an email is
+                received.
+            </CardDescription>
+
+            <div className="flex flex-col gap-2">
+                {workflowReceivers?.map((receiver) => (
+                    <div
+                        key={receiver.id}
+                        className="flex justify-between items-center"
+                    >
+                        <p>{receiver.name || receiver.id}</p>
+
+                        <div className="flex gap-2">
+                            <CopyText
+                                text={receiver.emailAddress}
+                                className="bg-transparent text-muted-foreground text-sm"
+                                classNames={{
+                                    text: "p-0",
+                                }}
+                                hideIcon
+                            />
+
+                            <WorkflowEmailDialog
+                                workflowId={workflowId}
+                                emailReceiver={receiver}
+                            />
+
+                            <DeleteWorkflowEmailReceiver
+                                emailReceiverId={receiver.id}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            <div className="flex justify-end">
+                <WorkflowEmailDialog workflowId={workflowId} />
+            </div>
+        </div>
+    );
+}
diff --git a/ui/admin/app/components/workflow/WorkflowWebhookDialog.tsx b/ui/admin/app/components/workflow/WorkflowWebhookDialog.tsx
index 6d2e78e0f..bb3107a73 100644
--- a/ui/admin/app/components/workflow/WorkflowWebhookDialog.tsx
+++ b/ui/admin/app/components/workflow/WorkflowWebhookDialog.tsx
@@ -7,6 +7,7 @@ import { Button } from "~/components/ui/button";
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogHeader,
     DialogTitle,
     DialogTrigger,
@@ -38,7 +39,16 @@ export function WorkflowWebhookDialog({
             </DialogTrigger>
             <DialogContent className="p-0 gap-0">
                 <DialogHeader className="p-8 pb-0">
-                    <DialogTitle>Add Webhook To Workflow</DialogTitle>
+                    <DialogTitle>
+                        {webhook
+                            ? "Update Workflow Webhook"
+                            : "Add Webhook To Workflow"}
+                    </DialogTitle>
+
+                    <DialogDescription>
+                        Webhooks are used to run the workflow when an event is
+                        received.
+                    </DialogDescription>
                 </DialogHeader>
 
                 <ScrollArea className="h-[600px]">
diff --git a/ui/admin/app/lib/model/email-receivers.ts b/ui/admin/app/lib/model/email-receivers.ts
index 55f586615..ae7b8496e 100644
--- a/ui/admin/app/lib/model/email-receivers.ts
+++ b/ui/admin/app/lib/model/email-receivers.ts
@@ -11,7 +11,7 @@ type EmailReceiverBase = {
 export type EmailReceiver = EntityMeta &
     EmailReceiverBase & {
         aliasAssigned?: boolean;
-        emailAddress?: string;
+        emailAddress: string;
     };
 
 export type CreateEmailReceiver = EmailReceiverBase;
diff --git a/ui/admin/app/routes/_auth.workflow-triggers.email.$receiver.tsx b/ui/admin/app/routes/_auth.workflow-triggers.email.$receiver.tsx
index b7b8585aa..6f5d97e64 100644
--- a/ui/admin/app/routes/_auth.workflow-triggers.email.$receiver.tsx
+++ b/ui/admin/app/routes/_auth.workflow-triggers.email.$receiver.tsx
@@ -3,7 +3,9 @@ import {
     MetaFunction,
     useLoaderData,
     useMatch,
+    useNavigate,
 } from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
 import { EmailReceiverApiService } from "~/lib/service/api/emailReceiverApiService";
@@ -32,13 +34,20 @@ export async function clientLoader({
 
 export default function EmailReceiverPage() {
     const { emailReceiverId } = useLoaderData<typeof clientLoader>();
+
+    const navigate = useNavigate();
     const { data: emailReceiver } = useSWR(
         EmailReceiverApiService.getEmailReceiverById.key(emailReceiverId),
         ({ emailReceiverId }) =>
             EmailReceiverApiService.getEmailReceiverById(emailReceiverId)
     );
 
-    return <EmailReceiverForm emailReceiver={emailReceiver} />;
+    return (
+        <EmailReceiverForm
+            emailReceiver={emailReceiver}
+            onContinue={() => navigate($path("/workflow-triggers"))}
+        />
+    );
 }
 
 const EmailReceiverBreadcrumb = () => {