fix: Enhance JSON filtering with special cases, update CI workflows, and improve frontend components and tests (nightly fix) (#7110)

* ✨ (index.tsx): Update inputComponent styles to improve UI design and user experience
🐛 (new-api-modal.tsx): Add data-testid attribute to tweaks button for testing purposes
🔧 (publish-flow.spec.ts): Update test cases to improve reliability and readability
📝 (tweaksTest.spec.ts): Refactor test cases to enhance maintainability and clarity
🔧 (nestedComponent.spec.ts): Update test description for clarity and consistency
🐛 (general-bugs-shard-3909.spec.ts): Fix waitForSelector calls to match correct text for improved test accuracy

* 🔧 (use-get-builds-polling-mutation.ts, use-get-builds.ts, use-post-retrieve-vertex-order.tsx): add retry and retryDelay options to improve error handling and resiliency in API queries
🗑️ (generalBugs-shard-2.spec.ts): delete outdated test file for general bugs related to shards in the frontend tests folder

* Revert "ci: fix false positive on ci sucess status (#6868)"

This reverts commit e18b248591.

* ✨ (jsonEditor/index.tsx): add support for dynamically setting width and height of the editor container to improve responsiveness
🔧 (dictAreaModal/index.tsx): set width to 100% and adjust height class to improve layout responsiveness

* fix backend tests

* [autofix.ci] apply automated fixes

---------

Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/components/core/jsonEditor/index.tsx

@@ -1,4 +1,5 @@
 import { jsonquery } from "@jsonquerylang/jsonquery";
+import { edit } from "ace-builds";
 import { Check } from "lucide-react";
 import { KeyboardEvent, useEffect, useRef, useState } from "react";
 import {
@@ -336,6 +337,12 @@ const JsonEditor = ({
       }
     }
 
+    // Ensure the container has the correct dimensions before creating the editor
+    if (containerRef.current) {
+      containerRef.current.style.width = width;
+      containerRef.current.style.height = height;
+    }
+
     const editor = createJSONEditor({
       target: containerRef.current,
       props: {

src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx

@@ -122,7 +122,7 @@ const getInputClassName = (
 ) => {
   return cn(
     "popover-input nodrag w-full truncate px-1 pr-4",
-    editNode && "px-2",
+    editNode && "pl-2 pr-6",
     editNode && disabled && "h-fit w-fit",
     disabled &&
       "disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground",

src/frontend/src/controllers/API/queries/_builds/use-get-builds-polling-mutation.ts

@@ -180,7 +180,11 @@ export const useGetBuildsMutation: useMutationFunctionType<
     ["useGetBuildsMutation"],
     (payload: IGetBuilds) =>
       startPolling(payload) ?? Promise.reject("Failed to start polling"),
-    options,
+    {
+      ...options,
+      retry: 0,
+      retryDelay: 0,
+    },
   );
 
   return mutation;

src/frontend/src/controllers/API/queries/_builds/use-get-builds.ts

@@ -40,6 +40,8 @@ export const useGetBuildsQuery: useQueryFunctionType<
     {
       placeholderData: keepPreviousData,
       refetchOnWindowFocus: false,
+      retry: 0,
+      retryDelay: 0,
     },
   );
 

src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx

@@ -62,7 +62,11 @@ export const usePostRetrieveVertexOrder: useMutationFunctionType<
   const mutation = mutate(
     ["usePostRetrieveVertexOrder"],
     postRetrieveVertexOrder,
-    options,
+    {
+      ...options,
+      retry: 0,
+      retryDelay: 0,
+    },
   );
 
   return mutation;

src/frontend/src/modals/apiModal/new-api-modal.tsx

@@ -79,6 +79,7 @@ export default function ApiModal({
                 size="icon"
                 className="h-8 px-3"
                 onClick={() => setOpenTweaks(true)}
+                data-testid="tweaks-button"
               >
                 <IconComponent
                   name="SlidersHorizontal"

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -108,6 +108,8 @@ export default function DictAreaModal({
           data={{ json: value }}
           jsonRef={jsonEditorRef}
           height="400px"
+          width="100%"
+          className="h-[400px] w-full overflow-visible"
         />
       </div>
     </BaseModal.Content>
@@ -119,7 +121,7 @@ export default function DictAreaModal({
       open={open}
       disable={disabled}
       setOpen={setOpen}
-      className="overflow-visible"
+      className="h-auto min-h-[500px] overflow-visible"
       onSubmit={onChange ? handleSubmit : undefined}
     >
       <BaseModal.Trigger className="h-full" asChild>

src/frontend/tests/core/features/publish-flow.spec.ts

@@ -42,20 +42,17 @@ test(
     ).resolves.toBeTruthy();
 
     await page.getByTestId("publish-switch").click();
-    await page.getByTestId("shareable-playground").click();
-    await expect(page.getByTestId("rf__wrapper")).toBeVisible();
-    await page.getByTestId("publish-button").click();
-    await page.getByTestId("publish-switch").click();
-    await expect(page.getByTestId("rf__wrapper")).toBeVisible();
-    await expect(page.getByTestId("publish-switch")).toBeChecked();
     const pagePromise = context.waitForEvent("page");
     await page.getByTestId("shareable-playground").click();
     const newPage = await pagePromise;
     await newPage.waitForTimeout(3000);
     const newUrl = newPage.url();
     await newPage.getByPlaceholder("Send a message...").fill("Hello");
-    await newPage.getByTestId("button-send").click();
-    await expect(newPage.getByText("Hello")).toBeVisible();
+    await newPage.getByTestId("button-send").last().click();
+
+    const stopButton = newPage.getByRole("button", { name: "Stop" });
+    await stopButton.waitFor({ state: "visible", timeout: 30000 });
+
     await newPage.close();
     await page.bringToFront();
     // check if deactivate the publishworks
@@ -65,9 +62,17 @@ test(
     await expect(page.getByTestId("publish-switch")).toBeChecked({
       checked: false,
     });
-    await page.getByTestId("shareable-playground").click();
     await expect(page.getByTestId("rf__wrapper")).toBeVisible();
     await page.goto(newUrl);
-    await expect(page.getByTestId("mainpage_title")).toBeVisible();
+    try {
+      await expect(page.getByTestId("mainpage_title")).toBeVisible({
+        timeout: 10000,
+      });
+    } catch (error) {
+      await page.reload();
+      await expect(page.getByTestId("mainpage_title")).toBeVisible({
+        timeout: 10000,
+      });
+    }
   },
 );

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

@@ -10,7 +10,8 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
-    await page.getByText("API", { exact: true }).click();
+    await page.getByTestId("publish-button").click();
+    await page.getByTestId("api-access-item").click();
     await page.getByRole("tab", { name: "cURL" }).click();
     await page.getByTestId("icon-Copy").click();
     const handle = await page.evaluateHandle(() =>
@@ -19,7 +20,7 @@ test(
     const clipboardContent = await handle.jsonValue();
     const oldValue = clipboardContent;
     expect(clipboardContent.length).toBeGreaterThan(0);
-    await page.getByRole("tab", { name: "Tweaks" }).click();
+    await page.getByTestId("tweaks-button").click();
     await page
       .getByRole("heading", { name: "OpenAi" })
       .locator("div")
@@ -38,6 +39,8 @@ test(
       .first()
       .fill("teste");
 
+    await page.getByText("Close").last().click();
+
     await page.getByRole("tab", { name: "cURL" }).click();
     await page.getByTestId("icon-Copy").click();
     const handle2 = await page.evaluateHandle(() =>
@@ -92,25 +95,41 @@ test("check if tweaks are updating when someothing on the flow changes", async (
     .fill("persist_directory_123123123!@#$&*(&%$@");
 
   const focusElementsOnBoard = async ({ page }) => {
-    await page.waitForSelector("text=API", { timeout: 30000 });
-    const focusElements = await page.getByText("API", { exact: true }).first();
+    const focusElements = await page.getByTestId("publish-button").first();
     await focusElements.click();
   };
 
   await focusElementsOnBoard({ page });
 
-  await page.getByText("Tweaks").nth(1).click();
+  await page.getByTestId("api-access-item").click();
+
+  await page.getByTestId("tweaks-button").click();
+
+  await page
+    .getByRole("heading", { name: "Chroma" })
+    .locator("div")
+    .first()
+    .click();
 
   await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
   await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
 
-  await page.getByText("Python API", { exact: true }).click();
+  await page.getByText("Close").last().click();
+
+  await page.getByText("Python", { exact: true }).click();
 
   await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
   await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
 
-  await page.getByText("Python Code", { exact: true }).click();
+  await page.getByText("JavaScript", { exact: true }).click();
 
   await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
   await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
+
+  await page.getByText("cURL", { exact: true }).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
+
+  expect(await page.getByText("Tweaks (2)", { exact: true }).isVisible());
 });

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

@@ -3,7 +3,7 @@ import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
-  "NestedComponent",
+  "user should be able to use nested component",
   { tag: ["@release", "@workspace"] },
   async ({ page }) => {
     await awaitBootstrapTest(page);

src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts

@@ -39,8 +39,7 @@ test(
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
     await page.waitForSelector("text=playground", { timeout: 30000 });
-    await page.waitForSelector("text=api", { timeout: 30000 });
-    await page.waitForSelector("text=share", { timeout: 30000 });
+    await page.waitForSelector("text=publish", { timeout: 30000 });
 
     await expect(page.getByTestId("button_run_chat output")).toBeVisible({
       timeout: 30000,

src/frontend/tests/extended/regression/generalBugs-shard-2.spec.ts

@@ -1,58 +0,0 @@
-import { expect, test } from "@playwright/test";
-import * as dotenv from "dotenv";
-import path from "path";
-import { adjustScreenView } from "../../utils/adjust-screen-view";
-import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-
-test(
-  "should use webhook component on API",
-  {
-    tag: ["@release"],
-  },
-  async ({ page }) => {
-    test.skip(
-      !process?.env?.OPENAI_API_KEY,
-      "OPENAI_API_KEY required to run this test",
-    );
-    if (!process.env.CI) {
-      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-    }
-    await awaitBootstrapTest(page);
-
-    await page.getByTestId("blank-flow").click();
-
-    await page.getByTestId("sidebar-search-input").click();
-    await page.getByTestId("sidebar-search-input").fill("webhook");
-
-    await page.waitForSelector('[data-testid="dataWebhook"]', {
-      timeout: 3000,
-    });
-
-    await page
-      .getByTestId("dataWebhook")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
-    await page.mouse.up();
-    await page.mouse.down();
-
-    await adjustScreenView(page);
-
-    // wait for the update to be applied
-    await page.waitForTimeout(1000);
-
-    await page.getByText("API", { exact: true }).click();
-
-    await page.getByText("Webhook cURL", { exact: true }).click();
-    await page.getByRole("tab", { name: "Webhook cURL" }).click();
-
-    await page.getByTestId("icon-Copy").last().click();
-
-    const handle = await page.evaluateHandle(() =>
-      navigator.clipboard.readText(),
-    );
-    const clipboardContent = await handle.jsonValue();
-    expect(clipboardContent.length).toBeGreaterThan(0);
-    expect(clipboardContent).toContain("curl -X POST");
-    expect(clipboardContent).toContain("webhook");
-    await page.getByRole("tab", { name: "Tweaks" }).click();
-  },
-);