From b1e6c7daf769bd311c76907f3506e78cb59abda3 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Mon, 24 Mar 2025 07:51:53 -0700
Subject: [PATCH] Consolidate identical layout components (#2007)

---
 .../PageLayout.tsx}                           |  4 ++--
 skyvern-frontend/src/router.tsx               | 21 ++++++++-----------
 .../credentials/CredentialsPageLayout.tsx     | 13 ------------
 .../routes/discover/DiscoverPageLayout.tsx    | 13 ------------
 .../src/routes/history/HistoryPageLayout.tsx  | 13 ------------
 .../routes/settings/SettingsPageLayout.tsx    | 13 ------------
 6 files changed, 11 insertions(+), 66 deletions(-)
 rename skyvern-frontend/src/{routes/tasks/TasksPageLayout.tsx => components/PageLayout.tsx} (73%)
 delete mode 100644 skyvern-frontend/src/routes/credentials/CredentialsPageLayout.tsx
 delete mode 100644 skyvern-frontend/src/routes/discover/DiscoverPageLayout.tsx
 delete mode 100644 skyvern-frontend/src/routes/history/HistoryPageLayout.tsx
 delete mode 100644 skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx

diff --git a/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx b/skyvern-frontend/src/components/PageLayout.tsx
similarity index 73%
rename from skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
rename to skyvern-frontend/src/components/PageLayout.tsx
index f4ef0b02..7f23c1f5 100644
--- a/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
+++ b/skyvern-frontend/src/components/PageLayout.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 
-function TasksPageLayout() {
+function PageLayout() {
   return (
     <div className="container mx-auto">
       <main>
@@ -10,4 +10,4 @@ function TasksPageLayout() {
   );
 }
 
-export { TasksPageLayout };
+export { PageLayout };
diff --git a/skyvern-frontend/src/router.tsx b/skyvern-frontend/src/router.tsx
index 2f289f3d..91bc5d0c 100644
--- a/skyvern-frontend/src/router.tsx
+++ b/skyvern-frontend/src/router.tsx
@@ -1,8 +1,9 @@
 import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
+import { PageLayout } from "./components/PageLayout";
+import { DiscoverPage } from "./routes/discover/DiscoverPage";
+import { HistoryPage } from "./routes/history/HistoryPage";
 import { RootLayout } from "./routes/root/RootLayout";
 import { Settings } from "./routes/settings/Settings";
-import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
-import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
 import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage";
 import { RetryTask } from "./routes/tasks/create/retry/RetryTask";
 import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
@@ -17,14 +18,10 @@ import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters"
 import { Workflows } from "./routes/workflows/Workflows";
 import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
 import { WorkflowEditor } from "./routes/workflows/editor/WorkflowEditor";
-import { WorkflowRunOutput } from "./routes/workflows/workflowRun/WorkflowRunOutput";
 import { WorkflowPostRunParameters } from "./routes/workflows/workflowRun/WorkflowPostRunParameters";
-import { WorkflowRunRecording } from "./routes/workflows/workflowRun/WorkflowRunRecording";
+import { WorkflowRunOutput } from "./routes/workflows/workflowRun/WorkflowRunOutput";
 import { WorkflowRunOverview } from "./routes/workflows/workflowRun/WorkflowRunOverview";
-import { DiscoverPageLayout } from "./routes/discover/DiscoverPageLayout";
-import { DiscoverPage } from "./routes/discover/DiscoverPage";
-import { HistoryPageLayout } from "./routes/history/HistoryPageLayout";
-import { HistoryPage } from "./routes/history/HistoryPage";
+import { WorkflowRunRecording } from "./routes/workflows/workflowRun/WorkflowRunRecording";
 
 const router = createBrowserRouter([
   {
@@ -37,7 +34,7 @@ const router = createBrowserRouter([
       },
       {
         path: "tasks",
-        element: <TasksPageLayout />,
+        element: <PageLayout />,
         children: [
           {
             index: true,
@@ -150,7 +147,7 @@ const router = createBrowserRouter([
       },
       {
         path: "discover",
-        element: <DiscoverPageLayout />,
+        element: <PageLayout />,
         children: [
           {
             index: true,
@@ -160,7 +157,7 @@ const router = createBrowserRouter([
       },
       {
         path: "history",
-        element: <HistoryPageLayout />,
+        element: <PageLayout />,
         children: [
           {
             index: true,
@@ -170,7 +167,7 @@ const router = createBrowserRouter([
       },
       {
         path: "settings",
-        element: <SettingsPageLayout />,
+        element: <PageLayout />,
         children: [
           {
             index: true,
diff --git a/skyvern-frontend/src/routes/credentials/CredentialsPageLayout.tsx b/skyvern-frontend/src/routes/credentials/CredentialsPageLayout.tsx
deleted file mode 100644
index 12b0715f..00000000
--- a/skyvern-frontend/src/routes/credentials/CredentialsPageLayout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function CredentialsPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { CredentialsPageLayout };
diff --git a/skyvern-frontend/src/routes/discover/DiscoverPageLayout.tsx b/skyvern-frontend/src/routes/discover/DiscoverPageLayout.tsx
deleted file mode 100644
index 39492e29..00000000
--- a/skyvern-frontend/src/routes/discover/DiscoverPageLayout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function DiscoverPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { DiscoverPageLayout };
diff --git a/skyvern-frontend/src/routes/history/HistoryPageLayout.tsx b/skyvern-frontend/src/routes/history/HistoryPageLayout.tsx
deleted file mode 100644
index a3d27973..00000000
--- a/skyvern-frontend/src/routes/history/HistoryPageLayout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function HistoryPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { HistoryPageLayout };
diff --git a/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx b/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx
deleted file mode 100644
index d6fae90c..00000000
--- a/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function SettingsPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { SettingsPageLayout };