Rename workflow /debug URL path to /build (#SKY-7362) (#4656)

skyvern-frontend/src/router.tsx

@@ -1,4 +1,5 @@
 import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
+import { DebugToBuildRedirect } from "@/routes/workflows/DebugToBuildRedirect";
 import { BrowserSession } from "@/routes/browserSessions/BrowserSession";
 import { BrowserSessions } from "@/routes/browserSessions/BrowserSessions";
 import { PageLayout } from "./components/PageLayout";
@@ -132,13 +133,21 @@ const router = createBrowserRouter([
                 element: <Navigate to="runs" />,
               },
               {
-                path: "debug",
+                path: "build",
                 element: <Debugger />,
               },
               {
-                path: ":workflowRunId/:blockLabel/debug",
+                path: ":workflowRunId/:blockLabel/build",
                 element: <Debugger />,
               },
+              {
+                path: "debug",
+                element: <DebugToBuildRedirect />,
+              },
+              {
+                path: ":workflowRunId/:blockLabel/debug",
+                element: <DebugToBuildRedirect />,
+              },
               {
                 path: "edit",
                 element: <WorkflowEditor />,

skyvern-frontend/src/routes/discover/WorkflowTemplates.tsx

@@ -54,7 +54,7 @@ function WorkflowTemplates() {
                 }
                 onClick={() => {
                   navigate(
-                    `/workflows/${workflow.workflow_permanent_id}/debug`,
+                    `/workflows/${workflow.workflow_permanent_id}/build`,
                   );
                 }}
               />

skyvern-frontend/src/routes/root/Header.tsx

@@ -8,6 +8,7 @@ function Header() {
   const embed = searchParams.get("embed");
   const match =
     useMatch("/workflows/:workflowPermanentId/edit") ||
+    location.pathname.includes("build") ||
     location.pathname.includes("debug") ||
     embed === "true";
 

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

@@ -219,7 +219,7 @@ function PromptBox() {
         setAutoplay(workflow.workflow_permanent_id, firstBlock.label);
       }
 
-      navigate(`/workflows/${workflow.workflow_permanent_id}/debug`);
+      navigate(`/workflows/${workflow.workflow_permanent_id}/build`);
     },
     onError: (error: AxiosError) => {
       toast({

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

@@ -0,0 +1,17 @@
+import { Navigate, useLocation } from "react-router-dom";
+
+function DebugToBuildRedirect() {
+  const location = useLocation();
+  return (
+    <Navigate
+      to={
+        location.pathname.replace(/\/debug(\/|$)/, "/build$1") +
+        location.search +
+        location.hash
+      }
+      replace
+    />
+  );
+}
+
+export { DebugToBuildRedirect };

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

@@ -574,7 +574,7 @@ function RunWorkflowForm({
               </ul>
               <p className="mt-2">
                 <Link
-                  to={`/workflows/${workflowPermanentId}/debug`}
+                  to={`/workflows/${workflowPermanentId}/build`}
                   className="underline hover:no-underline"
                 >
                   Go to the editor

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

@@ -139,7 +139,7 @@ function WorkflowPage() {
             />
           )}
           <Button asChild variant="secondary">
-            <Link to={`/workflows/${workflowPermanentId}/debug`}>
+            <Link to={`/workflows/${workflowPermanentId}/build`}>
               <Pencil2Icon className="mr-2 size-4" />
               Edit
             </Link>

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

@@ -392,7 +392,7 @@ function WorkflowRun() {
               hideTrigger
             />
             <Button asChild variant="secondary">
-              <Link to={`/workflows/${workflowPermanentId}/debug`}>
+              <Link to={`/workflows/${workflowPermanentId}/build`}>
                 <Pencil2Icon className="mr-2 h-4 w-4" />
                 Edit
               </Link>

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

@@ -670,7 +670,7 @@ function Workflows() {
                                       onClick={(event) => {
                                         handleIconClick(
                                           event,
-                                          `/workflows/${workflow.workflow_permanent_id}/debug`,
+                                          `/workflows/${workflow.workflow_permanent_id}/build`,
                                         );
                                       }}
                                     >

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

@@ -6,6 +6,7 @@ function WorkflowsPageLayout() {
   const embed = searchParams.get("embed");
   const match =
     useMatch("/workflows/:workflowPermanentId/edit") ||
+    location.pathname.includes("build") ||
     location.pathname.includes("debug") ||
     embed === "true";
   return (

skyvern-frontend/src/routes/workflows/debugger/DebuggerBlockRuns.tsx

@@ -61,7 +61,7 @@ function DebuggerBlockRuns() {
     }
 
     navigate(
-      `/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/${blockLabel}/debug`,
+      `/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/${blockLabel}/build`,
     );
   };
 

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -300,7 +300,7 @@ function WorkflowHeader({
                       if (debugStore.isDebugMode) {
                         navigate(`/workflows/${workflowPermanentId}/edit`);
                       } else {
-                        navigate(`/workflows/${workflowPermanentId}/debug`);
+                        navigate(`/workflows/${workflowPermanentId}/build`);
                       }
                     }}
                   >

skyvern-frontend/src/routes/workflows/editor/nodes/components/NodeHeader.tsx

@@ -261,7 +261,7 @@ function NodeHeader({
       workflowRunId === workflowRun?.workflow_run_id &&
       statusIsFinalized(workflowRun)
     ) {
-      // navigate(`/workflows/${workflowPermanentId}/debug`);
+      // navigate(`/workflows/${workflowPermanentId}/build`);
 
       if (statusIsAFailureType(workflowRun)) {
         toast({
@@ -406,7 +406,7 @@ function NodeHeader({
       });
 
       navigate(
-        `/workflows/${workflowPermanentId}/${response.data.run_id}/${label}/debug`,
+        `/workflows/${workflowPermanentId}/${response.data.run_id}/${label}/build`,
       );
     },
     onError: (error: AxiosError) => {

skyvern-frontend/src/routes/workflows/hooks/useCreateWorkflowMutation.ts

@@ -32,7 +32,7 @@ function useCreateWorkflowMutation() {
       queryClient.invalidateQueries({
         queryKey: ["folders"],
       });
-      navigate(`/workflows/${response.data.workflow_permanent_id}/debug`);
+      navigate(`/workflows/${response.data.workflow_permanent_id}/build`);
     },
   });
 }

skyvern-frontend/src/store/DebugStoreContext.tsx

@@ -4,7 +4,7 @@ import { useLocation } from "react-router-dom";
 function useIsDebugMode() {
   const location = useLocation();
   return useMemo(
-    () => location.pathname.includes("debug"),
+    () => location.pathname.includes("build"),
     [location.pathname],
   );
 }