From dfc769f80767c9a4547abbaa9e9a47d77d969bac Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Wed, 25 Sep 2024 07:15:02 -0700
Subject: [PATCH] Change routing rules in workflow pages (#882)

---
 skyvern-frontend/src/router.tsx               |  4 ++++
 skyvern-frontend/src/routes/root/Header.tsx   |  2 +-
 .../src/routes/workflows/WorkflowPage.tsx     | 19 ++++++++++++++-----
 .../src/routes/workflows/Workflows.tsx        |  4 ++--
 .../routes/workflows/WorkflowsPageLayout.tsx  |  2 +-
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/skyvern-frontend/src/router.tsx b/skyvern-frontend/src/router.tsx
index eba9b845..d72b2329 100644
--- a/skyvern-frontend/src/router.tsx
+++ b/skyvern-frontend/src/router.tsx
@@ -102,6 +102,10 @@ const router = createBrowserRouter([
             children: [
               {
                 index: true,
+                element: <Navigate to="runs" />,
+              },
+              {
+                path: "edit",
                 element: <WorkflowEditor />,
               },
               {
diff --git a/skyvern-frontend/src/routes/root/Header.tsx b/skyvern-frontend/src/routes/root/Header.tsx
index 647f62c1..b7e60a30 100644
--- a/skyvern-frontend/src/routes/root/Header.tsx
+++ b/skyvern-frontend/src/routes/root/Header.tsx
@@ -3,7 +3,7 @@ import GitHubButton from "react-github-btn";
 import { Link, useMatch } from "react-router-dom";
 
 function Header() {
-  const match = useMatch("/workflows/:workflowPermanentId");
+  const match = useMatch("/workflows/:workflowPermanentId/edit");
 
   if (match) {
     return null;
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
index 8740a5fc..97f03052 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
@@ -22,6 +22,7 @@ import {
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
+import { Pencil2Icon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import {
   Link,
@@ -84,11 +85,19 @@ function WorkflowPage() {
             </>
           )}
         </div>
-        <Button asChild>
-          <Link to={`/workflows/${workflowPermanentId}/run`}>
-            Create New Run
-          </Link>
-        </Button>
+        <div className="flex gap-2">
+          <Button asChild variant="secondary">
+            <Link to={`/workflows/${workflowPermanentId}/edit`}>
+              <Pencil2Icon className="mr-2 h-4 w-4" />
+              Edit Workflow
+            </Link>
+          </Button>
+          <Button asChild>
+            <Link to={`/workflows/${workflowPermanentId}/run`}>
+              Create New Run
+            </Link>
+          </Button>
+        </div>
       </header>
       <div className="space-y-4">
         <header>
diff --git a/skyvern-frontend/src/routes/workflows/Workflows.tsx b/skyvern-frontend/src/routes/workflows/Workflows.tsx
index a24489d1..3653aa0d 100644
--- a/skyvern-frontend/src/routes/workflows/Workflows.tsx
+++ b/skyvern-frontend/src/routes/workflows/Workflows.tsx
@@ -111,7 +111,7 @@ function Workflows() {
       queryClient.invalidateQueries({
         queryKey: ["workflows"],
       });
-      navigate(`/workflows/${response.data.workflow_permanent_id}`);
+      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
     },
   });
 
@@ -250,7 +250,7 @@ function Workflows() {
                                 onClick={(event) => {
                                   handleIconClick(
                                     event,
-                                    `/workflows/${workflow.workflow_permanent_id}`,
+                                    `/workflows/${workflow.workflow_permanent_id}/edit`,
                                   );
                                 }}
                               >
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx b/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx
index bd524b60..57c86d47 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/util/utils";
 import { Outlet, useMatch } from "react-router-dom";
 
 function WorkflowsPageLayout() {
-  const match = useMatch("/workflows/:workflowPermanentId");
+  const match = useMatch("/workflows/:workflowPermanentId/edit");
 
   return (
     <main