[OPIK-228] [UX improvements] Implement empty states on the project pa…

…ge (#427)

apps/opik-frontend/src/components/pages/TracesPage/NoTracesPage.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Book, GraduationCap } from "lucide-react";
+import logFirstTraceImageUrl from "/images/log-first-trace.png";
+import { Button } from "@/components/ui/button";
+import { buildDocsUrl } from "@/lib/utils";
+import { Link } from "@tanstack/react-router";
+import useAppStore from "@/store/AppStore";
+
+type NoTracesPageProps = {
+  name: string;
+};
+
+const NoTracesPage: React.FC<NoTracesPageProps> = ({ name }) => {
+  const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+
+  return (
+    <div className="min-w-[340px] py-6">
+      <div className="pb-6">
+        <h1
+          data-testid="traces-page-title"
+          className="comet-title-l truncate break-words"
+        >
+          {name}
+        </h1>
+      </div>
+      <div className="flex flex-col items-center rounded-md border bg-white px-6 pb-6 pt-20">
+        <h2 className="comet-title-m">Log your first trace</h2>
+        <div className="comet-body-s max-w-[570px] px-4 pb-8 pt-4 text-center text-muted-slate">
+          Logging traces helps you understand the flow of your application and
+          identify specific points in your application that may be causing
+          issues.
+        </div>
+        <img
+          className="max-h-[400px] object-cover"
+          src={logFirstTraceImageUrl}
+          alt="image first trace"
+        />
+        <div className="flex flex-wrap justify-center gap-2 pt-8">
+          <Button variant="secondary" asChild>
+            <a
+              href={buildDocsUrl("/tracing/log_traces")}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Book className="mr-2 size-4"></Book>
+              Read documentation
+            </a>
+          </Button>
+          <Link to="/$workspaceName/quickstart" params={{ workspaceName }}>
+            <Button>
+              <GraduationCap className="mr-2 size-4" />
+              Explore Quickstart guide
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NoTracesPage;

apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx

@@ -32,9 +32,9 @@ import { generateSelectColumDef } from "@/components/shared/DataTable/utils";
 import TracesActionsButton from "@/components/pages/TracesPage/TracesActionsButton";
 import DataTableRowHeightSelector from "@/components/shared/DataTableRowHeightSelector/DataTableRowHeightSelector";
 import DataTableNoData from "@/components/shared/DataTableNoData/DataTableNoData";
+import NoTracesPage from "@/components/pages/TracesPage/NoTracesPage";
 import { ROW_HEIGHT } from "@/types/shared";
 import { convertColumnDataToColumn } from "@/lib/table";
-import { buildDocsUrl } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 import useProjectById from "@/api/projects/useProjectById";
@@ -213,6 +213,10 @@ const TracesPage = () => {
     return <Loader />;
   }
 
+  if (noData && rows.length === 0) {
+    return <NoTracesPage name={name} />;
+  }
+
   return (
     <div className="pt-6">
       <div className="mb-4 flex items-center justify-between">
@@ -290,21 +294,7 @@ const TracesPage = () => {
         rowSelection={rowSelection}
         setRowSelection={setRowSelection}
         rowHeight={height as ROW_HEIGHT}
-        noData={
-          <DataTableNoData title={noDataText}>
-            {noData && (
-              <Button variant="link">
-                <a
-                  href={buildDocsUrl("/tracing/log_traces")}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Check our documentation
-                </a>
-              </Button>
-            )}
-          </DataTableNoData>
-        }
+        noData={<DataTableNoData title={noDataText} />}
       />
       <div className="py-4">
         <DataTablePagination