(airflow) 02/05: Fix grid header rendering (#38720)

[ephraimanierobi]

This is an automated email from the ASF dual-hosted git repository.

ephraimanierobi pushed a commit to branch v2-9-test
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit 0518ebab6891efee39dae4b89e4a70e0c7345c1b
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Apr 4 04:39:33 2024 -0400

    Fix grid header rendering (#38720)
    
    (cherry picked from commit 5337066492b468ea0b1a89e56dd5a95b3201d0e4)
---
 airflow/www/static/js/dag/details/Header.tsx | 30 +++++++++-------------------
 airflow/www/static/js/dag/details/index.tsx  |  6 +++++-
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/airflow/www/static/js/dag/details/Header.tsx 
b/airflow/www/static/js/dag/details/Header.tsx
index 57e0afa1b0..e1222270d4 100644
--- a/airflow/www/static/js/dag/details/Header.tsx
+++ b/airflow/www/static/js/dag/details/Header.tsx
@@ -28,33 +28,28 @@ import {
 import { getDagRunLabel, getMetaValue, getTask } from "src/utils";
 import useSelection from "src/dag/useSelection";
 import Time from "src/components/Time";
-import { useGridData, useTaskInstance } from "src/api";
+import { useGridData } from "src/api";
 import RunTypeIcon from "src/components/RunTypeIcon";
 
 import BreadcrumbText from "./BreadcrumbText";
 
-const dagId = getMetaValue("dag_id");
 const dagDisplayName = getMetaValue("dag_display_name");
 
-const Header = () => {
+interface Props {
+  mapIndex?: string | number | null;
+}
+
+const Header = ({ mapIndex }: Props) => {
   const {
     data: { dagRuns, groups, ordering },
   } = useGridData();
 
   const {
-    selected: { taskId, runId, mapIndex },
+    selected: { taskId, runId },
     onSelect,
     clearSelection,
   } = useSelection();
 
-  const { data: taskInstance } = useTaskInstance({
-    dagId,
-    dagRunId: runId || "",
-    taskId: taskId || "",
-    mapIndex,
-    enabled: mapIndex !== undefined,
-  });
-
   const dagRun = dagRuns.find((r) => r.runId === runId);
 
   const group = getTask({ taskId, task: groups });
@@ -88,11 +83,7 @@ const Header = () => {
     );
   }
 
-  const lastIndex = taskId ? taskId.lastIndexOf(".") : null;
-  const taskName =
-    taskInstance?.taskDisplayName && lastIndex
-      ? taskInstance?.taskDisplayName.substring(lastIndex + 1)
-      : taskId;
+  const taskName = group?.label || group?.id || "";
 
   const isDagDetails = !runId && !taskId;
   const isRunDetails = !!(runId && !taskId);
@@ -141,10 +132,7 @@ const Header = () => {
           <BreadcrumbLink
             _hover={isMappedTaskDetails ? { cursor: "default" } : undefined}
           >
-            <BreadcrumbText
-              label="Map Index"
-              value={taskInstance?.renderedMapIndex || mapIndex}
-            />
+            <BreadcrumbText label="Map Index" value={mapIndex} />
           </BreadcrumbLink>
         </BreadcrumbItem>
       )}
diff --git a/airflow/www/static/js/dag/details/index.tsx 
b/airflow/www/static/js/dag/details/index.tsx
index 3e8b244c24..96c9a7c100 100644
--- a/airflow/www/static/js/dag/details/index.tsx
+++ b/airflow/www/static/js/dag/details/index.tsx
@@ -247,7 +247,11 @@ const Details = ({
         flexWrap="wrap"
         ml={6}
       >
-        <Header />
+        <Header
+          mapIndex={
+            mappedTaskInstance?.renderedMapIndex || 
mappedTaskInstance?.mapIndex
+          }
+        />
         <Flex flexWrap="wrap">
           {runId && !taskId && (
             <>