From d03a7fd5a3aebf09fc7b3e1b107b619ab3ece3b2 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 3 Jul 2024 17:55:42 -0300
Subject: [PATCH] feat: show why group button is disabled (#2507)

* Refactor: Show why group button is disabled

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
---
 .../SelectionMenuComponent/index.tsx          | 60 +++++++++++++------
 src/frontend/src/utils/reactflowUtils.ts      |  8 +--
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
index 912a03e18..8bf20a376 100644
--- a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NodeToolbar } from "reactflow";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
 import { GradientGroup } from "../../../../icons/GradientSparkles";
 import useFlowStore from "../../../../stores/flowStore";
@@ -18,6 +19,7 @@ export default function SelectionMenu({
       ? validateSelection(lastSelection!, edges).length > 0
       : false,
   );
+  const [errors, setErrors] = useState<string[]>([]);
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [lastNodes, setLastNodes] = useState(nodes);
@@ -26,6 +28,7 @@ export default function SelectionMenu({
 
   useEffect(() => {
     if (isOpen) {
+      setErrors(validateSelection(lastSelection!, edges));
       return setDisable(validateSelection(lastSelection!, edges).length > 0);
     }
     setDisable(false);
@@ -66,24 +69,47 @@ export default function SelectionMenu({
             (isTransitioning ? " opacity-100" : " opacity-0")
           }
         >
-          <Button
-            unstyled
-            className={`${
-              disable
-                ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
-                : "flex h-full w-full items-center justify-between text-sm"
-            }`}
-            onClick={onClick}
-            disabled={disable}
-          >
-            <GradientGroup
-              strokeWidth={1.5}
-              size={22}
-              className="text-primary"
+          {errors.length > 0 ? (
+            <ShadTooltip content={errors[0]} side={"top"}>
+              <Button
+                unstyled
+                className={`${
+                  disable
+                    ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
+                    : "flex h-full w-full items-center justify-between text-sm"
+                }`}
+                onClick={onClick}
+                disabled={disable}
+              >
+                <GradientGroup
+                  strokeWidth={1.5}
+                  size={22}
+                  className="text-primary"
+                  disabled={disable}
+                />
+                Group
+              </Button>
+            </ShadTooltip>
+          ) : (
+            <Button
+              unstyled
+              className={`${
+                disable
+                  ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
+                  : "flex h-full w-full items-center justify-between text-sm"
+              }`}
+              onClick={onClick}
               disabled={disable}
-            />
-            Group
-          </Button>
+            >
+              <GradientGroup
+                strokeWidth={1.5}
+                size={22}
+                className="text-primary"
+                disabled={disable}
+              />
+              Group
+            </Button>
+          )}
         </div>
       </div>
     </NodeToolbar>
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 2f3ef9b2f..c3b376a5d 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -857,9 +857,7 @@ export function validateSelection(
         isOutputNode(node.data as NodeDataType),
     )
   ) {
-    errorsArray.push(
-      "Please select only nodes that are not input or output nodes",
-    );
+    errorsArray.push("Select non-input/output nodes only");
   }
   //check if there are two or more nodes with free outputs
   if (
@@ -867,7 +865,7 @@ export function validateSelection(
       (n) => !clonedSelection.edges.some((e) => e.source === n.id),
     ).length > 1
   ) {
-    errorsArray.push("Please select only one node with free outputs");
+    errorsArray.push("Select only one node with free outputs");
   }
 
   // check if there is any node that does not have any connection
@@ -878,7 +876,7 @@ export function validateSelection(
         !clonedSelection.edges.some((edge) => edge.source === node.id),
     )
   ) {
-    errorsArray.push("Please select only nodes that are connected");
+    errorsArray.push("Select only connected nodes");
   }
   return errorsArray;
 }