Refactor: Disable group button when its not possible to group (#1878)

src/frontend/src/icons/GradientSparkles/index.tsx

@@ -56,7 +56,11 @@ export const GradientGroup = (props) => {
           </linearGradient>
         </defs>
       </svg>
-      <ForwardedIconComponent name="Combine" stroke="url(#grad3)" {...props} />
+      <ForwardedIconComponent
+        name="Combine"
+        stroke={`${props.disabled ? "#64748B" : "url(#grad3)"}`}
+        {...props}
+      />
     </>
   );
 };

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -483,6 +483,7 @@ export default function Page({
               ></Controls>
             )}
             <SelectionMenu
+              lastSelection={lastSelection}
               isVisible={selectionMenuVisible}
               nodes={lastSelection?.nodes}
               onClick={() => {

src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx

@@ -1,11 +1,31 @@
 import { useEffect, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import { GradientGroup } from "../../../../icons/GradientSparkles";
-export default function SelectionMenu({ onClick, nodes, isVisible }) {
+import { validateSelection } from "../../../../utils/reactflowUtils";
+import useFlowStore from "../../../../stores/flowStore";
+export default function SelectionMenu({
+  onClick,
+  nodes,
+  isVisible,
+  lastSelection,
+}) {
+  const edges = useFlowStore((state) => state.edges);
+  const [disable, setDisable] = useState<boolean>(
+    lastSelection && edges.length > 0
+      ? validateSelection(lastSelection!, edges).length > 0
+      : false,
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [lastNodes, setLastNodes] = useState(nodes);
 
+  useEffect(() => {
+    if (isOpen) {
+      return setDisable(validateSelection(lastSelection!, edges).length > 0);
+    }
+    setDisable(false);
+  }, [isOpen, setIsOpen]);
+
   // nodes get saved to not be gone after the toolbar closes
   useEffect(() => {
     setLastNodes(nodes);
@@ -42,13 +62,15 @@ export default function SelectionMenu({ onClick, nodes, isVisible }) {
           }
         >
           <button
-            className="flex h-full w-full items-center justify-between text-sm hover:text-indigo-500"
+            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 hover:text-indigo-500"}`}
             onClick={onClick}
+            disabled={disable}
           >
             <GradientGroup
               strokeWidth={1.5}
               size={22}
               className="text-primary"
+              disabled={disable}
             />
             Group
           </button>