[airflow] 14/37: Improve task group UI in new graph (#30918)

[ephraimanierobi]

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

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

commit 15259fdf0e27cc4c051ed6e0f355589686889b91
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Apr 27 16:40:31 2023 -0400

    Improve task group UI in new graph (#30918)
    
    * Improve task group UI in new graph
    
    * adjust task group color
    
    (cherry picked from commit de0cdd77c4d25efd75be02dce50fd5e202fc8a23)
---
 airflow/www/static/js/dag/details/graph/Node.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/airflow/www/static/js/dag/details/graph/Node.tsx 
b/airflow/www/static/js/dag/details/graph/Node.tsx
index 6109c8e56b..8d160b0417 100644
--- a/airflow/www/static/js/dag/details/graph/Node.tsx
+++ b/airflow/www/static/js/dag/details/graph/Node.tsx
@@ -74,6 +74,8 @@ export const BaseNode = ({
     ? `${label} [${instance ? totalTasks : " "}]`
     : label;
 
+  const bg = isOpen ? "blackAlpha.50" : "white";
+
   return (
     <Tooltip
       label={
@@ -90,7 +92,7 @@ export const BaseNode = ({
         borderRadius={5}
         borderWidth={1}
         borderColor={isSelected ? "blue.400" : "gray.400"}
-        bg={isSelected ? "blue.50" : "white"}
+        bg={isSelected ? "blue.50" : bg}
         height={`${height}px`}
         width={`${width}px`}
         cursor={latestDagRunId ? "cursor" : "default"}
@@ -134,6 +136,9 @@ export const BaseNode = ({
             <Text
               color="blue.600"
               cursor="pointer"
+              // Increase the target area to expand/collapse a group
+              p={3}
+              m={-3}
               onClick={(e) => {
                 e.stopPropagation();
                 onToggleCollapse();