feat(component): API Request Component Overhaul (#5007)

* style: Add icon property to WebhookComponent class

* style: Update input components in APIRequest class

* fix pr

* [autofix.ci] apply automated fixes

* remove debug print statement from api_request component

* remove debug print statement from api_request component

* feat: add dynamic cURL mode to APIRequestComponent

- Add cURL command parsing and field population
- Implement dynamic UI updates based on cURL input
- Support JSON body and headers extraction from cURL
- Add real-time refresh for cURL mode toggle

* refactor(APIRequestComponent): improve HTTP methods and cURL handling

- Add DELETE method support
- Enhance cURL parameter handling and UI visibility
- Fix JSON decode error handling with specific exception
- Update method visibility for DELETE requests

* style: Update input components in APIRequest class

* [autofix.ci] apply automated fixes

* remove debug print statement from api_request component

* remove debug print statement from api_request component

* feat: add dynamic cURL mode to APIRequestComponent

- Add cURL command parsing and field population
- Implement dynamic UI updates based on cURL input
- Support JSON body and headers extraction from cURL
- Add real-time refresh for cURL mode toggle

* refactor(APIRequestComponent): improve HTTP methods and cURL handling

- Add DELETE method support
- Enhance cURL parameter handling and UI visibility
- Fix JSON decode error handling with specific exception
- Update method visibility for DELETE requests

* [autofix.ci] apply automated fixes

* git commit -m "ui(api-request): adjust field visibility and requirements

- Move query_params to advanced section
- Make URL field required"

* feat(api): enhance curl parsing and update unit tests

- Improve MultilineInput handling in APIRequestComponent for curl commands
- Update parse_curl unit test to match expected data structure
- Ensure consistent format for headers and body in test assertions

* [autofix.ci] apply automated fixes

* fix(api-request): improve UI/UX and fix initial field visibility

- Fix body field flickering on component load
- Enhance URL/cURL field toggle behavior

* ✅ (filterSidebar.spec.ts): add tests for clicking on edit button modal, show headers button, and closing the modal to ensure correct behavior and visibility of elements

* 📝 (dictComponent/index.tsx): update data-testid attribute to dynamically set based on editNode value for better testability
📝 (nestedComponent.spec.ts): update test data and selectors to match changes in dictComponent/index.tsx for accurate testing

* refactor(api_request): improve component UX and field handling

- Update tool_mode placement to align with main branch changes
- Remove temporary required field validation to prevent UI conflicts
- Add field clearing logic when switching between cURL and URL modes
- Update component description to be more concise

* git commit -m "fix: resolve merge conflicts with upstream in api request component

* fix: resolve merge conflicts with upstream in api request component

* Delete src/backend/tests/unit/test_data_components.py

BREAKING CHANGE: Removed test_data_components.py as it has been replaced by test_api_request_component.py

* git commit -m "test(api-request): update test_parse_curl to match TableInput format

* style(test_api-request): apply ruff formatting rules

* [autofix.ci] apply automated fixes

---------

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

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

@@ -111,6 +111,10 @@ test(
     ).not.toBeVisible();
     await expect(page.getByTestId("logicCondition")).not.toBeVisible();
 
+    await page.getByTestId("edit-button-modal").click();
+
+    await page.getByTestId("showheaders").click();
+    await page.getByText("Close").last().click();
     await page.getByTestId("handle-apirequest-shownode-headers-left").click();
 
     await expect(page.getByTestId("disclosure-data")).toBeVisible();

src/frontend/tests/core/unit/nestedComponent.spec.ts

@@ -13,20 +13,22 @@ test(
     });
     await page.getByTestId("blank-flow").click();
     await page.getByTestId("sidebar-search-input").click();
-    await page.getByTestId("sidebar-search-input").fill("api request");
+    await page.getByTestId("sidebar-search-input").fill("alter metadata");
 
-    await page.waitForSelector('[data-testid="dataAPI Request"]', {
+    await page.waitForSelector('[data-testid="processingAlter Metadata"]', {
       timeout: 3000,
     });
 
     await page
-      .getByTestId("dataAPI Request")
-      .first()
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+      .getByTestId("processingAlter Metadata")
+      .hover()
+      .then(async () => {
+        await page.getByTestId("add-component-button-alter-metadata").click();
+      });
 
     await adjustScreenView(page);
 
-    await page.getByTestId("dict_nesteddict_headers").first().click();
+    await page.getByTestId("dict_nesteddict_metadata").first().click();
     await page
       .getByText("{")
       .last()
@@ -62,7 +64,7 @@ test(
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("advanced-button-modal").click();
 
-    await page.getByTestId("dict_nesteddict_edit_headers").first().click();
+    await page.getByTestId("edit_dict_nesteddict_edit_metadata").last().click();
 
     expect(await page.getByText("keytest", { exact: true }).count()).toBe(1);
     expect(await page.getByText("keytest1", { exact: true }).count()).toBe(1);