🐛 (GenericNode/index.tsx): Fix potential null pointer exception by ad…

…ding 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/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);
+});