Merge pull request #96 from dafthunk-com/89-rework-deployment-http-integration-card

89 rework deployment http integration card

Author: leonardcser

apps/api/src/db/migrations/meta/0005_snapshot.json

@@ -45,4 +45,4 @@
       "breakpoints": true
     }
   ]
-}
+}

apps/api/src/db/migrations/meta/_journal.json

@@ -1202,14 +1202,9 @@ export async function getDueCronTriggers(
       selectedDeployment: selectedDeployment,
     })
     .from(cronTriggers)
-    .where(
-      and(eq(cronTriggers.active, true), lte(cronTriggers.nextRunAt, now))
-    )
+    .where(and(eq(cronTriggers.active, true), lte(cronTriggers.nextRunAt, now)))
     .innerJoin(workflows, eq(workflows.id, cronTriggers.workflowId))
-    .innerJoin(
-      latestByWorkflow,
-      eq(latestByWorkflow.workflowId, workflows.id)
-    )
+    .innerJoin(latestByWorkflow, eq(latestByWorkflow.workflowId, workflows.id))
     .innerJoin(
       latestDeployment,
       and(

apps/api/src/db/queries.ts

@@ -28,7 +28,6 @@ import {
   createDatabase,
   createHandle,
   createWorkflow,
-  type CronTriggerInsert,
   deleteWorkflow,
   ExecutionStatus,
   getCronTrigger,

apps/api/src/routes/workflows.ts

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+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={cn(vertical ? verticalClasses : horizontalClasses, className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface ActionBarButtonProps {
+  onClick: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+  className?: string;
+  tooltip?: React.ReactNode;
+  children: React.ReactNode;
+  tooltipSide?: "top" | "bottom" | "left" | "right";
+}
+
+export function ActionBarButton({
+  onClick,
+  disabled = false,
+  className = "",
+  tooltip,
+  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>{trigger}</TooltipTrigger>
+        <TooltipContent side={tooltipSide}>{tooltip}</TooltipContent>
+      </div>
+    </Tooltip>
+  );
+}

apps/web/src/components/deployments/email-integration-card.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/ui/action-bar.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);