(airflow) branch v3-1-test updated: [v3-1-test] Dag task named 'root' causes blue screen on hover (#56902) (#56926)

[eladkal]

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

eladkal pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-1-test by this push:
     new 182512f8359 [v3-1-test] Dag task named 'root' causes blue screen on 
hover (#56902) (#56926)
182512f8359 is described below

commit 182512f8359acf1727cb817cb34fc9a43b4c77ca
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Tue Oct 21 10:05:53 2025 +0300

    [v3-1-test] Dag task named 'root' causes blue screen on hover (#56902) 
(#56926)
    
    * +taskname div: added 'task' prefix to id
    +gridTI div: added 'task' prefix to id
    
    * +taskname div: added 'task' prefix to id
    +gridTI div: added 'task' prefix to id
    (cherry picked from commit a2455c0ceda75e0684ff185a083d4a32db32e099)
    
    Co-authored-by: Tomi <74303735+tomi-1...@users.noreply.github.com>
---
 airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx    | 4 ++--
 airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
index 645728236df..fe411e15283 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
@@ -41,7 +41,7 @@ const handleMouseEnter =
   };
 
 const handleMouseLeave = (taskId: string, setHoveredTaskId: 
HoverContextType["setHoveredTaskId"]) => () => {
-  const tasks = 
document.querySelectorAll<HTMLDivElement>(`#${taskId.replaceAll(".", "-")}`);
+  const tasks = 
document.querySelectorAll<HTMLDivElement>(`#task-${taskId.replaceAll(".", 
"-")}`);
 
   tasks.forEach((task) => {
     task.style.backgroundColor = "";
@@ -89,7 +89,7 @@ const Instance = ({ dagId, instance, isGroup, isMapped, 
onClick, runId, search,
       alignItems="center"
       bg={selectedTaskId === taskId || selectedGroupId === taskId ? 
"info.muted" : undefined}
       height="20px"
-      id={taskId.replaceAll(".", "-")}
+      id={`task-${taskId.replaceAll(".", "-")}`}
       justifyContent="center"
       key={taskId}
       onMouseEnter={onMouseEnter}
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
index c807458c771..f490554a5dd 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
@@ -51,7 +51,7 @@ const onMouseEnter = (
 };
 
 const onMouseLeave = (nodeId: string, setHoveredTaskId: 
HoverContextType["setHoveredTaskId"]) => {
-  const tasks = 
document.querySelectorAll<HTMLDivElement>(`#${nodeId.replaceAll(".", "-")}`);
+  const tasks = 
document.querySelectorAll<HTMLDivElement>(`#task-${nodeId.replaceAll(".", 
"-")}`);
 
   tasks.forEach((task) => {
     task.style.backgroundColor = "";
@@ -74,7 +74,7 @@ export const TaskNames = ({ nodes, onRowClick }: Props) => {
       borderColor={node.isGroup ? "border.emphasized" : "border"}
       borderTopWidth={index === 0 ? 1 : 0}
       cursor="pointer"
-      id={node.id.replaceAll(".", "-")}
+      id={`task-${node.id.replaceAll(".", "-")}`}
       key={node.id}
       maxHeight="20px"
       onMouseEnter={(event) => onMouseEnter(event, node.id, setHoveredTaskId)}