feat: new tool mode dialog and UI (#7647)

* Add tools input to the backend

* Add tools type

* Add tools component to parameter render

* Added tools to langflow supported types

* Add tools modal

* Instantiate tools component in parameter render

* Removed div when there is not any visible actions

* Added margin

* Add ComboBoxItem and ListItem components for enhanced selection UI

* Update ComboBoxItem to display item description and enhance ToolsModal layout

* Refactor ToolsModal header styling for improved layout and icon padding

* Enhance ComboBoxItem layout and styling; update ToolsModal size and class for better responsiveness

* Changed display name

* Adds truncate for badges

* Adds custom styling for table used for Tools modal

* Added Tools modal with AgGrid

* Changed button

* made name and description editable

* Parse values for saving

* Add focused row without triggering checkbox click

* [autofix.ci] apply automated fixes

* Added types for tools modal

* added toolsTable with sidebar on toolsModal

* Added changes to work with MCP

* update component.py to add display name and display description in tool mode

* removed editing directly

* Fixed editing

* removed to upper case

* Make editing apply filters

* Adds design changes for MCP

* Adds new design and null check

* 📝 (frontend): add data-testid attribute to elements for testing purposes
🔧 (frontend): update data-testid attribute values for consistency and clarity in testing
✅ (frontend): update tests to use correct selectors and improve test coverage for editing tools functionality

* ✅ (edit-tools.spec.ts): update test to use a more reliable method for checking visibility of an element

* ✅ (edit-tools.spec.ts): add "@components" tag to the test to categorize it under components for better organization and filtering in test suites.

* Updated design with new design

* update padding

* send args to tools data

* Implemented showing arguments passed to LLM in tool mode

* add componentg name to description

* update package lock

* fixed tests

* fixed backend test

* fixed backend test

* fixed formatting

* Fixed frontend tests

* updated font sizes for badges on actions and styling on sortable list

* Update tool mode design

* added tooltips for info

* tool name update

* Update component_tool.py

* styling utils

* default values change

* fixed tools test

* fix format issues

---------

Co-authored-by: deon-sanchez <deon.sanchez@datastax.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

src/frontend/tests/extended/features/edit-tools.spec.ts

@@ -35,26 +35,46 @@ test(
 
     await page.getByTestId("tool-mode-button").click();
 
-    await page.locator('[data-testid="icon-Hammer"]').nth(1).waitFor({
+    await page.locator('[data-testid="icon-Hammer"]').nth(0).waitFor({
       timeout: 3000,
       state: "visible",
     });
 
-    await page.getByTestId("icon-Hammer").nth(1).click();
+    await page.waitForSelector("text=actions", { timeout: 30000 });
 
-    await page.waitForSelector("text=edit tools", { timeout: 30000 });
+    await page.getByTestId("button_open_actions").click();
+
+    await page.waitForSelector("text=API Request", { timeout: 30000 });
 
     const rowsCount = await page.getByRole("gridcell").count();
 
     expect(rowsCount).toBeGreaterThan(3);
 
-    expect(await page.getByRole("switch").nth(0).isChecked()).toBe(true);
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(0).isChecked(),
+    ).toBe(true);
 
-    await page.getByRole("switch").nth(0).click();
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(3).isChecked(),
+    ).toBe(true);
 
-    expect(await page.getByRole("switch").nth(0).isChecked()).toBe(false);
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(4).isChecked(),
+    ).toBe(true);
 
-    await page.getByText("Save").last().click();
+    await page.locator('input[data-ref="eInput"]').nth(0).click();
+
+    await page.waitForTimeout(500);
+
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(3).isChecked(),
+    ).toBe(false);
+
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(4).isChecked(),
+    ).toBe(false);
+
+    await page.getByText("Close").last().click();
 
     await page.waitForSelector(
       '[data-testid="generic-node-title-arrangement"]',
@@ -63,14 +83,54 @@ test(
       },
     );
 
-    await page.waitForTimeout(500);
+    await page.waitForSelector('[data-testid="div-tools_tools_metadata"]', {
+      timeout: 3000,
+    });
 
-    await page.getByTestId("icon-Hammer").nth(1).click();
+    expect(
+      await page
+        .locator('[data-testid="div-tools_tools_metadata"]')
+        .isVisible(),
+    ).toBe(true);
 
-    await page.waitForSelector("text=edit tools", { timeout: 30000 });
+    await page.getByTestId("div-tools_tools_metadata").click();
 
     await page.waitForTimeout(500);
 
-    expect(await page.getByRole("switch").nth(0).isChecked()).toBe(false);
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(3).isChecked(),
+    ).toBe(false);
+
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(4).isChecked(),
+    ).toBe(false);
+
+    await page.locator('input[data-ref="eInput"]').nth(3).click();
+
+    await page.waitForTimeout(500);
+
+    expect(
+      await page.locator('input[data-ref="eInput"]').nth(3).isChecked(),
+    ).toBe(true);
+
+    await page.getByRole("gridcell").nth(0).click();
+
+    expect(
+      await page.locator('[data-testid="sidebar_header_name"]').isVisible(),
+    ).toBe(true);
+
+    expect(
+      await page
+        .locator('[data-testid="sidebar_header_description"]')
+        .isVisible(),
+    ).toBe(true);
+
+    await page.waitForTimeout(500);
+
+    await page.getByText("Close").last().click();
+
+    expect(
+      await page.locator('[data-testid="tool_make_requests"]').isVisible(),
+    ).toBe(true);
   },
 );