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>

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
+          {errors.length > 0 ? (
-            unstyled
+            <ShadTooltip content={errors[0]} side={"top"}>
-            className={`${
+              <Button
-              disable
+                unstyled
-                ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
+                className={`${
-                : "flex h-full w-full items-center justify-between text-sm"
+                  disable
-            }`}
+                    ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
-            onClick={onClick}
+                    : "flex h-full w-full items-center justify-between text-sm"
-            disabled={disable}
+                }`}
-          >
+                onClick={onClick}
-            <GradientGroup
+                disabled={disable}
-              strokeWidth={1.5}
+              >
-              size={22}
+                <GradientGroup
-              className="text-primary"
+                  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
+              <GradientGroup
-          </Button>
+                strokeWidth={1.5}
+                size={22}
+                className="text-primary"
+                disabled={disable}
+              />
+              Group
+            </Button>
+          )}
         </div>
       </div>
     </NodeToolbar>

src/frontend/src/utils/reactflowUtils.ts

@@ -857,9 +857,7 @@ export function validateSelection(
         isOutputNode(node.data as NodeDataType),
     )
   ) {
-    errorsArray.push(
+    errorsArray.push("Select non-input/output nodes only");
-      "Please select only nodes that are not input or output nodes",
-    );
   }
   //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;
 }