Change routing rules in workflow pages (#882)

skyvern-frontend/src/router.tsx

@@ -102,6 +102,10 @@ const router = createBrowserRouter([
             children: [
               {
                 index: true,
+                element: <Navigate to="runs" />,
+              },
+              {
+                path: "edit",
                 element: <WorkflowEditor />,
               },
               {

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;

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>

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`,
                                   );
                                 }}
                               >

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