From 370ec1012257b31cd2107cffec711014329ce486 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 6 May 2025 14:05:42 +0100
Subject: [PATCH] =?UTF-8?q?Show=20callout=20if=20the=20payload=20isn?=
 =?UTF-8?q?=E2=80=99t=20editable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx   | 9 ++++++++-
 .../route.tsx                                            | 1 -
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
index 7fd87ba67..09b2a7e83 100644
--- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
@@ -17,6 +17,7 @@ import {
 } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route";
 import { type loader } from "~/routes/resources.taskruns.$runParam.replay";
 import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
+import { Callout } from "~/components/primitives/Callout";
 
 type ReplayRunDialogProps = {
   runFriendlyId: string;
@@ -143,7 +144,13 @@ function ReplayForm(
             ) : null}
           </div>
         </>
-      ) : null}
+      ) : (
+        <div className="grid h-full place-items-center">
+          <Callout variant="error" className="mt-4 w-fit">
+            <Paragraph>This payload is not editable.</Paragraph>
+          </Callout>
+        </div>
+      )}
       <input type="hidden" name="failedRedirect" value={props.failedRedirect} />
     </Form>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
index 45acef278..27a5e94ff 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
@@ -56,7 +56,6 @@ import { TestTaskData } from "~/v3/testTask";
 
 //TODO:
 // 1. Get rid of the extra form in the ReplayRunDialog.
-// 2. If the editablePayload is false on ReplayRunDialog, show a callout error explaining that the payload is not editable.
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);