fix: make tools be selected on mcp server after opening for the first time (#9377)

* Add on grid ready handler to select required nodes after opening

* [autofix.ci] apply automated fixes

* Updated mcp server tab test to test if state is maintained after refresh

* [autofix.ci] apply automated fixes

---------

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

src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx

@@ -57,11 +57,13 @@ export default function ToolsTable({
     setSelectedRows(filter);
   }, [rows, open]);
 
-  useEffect(() => {
+  const applyInitialSelection = () => {
+    if (!agGrid.current?.api) return;
+
     const initialData = cloneDeep(rows);
     const filter = initialData.filter((row) => row.status === true);
-    if (agGrid.current) {
+
-      agGrid.current?.api?.forEachNode((node) => {
+    agGrid.current.api.forEachNode((node) => {
       if (
         filter.some(
           (row) =>
@@ -74,8 +76,12 @@ export default function ToolsTable({
         node.setSelected(false);
       }
     });
-    }
+  };
-  }, [agGrid.current]);
+
+  // Apply initial selection when data changes and grid is ready
+  useEffect(() => {
+    applyInitialSelection();
+  }, [rows, data]);
 
   useEffect(() => {
     if (!open) {
@@ -251,6 +257,11 @@ export default function ToolsTable({
     setSidebarOpen(true);
   };
 
+  const handleGridReady = () => {
+    // Apply initial selection when grid is ready
+    applyInitialSelection();
+  };
+
   const rowName = useMemo(() => {
     return parseString(focusedRow?.display_name || focusedRow?.name || "", [
       "space_case",
@@ -284,6 +295,7 @@ export default function ToolsTable({
             tableOptions={tableOptions}
             onRowClicked={handleRowClicked}
             getRowId={getRowId}
+            onGridReady={handleGridReady}
           />
         </div>
       </main>

src/frontend/tests/extended/features/mcp-server-tab.spec.ts

@@ -85,12 +85,37 @@ test(
           await page.waitForTimeout(1000);
         }
 
+        // Verify if the state is maintained
+
+        await page.locator('input[data-ref="eInput"]').first().click();
+
+        await page.waitForTimeout(1000);
+
+        await page.reload();
+
+        // Navigate to MCP server tab
+        await page.getByTestId("mcp-btn").click({ timeout: 10000 });
+
+        // Verify MCP server tab is visible
+        await expect(page.getByTestId("mcp-server-title")).toBeVisible();
+        await expect(page.getByText("Flows/Tools")).toBeVisible();
+
+        // Click on Edit Tools button
+        await page.getByTestId("button_open_actions").click();
+        await page.waitForTimeout(500);
+
+        // Verify actions modal is open
+        await expect(page.getByText("MCP Server Tools")).toBeVisible();
+
         const isCheckedAgainAgain = await page
           .locator('input[data-ref="eInput"]')
           .first()
           .isChecked();
 
-        expect(isCheckedAgainAgain).toBeFalsy();
+        expect(isCheckedAgainAgain).toBeTruthy();
+
+        await page.locator('input[data-ref="eInput"]').first().click();
+        await page.waitForTimeout(1000);
 
         // Select first action
         let element = page.locator('input[data-ref="eInput"]').last();