feat: enhance APIRequestComponent with new output methods (#7148)

* ✨ (Research Translation Loop.spec.ts): Increase timeout value by a factor of 3 for better reliability in waiting for element to appear
✨ (chatInputOutputUser-shard-1.spec.ts): Increase timeout value by a factor of 3 for better reliability in waiting for element to appear

* 🐛 (typescript_test.yml): adjust the maximum shard count to 10 to prevent exceeding the limit and optimize test execution.

* 🐛 (chatInputOutputUser-shard-1.spec.ts): increase timeout for waiting for "built successfully" text to improve test reliability

* ⬆️ (typescript_test.yml): increase maximum shard count to 15 for better test distribution
♻️ (Portfolio Website Code Generator.spec.ts): refactor test assertions to improve readability and maintainability

* 🐛 (typescript_test.yml): adjust the maximum shard count to 10 to prevent exceeding the limit of parallel test executions

* 🔧 (typescript_test.yml): Increase maximum shard count to 15 for better test distribution efficiency
🐛 (chatInputOutputUser-shard-1.spec.ts): Update timeout values for page element waits to prevent premature failures due to timing issues

* templates adjustments

* travel planning fix

* Update Travel Planning Agents.json

* fix templates

* ♻️ (Youtube Analysis.spec.ts): remove unused imports and cleanup code for better readability and maintainability

* json fix

* fix: update simple agent template (#7081)

* Update Simple Agent.json

* Update Simple Agent.json

* feat: update search agent template agent component (#7082)

* update agent component with the latest changes

* Update Search agent.json

* Update Search agent.json

* feat: enhance APIRequestComponent with new output methods

- Refactored output methods to include `as_data` and `as_message` for better data handling.
- Updated existing output method from `make_requests` to `as_data` for consistency.
- Improved metadata handling by merging dictionary results and storing non-dict results as 'data'.
- Added detailed docstrings for new methods to clarify their functionality.

* added the updated test class

* [autofix.ci] apply automated fixes

* 📝 (ContentBlockDisplay.tsx): wrap headerIcon element in a span with data-testid attribute for better accessibility
📝 (DurationDisplay.tsx): add data-testid attribute to the duration display element for testing purposes
📝 (Simple Agent.spec.ts, Social Media Agent.spec.ts, generalBugs-shard-9.spec.ts): update test assertions to improve readability and accuracy
📝 (chatInputOutput.spec.ts): add a skip test annotation and a todo comment for further investigation

* ✨ (typescript_test.yml): Add support for a new development suite in the test workflow
✨ (frontend): Add support for a new development suite in multiple test files

* 🔧 (.github/workflows/typescript_test.yml): ensure that the SUITES variable is valid JSON format to prevent errors and improve reliability

* ✨ (inputFileComponent/index.tsx): Refactor InputFileComponent to wrap Button component in a div for better structure and readability
🔧 (Vector Store.spec.ts): Add initialGPTsetup function to set up GPT environment variables for tests
🔧 (Vector Store.spec.ts): Refactor test to use initialGPTsetup function and improve readability
🔧 (add-new-api-keys.ts): Refactor addNewApiKeys function to handle multiple openai_api_key inputs
🔧 (remove-old-api-keys.ts): Refactor removeOldApiKeys function to click on the correct remove-icon-badge element

* ✨ Add support for running tests in serial mode with a delay between each test
🔧 Configure tests to run with a 3-second delay between each test run
🔧 Add a 7-second delay before starting tests in userSettings.spec.ts
🔧 Add a 3-second delay before the second event delivery mode test in withEventDeliveryModes.ts

* 📝 (userSettings.spec.ts): remove unnecessary console log message to improve test readability and maintainability

* 📝 (deploy-dropdown.tsx): Add data-testid attribute to shareable-playground element
✨ (index.tsx): Add useGetTypes hook to fetch types data when component is fetched
🔧 (publish-flow.spec.ts): Increase timeout for page.waitForSelector and page.waitForTimeout
🔧 (Vector Store.spec.ts): Refactor code to wait for dropdown to appear and be visible
🔧 (files-page.spec.ts): Refactor tests to run serially with a delay between each test and add comments to improve readability

* ✨ Add useGetTypes hook to fetch types data and support caching with checkCache option
🔧 Refactor useGetTypes hook to accept options object with checkCache property
🔧 Refactor useGetTypes hook to conditionally return cached data if available
🔧 Refactor useGetTypes hook to fetch types data with force_refresh query parameter
🔧 Refactor useGetTypes hook to handle errors and set types data
🔧 Refactor useGetTypes hook to improve query function and options handling
🔧 Refactor useGetTypes hook to optimize query function and options handling
🔧 Refactor useGetTypes hook to improve caching logic and error handling
🔧 Refactor useGetTypes hook to enhance caching mechanism and error handling
🔧 Refactor useGetTypes hook to improve data fetching and error handling
🔧 Refactor useGetTypes hook to optimize data fetching and error handling

* ✨ (Vector Store.spec.ts): Remove unnecessary loadingOptions check and expectation
♻️ (withEventDeliveryModes.ts): Refactor withEventDeliveryModes function to accept a timeout parameter for better flexibility

* ⚡️ (Vector Store.spec.ts): increase timeout for page.waitForTimeout from 2000ms to 10000ms to improve test stability and reliability

* update pokedex agent template

* ✨ (publish-flow.spec.ts): Remove unnecessary development tag from test description
✨ (Simple Agent.spec.ts, Social Media Agent.spec.ts): Remove unnecessary development tag from test description
✨ (Vector Store.spec.ts): Change withEventDeliveryModes to test for better test organization
🔧 (chatInputOutput.spec.ts): Refactor test description and remove unnecessary development tag
✨ (files-page.spec.ts): Remove unnecessary development tag from test descriptions
✨ (userSettings.spec.ts): Remove unnecessary development tag from test description

* formatting json

* ✨ (Vector Store.spec.ts): Add new integration test withEventDeliveryModes for Vector Store RAG
🔧 (Vector Store.spec.ts): Update timeout values in test functions to improve test performance and reliability

* 📝 (Text Sentiment Analysis.json): Update JSON file to have consistent formatting and structure for output_types and inputTypes arrays
📝 (Text Sentiment Analysis.spec.ts): Refactor integration test for Text Sentiment Analysis to improve readability and maintainability

* ✨ (PageComponent/index.tsx): Update minZoom and maxZoom values for better user experience
🐛 (upload-file.ts): Fix missing await keyword before clicking on an element

* 🐛 (PageComponent/index.tsx): fix minZoom value to 0.2 for consistency with fitViewOptions and improve user experience

* ✨ (dropdownComponent.spec.ts): add delay before checking dropdown value to ensure it has updated properly
✨ (dropdownComponent.spec.ts): add delay before interacting with more options modal to ensure it has loaded
✨ (floatComponent.spec.ts): add delay after clicking add button to wait for API request to complete

---------

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

src/frontend/tests/utils/add-flow-to-test-on-empty-langflow.ts

@@ -0,0 +1,8 @@
+import { Page } from "playwright/test";
+
+export const addFlowToTestOnEmptyLangflow = async (page: Page) => {
+  await page.getByTestId("new_project_btn_empty_page").click();
+  await page.getByTestId("side_nav_options_all-templates").click();
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.getByTestId("icon-ChevronLeft").click();
+};

src/frontend/tests/utils/add-new-api-keys.ts

@@ -2,11 +2,22 @@ import { Page } from "playwright/test";
 
 export async function addNewApiKeys(page: Page) {
   const apiKeyInput = page.getByTestId("popover-anchor-input-api_key");
+  const openaiApiKeyInput = page.getByTestId(
+    "popover-anchor-input-openai_api_key",
+  );
+
   const isApiKeyInputVisible = await apiKeyInput.count();
+  const isOpenaiApiKeyInputVisible = await openaiApiKeyInput.count();
 
   if (isApiKeyInputVisible > 0) {
     for (let i = 0; i < isApiKeyInputVisible; i++) {
       await apiKeyInput.nth(i).fill(process.env.OPENAI_API_KEY ?? "");
     }
   }
+
+  if (isOpenaiApiKeyInputVisible > 0) {
+    for (let i = 0; i < isOpenaiApiKeyInputVisible; i++) {
+      await openaiApiKeyInput.nth(i).fill(process.env.OPENAI_API_KEY ?? "");
+    }
+  }
 }

src/frontend/tests/utils/remove-old-api-keys.ts

@@ -3,7 +3,11 @@ import { Page } from "playwright/test";
 export async function removeOldApiKeys(page: Page) {
   let filledApiKey = await page.getByTestId("remove-icon-badge").count();
   while (filledApiKey > 0) {
-    await page.getByTestId("remove-icon-badge").first().click();
+    await page
+      .getByTestId("remove-icon-badge")
+      .nth(filledApiKey - 1)
+      .click();
+    await page.waitForTimeout(1000);
     filledApiKey = await page.getByTestId("remove-icon-badge").count();
   }
 }

src/frontend/tests/utils/upload-file.ts

@@ -32,6 +32,7 @@ function getMimeType(extension: string): string {
 }
 
 export async function uploadFile(page: Page, fileName: string) {
+  await page.getByTestId("fit_view").click();
   const fileManagement = await page
     .getByTestId("button_open_file_management")
     ?.isVisible();

src/frontend/tests/utils/withEventDeliveryModes.ts

@@ -5,6 +5,7 @@ type TestConfig = Parameters<typeof test>[1];
 
 /**
  * Wraps a test function to run it with both streaming and polling event delivery modes.
+ * Adds a 3-second delay between test runs to ensure proper separation.
  *
  * @param title The test title
  * @param config The test configuration (tags, etc)
@@ -14,11 +15,16 @@ export function withEventDeliveryModes(
   title: string,
   config: TestConfig,
   testFn: TestFunction,
+  { timeout = 10000 }: { timeout?: number } = {},
 ) {
   const eventDeliveryModes = ["streaming", "polling"] as const;
 
-  for (const eventDelivery of eventDeliveryModes) {
+  for (const [index, eventDelivery] of eventDeliveryModes.entries()) {
     test(`${title} - ${eventDelivery}`, config, async ({ page }) => {
+      if (index === 0) {
+        await new Promise((resolve) => setTimeout(resolve, timeout));
+      }
+
       // Intercept the config request and modify the event_delivery setting
       await page.route("**/api/v1/config", async (route) => {
         const response = await route.fetch();