From 3370e7a05a856638b47fe359a76f34509bf6eff7 Mon Sep 17 00:00:00 2001
From: "andrii.dudar" <fanat.web@gmail.com>
Date: Thu, 12 Dec 2024 13:42:06 +0100
Subject: [PATCH] [OPIK-564] Create new home page - change logic to display
 link to demo project

---
 .../src/api/projects/useDemoProject.ts        | 40 +++++++++++++++
 .../pages/HomePage/GetStartedSection.tsx      | 50 +++++++++++--------
 .../components/pages/HomePage/HomePage.tsx    |  2 +-
 apps/opik-frontend/src/lib/utils.ts           |  6 ++-
 4 files changed, 75 insertions(+), 23 deletions(-)
 create mode 100644 apps/opik-frontend/src/api/projects/useDemoProject.ts

diff --git a/apps/opik-frontend/src/api/projects/useDemoProject.ts b/apps/opik-frontend/src/api/projects/useDemoProject.ts
new file mode 100644
index 0000000000..b824d5a57a
--- /dev/null
+++ b/apps/opik-frontend/src/api/projects/useDemoProject.ts
@@ -0,0 +1,40 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROJECTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { Project } from "@/types/projects";
+import { DEMO_PROJECT_NAME } from "@/constants/shared";
+
+type UseDemoProjectParams = {
+  workspaceName: string;
+};
+
+const getDemoProject = async (
+  { signal }: QueryFunctionContext,
+  params: UseDemoProjectParams,
+) => {
+  try {
+    const { data } = await api.post<Project | null>(
+      `${PROJECTS_REST_ENDPOINT}retrieve`,
+      {
+        name: DEMO_PROJECT_NAME,
+      },
+      {
+        signal,
+      },
+    );
+
+    return data;
+  } catch (e) {
+    return null;
+  }
+};
+
+export default function useDemoProject(
+  params: UseDemoProjectParams,
+  options?: QueryConfig<Project | null>,
+) {
+  return useQuery({
+    queryKey: ["project", params],
+    queryFn: (context) => getDemoProject(context, params),
+    ...options,
+  });
+}
diff --git a/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx b/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
index c479bdb4f5..392a43f6d6 100644
--- a/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
+++ b/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import { ArrowRight, MessageCircle, MousePointer, X } from "lucide-react";
 import useLocalStorageState from "use-local-storage-state";
+import { keepPreviousData } from "@tanstack/react-query";
 
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Link } from "@tanstack/react-router";
 import useAppStore from "@/store/AppStore";
-import { DEMO_PROJECT_NAME } from "@/constants/shared";
+import useDemoProject from "@/api/projects/useDemoProject";
 import { buildDocsUrl } from "@/lib/utils";
 
 const GetStartedSection = () => {
@@ -19,7 +20,15 @@ const GetStartedSection = () => {
     },
   );
 
-  if (hide) return null;
+  const { data: project, isPending } = useDemoProject(
+    { workspaceName },
+    {
+      enabled: !hide,
+      placeholderData: keepPreviousData,
+    },
+  );
+
+  if (hide || isPending) return null;
 
   return (
     <div>
@@ -40,24 +49,25 @@ const GetStartedSection = () => {
         </div>
       </div>
       <div className="flex gap-x-4">
-        <Alert>
-          <MousePointer className="size-4" />
-          <AlertTitle>Explore our demo project</AlertTitle>
-          <AlertDescription>
-            Browse our curated examples to draw inspiration for your own LLM
-            projects.
-          </AlertDescription>
-          <Link
-            to="/$workspaceName/redirect/projects"
-            params={{ workspaceName }}
-            search={{ name: DEMO_PROJECT_NAME }}
-          >
-            <Button variant="ghost" size="sm" className="-ml-2">
-              Go to demo project
-              <ArrowRight className="ml-1 size-4 shrink-0" />
-            </Button>
-          </Link>
-        </Alert>
+        {project && (
+          <Alert>
+            <MousePointer className="size-4" />
+            <AlertTitle>Explore our demo project</AlertTitle>
+            <AlertDescription>
+              Browse our curated examples to draw inspiration for your own LLM
+              projects.
+            </AlertDescription>
+            <Link
+              to="/$workspaceName/projects/$projectId"
+              params={{ workspaceName, projectId: project.id }}
+            >
+              <Button variant="ghost" size="sm" className="-ml-2">
+                Go to demo project
+                <ArrowRight className="ml-1 size-4 shrink-0" />
+              </Button>
+            </Link>
+          </Alert>
+        )}
         <Alert>
           <MessageCircle className="size-4" />
           <AlertTitle>Log a trace</AlertTitle>
diff --git a/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx b/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
index cd997a1026..5db0bfb617 100644
--- a/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
+++ b/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
@@ -12,7 +12,7 @@ const HomePage = () => {
     <div className="pt-6">
       <div className="mb-4 flex items-center justify-between">
         <h1 className="comet-title-l truncate break-words">
-          Welcome to {calculateWorkspaceName(workspaceName)}
+          Welcome to {calculateWorkspaceName(workspaceName, "Opik")}
         </h1>
       </div>
       <GetStartedSection />
diff --git a/apps/opik-frontend/src/lib/utils.ts b/apps/opik-frontend/src/lib/utils.ts
index 4e34cdd536..38511c99a6 100644
--- a/apps/opik-frontend/src/lib/utils.ts
+++ b/apps/opik-frontend/src/lib/utils.ts
@@ -66,5 +66,7 @@ export const toString = (value?: string | number | boolean | null) =>
 export const maskAPIKey = (apiKey: string = "") =>
   `${apiKey.substring(0, 6)}*****************`;
 
-export const calculateWorkspaceName = (workspaceName: string) =>
-  workspaceName === DEFAULT_WORKSPACE_NAME ? "Personal" : workspaceName;
+export const calculateWorkspaceName = (
+  workspaceName: string,
+  defaultName = "Personal",
+) => (workspaceName === DEFAULT_WORKSPACE_NAME ? defaultName : workspaceName);