[OPIK-4987] [FE] feat: add useProjectDatasetsList hook for project-scoped datasets endpoint (#5919)

awkoy · web-flow · commit c80760b1d57f · 2026-03-27T18:50:36.000+01:00
Switch EvaluationSuitesPage from workspace-level /v1/private/datasets/ to
project-scoped /v1/private/projects/{projectId}/datasets endpoint, consistent
with how prompts and alerts use project-scoped APIs in v2.

Add ["project-datasets"] cache invalidation to all dataset mutation hooks.
diff --git a/apps/opik-frontend/src/api/datasets/useAddSpansToDatasetMutation.ts b/apps/opik-frontend/src/api/datasets/useAddSpansToDatasetMutation.ts
@@ -62,6 +62,7 @@ const useAddSpansToDatasetMutation = () => {
       if (context) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useAddTracesToDatasetMutation.ts b/apps/opik-frontend/src/api/datasets/useAddTracesToDatasetMutation.ts
@@ -63,6 +63,7 @@ const useAddTracesToDatasetMutation = () => {
       if (context) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetBatchDeleteMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetBatchDeleteMutation.ts
@@ -32,6 +32,7 @@ const useDatasetBatchDeleteMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetCreateMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetCreateMutation.ts
@@ -56,6 +56,7 @@ const useDatasetCreateMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetDeleteMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetDeleteMutation.ts
@@ -30,6 +30,7 @@ const useDatasetDeleteMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({ queryKey: ["datasets"] });
     },
   });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetItemBatchMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetItemBatchMutation.ts
@@ -63,6 +63,7 @@ const useDatasetItemBatchMutation = () => {
       queryClient.invalidateQueries({
         queryKey: ["dataset", { datasetId: variables.datasetId }],
       });
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetItemChangesMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetItemChangesMutation.ts
@@ -73,6 +73,7 @@ const useDatasetItemChangesMutation = (
       queryClient.invalidateQueries({
         queryKey: ["dataset-items", { datasetId: variables.datasetId }],
       });
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetItemsFromCsvMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetItemsFromCsvMutation.ts
@@ -55,6 +55,7 @@ const useDatasetItemsFromCsvMutation = () => {
       if (context) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetUpdateMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetUpdateMutation.ts
@@ -43,6 +43,7 @@ const useDatasetUpdateMutation = () => {
       queryClient.invalidateQueries({
         queryKey: ["dataset", { datasetId: variables.dataset.id }],
       });
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["datasets"],
       });
diff --git a/apps/opik-frontend/src/api/datasets/useExperimentBatchDeleteMutation.ts b/apps/opik-frontend/src/api/datasets/useExperimentBatchDeleteMutation.ts
@@ -32,6 +32,7 @@ const useExperimentBatchDeleteMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       queryClient.invalidateQueries({ queryKey: ["datasets"] });
       return queryClient.invalidateQueries({
         queryKey: ["experiments"],
diff --git a/apps/opik-frontend/src/api/datasets/useGetOrCreateDemoDataset.ts b/apps/opik-frontend/src/api/datasets/useGetOrCreateDemoDataset.ts
@@ -61,6 +61,7 @@ const useGetOrCreateDemoDataset = () => {
             })),
           });
 
+          queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
           queryClient.invalidateQueries({ queryKey: ["datasets"] });
         }
 
diff --git a/apps/opik-frontend/src/api/datasets/useProjectDatasetsList.ts b/apps/opik-frontend/src/api/datasets/useProjectDatasetsList.ts
@@ -0,0 +1,71 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROJECTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { Dataset } from "@/types/datasets";
+import { Filters } from "@/types/filters";
+import { processFilters } from "@/lib/filters";
+import { Sorting } from "@/types/sorting";
+import { processSorting } from "@/lib/sorting";
+
+type UseProjectDatasetsListParams = {
+  projectId: string;
+  withExperimentsOnly?: boolean;
+  withOptimizationsOnly?: boolean;
+  filters?: Filters;
+  sorting?: Sorting;
+  search?: string;
+  page: number;
+  size: number;
+};
+
+type UseProjectDatasetsListResponse = {
+  content: Dataset[];
+  sortable_by: string[];
+  total: number;
+};
+
+const getProjectDatasetsList = async (
+  { signal }: QueryFunctionContext,
+  {
+    projectId,
+    withExperimentsOnly,
+    withOptimizationsOnly,
+    filters,
+    sorting,
+    search,
+    size,
+    page,
+  }: UseProjectDatasetsListParams,
+) => {
+  const { data } = await api.get(
+    `${PROJECTS_REST_ENDPOINT}${projectId}/datasets`,
+    {
+      signal,
+      params: {
+        ...processFilters(filters),
+        ...processSorting(sorting),
+        ...(search && { name: search }),
+        ...(withExperimentsOnly && {
+          with_experiments_only: withExperimentsOnly,
+        }),
+        ...(withOptimizationsOnly && {
+          with_optimizations_only: withOptimizationsOnly,
+        }),
+        size,
+        page,
+      },
+    },
+  );
+
+  return data;
+};
+
+export default function useProjectDatasetsList(
+  params: UseProjectDatasetsListParams,
+  options?: QueryConfig<UseProjectDatasetsListResponse>,
+) {
+  return useQuery({
+    queryKey: ["project-datasets", params],
+    queryFn: (context) => getProjectDatasetsList(context, params),
+    ...options,
+  });
+}
diff --git a/apps/opik-frontend/src/api/optimizations/useOptimizationBatchDeleteMutation.ts b/apps/opik-frontend/src/api/optimizations/useOptimizationBatchDeleteMutation.ts
@@ -32,6 +32,7 @@ const useOptimizationBatchDeleteMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-datasets"] });
       queryClient.invalidateQueries({ queryKey: ["datasets"] });
       return queryClient.invalidateQueries({
         queryKey: [OPTIMIZATIONS_KEY],
diff --git a/apps/opik-frontend/src/v2/pages-shared/DatasetVersionSelectBox/DatasetVersionSelectBox.tsx b/apps/opik-frontend/src/v2/pages-shared/DatasetVersionSelectBox/DatasetVersionSelectBox.tsx
@@ -46,7 +46,7 @@ interface DatasetVersionSelectBoxProps {
   value: string | null; // "datasetId::versionId" format
   versionName?: string;
   onChange: (value: string | null) => void;
-  workspaceName: string;
+  projectId?: string | null;
   disabled?: boolean;
   showClearButton?: boolean;
   buttonClassName?: string;
@@ -69,7 +69,7 @@ function DatasetVersionSelectBox({
   value,
   versionName,
   onChange,
-  workspaceName,
+  projectId,
   disabled = false,
   showClearButton = true,
   buttonClassName,
@@ -101,7 +101,7 @@ function DatasetVersionSelectBox({
     loadMore,
     hasMore,
   } = useDatasetVersionSelect({
-    workspaceName,
+    projectId,
     search,
     openDatasetId,
   });
diff --git a/apps/opik-frontend/src/v2/pages-shared/DatasetVersionSelectBox/useDatasetVersionSelect.ts b/apps/opik-frontend/src/v2/pages-shared/DatasetVersionSelectBox/useDatasetVersionSelect.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
-import useDatasetsList from "@/api/datasets/useDatasetsList";
+import useProjectDatasetsList from "@/api/datasets/useProjectDatasetsList";
 import useDatasetVersionsList from "@/api/datasets/useDatasetVersionsList";
 import { Dataset, DatasetVersion } from "@/types/datasets";
 import toLower from "lodash/toLower";
@@ -9,7 +9,6 @@ export const DEFAULT_LOADED_DATASETS = 1000;
 const MAX_LOADED_DATASETS = 10000;
 
 interface UseDatasetVersionSelectParams {
-  workspaceName: string;
   projectId?: string | null;
   search: string;
   openDatasetId: string | null;
@@ -27,23 +26,23 @@ export interface UseDatasetVersionSelectReturn {
 }
 
 export default function useDatasetVersionSelect({
-  workspaceName,
   projectId,
   search,
   openDatasetId,
 }: UseDatasetVersionSelectParams): UseDatasetVersionSelectReturn {
   const [isLoadedMore, setIsLoadedMore] = useState(false);
-  const { data: datasetsData, isLoading: isLoadingDatasets } = useDatasetsList(
-    {
-      workspaceName,
-      ...(projectId && { projectId }),
-      page: 1,
-      size: !isLoadedMore ? DEFAULT_LOADED_DATASETS : MAX_LOADED_DATASETS,
-    },
-    {
-      placeholderData: keepPreviousData,
-    },
-  );
+  const { data: datasetsData, isLoading: isLoadingDatasets } =
+    useProjectDatasetsList(
+      {
+        projectId: projectId!,
+        page: 1,
+        size: !isLoadedMore ? DEFAULT_LOADED_DATASETS : MAX_LOADED_DATASETS,
+      },
+      {
+        placeholderData: keepPreviousData,
+        enabled: !!projectId,
+      },
+    );
 
   const datasets = useMemo(
     () => datasetsData?.content || [],
diff --git a/apps/opik-frontend/src/v2/pages-shared/experiments/AddExperimentDialog/AddExperimentDialog.tsx b/apps/opik-frontend/src/v2/pages-shared/experiments/AddExperimentDialog/AddExperimentDialog.tsx
@@ -8,7 +8,7 @@ import CodeBlockWithHeader from "@/shared/CodeBlockWithHeader/CodeBlockWithHeade
 import CodeSectionTitle from "@/shared/CodeSectionTitle/CodeSectionTitle";
 import InstallOpikSection from "@/shared/InstallOpikSection/InstallOpikSection";
 import LoadableSelectBox from "@/shared/LoadableSelectBox/LoadableSelectBox";
-import useDatasetsList from "@/api/datasets/useDatasetsList";
+import useProjectDatasetsList from "@/api/datasets/useProjectDatasetsList";
 import { DATASET_TYPE } from "@/types/datasets";
 import SideDialog from "@/shared/SideDialog/SideDialog";
 import { SheetTitle } from "@/ui/sheet";
@@ -198,15 +198,15 @@ const AddExperimentDialog: React.FunctionComponent<
     LLM_JUDGES_MODELS_OPTIONS[0].value,
   ]); // Set the first LLM judge model as checked
 
-  const { data, isLoading } = useDatasetsList(
+  const { data, isLoading } = useProjectDatasetsList(
     {
-      workspaceName,
-      ...(projectId && { projectId }),
+      projectId: projectId!,
       page: 1,
       size: isLoadedMore ? 10000 : DEFAULT_LOADED_DATASET_ITEMS,
     },
     {
       placeholderData: keepPreviousData,
+      enabled: !!projectId,
     },
   );
 
diff --git a/apps/opik-frontend/src/v2/pages-shared/experiments/DatasetSelectBox/DatasetSelectBox.tsx b/apps/opik-frontend/src/v2/pages-shared/experiments/DatasetSelectBox/DatasetSelectBox.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
 
-import useAppStore from "@/store/AppStore";
-import useDatasetsList from "@/api/datasets/useDatasetsList";
+import useProjectDatasetsList from "@/api/datasets/useProjectDatasetsList";
 import LoadableSelectBox from "@/shared/LoadableSelectBox/LoadableSelectBox";
 import { DropdownOption } from "@/types/shared";
+import { usePermissions } from "@/contexts/PermissionsContext";
 
 const DEFAULT_LOADED_DATASET_ITEMS = 1000;
 
@@ -23,17 +23,19 @@ const DatasetSelectBox: React.FC<DatasetSelectBoxProps> = ({
   placeholder = "Select an evaluation suite",
   className,
 }) => {
-  const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+  const {
+    permissions: { canViewDatasets },
+  } = usePermissions();
   const [isLoadedMore, setIsLoadedMore] = useState(false);
-  const { data, isLoading } = useDatasetsList(
+  const { data, isLoading } = useProjectDatasetsList(
     {
-      workspaceName,
-      ...(projectId && { projectId }),
+      projectId: projectId!,
       page: 1,
       size: isLoadedMore ? 10000 : DEFAULT_LOADED_DATASET_ITEMS,
     },
     {
       placeholderData: keepPreviousData,
+      enabled: canViewDatasets && !!projectId,
     },
   );
 
diff --git a/apps/opik-frontend/src/v2/pages-shared/traces/AddToDatasetDialog/AddToDatasetDialog.test.tsx b/apps/opik-frontend/src/v2/pages-shared/traces/AddToDatasetDialog/AddToDatasetDialog.test.tsx
@@ -12,7 +12,7 @@ const mockAddTracesToDataset = vi.fn();
 const mockAddSpansToDataset = vi.fn();
 
 // Mock the API hooks
-vi.mock("@/api/datasets/useDatasetsList", () => ({
+vi.mock("@/api/datasets/useProjectDatasetsList", () => ({
   default: vi.fn(() => ({
     data: {
       content: [
diff --git a/apps/opik-frontend/src/v2/pages-shared/traces/AddToDatasetDialog/AddToDatasetDialog.tsx b/apps/opik-frontend/src/v2/pages-shared/traces/AddToDatasetDialog/AddToDatasetDialog.tsx
@@ -19,7 +19,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/ui/accordion";
-import useDatasetsList from "@/api/datasets/useDatasetsList";
+import useProjectDatasetsList from "@/api/datasets/useProjectDatasetsList";
 import Loader from "@/shared/Loader/Loader";
 import DataTablePagination from "@/shared/DataTablePagination/DataTablePagination";
 import SearchInput from "@/shared/SearchInput/SearchInput";
@@ -89,16 +89,16 @@ const AddToDatasetDialog: React.FunctionComponent<AddToDatasetDialogProps> = ({
   const { mutate: addTracesToDataset } = useAddTracesToDatasetMutation();
   const { mutate: addSpansToDataset } = useAddSpansToDatasetMutation();
 
-  const { data, isPending } = useDatasetsList(
+  const { data, isPending } = useProjectDatasetsList(
     {
-      workspaceName,
-      ...(activeProjectId && { projectId: activeProjectId }),
+      projectId: activeProjectId!,
       search,
       page,
       size,
     },
     {
       placeholderData: keepPreviousData,
+      enabled: !!activeProjectId,
     },
   );
 
diff --git a/apps/opik-frontend/src/v2/pages/EvaluationSuitesPage/EvaluationSuitesPage.tsx b/apps/opik-frontend/src/v2/pages/EvaluationSuitesPage/EvaluationSuitesPage.tsx
@@ -12,7 +12,7 @@ import { JsonParam, StringParam, useQueryParam } from "use-query-params";
 import DataTable from "@/shared/DataTable/DataTable";
 import DataTablePagination from "@/shared/DataTablePagination/DataTablePagination";
 import DataTableNoData from "@/shared/DataTableNoData/DataTableNoData";
-import useDatasetsList from "@/api/datasets/useDatasetsList";
+import useProjectDatasetsList from "@/api/datasets/useProjectDatasetsList";
 import { Dataset } from "@/types/datasets";
 import Loader from "@/shared/Loader/Loader";
 import AddEditEvaluationSuiteDialog from "@/v2/pages-shared/datasets/AddEditEvaluationSuiteDialog/AddEditEvaluationSuiteDialog";
@@ -221,20 +221,21 @@ const EvaluationSuitesPage: React.FunctionComponent = () => {
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-  const { data, isPending, isPlaceholderData, isFetching } = useDatasetsList(
-    {
-      workspaceName,
-      projectId: activeProjectId,
-      filters,
-      sorting: sortedColumns,
-      search: search!,
-      page,
-      size,
-    },
-    {
-      placeholderData: keepPreviousData,
-    },
-  );
+  const { data, isPending, isPlaceholderData, isFetching } =
+    useProjectDatasetsList(
+      {
+        projectId: activeProjectId!,
+        filters,
+        sorting: sortedColumns,
+        search: search!,
+        page,
+        size,
+      },
+      {
+        placeholderData: keepPreviousData,
+        enabled: !!activeProjectId,
+      },
+    );
 
   const datasets = useMemo(() => data?.content ?? [], [data?.content]);
   const sortableBy: string[] = useMemo(
diff --git a/apps/opik-frontend/src/v2/pages/OptimizationsPage/AddOptimizationDialog/AddOptimizationDialog.tsx b/apps/opik-frontend/src/v2/pages/OptimizationsPage/AddOptimizationDialog/AddOptimizationDialog.tsx
diff --git a/apps/opik-frontend/src/v2/pages/OptimizationsPage/OptimizationsNewPage/useOptimizationsNewFormHandlers.ts b/apps/opik-frontend/src/v2/pages/OptimizationsPage/OptimizationsNewPage/useOptimizationsNewFormHandlers.ts
diff --git a/apps/opik-frontend/src/v2/pages/PlaygroundPage/PlaygroundPage.tsx b/apps/opik-frontend/src/v2/pages/PlaygroundPage/PlaygroundPage.tsx
diff --git a/apps/opik-frontend/src/v2/pages/PlaygroundPage/RunOnDatasetDialog.tsx b/apps/opik-frontend/src/v2/pages/PlaygroundPage/RunOnDatasetDialog.tsx

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@ const useAddSpansToDatasetMutation = () => {`
`62`	`62`	`if (context) {`
`63`	`63`	`queryClient.invalidateQueries({ queryKey: context.queryKey });`
`64`	`64`	`}`
	`65`	`+ queryClient.invalidateQueries({ queryKey: ["project-datasets"] });`
`65`	`66`	`return queryClient.invalidateQueries({`
`66`	`67`	`queryKey: ["datasets"],`
`67`	`68`	`});`
Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ const useAddTracesToDatasetMutation = () => {`
`63`	`63`	`if (context) {`
`64`	`64`	`queryClient.invalidateQueries({ queryKey: context.queryKey });`
`65`	`65`	`}`
	`66`	`+ queryClient.invalidateQueries({ queryKey: ["project-datasets"] });`
`66`	`67`	`return queryClient.invalidateQueries({`
`67`	`68`	`queryKey: ["datasets"],`
`68`	`69`	`});`
Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ const useDatasetItemsFromCsvMutation = () => {`
`55`	`55`	`if (context) {`
`56`	`56`	`queryClient.invalidateQueries({ queryKey: context.queryKey });`
`57`	`57`	`}`
	`58`	`+ queryClient.invalidateQueries({ queryKey: ["project-datasets"] });`
`58`	`59`	`return queryClient.invalidateQueries({`
`59`	`60`	`queryKey: ["datasets"],`
`60`	`61`	`});`