feat: workspace in breadcrumbs LAM-427

frontend/app/project/[projectId]/layout.tsx → frontend/app/projects/[projectId]/layout.tsx

@@ -1,57 +1,49 @@
-import '@/app/globals.css';
+import "@/app/globals.css";
 
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
-import { getServerSession } from 'next-auth';
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { ReactNode } from "react";
 
-import PostHogClient from '@/app/posthog';
-import ProjectNavbar from '@/components/project/project-navbar';
-import ProjectUsageBanner from '@/components/project/usage-banner';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { ProjectContextProvider } from '@/contexts/project-context';
-import { UserContextProvider } from '@/contexts/user-context';
-import { authOptions } from '@/lib/auth';
-import { Feature, isFeatureEnabled } from '@/lib/features/features';
-import { fetcherJSON } from '@/lib/utils';
-import { GetProjectResponse } from '@/lib/workspaces/types';
+import PostHogClient from "@/app/posthog";
+import ProjectNavbar from "@/components/projects/project-navbar";
+import ProjectUsageBanner from "@/components/projects/usage-banner";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { ProjectContextProvider } from "@/contexts/project-context";
+import { UserContextProvider } from "@/contexts/user-context";
+import { authOptions } from "@/lib/auth";
+import { Feature, isFeatureEnabled } from "@/lib/features/features";
+import { fetcherJSON } from "@/lib/utils";
+import { GetProjectResponse } from "@/lib/workspaces/types";
 
-export default async function ProjectIdLayout(
-  props: {
-    children: React.ReactNode;
-    params: Promise<{ projectId: string }>;
-  }
-) {
+export default async function ProjectIdLayout(props: { children: ReactNode; params: Promise<{ projectId: string }> }) {
   const params = await props.params;
 
-  const {
-    children
-  } = props;
+  const { children } = props;
 
   const projectId = params.projectId;
   const session = await getServerSession(authOptions);
   if (!session) {
-    redirect('/sign-in');
+    redirect("/sign-in");
   }
   const user = session.user;
 
   const projectResponse = await fetcherJSON(`/projects/${projectId}`, {
-    method: 'GET',
+    method: "GET",
     headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${user.apiKey}`
-    }
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${user.apiKey}`,
+    },
   });
 
   const project = projectResponse as GetProjectResponse;
 
   const showBanner =
-    isFeatureEnabled(Feature.WORKSPACE) &&
-    project.isFreeTier &&
-    project.spansThisMonth >= 0.8 * project.spansLimit;
+    isFeatureEnabled(Feature.WORKSPACE) && project.isFreeTier && project.spansThisMonth >= 0.8 * project.spansLimit;
 
   const posthog = PostHogClient();
   posthog.identify({
-    distinctId: user.email ?? ''
+    distinctId: user.email ?? "",
   });
 
   // getting the cookies for the sidebar state
@@ -69,9 +61,7 @@ export default async function ProjectIdLayout(
         <div className="flex flex-row max-w-full max-h-screen">
           <SidebarProvider defaultOpen={defaultOpen}>
             <div className="z-50 h-screen">
-              <ProjectNavbar
-                projectId={projectId}
-              />
+              <ProjectNavbar projectId={projectId} />
             </div>
             <div className="flex flex-col flex-grow h-screen max-w-full min-h-screen overflow-y-auto">
               {showBanner && (

frontend/app/projects/layout.tsx

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { PropsWithChildren } from "react";
+
+import { UserContextProvider } from "@/contexts/user-context";
+import { WorkspaceContextProvider } from "@/contexts/workspace-context";
+import { authOptions } from "@/lib/auth";
+
+export default async function ProjectsLayout({ children }: PropsWithChildren) {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    redirect("/sign-in?callbackUrl=/onboarding");
+  }
+  const user = session.user;
+
+  return (
+    <WorkspaceContextProvider>
+      <UserContextProvider
+        email={user.email!}
+        supabaseAccessToken={session.supabaseAccessToken}
+        username={user.name!}
+        imageUrl={user.image!}
+      >
+        {children}
+      </UserContextProvider>
+    </WorkspaceContextProvider>
+  );
+}

frontend/app/projects/page.tsx

@@ -1,37 +1,21 @@
-import { Metadata } from 'next';
-import { redirect } from 'next/navigation';
-import { getServerSession } from 'next-auth';
+import { Metadata } from "next";
 
-import Projects from '@/components/projects/projects';
-import WorkspacesNavbar from '@/components/projects/workspaces-navbar';
-import Header from '@/components/ui/header';
-import { UserContextProvider } from '@/contexts/user-context';
-import { authOptions } from '@/lib/auth';
-import { Feature, isFeatureEnabled } from '@/lib/features/features';
+import Projects from "@/components/projects/projects";
+import WorkspacesNavbar from "@/components/projects/workspaces-navbar";
+import Header from "@/components/ui/header";
 
 export const metadata: Metadata = {
-  title: 'Projects'
+  title: "Projects",
 };
 
 export default async function ProjectsPage() {
-  const session = await getServerSession(authOptions);
-  if (!session) {
-    redirect('/sign-in?callbackUrl=/onboarding');
-  }
-  const user = session.user;
-
   return (
-    <UserContextProvider
-      email={user.email!}
-      supabaseAccessToken={session.supabaseAccessToken}
-      username={user.name!}
-      imageUrl={user.image!}
-    >
+    <>
       <WorkspacesNavbar />
       <div className="flex flex-col flex-grow min-h-screen ml-64 overflow-auto">
         <Header path="Projects" showSidebarTrigger={false} />
-        <Projects isWorkspaceEnabled={isFeatureEnabled(Feature.WORKSPACE)} />
+        <Projects />
       </div>
-    </UserContextProvider>
+    </>
   );
 }

frontend/components/dashboard/dashboard.tsx

@@ -1,81 +1,70 @@
-'use client';
+"use client";
 
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
 
-import { useProjectContext } from '@/contexts/project-context';
-import { GroupByInterval } from '@/lib/clickhouse/modifiers';
-import { SpanMetric, SpanMetricGroupBy } from '@/lib/clickhouse/spans';
-import { AggregationFunction } from '@/lib/clickhouse/utils';
-import { getGroupByInterval } from '@/lib/utils';
+import { useProjectContext } from "@/contexts/project-context";
+import { GroupByInterval } from "@/lib/clickhouse/modifiers";
+import { SpanMetric, SpanMetricGroupBy } from "@/lib/clickhouse/spans";
+import { AggregationFunction } from "@/lib/clickhouse/utils";
+import { getGroupByInterval } from "@/lib/utils";
 
-import DateRangeFilter from '../ui/date-range-filter';
-import { GroupByPeriodSelect } from '../ui/group-by-period-select';
-import Header from '../ui/header';
-import { ScrollArea } from '../ui/scroll-area';
-import { SpanStatChart } from './span-stat-chart';
-import SpanSummaryChart from './span-summary-chart';
-import { TraceStatChart } from './trace-stat-chart';
-
-const AGGREGATIONS: AggregationFunction[] = [
-  'AVG',
-  'MEDIAN',
-  'SUM',
-  'MIN',
-  'MAX',
-  'p90',
-  'p95',
-  'p99'
-];
+import DateRangeFilter from "../ui/date-range-filter";
+import { GroupByPeriodSelect } from "../ui/group-by-period-select";
+import Header from "../ui/header";
+import { ScrollArea } from "../ui/scroll-area";
+import { SpanStatChart } from "./span-stat-chart";
+import SpanSummaryChart from "./span-summary-chart";
+import { TraceStatChart } from "./trace-stat-chart";
 
+const AGGREGATIONS: AggregationFunction[] = ["AVG", "MEDIAN", "SUM", "MIN", "MAX", "p90", "p95", "p99"];
 
 const SPAN_SUMMARY_CHARTS = [
   {
-    title: 'Spans',
+    title: "Spans",
     metric: SpanMetric.Count,
     groupBy: SpanMetricGroupBy.Name,
   },
   {
-    title: 'Cost',
+    title: "Cost",
     metric: SpanMetric.TotalCost,
     groupBy: SpanMetricGroupBy.Model,
   },
   {
-    title: 'Tokens',
+    title: "Tokens",
     metric: SpanMetric.TotalTokens,
     groupBy: SpanMetricGroupBy.Model,
   },
   {
-    title: 'Spans by model',
+    title: "Spans by model",
     metric: SpanMetric.Count,
     groupBy: SpanMetricGroupBy.Model,
-  }
+  },
 ];
 
 export default function Dashboard() {
   const { projectId } = useProjectContext();
 
   const searchParams = new URLSearchParams(useSearchParams().toString());
-  const pastHours = searchParams.get('pastHours') as string | undefined;
-  const startDate = searchParams.get('startDate') as string | undefined;
-  const endDate = searchParams.get('endDate') as string | undefined;
+  const pastHours = searchParams.get("pastHours") as string | undefined;
+  const startDate = searchParams.get("startDate") as string | undefined;
+  const endDate = searchParams.get("endDate") as string | undefined;
   const groupByInterval =
-    searchParams.get('groupByInterval') ??
-    getGroupByInterval(pastHours, startDate, endDate, undefined);
+    searchParams.get("groupByInterval") ?? getGroupByInterval(pastHours, startDate, endDate, undefined);
 
   const router = useRouter();
 
   useEffect(() => {
     if (!pastHours && !startDate && !endDate) {
       const sp = new URLSearchParams(searchParams);
-      sp.set('pastHours', '24');
-      router.replace(`/project/${projectId}/dashboard?${sp.toString()}`);
+      sp.set("pastHours", "24");
+      router.replace(`/projects/${projectId}/dashboard?${sp.toString()}`);
     }
   }, []);
 
   return (
     <>
-      <Header path={'dashboard'}>
+      <Header path={"dashboard"}>
         <div className="h-12 flex space-x-2 items-center">
           <DateRangeFilter />
           <GroupByPeriodSelect />
@@ -90,9 +79,9 @@ export default function Dashboard() {
                   {...chart}
                   className="w-full"
                   projectId={projectId}
-                  pastHours={pastHours ?? ''}
-                  startDate={startDate ?? ''}
-                  endDate={endDate ?? ''}
+                  pastHours={pastHours ?? ""}
+                  startDate={startDate ?? ""}
+                  endDate={endDate ?? ""}
                   addDollarSign={chart.metric === SpanMetric.TotalCost}
                 />
               </div>
@@ -106,9 +95,9 @@ export default function Dashboard() {
                 defaultAggregation="p90"
                 aggregations={AGGREGATIONS}
                 groupBy={SpanMetricGroupBy.Model}
-                pastHours={pastHours ?? ''}
-                startDate={startDate ?? ''}
-                endDate={endDate ?? ''}
+                pastHours={pastHours ?? ""}
+                startDate={startDate ?? ""}
+                endDate={endDate ?? ""}
                 groupByInterval={groupByInterval as GroupByInterval}
               />
             </div>
@@ -121,9 +110,9 @@ export default function Dashboard() {
                 aggregations={AGGREGATIONS}
                 defaultAggregation="SUM"
                 groupBy={SpanMetricGroupBy.Model}
-                pastHours={pastHours ?? ''}
-                startDate={startDate ?? ''}
-                endDate={endDate ?? ''}
+                pastHours={pastHours ?? ""}
+                startDate={startDate ?? ""}
+                endDate={endDate ?? ""}
                 groupByInterval={groupByInterval as GroupByInterval}
               />
             </div>
@@ -136,9 +125,9 @@ export default function Dashboard() {
                 aggregations={AGGREGATIONS}
                 defaultAggregation="SUM"
                 groupBy={SpanMetricGroupBy.Model}
-                pastHours={pastHours ?? ''}
-                startDate={startDate ?? ''}
-                endDate={endDate ?? ''}
+                pastHours={pastHours ?? ""}
+                startDate={startDate ?? ""}
+                endDate={endDate ?? ""}
                 groupByInterval={groupByInterval as GroupByInterval}
               />
             </div>