[OPIK-86] Change layout for get started page (#241)

* [OPIK-86] Change layout for get started page * Fix ESLint
comet-ml · Sep 13, 2024 · b32d4f5 · b32d4f5
1 parent 501aacd
commit b32d4f5
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 26 deletions.
diff --git a/apps/opik-frontend/src/components/layout/EmptyLayout/EmptyLayout.tsx b/apps/opik-frontend/src/components/layout/EmptyLayout/EmptyLayout.tsx
@@ -0,0 +1,35 @@
+import useAppStore from "@/store/AppStore";
+import usePluginsStore from "@/store/PluginsStore";
+import { Link, Outlet } from "@tanstack/react-router";
+import imageLogoUrl from "/images/logo_and_text.png";
+
+const PageLayout = () => {
+  const UserMenu = usePluginsStore((state) => state.UserMenu);
+  const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+
+  return (
+    <section className="relative flex h-screen min-h-0 w-screen min-w-0 flex-col overflow-hidden">
+      <main>
+        <nav className="comet-header-height flex w-full items-center justify-between gap-6 border-b pl-4 pr-6">
+          <div className="flex-1">
+            <Link to="/$workspaceName/projects" params={{ workspaceName }}>
+              <img
+                className="h-8 w-[26px] object-cover object-left"
+                src={imageLogoUrl}
+                alt="comet logo"
+              />
+            </Link>
+          </div>
+
+          {UserMenu ? <UserMenu /> : null}
+        </nav>
+
+        <section className="comet-header-inset absolute inset-x-0 bottom-0 overflow-auto bg-[#FCFCFD] px-6">
+          <Outlet />
+        </section>
+      </main>
+    </section>
+  );
+};
+
+export default PageLayout;
diff --git a/apps/opik-frontend/src/components/layout/WorkspaceGuard/WorkspaceGuard.tsx b/apps/opik-frontend/src/components/layout/WorkspaceGuard/WorkspaceGuard.tsx
@@ -1,9 +1,8 @@
-import React from "react";
-import usePluginStore from "@/store/PluginsStore";
 import PageLayout from "@/components/layout/PageLayout/PageLayout";
 import Loader from "@/components/shared/Loader/Loader";
+import usePluginStore from "@/store/PluginsStore";
 
-const WorkspaceGuard = () => {
+const WorkspaceGuard = ({ Layout = PageLayout }) => {
   const WorkspacePreloader = usePluginStore(
     (state) => state.WorkspacePreloader,
   );
@@ -14,7 +13,7 @@ const WorkspaceGuard = () => {
 
   return (
     <WorkspacePreloader>
-      <PageLayout />
+      <Layout />
     </WorkspacePreloader>
   );
 };

diff --git a/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx b/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx
@@ -30,7 +30,7 @@ const GetStartedPage = () => {
   const apiKey = user.apiKeys[0];
 
   return (
-    <div className="flex w-full justify-center px-32 pb-2 pt-12">
+    <div className="flex w-full justify-center px-4 pb-2 pt-12">
       <div className="flex max-w-[1200px] flex-col gap-8">
         <div className="flex flex-col gap-3">
           <div className="flex flex-row justify-between">
@@ -119,24 +119,30 @@ const GetStartedPage = () => {
           <div className="flex flex-col gap-5">
             <div className="comet-body-accented">Explore demo project</div>
 
-            <Link to="/$workspaceName/projects" params={{ workspaceName }}>
-              <div className="flex w-[65%] cursor-pointer flex-row justify-between rounded-md border bg-white">
-                <img className="min-w-[340px]" src={demoProjectImageUrl} />
-                <div className="flex flex-col justify-between px-8 py-10">
-                  <div className="flex flex-col gap-4">
-                    <div className="comet-title-s text-foreground-secondary">
-                      SQL query generation
-                    </div>
-                    <div className="comet-body-s text-muted-slate">
-                      Perform a text to SQL query generation using LangChain.
-                      The example uses the Chinook database of a music store,
-                      with both employee, customer and invoice data.
-                    </div>
+            <Link
+              className="flex cursor-pointer flex-row justify-between rounded-md border bg-white lg:w-[65%]"
+              to="/$workspaceName/projects"
+              params={{ workspaceName }}
+              target="_blank"
+            >
+              <img
+                className="min-w-[340px] object-cover"
+                src={demoProjectImageUrl}
+              />
+              <div className="flex flex-col justify-between px-8 py-10">
+                <div className="flex flex-col gap-4">
+                  <div className="comet-title-s text-foreground-secondary">
+                    SQL query generation
                   </div>
-                  <div className="comet-body-s flex flex-row items-center justify-end text-[#5155F5]">
-                    Explore project <MoveRight className="ml-2 size-4" />
+                  <div className="comet-body-s text-muted-slate">
+                    Perform a text to SQL query generation using LangChain. The
+                    example uses the Chinook database of a music store, with
+                    both employee, customer and invoice data.
                   </div>
                 </div>
+                <div className="comet-body-s flex flex-row items-center justify-end text-[#5155F5]">
+                  Explore project <MoveRight className="ml-2 size-4" />
+                </div>
               </div>
             </Link>
           </div>

diff --git a/apps/opik-frontend/src/router.tsx b/apps/opik-frontend/src/router.tsx
@@ -20,6 +20,7 @@ import ProjectPage from "@/components/pages/ProjectPage/ProjectPage";
 import ProjectsPage from "@/components/pages/ProjectsPage/ProjectsPage";
 import TracesPage from "@/components/pages/TracesPage/TracesPage";
 import WorkspacePage from "@/components/pages/WorkspacePage/WorkspacePage";
+import EmptyLayout from "./components/layout/EmptyLayout/EmptyLayout";
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === "production"
@@ -47,6 +48,12 @@ const workspaceGuardRoute = createRoute({
   component: WorkspaceGuard,
 });
 
+const workspaceGuardEmptyLayoutRoute = createRoute({
+  id: "workspaceGuardEmptyLayout",
+  getParentRoute: () => rootRoute,
+  component: () => <WorkspaceGuard Layout={EmptyLayout} />,
+});
+
 const homeRoute = createRoute({
   path: "/",
   getParentRoute: () => workspaceGuardRoute,
@@ -61,12 +68,9 @@ const workspaceRoute = createRoute({
 
 // ----------- get started
 const getStartedRoute = createRoute({
-  path: "/get-started",
-  getParentRoute: () => workspaceRoute,
+  path: "/$workspaceName/get-started",
+  getParentRoute: () => workspaceGuardEmptyLayoutRoute,
   component: GetStartedPage,
-  staticData: {
-    title: "Get Started",
-  },
 });
 
 // ----------- projects
@@ -173,10 +177,10 @@ const datasetItemsRoute = createRoute({
 });
 
 const routeTree = rootRoute.addChildren([
+  workspaceGuardEmptyLayoutRoute.addChildren([getStartedRoute]),
   workspaceGuardRoute.addChildren([
     homeRoute,
     workspaceRoute.addChildren([
-      getStartedRoute,
       projectsRoute.addChildren([
         projectsListRoute,
         projectRoute.addChildren([tracesRoute]),