From a57a49d48d75721807edb83f0fd11f95b7db6b3b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 6 Jan 2025 17:20:37 -0300
Subject: [PATCH] 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                |  1 -
 .../components/nodeToolbarComponent/index.tsx | 12 +++----
 .../tests/core/features/toolModeGroup.spec.ts | 31 +++++++++++++++++++
 3 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/frontend/tests/core/features/toolModeGroup.spec.ts

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index aab53529a..daceb8cd0 100644
--- a/src/frontend/package-lock.json
+++ b/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": {
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 84e5f1d7d..84cbc4298 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/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();
diff --git a/src/frontend/tests/core/features/toolModeGroup.spec.ts b/src/frontend/tests/core/features/toolModeGroup.spec.ts
new file mode 100644
index 000000000..5d71983e9
--- /dev/null
+++ b/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();
+    },
+  );
+});