fix: Fix api_key missing error when adding a flow in ComposIO + tests (#3432)

* 🐛 (ComposioAPI.py): Fix issue where build_config was not being updated correctly when api_key is not empty

* 🐛 (GenericNode/index.tsx): Fix potential null pointer exception by adding non-null assertion operator to info property access
✨ (generalBugs-shard-11.spec.ts): Add end-to-end tests to ensure users can use ComposIO without api_key error and connect tools successfully

src/backend/base/langflow/components/toolkits/ComposioAPI.py

@@ -147,11 +147,13 @@ class ComposioAPIComponent(LCToolComponent):
 
     def update_build_config(self, build_config: dict, field_value: Any, field_name: str | None = None) -> dict:
         if field_name == "api_key":
-            build_config = self._update_app_names_with_connected_status(build_config)
+            if hasattr(self, "api_key") and self.api_key != "":
+                build_config = self._update_app_names_with_connected_status(build_config)
             return build_config
 
         if field_name in {"app_names", "auth_status_config"}:
-            build_config["auth_status_config"]["value"] = self._check_for_authorization(self._get_normalized_app_name())
+            if hasattr(self, "api_key") and self.api_key != "":
+                build_config = self._update_app_names_with_connected_status(build_config)
 
             all_action_names = [action_name for action_name in Action.__annotations__]
             app_action_names = [

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

@@ -263,7 +263,7 @@ export default function GenericNode({
               types,
             )}
             title={getFieldTitle(data.node?.template!, templateField)}
-            info={data.node?.template[templateField].info}
+            info={data.node?.template[templateField].info!}
             name={templateField}
             tooltipTitle={
               data.node?.template[templateField].input_types?.join("\n") ??

src/frontend/tests/scheduled-end-to-end/generalBugs-shard-11.spec.ts

@@ -0,0 +1,127 @@
+import { expect, test } from "@playwright/test";
+
+test("user should be able to use ComposIO without getting api_key error", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page.getByTestId("modal-title");
+    modalCount = await modalTitleElement.count();
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title").count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("composio");
+
+  await page.waitForTimeout(1000);
+
+  const modelElement = await page.getByTestId("toolkitsComposio Tools");
+  const targetElement = await page.locator('//*[@id="react-flow-id"]');
+  await modelElement.dragTo(targetElement);
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.waitForTimeout(1000);
+
+  expect(await page.getByText("api_key").isVisible()).toBe(false);
+});
+
+test("user should be able to use connect tools", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page.getByTestId("modal-title");
+    modalCount = await modalTitleElement.count();
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title").count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("search api");
+
+  await page.waitForTimeout(1000);
+
+  let modelElement = await page.getByTestId("toolsSearch API");
+  let targetElement = await page.locator('//*[@id="react-flow-id"]');
+  await modelElement.dragTo(targetElement);
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("tool calling agent");
+
+  await page.waitForTimeout(1000);
+
+  modelElement = await page.getByTestId("agentsTool Calling Agent");
+  targetElement = await page.locator('//*[@id="react-flow-id"]');
+  await modelElement.dragTo(targetElement);
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  //connection
+  const searchApiOutput = await page
+    .getByTestId("handle-searchapi-shownode-tool-right")
+    .nth(0);
+  await searchApiOutput.hover();
+  await page.mouse.down();
+  const toolCallingAgentInput = await page
+    .getByTestId("handle-toolcallingagent-shownode-tools-left")
+    .nth(0);
+  await toolCallingAgentInput.hover();
+  await page.mouse.up();
+
+  await page.waitForTimeout(1000);
+
+  expect(await page.locator(".react-flow__edge-interaction").count()).toBe(1);
+});