UI: Use react-query native error state for bulk action hooks

airflow-core/src/airflow/ui/src/components/ActionErrors.tsx

@@ -0,0 +1,46 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Stack } from "@chakra-ui/react";
+
+import type { BulkActionResponse } from "openapi/requests/types.gen";
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { Alert } from "src/components/ui";
+
+type Props = {
+  readonly actionResponse?: BulkActionResponse | null;
+  readonly error: unknown;
+};
+
+export const ActionErrors = ({ actionResponse, error }: Props) => {
+  const actionErrors = (actionResponse?.errors ?? []) as Array<{ error: string; status_code?: number }>;
+
+  return (
+    <>
+      <ErrorAlert error={error} />
+      {actionErrors.length > 0 ? (
+        <Stack gap={2} mt={3}>
+          {actionErrors.map((actionError, index) => (
+            // eslint-disable-next-line react/no-array-index-key -- per-entity errors have no stable id
+            <Alert key={index} status="error" title={actionError.error} />
+          ))}
+        </Stack>
+      ) : undefined}
+    </>
+  );
+};

airflow-core/src/airflow/ui/src/components/DataTable/useRowSelection.ts

@@ -72,9 +72,23 @@ export const useRowSelection = <T>({ data = [], getKey }: UseRowSelectionProps<T
     setSelectedRows(new Map());
   };
 
+  const deselectKeys = (keys: Array<string>) => {
+    if (keys.length === 0) {
+      return;
+    }
+    setSelectedRows((prev) => {
+      const newMap = new Map(prev);
+
+      keys.forEach((key) => newMap.delete(key));
+
+      return newMap;
+    });
+  };
+
   return {
     allRowsSelected,
     clearSelections,
+    deselectKeys,
     handleRowSelect,
     handleSelectAll,
     selectedRows,

airflow-core/src/airflow/ui/src/pages/DagRuns/BulkDeleteDagRunsButton.tsx

@@ -23,15 +23,15 @@ import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
+import { ActionErrors } from "src/components/ActionErrors";
 import { DataTable } from "src/components/DataTable";
-import { ErrorAlert } from "src/components/ErrorAlert";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
 import { Accordion, Dialog } from "src/components/ui";
 import { useBulkDeleteDagRuns } from "src/queries/useBulkDeleteDagRuns";
 
 type Props = {
-  readonly clearSelections: VoidFunction;
+  readonly deselectKeys: (keys: Array<string>) => void;
   readonly selectedDagRuns: Array<DAGRunResponse>;
 };
 
@@ -58,11 +58,11 @@ const getColumns = (translate: TFunction): Array<ColumnDef<DAGRunResponse>> => [
   },
 ];
 
-const BulkDeleteDagRunsButton = ({ clearSelections, selectedDagRuns }: Props) => {
+const BulkDeleteDagRunsButton = ({ deselectKeys, selectedDagRuns }: Props) => {
   const { t: translate } = useTranslation(["common", "dags"]);
   const { onClose, onOpen, open } = useDisclosure();
-  const { bulkAction, error, isPending } = useBulkDeleteDagRuns({
-    clearSelections,
+  const { bulkAction, data, error, isPending } = useBulkDeleteDagRuns({
+    deselectKeys,
     onSuccessConfirm: onClose,
   });
 
@@ -142,7 +142,7 @@ const BulkDeleteDagRunsButton = ({ clearSelections, selectedDagRuns }: Props) =>
               )}
             </Box>
 
-            <ErrorAlert error={error} />
+            <ActionErrors actionResponse={data?.delete} error={error} />
             <Flex justifyContent="end" mt={3}>
               <Button
                 colorPalette="danger"

airflow-core/src/airflow/ui/src/pages/DagRuns/DagRuns.tsx

@@ -48,7 +48,9 @@ import BulkDeleteDagRunsButton from "./BulkDeleteDagRunsButton";
 import { DagRunsFilters } from "./DagRunsFilters";
 import DeleteRunButton from "./DeleteRunButton";
 
-const getRowKey = (dagRun: DAGRunResponse) => `${dagRun.dag_id}:${dagRun.dag_run_id}`;
+// Matches the identifier the bulk Dag Run endpoint echoes back in its ``success`` /
+// ``errors`` lists, so the bulk response can deselect rows directly.
+const getRowKey = (dagRun: DAGRunResponse) => `${dagRun.dag_id}.${dagRun.dag_run_id}`;
 
 type DagRunRow = { row: { original: DAGRunResponse } };
 const {
@@ -333,7 +335,7 @@ export const DagRuns = () => {
   const nextCursor = data?.next_cursor ?? undefined;
   const previousCursor = data?.previous_cursor ?? undefined;
 
-  const { allRowsSelected, clearSelections, handleRowSelect, handleSelectAll, selectedRows } =
+  const { allRowsSelected, clearSelections, deselectKeys, handleRowSelect, handleSelectAll, selectedRows } =
     useRowSelection({
       data: data?.dag_runs,
       getKey: getRowKey,
@@ -371,7 +373,7 @@ export const DagRuns = () => {
             {selectedRows.size} {translate("selected")}
           </ActionBar.SelectionTrigger>
           <ActionBar.Separator />
-          <BulkDeleteDagRunsButton clearSelections={clearSelections} selectedDagRuns={selectedDagRuns} />
+          <BulkDeleteDagRunsButton deselectKeys={deselectKeys} selectedDagRuns={selectedDagRuns} />
           <ActionBar.CloseTrigger onClick={clearSelections} />
         </ActionBar.Content>
       </ActionBar.Root>

airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkDeleteTaskInstancesButton.tsx

@@ -22,21 +22,21 @@ import { FiTrash2 } from "react-icons/fi";
 
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { getColumns } from "src/components/ActionAccordion/columns";
+import { ActionErrors } from "src/components/ActionErrors";
 import { DataTable } from "src/components/DataTable";
-import { ErrorAlert } from "src/components/ErrorAlert";
 import { Accordion, Dialog } from "src/components/ui";
 import { useBulkTaskInstances } from "src/queries/useBulkTaskInstances";
 
 type Props = {
-  readonly clearSelections: VoidFunction;
+  readonly deselectKeys: (keys: Array<string>) => void;
   readonly selectedTaskInstances: Array<TaskInstanceResponse>;
 };
 
-const BulkDeleteTaskInstancesButton = ({ clearSelections, selectedTaskInstances }: Props) => {
+const BulkDeleteTaskInstancesButton = ({ deselectKeys, selectedTaskInstances }: Props) => {
   const { t: translate } = useTranslation();
   const { onClose, onOpen, open } = useDisclosure();
-  const { bulkAction, error, isPending } = useBulkTaskInstances({
-    clearSelections,
+  const { bulkAction, data, error, isPending } = useBulkTaskInstances({
+    deselectKeys,
     onSuccessConfirm: onClose,
   });
 
@@ -117,7 +117,7 @@ const BulkDeleteTaskInstancesButton = ({ clearSelections, selectedTaskInstances
               )}
             </Box>
 
-            <ErrorAlert error={error} />
+            <ActionErrors actionResponse={data?.delete} error={error} />
             <Flex justifyContent="end" mt={3}>
               <Button
                 colorPalette="danger"

airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkMarkTaskInstancesAsButton.tsx

@@ -24,7 +24,7 @@ import { LuCheck } from "react-icons/lu";
 
 import type { TaskInstanceResponse, TaskInstanceState } from "openapi/requests/types.gen";
 import { ActionAccordion } from "src/components/ActionAccordion";
-import { ErrorAlert } from "src/components/ErrorAlert";
+import { ActionErrors } from "src/components/ActionErrors";
 import { allowedStates } from "src/components/MarkAs/utils";
 import { StateBadge } from "src/components/StateBadge";
 import { Dialog, Menu } from "src/components/ui";
@@ -33,18 +33,18 @@ import { useBulkMarkAsDryRun } from "src/queries/useBulkMarkAsDryRun";
 import { useBulkTaskInstances } from "src/queries/useBulkTaskInstances";
 
 type Props = {
-  readonly clearSelections: VoidFunction;
+  readonly deselectKeys: (keys: Array<string>) => void;
   readonly selectedTaskInstances: Array<TaskInstanceResponse>;
 };
 
-const BulkMarkTaskInstancesAsButton = ({ clearSelections, selectedTaskInstances }: Props) => {
+const BulkMarkTaskInstancesAsButton = ({ deselectKeys, selectedTaskInstances }: Props) => {
   const { t: translate } = useTranslation();
   const { onClose, onOpen, open } = useDisclosure();
   const [state, setState] = useState<TaskInstanceState>("success");
   const [selectedOptions, setSelectedOptions] = useState<Array<string>>([]);
   const [note, setNote] = useState<string | null>(null);
-  const { bulkAction, error, isPending, setError } = useBulkTaskInstances({
-    clearSelections,
+  const { bulkAction, data, error, isPending, reset } = useBulkTaskInstances({
+    deselectKeys,
     onSuccessConfirm: onClose,
   });
 
@@ -73,7 +73,7 @@ const BulkMarkTaskInstancesAsButton = ({ clearSelections, selectedTaskInstances
     setState(newState);
     setSelectedOptions([]);
     setNote(null);
-    setError(undefined);
+    reset();
     onOpen();
   };
 
@@ -163,7 +163,7 @@ const BulkMarkTaskInstancesAsButton = ({ clearSelections, selectedTaskInstances
               />
             </Flex>
             <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
-            <ErrorAlert error={error} />
+            <ActionErrors actionResponse={data?.update} error={error} />
             <Flex justifyContent="end" mt={3}>
               <Button
                 disabled={affectedTasks.total_entries === 0}

airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx

@@ -50,7 +50,10 @@ import { TaskInstancesFilter } from "./TaskInstancesFilter";
 
 type TaskInstanceRow = { row: { original: TaskInstanceResponse } };
 
-const getRowKey = (ti: TaskInstanceResponse) => `${ti.dag_id}:${ti.dag_run_id}:${ti.task_id}:${ti.map_index}`;
+// Matches the identifier the bulk task-instance endpoint echoes back in its
+// ``success`` / ``errors`` lists, so the bulk response can deselect rows directly.
+const getRowKey = (ti: TaskInstanceResponse) =>
+  `${ti.dag_id}.${ti.dag_run_id}.${ti.task_id}[${ti.map_index}]`;
 
 const {
   DAG_ID_PATTERN: DAG_ID_PATTERN_PARAM,
@@ -369,7 +372,7 @@ export const TaskInstances = () => {
   const nextCursor = data?.next_cursor ?? undefined;
   const previousCursor = data?.previous_cursor ?? undefined;
 
-  const { allRowsSelected, clearSelections, handleRowSelect, handleSelectAll, selectedRows } =
+  const { allRowsSelected, clearSelections, deselectKeys, handleRowSelect, handleSelectAll, selectedRows } =
     useRowSelection({
       data: data?.task_instances,
       getKey: getRowKey,
@@ -414,11 +417,11 @@ export const TaskInstances = () => {
             selectedTaskInstances={selectedTaskInstances}
           />
           <BulkMarkTaskInstancesAsButton
-            clearSelections={clearSelections}
+            deselectKeys={deselectKeys}
             selectedTaskInstances={selectedTaskInstances}
           />
           <BulkDeleteTaskInstancesButton
-            clearSelections={clearSelections}
+            deselectKeys={deselectKeys}
             selectedTaskInstances={selectedTaskInstances}
           />
           <ActionBar.CloseTrigger onClick={clearSelections} />

airflow-core/src/airflow/ui/src/queries/useBulkDeleteDagRuns.ts

@@ -17,43 +17,26 @@
  * under the License.
  */
 import { useQueryClient } from "@tanstack/react-query";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
   useDagRunServiceBulkDagRuns,
   useDagRunServiceGetDagRunsKey,
   useTaskInstanceServiceGetTaskInstancesKey,
 } from "openapi/queries";
-import type { BulkActionResponse, BulkBody_BulkDAGRunBody_, BulkResponse } from "openapi/requests/types.gen";
+import type { BulkBody_BulkDAGRunBody_, BulkResponse } from "openapi/requests/types.gen";
 import { toaster } from "src/components/ui";
 
 import { gridQueryKeys, tiPerAttemptQueryKeys } from "./gridViewQueryKeys";
 
 type Props = {
-  readonly clearSelections: VoidFunction;
+  readonly deselectKeys: (keys: Array<string>) => void;
   readonly onSuccessConfirm: VoidFunction;
 };
 
-const handleActionResult = (
-  actionResult: BulkActionResponse,
-  setError: (error: unknown) => void,
-  onSuccess: (count: number, keys: Array<string>) => void,
-) => {
-  const { errors, success } = actionResult;
-
-  if (Array.isArray(errors) && errors.length > 0) {
-    const apiError = errors[0] as { error: string };
-
-    setError({ body: { detail: apiError.error } });
-  } else if (Array.isArray(success) && success.length > 0) {
-    onSuccess(success.length, success);
-  }
-};
-
-export const useBulkDeleteDagRuns = ({ clearSelections, onSuccessConfirm }: Props) => {
+export const useBulkDeleteDagRuns = ({ deselectKeys, onSuccessConfirm }: Props) => {
   const queryClient = useQueryClient();
-  const [error, setError] = useState<unknown>(undefined);
   const affectedDagIds = useRef<Set<string>>(new Set());
   const { t: translate } = useTranslation(["common", "dags"]);
 
@@ -67,36 +50,41 @@ export const useBulkDeleteDagRuns = ({ clearSelections, onSuccessConfirm }: Prop
       ),
     ]);
 
-    if (responseData.delete) {
-      handleActionResult(responseData.delete, setError, (count, keys) => {
-        toaster.create({
-          description: translate("toaster.bulkDelete.success.description", {
-            count,
-            keys: keys.join(", "),
-            resourceName: translate("dagRun_other"),
-          }),
-          title: translate("toaster.bulkDelete.success.title", {
-            resourceName: translate("dagRun_other"),
-          }),
-          type: "success",
-        });
-        clearSelections();
-        onSuccessConfirm();
+    const deleteResult = responseData.delete;
+
+    if (!deleteResult) {
+      return;
+    }
+
+    const successKeys = deleteResult.success ?? [];
+    const actionErrors = deleteResult.errors ?? [];
+
+    if (successKeys.length > 0) {
+      toaster.create({
+        description: translate("toaster.bulkDelete.success.description", {
+          count: successKeys.length,
+          keys: successKeys.join(", "),
+          resourceName: translate("dagRun_other"),
+        }),
+        title: translate("toaster.bulkDelete.success.title", {
+          resourceName: translate("dagRun_other"),
+        }),
+        type: "success",
       });
+      deselectKeys(successKeys);
     }
-  };
 
-  const onError = (_error: unknown) => {
-    setError(_error);
+    // Per-entity failures (status 200 with items in ``errors``) keep the dialog open
+    // so the user can see what failed; the consumer renders ``data.delete.errors``.
+    if (actionErrors.length === 0) {
+      onSuccessConfirm();
+    }
   };
 
-  const { isPending, mutate } = useDagRunServiceBulkDagRuns({
-    onError,
-    onSuccess,
-  });
+  const { data, error, isPending, mutate, reset } = useDagRunServiceBulkDagRuns({ onSuccess });
 
   const bulkAction = (requestBody: BulkBody_BulkDAGRunBody_) => {
-    setError(undefined);
+    reset();
     const dagIds = new Set<string>();
 
     for (const action of requestBody.actions) {
@@ -110,5 +98,5 @@ export const useBulkDeleteDagRuns = ({ clearSelections, onSuccessConfirm }: Prop
     mutate({ dagId: "~", requestBody });
   };
 
-  return { bulkAction, error, isPending, setError };
+  return { bulkAction, data, error, isPending, reset };
 };