Improve task & run actions ux in grid view (#30373)

* update run clear+mark, update task clear

* add mark as tasks and include list of affected tasks

* Add support for mapped tasks, add shared modal component

* Clean up styling, restore warning for past/future tg clear

(cherry picked from commit c5b685e)

airflow/www/static/js/api/index.ts

@@ -28,7 +28,7 @@ import useClearTask from "./useClearTask";
 import useMarkFailedTask from "./useMarkFailedTask";
 import useMarkSuccessTask from "./useMarkSuccessTask";
 import useExtraLinks from "./useExtraLinks";
-import useConfirmMarkTask from "./useConfirmMarkTask";
+import useMarkTaskDryRun from "./useMarkTaskDryRun";
 import useGraphData from "./useGraphData";
 import useGridData from "./useGridData";
 import useMappedInstances from "./useMappedInstances";
@@ -50,7 +50,7 @@ axios.defaults.headers.common.Accept = "application/json";
 export {
   useClearRun,
   useClearTask,
-  useConfirmMarkTask,
+  useMarkTaskDryRun,
   useDataset,
   useDatasetDependencies,
   useDatasetEvents,

airflow/www/static/js/api/useClearTask.ts

@@ -63,7 +63,7 @@ export default function useClearTask({
       recursive: boolean;
       failed: boolean;
       confirmed: boolean;
-      mapIndexes: number[];
+      mapIndexes?: number[];
     }) => {
       const params = new URLSearchParamsWrapper({
         csrf_token: csrfToken,
@@ -105,10 +105,13 @@ export default function useClearTask({
             runId,
             taskId,
           ]);
+          queryClient.invalidateQueries(["clearTask", dagId, runId, taskId]);
           startRefresh();
         }
       },
-      onError: (error: Error) => errorToast({ error }),
+      onError: (error: Error, { confirmed }) => {
+        if (confirmed) errorToast({ error });
+      },
     }
   );
 }

airflow/www/static/js/api/useClearTaskDryRun.ts

@@ -0,0 +1,102 @@
+/*!
+ * 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 axios, { AxiosResponse } from "axios";
+import { useQuery } from "react-query";
+import URLSearchParamsWrapper from "src/utils/URLSearchParamWrapper";
+import { getMetaValue } from "../utils";
+
+const csrfToken = getMetaValue("csrf_token");
+const clearUrl = getMetaValue("clear_url");
+
+const useClearTaskDryRun = ({
+  dagId,
+  runId,
+  taskId,
+  executionDate,
+  isGroup,
+  past,
+  future,
+  upstream,
+  downstream,
+  recursive,
+  failed,
+  mapIndexes = [],
+}: {
+  dagId: string;
+  runId: string;
+  taskId: string;
+  executionDate: string;
+  isGroup: boolean;
+  past: boolean;
+  future: boolean;
+  upstream: boolean;
+  downstream: boolean;
+  recursive: boolean;
+  failed: boolean;
+  mapIndexes?: number[];
+}) =>
+  useQuery(
+    [
+      "clearTask",
+      dagId,
+      runId,
+      taskId,
+      mapIndexes,
+      past,
+      future,
+      upstream,
+      downstream,
+      recursive,
+      failed,
+    ],
+    () => {
+      const params = new URLSearchParamsWrapper({
+        csrf_token: csrfToken,
+        dag_id: dagId,
+        dag_run_id: runId,
+        confirmed: false,
+        execution_date: executionDate,
+        past,
+        future,
+        upstream,
+        downstream,
+        recursive,
+        only_failed: failed,
+      });
+
+      if (isGroup) {
+        params.append("group_id", taskId);
+      } else {
+        params.append("task_id", taskId);
+      }
+
+      mapIndexes.forEach((mi: number) => {
+        params.append("map_index", mi.toString());
+      });
+
+      return axios.post<AxiosResponse, string[]>(clearUrl, params.toString(), {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+    }
+  );
+
+export default useClearTaskDryRun;

airflow/www/static/js/api/useMarkFailedTask.ts

@@ -52,7 +52,7 @@ export default function useMarkFailedTask({
       future: boolean;
       upstream: boolean;
       downstream: boolean;
-      mapIndexes: number[];
+      mapIndexes?: number[];
     }) => {
       const params = new URLSearchParamsWrapper({
         csrf_token: csrfToken,
@@ -85,6 +85,12 @@ export default function useMarkFailedTask({
           runId,
           taskId,
         ]);
+        queryClient.invalidateQueries([
+          "confirmStateChange",
+          dagId,
+          runId,
+          taskId,
+        ]);
         startRefresh();
       },
       onError: (error: Error) => errorToast({ error }),

airflow/www/static/js/api/useMarkSuccessTask.ts

@@ -52,7 +52,7 @@ export default function useMarkSuccessTask({
       future: boolean;
       upstream: boolean;
       downstream: boolean;
-      mapIndexes: number[];
+      mapIndexes?: number[];
     }) => {
       const params = new URLSearchParamsWrapper({
         csrf_token: csrfToken,
@@ -85,6 +85,12 @@ export default function useMarkSuccessTask({
           runId,
           taskId,
         ]);
+        queryClient.invalidateQueries([
+          "confirmStateChange",
+          dagId,
+          runId,
+          taskId,
+        ]);
         startRefresh();
       },
       onError: (error: Error) => errorToast({ error }),

airflow/www/static/js/api/useConfirmMarkTask.ts → airflow/www/static/js/api/useMarkTaskDryRun.ts

@@ -18,41 +18,48 @@
  */
 
 import axios, { AxiosResponse } from "axios";
-import { useMutation } from "react-query";
+import { useQuery } from "react-query";
 import type { TaskState } from "src/types";
 import URLSearchParamsWrapper from "src/utils/URLSearchParamWrapper";
 import { getMetaValue } from "../utils";
-import useErrorToast from "../utils/useErrorToast";
 
 const confirmUrl = getMetaValue("confirm_url");
 
-export default function useConfirmMarkTask({
+const useMarkTaskDryRun = ({
   dagId,
   runId,
   taskId,
   state,
+  past,
+  future,
+  upstream,
+  downstream,
+  mapIndexes = [],
 }: {
   dagId: string;
   runId: string;
   taskId: string;
   state: TaskState;
-}) {
-  const errorToast = useErrorToast();
-  return useMutation(
-    ["confirmStateChange", dagId, runId, taskId, state],
-    ({
+  past: boolean;
+  future: boolean;
+  upstream: boolean;
+  downstream: boolean;
+  mapIndexes?: number[];
+}) =>
+  useQuery(
+    [
+      "confirmStateChange",
+      dagId,
+      runId,
+      taskId,
+      state,
       past,
       future,
       upstream,
       downstream,
-      mapIndexes = [],
-    }: {
-      past: boolean;
-      future: boolean;
-      upstream: boolean;
-      downstream: boolean;
-      mapIndexes: number[];
-    }) => {
+      mapIndexes,
+    ],
+    () => {
       const params = new URLSearchParamsWrapper({
         dag_id: dagId,
         dag_run_id: runId,
@@ -68,9 +75,7 @@ export default function useConfirmMarkTask({
         params.append("map_index", mi.toString());
       });
       return axios.get<AxiosResponse, string[]>(confirmUrl, { params });
-    },
-    {
-      onError: (error: Error) => errorToast({ error }),
     }
   );
-}
+
+export default useMarkTaskDryRun;