refactor: prevent tool mode on group component (#5522)

* Refactor nodeToolbarComponent to conditionally show tool mode button based on isGroup variable

* add toolModeGroup.spec.ts test

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/package-lock.json

@@ -836,7 +836,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

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

@@ -128,17 +128,17 @@ const NodeToolbarComponent = memo(
       () => Object.keys(data.node!.template).includes("code"),
       [data.node],
     );
-    // Check if any of the data.node.template fields have tool_mode as True
-    // if so we can show the tool mode button
-    const hasToolMode = useMemo(
-      () => checkHasToolMode(data.node?.template ?? {}),
-      [data.node?.template],
-    );
     const isGroup = useMemo(
       () => (data.node?.flow ? true : false),
       [data.node],
     );
 
+    // Check if any of the data.node.template fields have tool_mode as True
+    // if so we can show the tool mode button
+    const hasToolMode = useMemo(
+      () => checkHasToolMode(data.node?.template ?? {}) && !isGroup,
+      [data.node?.template, isGroup],
+    );
     const addFlow = useAddFlow();
 
     const { mutate: patchUpdateFlow } = usePatchUpdateFlow();

src/frontend/tests/core/features/toolModeGroup.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test.describe("group node test", () => {
+  /// <reference lib="dom"/>
+  test(
+    "group and ungroup updating values",
+    { tag: ["@release", "@workspace"] },
+    async ({ page }) => {
+      await awaitBootstrapTest(page);
+
+      await page.getByTestId("side_nav_options_all-templates").click();
+      await page
+        .getByRole("heading", { name: "Basic Prompting" })
+        .first()
+        .click();
+      await page.getByTestId("fit_view").first().click();
+
+      await page
+        .getByTestId("title-OpenAI")
+        .click({ modifiers: ["ControlOrMeta"] });
+      await page
+        .getByTestId("title-Prompt")
+        .click({ modifiers: ["ControlOrMeta"] });
+
+      await page.getByRole("button", { name: "Group" }).click();
+      await page.getByTestId("title-Group").click();
+      await expect(page.getByTestId("tool-mode-button")).toBeHidden();
+    },
+  );
+});