Webhook Replay Test URL (#3769)

Co-authored-by: Shuchang Zheng <wintonzheng0325@gmail.com>

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -1,4 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
+import { useState } from "react";
 import {
   Status,
   TaskApiResponse,
@@ -25,7 +26,8 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { WorkflowApiResponse } from "@/routes/workflows/types/workflowTypes";
 import { apiBaseUrl } from "@/util/env";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
+import { ApiWebhookActionsMenu } from "@/components/ApiWebhookActionsMenu";
+import { WebhookReplayDialog } from "@/components/WebhookReplayDialog";
 import { type ApiCommandOptions } from "@/util/apiCommands";
 import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -124,6 +126,8 @@ function TaskDetails() {
     },
   });
 
+  const [replayOpen, setReplayOpen] = useState(false);
+
   if (taskIsError) {
     return <div>Error: {taskError?.message}</div>;
   }
@@ -189,7 +193,8 @@ function TaskDetails() {
             )}
           </div>
           <div className="flex items-center gap-2">
-            <CopyApiCommandDropdown
+            {/** API & Webhooks consolidated dropdown + controlled dialog */}
+            <ApiWebhookActionsMenu
               getOptions={() => {
                 if (!task) {
                   return {
@@ -211,6 +216,15 @@ function TaskDetails() {
                   },
                 } satisfies ApiCommandOptions;
               }}
+              webhookDisabled={taskIsLoading || !taskHasTerminalState}
+              onTestWebhook={() => setReplayOpen(true)}
+            />
+            <WebhookReplayDialog
+              runId={task?.workflow_run_id ?? ""}
+              disabled={taskIsLoading || !taskHasTerminalState}
+              open={replayOpen}
+              onOpenChange={setReplayOpen}
+              hideTrigger
             />
             {taskIsRunningOrQueued && (
               <Dialog>

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -41,7 +41,8 @@ import { Label } from "@/components/ui/label";
 import { CodeEditor } from "./components/CodeEditor";
 import { cn } from "@/util/utils";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
+import { ApiWebhookActionsMenu } from "@/components/ApiWebhookActionsMenu";
+import { WebhookReplayDialog } from "@/components/WebhookReplayDialog";
 import { type ApiCommandOptions } from "@/util/apiCommands";
 import { useBlockScriptsQuery } from "@/routes/workflows/hooks/useBlockScriptsQuery";
 import { constructCacheKeyValue } from "@/routes/workflows/editor/utils";
@@ -108,6 +109,7 @@ function WorkflowRun() {
   }, [blockScriptsPublished, setHasPublishedCode]);
 
   const { data: workflowRunTimeline } = useWorkflowRunTimelineQuery();
+  const [replayOpen, setReplayOpen] = useState(false);
 
   const cancelWorkflowMutation = useMutation({
     mutationFn: async () => {
@@ -304,7 +306,7 @@ function WorkflowRun() {
           </div>
 
           <div className="flex gap-2">
-            <CopyApiCommandDropdown
+            <ApiWebhookActionsMenu
               getOptions={() =>
                 ({
                   method: "POST",
@@ -319,6 +321,15 @@ function WorkflowRun() {
                   },
                 }) satisfies ApiCommandOptions
               }
+              webhookDisabled={workflowRunIsLoading || !workflowRunIsFinalized}
+              onTestWebhook={() => setReplayOpen(true)}
+            />
+            <WebhookReplayDialog
+              runId={workflowRunId ?? ""}
+              disabled={workflowRunIsLoading || !workflowRunIsFinalized}
+              open={replayOpen}
+              onOpenChange={setReplayOpen}
+              hideTrigger
             />
             <Button asChild variant="secondary">
               <Link to={`/workflows/${workflowPermanentId}/debug`}>