From f82665949bfee9568b8e66b7bbaf24440fa43408 Mon Sep 17 00:00:00 2001
From: jonhspyro <121674572+jonhspyro@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:36:27 +0100
Subject: [PATCH] Correctly select task in DAG Graph View when clicking on its
 name (#38782)

* Fix in DAG Graph View, clicking Task on it's name doesn't select the task. (#37932)

* Updated TaskName onClick

* Fixed missing onToggleCollapse

* Added missing changes

* Updated: rebase

* fixed providers error message

* undo fab changes

* Update user_command.py

---------

Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---
 .../static/js/dag/details/graph/DagNode.test.tsx   | 14 +++++++++++++-
 .../www/static/js/dag/details/graph/DagNode.tsx    |  8 +++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/airflow/www/static/js/dag/details/graph/DagNode.test.tsx b/airflow/www/static/js/dag/details/graph/DagNode.test.tsx
index 34ddac7506c71..7c6dea7584a0b 100644
--- a/airflow/www/static/js/dag/details/graph/DagNode.test.tsx
+++ b/airflow/www/static/js/dag/details/graph/DagNode.test.tsx
@@ -20,7 +20,7 @@
 /* global describe, test, expect */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Wrapper } from "src/utils/testUtils";
 
@@ -124,4 +124,16 @@ describe("Test Graph Node", () => {
 
     expect(getByTestId("node")).toHaveStyle("opacity: 0.3");
   });
+
+  test("Clicks on taskName", async () => {
+    const { getByText } = render(<DagNode {...mockNode} />, {
+      wrapper: Wrapper,
+    });
+
+    const taskName = getByText("task_id");
+
+    fireEvent.click(taskName);
+
+    expect(taskName).toBeInTheDocument();
+  });
 });
diff --git a/airflow/www/static/js/dag/details/graph/DagNode.tsx b/airflow/www/static/js/dag/details/graph/DagNode.tsx
index c2f9b01296c35..4ac1be8ef4ade 100644
--- a/airflow/www/static/js/dag/details/graph/DagNode.tsx
+++ b/airflow/www/static/js/dag/details/graph/DagNode.tsx
@@ -42,10 +42,10 @@ const DagNode = ({
     task,
     isSelected,
     latestDagRunId,
-    onToggleCollapse,
     isOpen,
     isActive,
     setupTeardownType,
+    onToggleCollapse,
     labelStyle,
     style,
     isZoomedOut,
@@ -139,8 +139,10 @@ const DagNode = ({
           isOpen={isOpen}
           isGroup={!!childCount}
           onClick={(e) => {
-            e.stopPropagation();
-            onToggleCollapse();
+            if (childCount) {
+              e.stopPropagation();
+              onToggleCollapse();
+            }
           }}
           setupTeardownType={setupTeardownType}
           isZoomedOut={isZoomedOut}