Update UI to support batch payloads

apps/webapp/app/components/run/TriggerDetail.tsx

@@ -15,17 +15,19 @@ import { DisplayProperty } from "@trigger.dev/core";
 
 export function TriggerDetail({
   trigger,
+  payload,
   event,
   properties,
 }: {
   trigger: DetailedEvent;
+  payload: string;
   event: {
     title: string;
     icon: string;
   };
   properties: DisplayProperty[];
 }) {
-  const { id, name, payload, context, timestamp, deliveredAt } = trigger;
+  const { id, name, context, timestamp, deliveredAt } = trigger;
 
   return (
     <RunPanel selected={false}>

apps/webapp/app/presenters/RunPresenter.server.ts

@@ -78,6 +78,7 @@ export class RunPresenter {
         slug: run.environment.slug,
       },
       event: this.#prepareEventData(run.event),
+      payload: run.payload,
       tasks,
       runConnections: run.runConnections,
       missingConnections: run.missingConnections,
@@ -112,6 +113,7 @@ export class RunPresenter {
         isTest: true,
         properties: true,
         output: true,
+        payload: true,
         version: {
           select: {
             version: true,

apps/webapp/app/presenters/TestJobPresenter.server.ts

@@ -4,7 +4,6 @@ import { PrismaClient, prisma } from "~/db.server";
 import { Job } from "~/models/job.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
-import { EventExample } from "@trigger.dev/core";
 
 export class TestJobPresenter {
   #prismaClient: PrismaClient;
@@ -86,6 +85,7 @@ export class TestJobPresenter {
             createdAt: true,
             number: true,
             status: true,
+            payload: true,
             event: {
               select: {
                 payload: true,
@@ -123,7 +123,7 @@ export class TestJobPresenter {
       alias.version.examples.map((example) => ({
         ...example,
         icon: example.icon ?? undefined,
-        payload: example.payload ? JSON.stringify(example.payload, exampleReplacer, 2) : undefined,
+        payload: prettyJsonValue(example.payload, exampleReplacer),
       }))
     );
 
@@ -139,13 +139,18 @@ export class TestJobPresenter {
         ),
       })),
       examples,
-      runs: job.runs.map((r) => ({
-        id: r.id,
-        number: r.number,
-        status: r.status,
-        created: r.createdAt,
-        payload: r.event.payload ? JSON.stringify(r.event.payload, null, 2) : undefined,
-      })),
+      runs: job.runs.map((r) => {
+        // For compatibility with old Job Runs where payload is only available on the related Event Record
+        const payload = r.payload !== null ? JSON.parse(r.payload) : r.event.payload;
+
+        return {
+          id: r.id,
+          number: r.number,
+          status: r.status,
+          created: r.createdAt,
+          payload: prettyJsonValue(payload),
+        };
+      }),
     };
   }
 }
@@ -165,3 +170,12 @@ function exampleReplacer(key: string, value: any) {
 
   return value;
 }
+
+function prettyJsonValue(value: any, replacer?: (key: string, value: any) => any, space = 2) {
+  if (value === null) {
+    return;
+  }
+
+  const pretty = JSON.stringify(value, replacer, space);
+  return pretty === "{}" ? "{\n  \n}" : pretty;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam.trigger/route.tsx

@@ -28,5 +28,16 @@ export default function Page() {
   const job = useJob();
   const run = useRun();
 
-  return <TriggerDetail trigger={trigger} event={job.event} properties={run.properties} />;
+  // For compatibility with old Job Runs where payload is only available on the related Event Record
+  const payload =
+    run.payload !== null ? JSON.stringify(JSON.parse(run.payload), null, 2) : trigger.payload;
+
+  return (
+    <TriggerDetail
+      trigger={trigger}
+      event={job.event}
+      payload={payload}
+      properties={run.properties}
+    />
+  );
 }