refactor(api, web): clean up code formatting and improve readability in various files, including email handling and dashboard components

Author: bchapuis

apps/api/src/db/queries.ts

@@ -689,8 +689,12 @@ export async function getDeploymentsGroupedByWorkflow(
       db
         .select({
           workflowId: deployments.workflowId,
-          maxVersion: sql<number>`MAX(${deployments.version})`.mapWith(Number).as("max_version"),
-          deploymentCount: sql<number>`COUNT(${deployments.id})`.mapWith(Number).as("deployment_count"),
+          maxVersion: sql<number>`MAX(${deployments.version})`
+            .mapWith(Number)
+            .as("max_version"),
+          deploymentCount: sql<number>`COUNT(${deployments.id})`
+            .mapWith(Number)
+            .as("deployment_count"),
         })
         .from(deployments)
         .innerJoin(
@@ -727,11 +731,18 @@ export async function getDeploymentsGroupedByWorkflow(
     .innerJoin(
       actualLatestDeployment,
       and(
-        eq(actualLatestDeployment.workflowId, workflowDeploymentAggregates.workflowId),
-        eq(actualLatestDeployment.version, workflowDeploymentAggregates.maxVersion)
+        eq(
+          actualLatestDeployment.workflowId,
+          workflowDeploymentAggregates.workflowId
+        ),
+        eq(
+          actualLatestDeployment.version,
+          workflowDeploymentAggregates.maxVersion
+        )
       )
     )
-    .innerJoin( // Ensure workflows themselves are filtered by the organization
+    .innerJoin(
+      // Ensure workflows themselves are filtered by the organization
       organizations,
       and(
         eq(workflows.organizationId, organizations.id),
@@ -1064,4 +1075,3 @@ export async function getExecutionWithVisibility(
 
   return execution;
 }
-

apps/api/src/email.ts

@@ -54,19 +54,21 @@ export async function handleIncomingEmail(
     return;
   }
 
-  let [triggerType, organizationIdOrHandle, workflowIdOrHandle, version] =
-    parts;
+  const [
+    triggerType,
+    organizationIdOrHandle,
+    workflowIdOrHandle,
+    deploymentVersion,
+  ] = parts;
+  const version = deploymentVersion || "latest";
 
   if (triggerType !== "workflow") {
-    console.error(
-      `Invalid trigger type: ${triggerType}. Expected "workflow".`
-    );
+    console.error(`Invalid trigger type: ${triggerType}. Expected "workflow".`);
     return;
   }
 
-  if (!version) {
-    version = "latest";
-  }
+  // TODO: Use triggerType if needed in the future. For now, it's parsed but not used.
+  console.log(`Parsed trigger type: ${triggerType}`);
 
   const db = createDatabase(env.DB);
 

apps/api/src/routes/dashboard.ts

@@ -33,16 +33,23 @@ dashboard.get("/", async (c) => {
     const workflowsCount = workflows.length;
 
     // Deployments count
-    const deployments = await getDeploymentsGroupedByWorkflow(db, organizationId);
+    const deployments = await getDeploymentsGroupedByWorkflow(
+      db,
+      organizationId
+    );
     const deploymentsCount = deployments.reduce(
       (acc: number, w: { deploymentCount: number }) => acc + w.deploymentCount,
       0
     );
 
     // Executions stats
-    const executions: ExecutionRow[] = await listExecutions(db, organizationId, {
-      limit: 10,
-    }); // limit for perf
+    const executions: ExecutionRow[] = await listExecutions(
+      db,
+      organizationId,
+      {
+        limit: 10,
+      }
+    ); // limit for perf
     const totalExecutions = executions.length;
     const runningExecutions = executions.filter(
       (e: ExecutionRow) => e.status === ExecutionStatus.EXECUTING

apps/api/src/routes/deployments.ts

@@ -44,7 +44,10 @@ deploymentRoutes.get("/", jwtMiddleware, async (c) => {
   const organizationId = c.get("organizationId")!;
   const db = createDatabase(c.env.DB);
 
-  const groupedDeployments = await getDeploymentsGroupedByWorkflow(db, organizationId);
+  const groupedDeployments = await getDeploymentsGroupedByWorkflow(
+    db,
+    organizationId
+  );
 
   // Transform to match WorkflowDeployment type
   const typedDeployments: WorkflowDeployment[] = groupedDeployments;
@@ -100,7 +103,11 @@ deploymentRoutes.get("/:workflowIdOrHandle", jwtMiddleware, async (c) => {
   }
 
   // Get the latest deployment
-  const deployment = await getLatestDeployment(db, workflowIdOrHandle, organizationId);
+  const deployment = await getLatestDeployment(
+    db,
+    workflowIdOrHandle,
+    organizationId
+  );
 
   if (!deployment) {
     return c.json({ error: "No deployments found for this workflow" }, 404);
@@ -142,8 +149,11 @@ deploymentRoutes.post("/:workflowIdOrHandle", jwtMiddleware, async (c) => {
 
   // Get the latest version number and increment
   const latestVersion =
-    (await getLatestDeploymentsVersionNumbers(db, workflowIdOrHandle, organizationId)) ||
-    0;
+    (await getLatestDeploymentsVersionNumbers(
+      db,
+      workflowIdOrHandle,
+      organizationId
+    )) || 0;
   const newVersion = latestVersion + 1;
 
   // Create new deployment
@@ -191,7 +201,11 @@ deploymentRoutes.get(
     }
 
     // Get all deployments for this workflow
-    const deploymentsList = await getDeployments(db, workflowIdOrHandle, organizationId);
+    const deploymentsList = await getDeployments(
+      db,
+      workflowIdOrHandle,
+      organizationId
+    );
 
     // Transform to match WorkflowDeploymentVersion type
     const deploymentVersions = deploymentsList.map((deployment) => {

apps/api/src/routes/executions.ts

@@ -14,7 +14,6 @@ import {
   createDatabase,
   getExecution,
   getExecutionWithVisibility,
-  getOrganization,
   getWorkflowName,
   getWorkflowNames,
   listExecutions,
@@ -39,7 +38,11 @@ executionRoutes.get("/:id", apiKeyOrJwtMiddleware, async (c) => {
     }
 
     // Get workflow name
-    const workflowName = await getWorkflowName(db, execution.workflowId, organizationId);
+    const workflowName = await getWorkflowName(
+      db,
+      execution.workflowId,
+      organizationId
+    );
 
     const executionData = execution.data as WorkflowExecution;
     const workflowExecution: WorkflowExecution = {
@@ -81,11 +84,7 @@ executionRoutes.get("/", jwtMiddleware, async (c) => {
     offset: parsedOffset,
   };
 
-  const executions = await listExecutions(
-    db,
-    organizationId,
-    queryParams
-  );
+  const executions = await listExecutions(db, organizationId, queryParams);
 
   // Get workflow names for all executions
   const workflowIds = [...new Set(executions.map((e) => e.workflowId))];
@@ -119,7 +118,11 @@ executionRoutes.patch("/:id/share/public", jwtMiddleware, async (c) => {
   const organizationId = c.get("organizationId")!;
 
   try {
-    const execution = await getExecutionWithVisibility(db, executionId, organizationId);
+    const execution = await getExecutionWithVisibility(
+      db,
+      executionId,
+      organizationId
+    );
 
     if (!execution) {
       return c.json({ error: "Execution not found" }, 404);

apps/api/src/routes/workflows.ts

@@ -59,7 +59,7 @@ workflowRoutes.get("/", jwtMiddleware, async (c) => {
   // Convert DB workflow objects to WorkflowWithMetadata objects
   const workflows: WorkflowWithMetadata[] = allWorkflows.map((workflow) => {
     return {
-      id:   workflow.id,
+      id: workflow.id,
       name: workflow.name,
       handle: workflow.handle,
       type: workflow.data.type,

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

@@ -72,4 +72,4 @@ export function EmailIntegrationCard({
       </CardContent>
     </Card>
   );
-} 
+}

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

@@ -19,7 +19,10 @@ import { Textarea } from "@/components/ui/textarea"; // For body field
 
 // Define the Zod schema as the primary source of truth for the form's shape
 const emailDialogZodSchema = z.object({
-  from: z.string().email({ message: "Invalid email address for From field." }).min(1, { message: "From is required." }),
+  from: z
+    .string()
+    .email({ message: "Invalid email address for From field." })
+    .min(1, { message: "From is required." }),
   subject: z.string().min(1, { message: "Subject is required." }),
   body: z.string().min(1, { message: "Body is required." }),
 });
@@ -41,7 +44,6 @@ type Assert<T, U extends T> = U;
 type _SchemaMatchesData = Assert<EmailData, EmailDialogFormShape>;
 type _DataMatchesSchema = Assert<EmailDialogFormShape, EmailData>;
 
-
 type EmailDialogProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -61,7 +63,8 @@ export function EmailDialog({
     handleSubmit,
     reset,
     formState: { errors, isDirty, isValid },
-  } = useForm<EmailDialogFormShape>({ // Use the inferred type from the Zod schema
+  } = useForm<EmailDialogFormShape>({
+    // Use the inferred type from the Zod schema
     resolver: zodResolver(emailDialogZodSchema), // Use the Zod schema directly
     mode: "onChange",
     defaultValues: {
@@ -97,18 +100,25 @@ export function EmailDialog({
         <AlertDialogHeader>
           <AlertDialogTitle>Simulate Email Trigger</AlertDialogTitle>
           <AlertDialogDescription>
-            Fill in the details below to simulate sending an email. This will trigger the workflow.
+            Fill in the details below to simulate sending an email. This will
+            trigger the workflow.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <form onSubmit={handleSubmit(processSubmit)} id="emailTriggerForm">
           <div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto pr-2">
             <div>
-              <Label htmlFor="from">From <span className="text-destructive font-medium">*</span></Label>
+              <Label htmlFor="from">
+                From <span className="text-destructive font-medium">*</span>
+              </Label>
               <Controller
                 name="from"
                 control={control}
                 render={({ field }) => (
-                  <Input id="from" {...field} placeholder="sender@example.com" />
+                  <Input
+                    id="from"
+                    {...field}
+                    placeholder="sender@example.com"
+                  />
                 )}
               />
               {errors.from && (
@@ -118,7 +128,9 @@ export function EmailDialog({
               )}
             </div>
             <div>
-              <Label htmlFor="subject">Subject <span className="text-destructive font-medium">*</span></Label>
+              <Label htmlFor="subject">
+                Subject <span className="text-destructive font-medium">*</span>
+              </Label>
               <Controller
                 name="subject"
                 control={control}
@@ -133,12 +145,19 @@ export function EmailDialog({
               )}
             </div>
             <div>
-              <Label htmlFor="body">Body <span className="text-destructive font-medium">*</span></Label>
+              <Label htmlFor="body">
+                Body <span className="text-destructive font-medium">*</span>
+              </Label>
               <Controller
                 name="body"
                 control={control}
                 render={({ field }) => (
-                  <Textarea id="body" {...field} placeholder="Email body content..." className="min-h-[100px]" />
+                  <Textarea
+                    id="body"
+                    {...field}
+                    placeholder="Email body content..."
+                    className="min-h-[100px]"
+                  />
                 )}
               />
               {errors.body && (
@@ -164,4 +183,4 @@ export function EmailDialog({
       </AlertDialogContent>
     </AlertDialog>
   );
-} 
+}

apps/web/src/pages/dashboard-page.tsx

@@ -1,6 +1,14 @@
 import { CreateWorkflowRequest, WorkflowType } from "@dafthunk/types";
 import { format } from "date-fns";
-import { AlertCircle, Clock, Logs, Plus, Target, Workflow, MoreHorizontal, Eye } from "lucide-react";
+import {
+  AlertCircle,
+  Clock,
+  Logs,
+  MoreHorizontal,
+  Plus,
+  Target,
+  Workflow,
+} from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { Link } from "react-router";
@@ -12,14 +20,14 @@ import { InsetLoading } from "@/components/inset-loading";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DataTableCard } from "@/components/ui/data-table-card";
-import { CreateWorkflowDialog } from "@/components/workflow/create-workflow-dialog";
-import type { WorkflowExecutionStatus } from "@/components/workflow/workflow-types";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { CreateWorkflowDialog } from "@/components/workflow/create-workflow-dialog";
+import type { WorkflowExecutionStatus } from "@/components/workflow/workflow-types";
 import { useDashboard } from "@/services/dashboard-service";
 import { createWorkflow } from "@/services/workflow-service";
 
@@ -204,7 +212,9 @@ export function DashboardPage() {
               const execution = row.original as RecentExecutionItem;
               return (
                 <span className="text-xs text-muted-foreground">
-                  {execution.startedAt ? format(new Date(execution.startedAt), "PPpp") : "-"}
+                  {execution.startedAt
+                    ? format(new Date(execution.startedAt), "PPpp")
+                    : "-"}
                 </span>
               );
             },
@@ -242,13 +252,19 @@ export function DashboardPage() {
                   formattedDuration += `${minutes}m `;
                 }
                 formattedDuration += `${seconds}s`;
-                if (formattedDuration.trim() === "0s" && durationMs > 0 && durationMs < 1000) {
+                if (
+                  formattedDuration.trim() === "0s" &&
+                  durationMs > 0 &&
+                  durationMs < 1000
+                ) {
                   formattedDuration = "<1s";
-                } else if (formattedDuration.trim() === "0s" && durationMs === 0) {
-                   formattedDuration = "0s";
+                } else if (
+                  formattedDuration.trim() === "0s" &&
+                  durationMs === 0
+                ) {
+                  formattedDuration = "0s";
                 }
 
-
                 return <div>{formattedDuration.trim()}</div>;
               }
               return <div>-</div>;

apps/web/src/pages/workflows/deployment-detail-page.tsx

@@ -7,7 +7,6 @@ import {
   Clock,
   GitCommitHorizontal,
   History,
-  Mail,
   MoreHorizontal,
   Play,
 } from "lucide-react";