From 761851a341f23df8ed4eac6036fadd9d0e5f91d7 Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Wed, 5 Jun 2024 18:53:30 +0300
Subject: [PATCH] Reintroduce artifacts UI (#419)

---
 skyvern-frontend/src/router.tsx                     |  5 +++++
 .../src/routes/tasks/detail/StepArtifactsLayout.tsx |  2 +-
 .../src/routes/tasks/detail/TaskDetails.tsx         | 13 +++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/router.tsx b/skyvern-frontend/src/router.tsx
index f94b4ac2..e55a9d02 100644
--- a/skyvern-frontend/src/router.tsx
+++ b/skyvern-frontend/src/router.tsx
@@ -11,6 +11,7 @@ import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPa
 import { TaskActions } from "./routes/tasks/detail/TaskActions";
 import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
 import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
+import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
 
 const router = createBrowserRouter([
   {
@@ -49,6 +50,10 @@ const router = createBrowserRouter([
                 path: "parameters",
                 element: <TaskParameters />,
               },
+              {
+                path: "artifacts",
+                element: <StepArtifactsLayout />,
+              },
             ],
           },
         ],
diff --git a/skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx b/skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx
index 4b3e50c1..a024a8a2 100644
--- a/skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx
@@ -37,7 +37,7 @@ function StepArtifactsLayout() {
   const activeStep = steps[activeIndex];
 
   return (
-    <div className="px-4 flex">
+    <div className="flex">
       <aside className="w-64 shrink-0">
         <StepNavigation
           activeIndex={activeIndex}
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index 035ca830..ff4a5b1f 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -121,6 +121,19 @@ function TaskDetails() {
           >
             Parameters
           </NavLink>
+          <NavLink
+            to="artifacts"
+            className={({ isActive }) => {
+              return cn(
+                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                {
+                  "bg-primary-foreground text-foreground": isActive,
+                },
+              );
+            }}
+          >
+            Artifacts
+          </NavLink>
         </div>
       </div>
       <Outlet />