Disable payload editing for run replays with large payloads (#2268)

* Use sexy scrollbars for templates and recent runs popover content

@nick this is for you!!1

* Fix TabButton component disabled state

* Disable payload tab when replaying runs with large payloads

Author: myftija

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

@@ -94,7 +94,11 @@ export function TabButton({
 
   return (
     <button
-      className={cn("group flex flex-col items-center pt-1 focus-custom", props.className)}
+      className={cn(
+        "group flex flex-col items-center pt-1 focus-custom",
+        props.className,
+        props.disabled && "pointer-events-none opacity-50"
+      )}
       type="button"
       ref={ref}
       {...props}

apps/webapp/app/components/runs/v3/PacketDisplay.tsx

@@ -16,7 +16,7 @@ export function PacketDisplay({
     case "application/store": {
       return (
         <div className="flex flex-col">
-          <Paragraph variant="base/bright" className="w-full border-b border-grid-dimmed py-2.5">
+          <Paragraph variant="base/bright" className="w-full py-2.5 text-sm">
             {title}
           </Paragraph>
           <LinkButton LeadingIcon={CloudArrowDownIcon} to={data} variant="tertiary/medium" download>

apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx

@@ -34,6 +34,8 @@ import { RectangleStackIcon } from "@heroicons/react/20/solid";
 import { Badge } from "~/components/primitives/Badge";
 import { RunTagInput } from "./RunTagInput";
 import { MachinePresetName } from "@trigger.dev/core/v3";
+import { InfoIconTooltip } from "~/components/primitives/Tooltip";
+import { divide } from "effect/Duration";
 
 type ReplayRunDialogProps = {
   runFriendlyId: string;
@@ -165,7 +167,7 @@ function ReplayForm({
     replayData.payloadType === "application/json" ||
     replayData.payloadType === "application/super+json";
 
-  const [tab, setTab] = useState<"payload" | "metadata">("payload");
+  const [tab, setTab] = useState<"payload" | "metadata">(editablePayload ? "payload" : "metadata");
 
   const { defaultTaskQueue } = replayData;
 
@@ -257,15 +259,30 @@ function ReplayForm({
               additionalActions={
                 <TabContainer className="flex grow items-baseline justify-between self-end border-none">
                   <div className="flex gap-5">
-                    <TabButton
-                      isActive={tab === "payload"}
-                      layoutId="replay-editor"
-                      onClick={() => {
-                        setTab("payload");
-                      }}
-                    >
-                      Payload
-                    </TabButton>
+                    <div className="flex items-center gap-1.5">
+                      <TabButton
+                        disabled={!editablePayload}
+                        isActive={tab === "payload"}
+                        layoutId="replay-editor"
+                        onClick={() => {
+                          setTab("payload");
+                        }}
+                      >
+                        Payload
+                      </TabButton>
+                      {!editablePayload && (
+                        <InfoIconTooltip
+                          content={
+                            <span className="text-sm">
+                              Payload is not editable for runs with{" "}
+                              <TextLink to={docsPath("triggering#large-payloads")}>
+                                large payloads.
+                              </TextLink>
+                            </span>
+                          }
+                        />
+                      )}
+                    </div>
                     <TabButton
                       isActive={tab === "metadata"}
                       layoutId="replay-editor"

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

@@ -1317,7 +1317,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="min-w-[294px] p-0" align="end" sideOffset={6}>
-        <div className="max-h-80 overflow-y-auto">
+        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="p-1">
             {runs.map((run) => (
               <button
@@ -1398,7 +1398,7 @@ function RunTemplatesPopover({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
-          <div className="max-h-80 overflow-y-auto">
+          <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <div className="p-1">
               {templates.map((template) => (
                 <div

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

@@ -122,6 +122,13 @@ export class ReplayTaskRunService extends BaseService {
     existingTaskRun: TaskRun,
     stringifiedPayloadOverride: string | undefined
   ) {
+    if (existingTaskRun.payloadType === "application/store") {
+      return conditionallyImportPacket({
+        data: existingTaskRun.payload,
+        dataType: existingTaskRun.payloadType,
+      });
+    }
+
     if (stringifiedPayloadOverride && existingTaskRun.payloadType === "application/super+json") {
       const newPayload = await replaceSuperJsonPayload(
         existingTaskRun.payload,