Revert "Revert "feat: add SKYVERN_BASE_URL environment variable support for client base URL""

This reverts commit d0ea267ad1.

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -20,12 +20,14 @@ import { toast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
+import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { ToastAction } from "@radix-ui/react-toast";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
+import fetchToCurl from "fetch-to-curl";
 import { useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 import { Link } from "react-router-dom";
@@ -37,7 +39,6 @@ import {
 } from "./taskFormTypes";
 import { ProxySelector } from "@/components/ProxySelector";
 import { Switch } from "@/components/ui/switch";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 type Props = {
   initialValues: CreateNewTaskFormValues;
 };
@@ -621,17 +622,30 @@ function CreateNewTaskForm({ initialValues }: Props) {
         </TaskFormSection>
 
         <div className="flex justify-end gap-3">
-          <CopyApiCommandDropdown
-            getRequest={() => ({
-              method: "POST",
-              url: `${apiBaseUrl}/tasks`,
-              body: createTaskRequestObject(form.getValues()),
-              headers: {
-                "Content-Type": "application/json",
-                "x-api-key": apiCredential ?? "<your-api-key>",
-              },
-            })}
-          />
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={async () => {
+              const curl = fetchToCurl({
+                method: "POST",
+                url: `${apiBaseUrl}/tasks`,
+                body: createTaskRequestObject(form.getValues()),
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                },
+              });
+              copyText(curl).then(() => {
+                toast({
+                  title: "Copied cURL",
+                  description: "cURL copied to clipboard",
+                });
+              });
+            }}
+          >
+            <CopyIcon className="mr-2 h-4 w-4" />
+            cURL
+          </Button>
           <Button type="submit" disabled={mutation.isPending}>
             {mutation.isPending && (
               <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />

skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx

@@ -16,12 +16,14 @@ import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { SubmitEvent } from "@/types";
+import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { ToastAction } from "@radix-ui/react-toast";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
+import fetchToCurl from "fetch-to-curl";
 import { useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 import { Link, useParams } from "react-router-dom";
@@ -31,7 +33,6 @@ import { TaskFormSection } from "./TaskFormSection";
 import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
 import { OrganizationApiResponse, ProxyLocation } from "@/api/types";
 import { ProxySelector } from "@/components/ProxySelector";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 
 type Props = {
   initialValues: SavedTaskFormValues;
@@ -736,17 +737,31 @@ function SavedTaskForm({ initialValues }: Props) {
         </TaskFormSection>
 
         <div className="flex justify-end gap-3">
-          <CopyApiCommandDropdown
-            getRequest={() => ({
-              method: "POST",
-              url: `${apiBaseUrl}/tasks`,
-              body: createTaskRequestObject(form.getValues()),
-              headers: {
-                "Content-Type": "application/json",
-                "x-api-key": apiCredential ?? "<your-api-key>",
-              },
-            })}
-          />
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={async () => {
+              const curl = fetchToCurl({
+                method: "POST",
+                url: `${apiBaseUrl}/tasks`,
+                body: createTaskRequestObject(form.getValues()),
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                },
+              });
+              copyText(curl).then(() => {
+                toast({
+                  variant: "success",
+                  title: "Copied successfully",
+                  description: "cURL copied to clipboard",
+                });
+              });
+            }}
+          >
+            <CopyIcon className="mr-2 h-4 w-4" />
+            cURL
+          </Button>
           <Button
             type="submit"
             name="save"

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

@@ -24,10 +24,11 @@ import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { WorkflowApiResponse } from "@/routes/workflows/types/workflowTypes";
+import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
-import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
+import fetchToCurl from "fetch-to-curl";
 import { Link, Outlet, useParams } from "react-router-dom";
 import { statusIsFinalized } from "../types";
 import { useTaskQuery } from "./hooks/useTaskQuery";
@@ -179,17 +180,34 @@ function TaskDetails() {
             )}
           </div>
           <div className="flex items-center gap-2">
-            <CopyApiCommandDropdown
-              getRequest={() => ({
-                method: "POST",
-                url: `${apiBaseUrl}/tasks`,
-                body: task ? createTaskRequestObject(task) : undefined,
-                headers: {
-                  "Content-Type": "application/json",
-                  "x-api-key": apiCredential ?? "<your-api-key>",
-                },
-              })}
-            />
+            <Button
+              variant="secondary"
+              onClick={() => {
+                if (!task) {
+                  return;
+                }
+                const curl = fetchToCurl({
+                  method: "POST",
+                  url: `${apiBaseUrl}/tasks`,
+                  body: createTaskRequestObject(task),
+                  headers: {
+                    "Content-Type": "application/json",
+                    "x-api-key": apiCredential ?? "<your-api-key>",
+                  },
+                });
+                copyText(curl).then(() => {
+                  toast({
+                    variant: "success",
+                    title: "Copied to Clipboard",
+                    description:
+                      "The cURL command has been copied to your clipboard.",
+                  });
+                });
+              }}
+            >
+              <CopyIcon className="mr-2 h-4 w-4" />
+              cURL
+            </Button>
             {taskIsRunningOrQueued && (
               <Dialog>
                 <DialogTrigger asChild>

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

@@ -14,10 +14,11 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
-import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
+import fetchToCurl from "fetch-to-curl";
 import { useForm } from "react-hook-form";
 import { useNavigate, useParams } from "react-router-dom";
 import { z } from "zod";
@@ -332,20 +333,39 @@ function RunWorkflowForm({
         </div>
 
         <div className="flex justify-end gap-2">
-          <CopyApiCommandDropdown
-            getRequest={() => ({
-              method: "POST",
-              url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
-              body: getRunWorkflowRequestBody(
-                form.getValues(),
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              const values = form.getValues();
+              const body = getRunWorkflowRequestBody(
+                values,
                 workflowParameters,
-              ),
-              headers: {
-                "Content-Type": "application/json",
-                "x-api-key": apiCredential ?? "<your-api-key>",
-              },
-            })}
-          />
+              );
+
+              const curl = fetchToCurl({
+                method: "POST",
+                url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
+                body,
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                },
+              });
+
+              copyText(curl).then(() => {
+                toast({
+                  variant: "success",
+                  title: "Copied to Clipboard",
+                  description:
+                    "The cURL command has been copied to your clipboard.",
+                });
+              });
+            }}
+          >
+            <CopyIcon className="mr-2 h-4 w-4" />
+            cURL
+          </Button>
           <Button type="submit" disabled={runWorkflowMutation.isPending}>
             {runWorkflowMutation.isPending && (
               <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />

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

@@ -17,15 +17,17 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
 import {
+  CopyIcon,
   FileIcon,
   Pencil2Icon,
   PlayIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
+import fetchToCurl from "fetch-to-curl";
 import { Link, Outlet, useParams, useSearchParams } from "react-router-dom";
 import { statusIsFinalized, statusIsRunningOrQueued } from "../tasks/types";
 import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
@@ -181,20 +183,37 @@ function WorkflowRun() {
         </div>
 
         <div className="flex gap-2">
-          <CopyApiCommandDropdown
-            getRequest={() => ({
-              method: "POST",
-              url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
-              body: {
-                data: workflowRun?.parameters,
-                proxy_location: "RESIDENTIAL",
-              },
-              headers: {
-                "Content-Type": "application/json",
-                "x-api-key": apiCredential ?? "<your-api-key>",
-              },
-            })}
-          />
+          <Button
+            variant="secondary"
+            onClick={() => {
+              if (!workflowRun) {
+                return;
+              }
+              const curl = fetchToCurl({
+                method: "POST",
+                url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
+                body: {
+                  data: workflowRun?.parameters,
+                  proxy_location: "RESIDENTIAL",
+                },
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                },
+              });
+              copyText(curl).then(() => {
+                toast({
+                  variant: "success",
+                  title: "Copied to Clipboard",
+                  description:
+                    "The cURL command has been copied to your clipboard.",
+                });
+              });
+            }}
+          >
+            <CopyIcon className="mr-2 h-4 w-4" />
+            cURL
+          </Button>
           <Button asChild variant="secondary">
             <Link to={`/workflows/${workflowPermanentId}/edit`}>
               <Pencil2Icon className="mr-2 h-4 w-4" />