feat(studio): project analytics behind project-analytics flag

Author: did

apps/web/src/components/layouts/sidebar/breadcrumb/BreadcrumbAnalytics.tsx

@@ -1,14 +1,16 @@
 import { BreadcrumbItem, BreadcrumbSeparator } from "@caseai-connect/ui/shad/breadcrumb"
 import { DotIcon } from "lucide-react"
 import { useTranslation } from "react-i18next"
+import { useFeatureFlags } from "@/hooks/use-feature-flags"
 import { useIsRoute } from "@/hooks/use-is-route"
 import { RouteNames } from "@/routes/helpers"
 
 export function BreadcrumbAnalytics() {
+  const { hasFeature } = useFeatureFlags()
   const { isRoute } = useIsRoute()
   const isAnalyticsRoute = isRoute(RouteNames.ANALYTICS)
   const { t } = useTranslation("analytics")
-  if (!isAnalyticsRoute) return null
+  if (!hasFeature("project-analytics") || !isAnalyticsRoute) return null
   return (
     <>
       <BreadcrumbSeparator>

apps/web/src/features/analytics/analytics.thunks.ts

@@ -1,4 +1,5 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
+import { hasFeatureOrThrow } from "@/hooks/use-feature-flags"
 import type { RootState, ThunkExtraArg } from "@/store"
 import { getCurrentIds } from "../helpers"
 import type { AnalyticsDailyPoint } from "./analytics.models"
@@ -14,6 +15,7 @@ export const loadProjectAnalytics = createAsyncThunk<
   ThunkConfig
 >("analytics/loadProject", async ({ startAt, endAt }, { extra: { services }, getState }) => {
   const state = getState()
+  hasFeatureOrThrow({ state, feature: "project-analytics" })
   const { organizationId, projectId } = getCurrentIds({
     state,
     wantedIds: ["organizationId", "projectId"],

apps/web/src/routes/DashboardRoute.tsx

@@ -100,7 +100,9 @@ function SidebarFooterChildren({ project }: { project: Project }) {
 
           <NavDocuments organizationId={project.organizationId} projectId={project.id} />
 
-          <NavAnalytics organizationId={project.organizationId} projectId={project.id} />
+          <RestrictedFeature feature="project-analytics">
+            <NavAnalytics organizationId={project.organizationId} projectId={project.id} />
+          </RestrictedFeature>
 
           <NavProjectMemberships organizationId={project.organizationId} projectId={project.id} />
         </SidebarMenu>

apps/web/src/routes/Router.tsx

@@ -72,7 +72,11 @@ const router = () =>
                 },
                 {
                   path: buildStudioPath(RouteNames.ANALYTICS),
-                  element: <AnalyticsRoute />,
+                  element: (
+                    <RestrictedFeature feature="project-analytics">
+                      <AnalyticsRoute />
+                    </RestrictedFeature>
+                  ),
                 },
                 {
                   path: buildStudioPath(RouteNames.PROJECT_MEMBERSHIPS),

packages/api-contracts/src/feature-flags/feature-flags.dto.ts

@@ -12,6 +12,10 @@ export const FeatureFlags = [
     key: "gemma",
     description: "Access and utilize gemma models.",
   },
+  {
+    key: "project-analytics",
+    description: "View project-level analytics and usage charts in the studio.",
+  },
 ] as const
 export type FeatureFlagKey = (typeof FeatureFlags)[number]["key"]
 export type FeatureFlagsDto = FeatureFlagKey[]