fix: node minimize/expand functionality and regression tests (#5579)

* ♻️ (nodeToolbarComponent/index.tsx): refactor handleSelectChange function to improve readability and maintainability by extracting switch cases into separate functions and adding dependencies to useCallback for better performance.

* ✨ (GenericNode/index.tsx): Add data-testid attribute to improve testing capabilities for showing/hiding node content
✨ (general-bugs-minimize-state-error.spec.ts): Add test case to ensure user can minimize and expand a node multiple times without errors

* 📝 (nodeToolbarComponent/index.tsx): Remove unnecessary dataTestId prop from SelectItem component
📝 (types/components/index.ts): Change dataTestId prop in toolbarSelectItemProps to be optional by adding a question mark (?)

* 📝 (general-bugs-minimize-state-error.spec.ts): refactor test case to use a reusable function for toggling node state between minimize and expand actions. This improves code readability and reduces duplication in the test script.

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -412,7 +412,7 @@ function GenericNode({
               {renderNodeIcon()}
               <div className="generic-node-tooltip-div">{renderNodeName()}</div>
             </div>
-            <div>
+            <div data-testid={`${showNode ? "show" : "hide"}-node-content`}>
               {!showNode && (
                 <>
                   {renderInputParameters()}

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

@@ -341,7 +341,8 @@ const NodeToolbarComponent = memo(
 
     const [selectedValue, setSelectedValue] = useState(null);
 
-    const handleSelectChange = useCallback((event) => {
+    const handleSelectChange = useCallback(
+      (event) => {
         setSelectedValue(event);
 
         switch (event) {
@@ -417,7 +418,27 @@ const NodeToolbarComponent = memo(
         }
 
         setSelectedValue(null);
-    }, []);
+      },
+      [
+        saveComponent,
+        freezeFunction,
+        FreezeAllVertices,
+        setOpenModal,
+        setShowModalAdvanced,
+        handleMinimize,
+        shareComponent,
+        downloadNode,
+        addFlow,
+        openDocs,
+        handleungroup,
+        setShowOverrideModal,
+        deleteNode,
+        updateNode,
+        setLastCopiedSelection,
+        paste,
+        handleActivateToolMode,
+      ],
+    );
 
     const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue({
       node: data.node!,
@@ -692,7 +713,6 @@ const NodeToolbarComponent = memo(
                       }
                       value={showNode ? "Minimize" : "Expand"}
                       icon={showNode ? "Minimize2" : "Maximize2"}
-                      dataTestId="minimize-button-modal"
                     />
                   </SelectItem>
                 )}

src/frontend/src/types/components/index.ts

@@ -784,7 +784,7 @@ export type toolbarSelectItemProps = {
   value: string;
   icon: string;
   style?: string;
-  dataTestId: string;
+  dataTestId?: string;
   ping?: boolean;
   shortcut: string;
 };

src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts

@@ -0,0 +1,46 @@
+import { expect, Page, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+async function toggleNodeState(page: Page, action: "minimize" | "expand") {
+  const expectedCount = action === "minimize" ? 0 : 1;
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId(`${action}-button-modal`).click();
+  expect(await page.getByTestId("show-node-content").count()).toBe(
+    expectedCount,
+  );
+}
+
+test(
+  "user must be able to minimize and expand a node how many times as they want",
+  { tag: ["@release", "@components"] },
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+    await page.getByTestId("blank-flow").click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+    await page.getByTestId("sidebar-search-input").click();
+    await page.getByTestId("sidebar-search-input").fill("text output");
+
+    await page
+      .getByTestId("outputsText Output")
+      .hover()
+      .then(async () => {
+        await page.getByTestId("add-component-button-text-output").click();
+      });
+
+    await page.waitForSelector('[data-testid="title-Text Output"]', {
+      timeout: 3000,
+    });
+
+    expect(await page.getByText("Toolset", { exact: true }).count()).toBe(0);
+    await page.getByTestId("title-Text Output").click();
+    expect(await page.getByTestId("show-node-content").count()).toBe(1);
+
+    for (let i = 0; i < 5; i++) {
+      await toggleNodeState(page, "minimize");
+      await toggleNodeState(page, "expand");
+    }
+  },
+);