Allow testing webhook response in setup flow (#3768)

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

@@ -48,6 +48,7 @@ import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "./editor/nodes/Taskv2Node/types"
 import { getLabelForWorkflowParameterType } from "./editor/workflowEditorUtils";
 import { WorkflowParameter } from "./types/workflowTypes";
 import { WorkflowParameterInput } from "./WorkflowParameterInput";
+import { TestWebhookDialog } from "@/components/TestWebhookDialog";
 
 // Utility function to omit specified keys from an object
 function omit<T extends Record<string, unknown>, K extends keyof T>(
@@ -461,13 +462,37 @@ function RunWorkflowForm({
                     </FormLabel>
                     <div className="w-full space-y-2">
                       <FormControl>
-                        <Input
-                          {...field}
-                          placeholder="https://"
-                          value={
-                            field.value === null ? "" : (field.value as string)
-                          }
-                        />
+                        <div className="flex flex-col gap-2">
+                          <Input
+                            className="w-full"
+                            {...field}
+                            placeholder="https://"
+                            value={
+                              field.value === null
+                                ? ""
+                                : (field.value as string)
+                            }
+                          />
+                          <TestWebhookDialog
+                            runType="workflow_run"
+                            runId={null}
+                            initialWebhookUrl={
+                              field.value === null
+                                ? undefined
+                                : (field.value as string)
+                            }
+                            trigger={
+                              <Button
+                                type="button"
+                                variant="secondary"
+                                className="self-start"
+                                disabled={!field.value}
+                              >
+                                Test Webhook
+                              </Button>
+                            }
+                          />
+                        </div>
                       </FormControl>
                       <FormMessage />
                     </div>

skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx

@@ -39,6 +39,8 @@ import { useBlockScriptStore } from "@/store/BlockScriptStore";
 import { BlockCodeEditor } from "@/routes/workflows/components/BlockCodeEditor";
 import { useUpdate } from "@/routes/workflows/editor/useUpdate";
 import { cn } from "@/util/utils";
+import { Button } from "@/components/ui/button";
+import { TestWebhookDialog } from "@/components/TestWebhookDialog";
 
 interface StartSettings {
   webhookCallbackUrl: string;
@@ -170,15 +172,35 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                           <Label>Webhook Callback URL</Label>
                           <HelpTooltip content="The URL of a webhook endpoint to send the workflow results" />
                         </div>
-                        <Input
-                          value={data.webhookCallbackUrl}
-                          placeholder="https://"
-                          onChange={(event) => {
-                            update({
-                              webhookCallbackUrl: event.target.value,
-                            });
-                          }}
-                        />
+                        <div className="flex flex-col gap-2">
+                          <Input
+                            className="w-full"
+                            value={data.webhookCallbackUrl}
+                            placeholder="https://"
+                            onChange={(event) => {
+                              update({
+                                webhookCallbackUrl: event.target.value,
+                              });
+                            }}
+                          />
+                          <TestWebhookDialog
+                            runType="workflow_run"
+                            runId={null}
+                            initialWebhookUrl={
+                              data.webhookCallbackUrl || undefined
+                            }
+                            trigger={
+                              <Button
+                                type="button"
+                                variant="secondary"
+                                className="self-start"
+                                disabled={!data.webhookCallbackUrl}
+                              >
+                                Test Webhook
+                              </Button>
+                            }
+                          />
+                        </div>
                       </div>
                       <div className="space-y-2">
                         <div className="flex gap-2">