Consolidate identical layout components (#2007)

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 };

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,

skyvern-frontend/src/routes/credentials/CredentialsPageLayout.tsx

@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function CredentialsPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { CredentialsPageLayout };

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

@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function DiscoverPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { DiscoverPageLayout };

skyvern-frontend/src/routes/history/HistoryPageLayout.tsx

@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function HistoryPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { HistoryPageLayout };

skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx

@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-function SettingsPageLayout() {
-  return (
-    <div className="container mx-auto">
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-
-export { SettingsPageLayout };