[OPIK-3836] [FE] Add batchGroupId param for dataset version creation (#4735)

* [OPIK-3836] [FE] Add batchGroupId param for dataset version creation

Add batchGroupId parameter to dataset item CRUD operations that bypass
draft mode (select all with filters), enabling the backend to create
new versions when the dataset versioning feature flag is enabled.

Changes:
- Add generateBatchGroupId utility function to lib/utils.ts
- Update useDatasetItemBatchDeleteMutation to accept and send batchGroupId
- Update useDatasetItemBatchUpdateMutation to accept and send batchGroupId
- Update DatasetItemsActionsPanel to pass batchGroupId for select all delete
- Update AddTagDialog to pass batchGroupId for select all tag updates

The batchGroupId is only sent when isAllItemsSelected is true (operations
using filters instead of specific IDs). These versioned components are only
used when DATASET_VERSIONING_ENABLED feature flag is enabled.

* OPIK-3836 invalidate the dataset query

---------

Co-authored-by: GitHub Actions Bot <[email protected]>

Author: awkoy

apps/opik-frontend/src/api/datasets/useDatasetItemBatchDeleteMutation.ts

@@ -15,6 +15,7 @@ type UseDatasetItemBatchDeleteMutationParams = {
   isAllItemsSelected?: boolean;
   filters?: Filters;
   search?: string;
+  batchGroupId?: string;
 };
 
 const useDatasetItemBatchDeleteMutation = () => {
@@ -28,6 +29,7 @@ const useDatasetItemBatchDeleteMutation = () => {
       isAllItemsSelected,
       filters = [],
       search,
+      batchGroupId,
     }: UseDatasetItemBatchDeleteMutationParams) => {
       let payload;
 
@@ -40,6 +42,7 @@ const useDatasetItemBatchDeleteMutation = () => {
         payload = {
           dataset_id: datasetId,
           filters: processFiltersArray(combinedFilters),
+          ...(batchGroupId && { batch_group_id: batchGroupId }),
         };
       } else {
         payload = { item_ids: ids };
@@ -73,10 +76,13 @@ const useDatasetItemBatchDeleteMutation = () => {
         variant: "destructive",
       });
     },
-    onSettled: () => {
-      return queryClient.invalidateQueries({
+    onSettled: (data, error, variables) => {
+      queryClient.invalidateQueries({
         queryKey: ["dataset-items"],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["dataset", { datasetId: variables.datasetId }],
+      });
     },
   });
 };

apps/opik-frontend/src/api/datasets/useDatasetItemBatchUpdateMutation.ts

@@ -19,6 +19,7 @@ type UseDatasetItemBatchUpdateMutationParams = {
   isAllItemsSelected?: boolean;
   filters?: Filters;
   search?: string;
+  batchGroupId?: string;
 };
 
 const useDatasetItemBatchUpdateMutation = () => {
@@ -34,6 +35,7 @@ const useDatasetItemBatchUpdateMutation = () => {
       isAllItemsSelected,
       filters = [],
       search,
+      batchGroupId,
     }: UseDatasetItemBatchUpdateMutationParams) => {
       let payload;
 
@@ -48,6 +50,7 @@ const useDatasetItemBatchUpdateMutation = () => {
           filters: processFiltersArray(combinedFilters),
           update: item,
           merge_tags: mergeTags,
+          ...(batchGroupId && { batch_group_id: batchGroupId }),
         };
       } else {
         payload = { ids: itemIds, update: item, merge_tags: mergeTags };
@@ -77,6 +80,9 @@ const useDatasetItemBatchUpdateMutation = () => {
       queryClient.invalidateQueries({
         queryKey: ["dataset-items", { datasetId: variables.datasetId }],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["dataset", { datasetId: variables.datasetId }],
+      });
     },
   });
 };

apps/opik-frontend/src/components/pages/DatasetItemsPage/AddTagDialog.tsx

@@ -16,6 +16,7 @@ import {
   useBulkEditItems,
   useIsAllItemsSelected,
 } from "@/store/DatasetDraftStore";
+import { generateBatchGroupId } from "@/lib/utils";
 
 type AddTagDialogProps = {
   datasetId: string;
@@ -77,6 +78,7 @@ const AddTagDialog: React.FunctionComponent<AddTagDialogProps> = ({
           isAllItemsSelected,
           filters,
           search,
+          batchGroupId: isAllItemsSelected ? generateBatchGroupId() : undefined,
         },
         {
           onSuccess: () => {

apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemsActionsPanel.tsx

@@ -12,7 +12,7 @@ import DatasetExpansionDialog from "./DatasetExpansionDialog";
 import GeneratedSamplesDialog from "./GeneratedSamplesDialog";
 import AddTagDialog from "./AddTagDialog";
 import { DATASET_ITEM_DATA_PREFIX } from "@/constants/datasets";
-import { stripColumnPrefix } from "@/lib/utils";
+import { stripColumnPrefix, generateBatchGroupId } from "@/lib/utils";
 import { useIsFeatureEnabled } from "@/components/feature-toggles-provider";
 import { FeatureToggleKeys } from "@/types/feature-toggles";
 import { Filters } from "@/types/filters";
@@ -80,6 +80,7 @@ const DatasetItemsActionsPanel: React.FunctionComponent<
         isAllItemsSelected,
         filters,
         search,
+        batchGroupId: isAllItemsSelected ? generateBatchGroupId() : undefined,
       });
     }
   }, [

apps/opik-frontend/src/lib/utils.ts

@@ -17,6 +17,7 @@ import mapValues from "lodash/mapValues";
 import pickBy from "lodash/pickBy";
 import { twMerge } from "tailwind-merge";
 import isEqual from "fast-deep-equal";
+import { v4 as uuidv4 } from "uuid";
 import { DEFAULT_WORKSPACE_NAME } from "@/constants/user";
 import { JsonNode } from "@/types/shared";
 
@@ -303,3 +304,5 @@ export const removeUndefinedKeys = <T>(value: T): T => {
 export const isLooseEqual = <T>(a: T, b: T): boolean => {
   return isEqual(removeUndefinedKeys(a), removeUndefinedKeys(b));
 };
+
+export const generateBatchGroupId = (): string => uuidv4();