More run metadata stuff

- Add metadata to testing
- Make using metadata outside of runs a no-op
- Add docs

Author: ericallam

.changeset/tasty-rats-rhyme.md

@@ -3,4 +3,4 @@
 "@trigger.dev/core": patch
 ---
 
-Add Run metadata to allow for storing up to 8KB of data on a run and update it during the run
+Add Run metadata to allow for storing up to 4KB of data on a run and update it during the run

apps/webapp/app/components/code/JSONEditor.tsx

@@ -112,9 +112,9 @@ export function JSONEditor(opts: JSONEditorProps) {
   return (
     <div
       className={cn(
-        opts.className,
         "grid",
-        showButtons ? "grid-rows-[2.5rem_1fr]" : "grid-rows-[1fr]"
+        showButtons ? "grid-rows-[2.5rem_1fr]" : "grid-rows-[1fr]",
+        opts.className
       )}
     >
       {showButtons && (

apps/webapp/app/components/primitives/Tabs.tsx

@@ -97,6 +97,7 @@ export function TabButton({
   return (
     <button
       className={cn("group flex flex-col items-center pt-1", props.className)}
+      type="button"
       ref={ref}
       {...props}
     >

apps/webapp/app/env.server.ts

@@ -212,7 +212,7 @@ const EnvironmentSchema = z.object({
   MAXIMUM_TRACE_SUMMARY_VIEW_COUNT: z.coerce.number().int().default(25_000),
   TASK_PAYLOAD_OFFLOAD_THRESHOLD: z.coerce.number().int().default(524_288), // 512KB
   TASK_PAYLOAD_MAXIMUM_SIZE: z.coerce.number().int().default(3_145_728), // 3MB
-  TASK_RUN_METADATA_MAXIMUM_SIZE: z.coerce.number().int().default(8_000), // 8KB
+  TASK_RUN_METADATA_MAXIMUM_SIZE: z.coerce.number().int().default(4_096), // 4KB
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts

@@ -1,11 +1,6 @@
 import { ScheduledTaskPayload, parsePacket, prettyPrintPacket } from "@trigger.dev/core/v3";
-import {
-  RuntimeEnvironmentType,
-  TaskRunAttemptStatus,
-  TaskRunStatus,
-  TaskTriggerSource,
-} from "@trigger.dev/database";
-import { sqlDatabaseSchema, PrismaClient, prisma } from "~/db.server";
+import { RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database";
+import { PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server";
 import { getTimezones } from "~/utils/timezones.server";
 import { getUsername } from "~/utils/username";
 
@@ -51,6 +46,8 @@ type RawRun = {
   payload: string;
   payloadType: string;
   runtimeEnvironmentId: string;
+  metadata?: string;
+  metadataType?: string;
 };
 
 export type StandardRun = Omit<RawRun, "number"> & {
@@ -131,6 +128,8 @@ export class TestTaskPresenter {
         taskr.status,
         taskr.payload,
         taskr."payloadType",
+        taskr.metadata,
+        taskr."metadataType",
         taskr."runtimeEnvironmentId"
     FROM 
         taskruns AS taskr
@@ -166,6 +165,9 @@ export class TestTaskPresenter {
                 ...r,
                 number,
                 payload: await prettyPrintPacket(r.payload, r.payloadType),
+                metadata: r.metadata
+                  ? await prettyPrintPacket(r.metadata, r.metadataType)
+                  : undefined,
               };
             })
           ),

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx

@@ -27,9 +27,11 @@ import {
   ResizablePanelGroup,
 } from "~/components/primitives/Resizable";
 import { Select } from "~/components/primitives/Select";
+import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { TextLink } from "~/components/primitives/TextLink";
 import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import { TimezoneList } from "~/components/scheduled/timezones";
+import { useSearchParams } from "~/hooks/useSearchParam";
 import { redirectBackWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import {
   ScheduledRun,
@@ -39,6 +41,7 @@ import {
 } from "~/presenters/v3/TestTaskPresenter.server";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
 import { docsPath, v3RunSpanPath, v3TaskParamsSchema } from "~/utils/pathBuilder";
 import { TestTaskService } from "~/v3/services/testTask.server";
 import { OutOfEntitlementError } from "~/v3/services/triggerTask.server";
@@ -129,27 +132,44 @@ export default function Page() {
 const startingJson = "{\n\n}";
 
 function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: StandardRun[] }) {
+  const { value, replace } = useSearchParams();
+  const tab = value("tab");
+
   //form submission
   const submit = useSubmit();
   const lastSubmission = useActionData();
 
   //recent runs
   const [selectedCodeSampleId, setSelectedCodeSampleId] = useState(runs.at(0)?.id);
-  const selectedCodeSample = runs.find((r) => r.id === selectedCodeSampleId)?.payload;
+  const selectedCodeSample = runs.find((r) => r.id === selectedCodeSampleId);
+  const selectedCodeSamplePayload = selectedCodeSample?.payload;
+  const selectedCodeSampleMetadata = selectedCodeSample?.metadata;
 
-  const [defaultJson, setDefaultJson] = useState<string>(selectedCodeSample ?? startingJson);
-  const setCode = useCallback((code: string) => {
-    setDefaultJson(code);
+  const [defaultPayloadJson, setDefaultPayloadJson] = useState<string>(
+    selectedCodeSamplePayload ?? startingJson
+  );
+  const setPayload = useCallback((code: string) => {
+    setDefaultPayloadJson(code);
   }, []);
 
-  const currentJson = useRef<string>(defaultJson);
+  const currentPayloadJson = useRef<string>(defaultPayloadJson);
+
+  const [defaultMetadataJson, setDefaultMetadataJson] = useState<string>(
+    selectedCodeSampleMetadata ?? "{}"
+  );
+  const setMetadata = useCallback((code: string) => {
+    setDefaultMetadataJson(code);
+  }, []);
+
+  const currentMetadataJson = useRef<string>(defaultMetadataJson);
 
   const submitForm = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       submit(
         {
           triggerSource: "STANDARD",
-          payload: currentJson.current,
+          payload: currentPayloadJson.current,
+          metadata: currentMetadataJson.current,
           taskIdentifier: task.taskIdentifier,
           environmentId: task.environment.id,
         },
@@ -160,7 +180,7 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
       );
       e.preventDefault();
     },
-    [currentJson]
+    [currentPayloadJson, currentMetadataJson]
   );
 
   const [form, { environmentId, payload }] = useForm({
@@ -183,28 +203,73 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel id="test-task-main" min="100px" default="60%">
           <div className="h-full bg-charcoal-900">
-            <JSONEditor
-              defaultValue={defaultJson}
-              readOnly={false}
-              basicSetup
-              onChange={(v) => {
-                currentJson.current = v;
-
-                //deselect the example if it's been edited
-                if (selectedCodeSampleId) {
-                  if (v !== selectedCodeSample) {
-                    setDefaultJson(v);
-                    setSelectedCodeSampleId(undefined);
+            <TabContainer className="px-3 pt-2">
+              <TabButton
+                isActive={!tab || tab === "payload"}
+                layoutId="test-editor"
+                onClick={() => {
+                  replace({ tab: "payload" });
+                }}
+              >
+                Payload
+              </TabButton>
+
+              <TabButton
+                isActive={tab === "metadata"}
+                layoutId="test-editor"
+                onClick={() => {
+                  replace({ tab: "metadata" });
+                }}
+              >
+                Metadata
+              </TabButton>
+            </TabContainer>
+            <div>
+              <JSONEditor
+                defaultValue={defaultPayloadJson}
+                readOnly={false}
+                basicSetup
+                onChange={(v) => {
+                  currentPayloadJson.current = v;
+
+                  //deselect the example if it's been edited
+                  if (selectedCodeSampleId) {
+                    if (v !== selectedCodeSamplePayload) {
+                      setDefaultPayloadJson(v);
+                      setSelectedCodeSampleId(undefined);
+                    }
                   }
-                }
-              }}
-              height="100%"
-              min-height="100%"
-              max-height="100%"
-              autoFocus
-              placeholder="Use your schema to enter valid JSON or add one of the recent payloads then click 'Run test'"
-              className="h-full"
-            />
+                }}
+                height="100%"
+                min-height="100%"
+                max-height="100%"
+                autoFocus
+                placeholder="{ }"
+                className={cn("h-full", tab === "metadata" && "hidden")}
+              />
+              <JSONEditor
+                defaultValue={defaultMetadataJson}
+                readOnly={false}
+                basicSetup
+                onChange={(v) => {
+                  currentMetadataJson.current = v;
+
+                  //deselect the example if it's been edited
+                  if (selectedCodeSampleId) {
+                    if (v !== selectedCodeSampleMetadata) {
+                      setDefaultMetadataJson(v);
+                      setSelectedCodeSampleId(undefined);
+                    }
+                  }
+                }}
+                height="100%"
+                min-height="100%"
+                max-height="100%"
+                autoFocus
+                placeholder=""
+                className={cn("h-full", tab !== "metadata" && "hidden")}
+              />
+            </div>
           </div>
         </ResizablePanel>
         <ResizableHandle id="test-task-handle" />
@@ -213,9 +278,10 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
             runs={runs}
             selectedId={selectedCodeSampleId}
             onSelected={(id) => {
-              const payload = runs.find((r) => r.id === id)?.payload;
-              if (!payload) return;
-              setCode(payload);
+              const run = runs.find((r) => r.id === id);
+              if (!run) return;
+              setPayload(run.payload);
+              run.metadata && setMetadata(run.metadata);
               setSelectedCodeSampleId(id);
             }}
           />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx

@@ -75,8 +75,13 @@ export default function Page() {
   const navigation = useNavigation();
 
   const location = useLocation();
+  const locationSearchParams = new URLSearchParams(location.search);
+  const navigationSearchParams = new URLSearchParams(navigation.location?.search);
+
   const isLoadingTasks =
-    navigation.state === "loading" && navigation.location.pathname === location.pathname;
+    navigation.state === "loading" &&
+    navigation.location.pathname === location.pathname &&
+    navigationSearchParams.get("environment") !== locationSearchParams.get("environment");
 
   return (
     <PageContainer>

apps/webapp/app/v3/services/testTask.server.ts

@@ -19,6 +19,7 @@ export class TestTaskService extends BaseService {
           payload: data.payload,
           options: {
             test: true,
+            metadata: data.metadata,
           },
         });
       case "SCHEDULED": {

apps/webapp/app/v3/testTask.ts

@@ -11,6 +11,26 @@ export const TestTaskData = z
         } catch (e) {
           console.log("parsing error", e);
 
+          if (e instanceof Error) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: e.message,
+            });
+          } else {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: "This is invalid JSON",
+            });
+          }
+        }
+      }),
+      metadata: z.string().transform((metadata, ctx) => {
+        try {
+          const data = JSON.parse(metadata);
+          return data as any;
+        } catch (e) {
+          console.log("parsing error", e);
+
           if (e instanceof Error) {
             ctx.addIssue({
               code: z.ZodIssueCode.custom,