[OPIK-5162] [FE] V2 Optimization studio page: project-scoped data and navigation (#5900)

- Use project-scoped endpoint for optimizations list (R2)
- Pass projectId to experiment list calls in detail/trial pages (R2, R3)
- Pass project_id in optimization creation payload from Studio UI (R2, R3)
- Add project_id to Optimization type
- All new params optional for v1 backward compatibility

Not included (dependencies not ready):
- R4: TraceLogsSidebar integration (OPIK-5027 not built yet)
- SDK project_name on create_optimization (OPIK-5212 To Do)

Author: miguelgrc

apps/opik-frontend/src/api/optimizations/useOptimizationsList.ts

@@ -3,6 +3,7 @@ import isBoolean from "lodash/isBoolean";
 import api, {
   OPTIMIZATIONS_KEY,
   OPTIMIZATIONS_REST_ENDPOINT,
+  PROJECTS_REST_ENDPOINT,
   QueryConfig,
 } from "@/api/api";
 import { Optimization } from "@/types/optimizations";
@@ -11,6 +12,7 @@ import { processFilters } from "@/lib/filters";
 
 export type UseOptimizationsListParams = {
   workspaceName: string;
+  projectId?: string;
   datasetId?: string;
   datasetDeleted?: boolean;
   filters?: Filters;
@@ -29,6 +31,7 @@ export const getOptimizationsList = async (
   { signal }: QueryFunctionContext,
   {
     workspaceName,
+    projectId,
     datasetId,
     datasetDeleted,
     filters,
@@ -37,7 +40,11 @@ export const getOptimizationsList = async (
     page,
   }: UseOptimizationsListParams,
 ) => {
-  const { data } = await api.get(OPTIMIZATIONS_REST_ENDPOINT, {
+  const endpoint = projectId
+    ? `${PROJECTS_REST_ENDPOINT}${projectId}/optimizations`
+    : OPTIMIZATIONS_REST_ENDPOINT;
+
+  const { data } = await api.get(endpoint, {
     signal,
     params: {
       workspace_name: workspaceName,

apps/opik-frontend/src/hooks/useOptimizationsView.ts

@@ -8,6 +8,7 @@ const DEFAULT_PAGE_SIZE = 100;
 
 type UseOptimizationsViewParams = {
   workspaceName: string;
+  projectId?: string;
   datasetId?: string;
   search?: string;
   page: number;
@@ -16,6 +17,7 @@ type UseOptimizationsViewParams = {
 
 export const useOptimizationsView = ({
   workspaceName,
+  projectId,
   datasetId,
   search,
   page,
@@ -25,6 +27,7 @@ export const useOptimizationsView = ({
     useOptimizationsList(
       {
         workspaceName,
+        projectId,
         datasetId: datasetId || "",
         search: search || "",
         page,

apps/opik-frontend/src/types/optimizations.ts

@@ -137,6 +137,7 @@ export interface OptimizationStudioConfig {
 export interface Optimization {
   id: string;
   name: string;
+  project_id?: string;
   dataset_id: string;
   dataset_name: string;
   metadata?: object;

apps/opik-frontend/src/v2/pages/OptimizationPage/useOptimizationExperiments.ts

@@ -13,7 +13,7 @@ import {
   aggregateCandidates,
   mergeExperimentScores,
 } from "@/lib/optimizations";
-import useAppStore from "@/store/AppStore";
+import useAppStore, { useActiveProjectId } from "@/store/AppStore";
 
 import useOptimizationById from "@/api/optimizations/useOptimizationById";
 import useExperimentsList from "@/api/datasets/useExperimentsList";
@@ -22,6 +22,7 @@ import { AggregatedCandidate } from "@/types/optimizations";
 
 export const useOptimizationExperiments = () => {
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+  const activeProjectId = useActiveProjectId();
 
   const { optimizationId } = useParams({
     select: (params) => params,
@@ -50,6 +51,7 @@ export const useOptimizationExperiments = () => {
   } = useExperimentsList(
     {
       workspaceName,
+      projectId: activeProjectId ?? undefined,
       optimizationId: optimizationId,
       sorting: [{ id: "created_at", desc: false }],
       forceSorting: true,
@@ -70,6 +72,7 @@ export const useOptimizationExperiments = () => {
   const { data: latestExperimentData } = useExperimentsList(
     {
       workspaceName,
+      projectId: activeProjectId ?? undefined,
       optimizationId: optimizationId,
       types: [
         EXPERIMENT_TYPE.TRIAL,

apps/opik-frontend/src/v2/pages/OptimizationsPage/OptimizationsNewPage/useOptimizationsNewFormHandlers.ts

@@ -219,6 +219,7 @@ export const useOptimizationsNewFormHandlers = () => {
           dataset_name: datasetNameValue,
           objective_name: objectiveName,
           status: OPTIMIZATION_STATUS.INITIALIZED,
+          project_id: activeProjectId ?? undefined,
         },
       });
 

apps/opik-frontend/src/v2/pages/OptimizationsPage/OptimizationsPage.tsx

@@ -246,6 +246,7 @@ const OptimizationsPage: React.FunctionComponent = () => {
     pageSize,
   } = useOptimizationsView({
     workspaceName,
+    projectId: activeProjectId ?? undefined,
     datasetId,
     search: search || "",
     page: page || 1,

apps/opik-frontend/src/v2/pages/TrialPage/TrialPage.tsx

@@ -14,7 +14,7 @@ import useExperimentsList from "@/api/datasets/useExperimentsList";
 import useDeepMemo from "@/hooks/useDeepMemo";
 import { Experiment, EXPERIMENT_TYPE } from "@/types/datasets";
 import useOptimizationById from "@/api/optimizations/useOptimizationById";
-import useAppStore from "@/store/AppStore";
+import useAppStore, { useActiveProjectId } from "@/store/AppStore";
 import { checkIsEvaluationSuite } from "@/lib/optimizations";
 import { getObjectiveScoreValue } from "@/lib/feedback-scores";
 import { keepPreviousData } from "@tanstack/react-query";
@@ -24,6 +24,7 @@ import { MAX_EXPERIMENTS_LOADED } from "@/lib/optimizations";
 
 const TrialPage: React.FunctionComponent = () => {
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+  const activeProjectId = useActiveProjectId();
   const {
     permissions: { canViewDatasets },
   } = usePermissions();
@@ -57,6 +58,7 @@ const TrialPage: React.FunctionComponent = () => {
   const { data: optimizationExperimentsData } = useExperimentsList(
     {
       workspaceName,
+      projectId: activeProjectId ?? undefined,
       optimizationId,
       types: [EXPERIMENT_TYPE.TRIAL],
       page: 1,