feat: Composio Gmail component and AuthInput feature (#7364)

* old composio Gmail component

* Update gmail_composio.py

* [autofix.ci] apply automated fixes

* Removed input types from secret input

* Changed starter projects

* Update gmail_composio.py

* composio base

* [autofix.ci] apply automated fixes

* updated composio with multi output

* [autofix.ci] apply automated fixes

* fix lint errors

* [autofix.ci] apply automated fixes

* Added sortableList and connect to frontend types constant

* Added AuthInput to backend and frontend constant

* Added auth input to InputTypes and added show = false by default

* fix: Update Composio icon (#7407)

fix: update Composio icon dimensions and simplify SVG structure

* Fix amber color

* Fix button and voice assistant button to use correct design and colors

* Fixed button design to include bg

* remove bg definition from voice assistant

* Added auth input to composio base

* Added helper text to sortable list

* Add unlink icon

* Add node connection button

* Changed to isPolling

* [autofix.ci] apply automated fixes

* Added auth tooltip

* Added auth tooltip to mixinn

* Add auth mixin to input

* update the field visibility

* Fixed disconnect

* Update composio_base.py

* Updated node status to show correct statuses

* Added handling for API errors and disconnections

* limit to dataframe output

* add basic tests for base and gmail component

* fix lint errors

* 📝 (test files): Remove unnecessary blank lines to improve code readability and consistency.

* Add result_field to GMAIL_FETCH_EMAILS action and change how result key is used

* fix: Add validation for result structure in ComposioGmailAPIComponent

* fix: Ensure result is a list of dicts before converting to DataFrame in ComposioBaseComponent

* feat: Introduce get_result_field option for Gmail actions to control result retrieval behavior

* Fixed status not updating in real time

* Added default API value to Composio

* Made sortableList only be openable if no helper text is present

* fix: Update validation logic in ComposioGmailAPIComponent to incorporate get_result_field option for improved result handling

* Fixed bug where pre-filled Global Variable didn't trigger login

* refactor: Remove commented-out output definitions in ComposioBaseComponent for cleaner code

* refactor: Clean up ComposioGmailAPIComponent by removing outdated comments for improved readability

* ✨ (NodeStatus/index.tsx): refactor getConnectionButtonClasses and getConnectionIconClasses functions to improve code readability and maintainability

* ♻️ (NodeStatus/index.tsx): refactor getConnectionButtonClasses and getConnectionIconClasses functions to use arrow function syntax for better readability and maintainability

* 🔧 (NodeStatus/index.tsx): define constants POLLING_TIMEOUT and POLLING_INTERVAL for better readability and maintainability

* ✨ (ListSelectionComponent): Add dataTestId prop to ListItem component for better testing
📝 (NodeStatus): Refactor data-testid value to be dynamically generated based on node status
📝 (searchBarComponent): Add data-testid attribute to search input for testing purposes
📝 (sortableListComponent): Add data-testid attribute to button for opening list selection
♻️ (utils.ts): Add testIdCase function to convert string to snake_case for test ids
📝 (composio.spec.ts): Add various test cases for interacting with composio component

* ✨ (test_gmail.py): add MagicMock import to fix missing dependency for testing
🔧 (test_gmail.py): refactor execute_action method to return a structure compatible with component's logic
♻️ (test_gmail.py): refactor _build_wrapper method to return a mock for the toolset
✨ (test_gmail.py): add patching for _actions_data to ensure correct structure for GMAIL_FETCH_EMAILS
🔧 (test_gmail.py): refactor execute_action method to return mock data for testing as_dataframe method
🔧 (test_gmail.py): refactor as_dataframe method to handle mock email data and verify DataFrame content
🔧 (test_gmail.py): refactor execute_action method to return mock data for testing update_build_config method
🔧 (secretKeyModal/index.tsx): remove unused imports and clean up the file structure

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Co-authored-by: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

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

@@ -0,0 +1,65 @@
+import { expect, test } from "@playwright/test";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { removeOldApiKeys } from "../../utils/remove-old-api-keys";
+
+test(
+  "user should be able to interact with composio component",
+  { tag: ["@release", "@workspace", "@api"] },
+  async ({ page, context }) => {
+    test.skip(
+      !process?.env?.COMPOSIO_API_KEY,
+      "COMPOSIO_API_KEY required to run this test",
+    );
+
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 5000,
+    });
+
+    await page.getByTestId("blank-flow").click();
+    await page.waitForSelector('[data-testid="sidebar-search-input"]', {
+      timeout: 5000,
+    });
+
+    await page.getByTestId("sidebar-search-input").click();
+    await page.getByTestId("sidebar-search-input").fill("gmail");
+
+    await page
+      .getByTestId("composioGmail")
+      .hover()
+      .then(async (): Promise<void> => {
+        await page.getByTestId("add-component-button-gmail").click();
+      });
+
+    await removeOldApiKeys(page);
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .fill(process.env.COMPOSIO_API_KEY!);
+
+    await page.waitForSelector('[data-testid="button_connected_gmail"]', {
+      timeout: 20000,
+    });
+
+    await page.getByTestId("button_open_list_selection").click();
+
+    await page.getByTestId("search_bar_input").fill("fetch emails");
+
+    await page.getByTestId(`list_item_fetch_emails`).click();
+
+    await page.getByTestId("int_int_max_results").fill("10");
+
+    await page.getByTestId("button_run_gmail").click();
+
+    await page.waitForSelector("text=built successfully", {
+      timeout: 30000,
+    });
+
+    await page.getByTestId("output-inspection-dataframe-gmailapi").click();
+
+    const colNumber: number = await page.getByRole("gridcell").count();
+    expect(colNumber).toBeGreaterThan(9);
+  },
+);