feat(web): replace EmailIntegrationCard with EmailTriggerDialog and HttpIntegrationDialog for enhanced workflow integration management

Author: leonardcser

apps/web/src/components/deployments/email-integration-card.tsx

@@ -11,19 +11,23 @@ import { cn } from "@/utils/utils";
 export interface ActionBarGroupProps {
   children: React.ReactNode;
   vertical?: boolean;
+  className?: string;
 }
 
 export function ActionBarGroup({
   children,
   vertical = false,
+  className = "",
 }: ActionBarGroupProps) {
   const horizontalClasses =
     "flex items-center gap-0.5 [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:only-child]:rounded-lg";
   const verticalClasses =
     "flex flex-col items-center gap-0.5 [&>*:first-child]:rounded-t-lg [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-b-lg [&>*:last-child]:rounded-t-none [&>*:only-child]:rounded-lg";
 
   return (
-    <div className={vertical ? verticalClasses : horizontalClasses}>
+    <div
+      className={cn(vertical ? verticalClasses : horizontalClasses, className)}
+    >
       {children}
     </div>
   );
@@ -33,7 +37,7 @@ export interface ActionBarButtonProps {
   onClick: (e: React.MouseEvent) => void;
   disabled?: boolean;
   className?: string;
-  tooltip: React.ReactNode;
+  tooltip?: React.ReactNode;
   children: React.ReactNode;
   tooltipSide?: "top" | "bottom" | "left" | "right";
 }
@@ -46,20 +50,24 @@ export function ActionBarButton({
   children,
   tooltipSide = "top",
 }: ActionBarButtonProps) {
+  const trigger = (
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      className={cn("h-10 px-3 rounded-none", className, {
+        "opacity-50 cursor-not-allowed": disabled,
+      })}
+    >
+      {children}
+    </Button>
+  );
+  if (!tooltip) {
+    return trigger;
+  }
   return (
     <Tooltip delayDuration={0}>
       <div className="bg-background rounded-none overflow-hidden">
-        <TooltipTrigger asChild>
-          <Button
-            onClick={onClick}
-            disabled={disabled}
-            className={cn("h-10 px-3 rounded-none", className, {
-              "opacity-50 cursor-not-allowed": disabled,
-            })}
-          >
-            {children}
-          </Button>
-        </TooltipTrigger>
+        <TooltipTrigger asChild>{trigger}</TooltipTrigger>
         <TooltipContent side={tooltipSide}>{tooltip}</TooltipContent>
       </div>
     </Tooltip>

apps/web/src/components/ui/action-bar.tsx

@@ -0,0 +1,112 @@
+import { Mail } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface EmailTriggerDialogProps {
+  isOpen: boolean;
+  onClose: (open: boolean) => void;
+  orgHandle: string;
+  workflowHandle: string;
+  deploymentVersion?: string;
+  emailDomain?: string;
+}
+
+export function EmailTriggerDialog({
+  isOpen,
+  onClose,
+  orgHandle,
+  workflowHandle,
+  deploymentVersion,
+  emailDomain = "dafthunk.com",
+}: EmailTriggerDialogProps) {
+  let emailAddress = `workflow+${orgHandle}+${workflowHandle}`;
+  if (deploymentVersion && deploymentVersion !== "latest") {
+    emailAddress += `+${deploymentVersion}`;
+  }
+  emailAddress += `@${emailDomain}`;
+
+  const handleCopyEmail = () => {
+    navigator.clipboard.writeText(emailAddress);
+    toast.success("Email address copied to clipboard");
+  };
+
+  const description = deploymentVersion
+    ? `Send emails to this address to trigger version ${deploymentVersion} of the workflow.`
+    : "Send emails to this address to trigger the workflow. This will always trigger the latest deployed version of the workflow.";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-xl flex items-center gap-2">
+            <Mail className="h-5 w-5" />
+            Email Trigger
+          </DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email-address">Workflow Email Address</Label>
+            <div className="flex items-center gap-2">
+              <Input
+                id="email-address"
+                value={emailAddress}
+                readOnly
+                className="font-mono h-9"
+              />
+              <Button variant="outline" onClick={handleCopyEmail}>
+                Copy
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <h4 className="text-sm font-medium mb-2">How it works:</h4>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
+                <li>
+                  The email subject will be used as the 'subject' input for the
+                  workflow
+                </li>
+                <li>
+                  The email body (text version) will be used as the 'body' input
+                  for the workflow
+                </li>
+                <li>
+                  Your workflow must be configured to accept these inputs for
+                  the integration to work properly
+                </li>
+                <li>
+                  Only the text version of the email body is processed; HTML
+                  content is ignored
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="text-sm font-medium mb-2">Example usage:</h4>
+              <div className="bg-muted p-3 rounded-md text-sm font-mono">
+                To: {emailAddress}
+                <br />
+                Subject: Process my document
+                <br />
+                Body: Please analyze the attached data and provide insights.
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/workflow/email-trigger-dialog.tsx

@@ -15,10 +15,9 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea"; // For body field
+import { Textarea } from "@/components/ui/textarea";
 
-// Define the Zod schema as the primary source of truth for the form's shape
-const emailDialogZodSchema = z.object({
+const executionEmailDialogZodSchema = z.object({
   from: z
     .string()
     .email({ message: "Invalid email address for From field." })
@@ -27,45 +26,38 @@ const emailDialogZodSchema = z.object({
   body: z.string().min(1, { message: "Body is required." }),
 });
 
-// Infer the TypeScript type from the Zod schema. This will be used by the form.
-type EmailDialogFormShape = z.infer<typeof emailDialogZodSchema>;
+type ExecutionEmailDialogFormShape = z.infer<
+  typeof executionEmailDialogZodSchema
+>;
 
-// The EmailData interface is exported for use by parent components/services.
-// It must be structurally identical to EmailDialogFormShape.
 export interface EmailData {
   from: string;
   subject: string;
   body: string;
 }
 
-// Helper type assertion (optional, for development, can be removed)
-// This ensures EmailData and EmailDialogFormShape are compatible.
-type Assert<T, U extends T> = U;
-type _SchemaMatchesData = Assert<EmailData, EmailDialogFormShape>;
-type _DataMatchesSchema = Assert<EmailDialogFormShape, EmailData>;
-
-type EmailDialogProps = {
+type ExecutionEmailDialogProps = {
   isOpen: boolean;
   onClose: () => void;
   // The onSubmit prop uses EmailData, which must align with EmailDialogFormShape
   onSubmit: (formData: EmailData) => void;
   onCancel?: () => void;
 };
 
-export function EmailDialog({
+export function ExecutionEmailDialog({
   isOpen,
   onClose,
   onSubmit,
   onCancel,
-}: EmailDialogProps) {
+}: ExecutionEmailDialogProps) {
   const {
     control,
     handleSubmit,
     reset,
     formState: { errors, isDirty, isValid },
-  } = useForm<EmailDialogFormShape>({
-    // Use the inferred type from the Zod schema
-    resolver: zodResolver(emailDialogZodSchema), // Use the Zod schema directly
+  } = useForm<ExecutionEmailDialogFormShape>({
+    // @ts-expect-error - zodResolver is not typed correctly
+    resolver: zodResolver(executionEmailDialogZodSchema),
     mode: "onChange",
     defaultValues: {
       from: "",
@@ -85,7 +77,9 @@ export function EmailDialog({
   }, [isOpen, reset]);
 
   // processSubmit now works with EmailDialogFormShape
-  const processSubmit: SubmitHandler<EmailDialogFormShape> = (data) => {
+  const processSubmit: SubmitHandler<ExecutionEmailDialogFormShape> = (
+    data
+  ) => {
     // onSubmit expects EmailData. Since EmailDialogFormShape and EmailData are structurally identical,
     // this assignment is safe.
     onSubmit(data);