Show callout if the payload isn’t editable

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>
   );

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);