fix: Update min/max zoom value and fit view values (#7113)

* fix: Update minZoom value in PageComponent to improve zoom functionality

* [autofix.ci] apply automated fixes

* fix: Add fitViewOptions to PageComponent for enhanced zoom control

* fix: update default zoom out level in adjustScreenView utility

Changed the default value of numberOfZoomOut from 3 to 1 in the adjustScreenView function to improve initial screen adjustment behavior.

* fix: update zoom out level in filterEdge test

Modified the filterEdge test to pass a specific zoom out level of 3 to the adjustScreenView function, ensuring consistent screen adjustments during test execution.

* chore: update .gitignore to exclude .qodo files

* fix tests

* fixed test

* fix loop on zoom out

* Remove unnecessary zoom out click in starter projects test to improve test accuracy.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>

src/frontend/.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.qodo

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -572,8 +572,12 @@ export default function Page({
             onSelectionChange={onSelectionChange}
             deleteKeyCode={[]}
             fitView={isEmptyFlow.current ? false : true}
+            fitViewOptions={{
+              minZoom: 0.4,
+              maxZoom: 1.25,
+            }}
             className="theme-attribution"
-            minZoom={0.01}
+            minZoom={0.4}
             maxZoom={8}
             zoomOnScroll={!view}
             zoomOnPinch={!view}

src/frontend/tests/core/features/filterEdge-shard-0.spec.ts

@@ -26,7 +26,7 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await adjustScreenView(page);
+    await adjustScreenView(page, { numberOfZoomOut: 3 });
 
     const outputElements = await page
       .getByTestId("handle-retrievalqa-shownode-text-right")

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

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-
+import { zoomOut } from "../../utils/zoom-out";
 test.describe("save component tests", () => {
   /// <reference lib="dom"/>
   test(
@@ -52,6 +52,8 @@ test.describe("save component tests", () => {
         .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[3]')
         .click();
 
+      await zoomOut(page, 2);
+
       await page.getByTestId("title-Agent Initializer").click({
         modifiers: ["Control"],
       });
@@ -99,9 +101,6 @@ test.describe("save component tests", () => {
       await page.mouse.up();
       await page.mouse.down();
       await page.getByTestId("fit_view").click();
-      await page.getByTestId("zoom_out").click();
-      await page.getByTestId("zoom_out").click();
-      await page.getByTestId("zoom_out").click();
       textArea = page.getByTestId("div-textarea-description");
       elementCountText = await textArea?.count();
       if (elementCountText > 0) {

src/frontend/tests/core/integrations/decisionFlow.spec.ts

@@ -35,10 +35,14 @@ test(
     await page.waitForSelector('[data-testid="inputsChat Input"]', {
       timeout: 500,
     });
+
+    await zoomOut(page, 6);
+
     await page
       .getByTestId("inputsChat Input")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+      .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-    await zoomOut(page);
+        targetPosition: { x: 100, y: 100 },
+      });
 
     //---------------------------------- CREATE LIST
     await page.getByTestId("sidebar-search-input").click();
@@ -49,7 +53,7 @@ test(
     await page
       .getByTestId("helpersCreate List")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 100, y: 100 },
+        targetPosition: { x: 200, y: 100 },
       });
 
     await page.waitForSelector('[data-testid="input-list-plus-btn_texts-0"]', {
@@ -75,7 +79,7 @@ test(
     await page
       .getByTestId("helpersCreate List")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 300, y: 300 },
+        targetPosition: { x: 350, y: 100 },
       });
     await page.getByTestId("input-list-plus-btn_texts-0").last().click();
     await page.getByTestId("input-list-plus-btn_texts-0").last().click();
@@ -98,15 +102,13 @@ test(
     await page
       .getByTestId("processingData to Message")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 350, y: 100 },
+        targetPosition: { x: 500, y: 100 },
       });
-    await zoomOut(page, 1);
     await page
       .getByTestId("processingData to Message")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 50, y: 300 },
+        targetPosition: { x: 650, y: 100 },
       });
-    await zoomOut(page, 2);
 
     //---------------------------------- PASS
     await page.getByTestId("sidebar-search-input").click();
@@ -117,7 +119,7 @@ test(
     await page
       .getByTestId("logicPass")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 400, y: 100 },
+        targetPosition: { x: 800, y: 100 },
       });
     await page.waitForSelector('[data-testid="logicPass"]', {
       timeout: 500,
@@ -131,7 +133,7 @@ test(
     await page
       .getByTestId("logicPass")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 600, y: 200 },
+        targetPosition: { x: 50, y: 200 },
       });
     await page.waitForSelector('[data-testid="logicPass"]', {
       timeout: 500,
@@ -145,12 +147,11 @@ test(
     await page
       .getByTestId("logicPass")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 650, y: 350 },
+        targetPosition: { x: 200, y: 300 },
       });
     await page.waitForSelector('[data-testid="logicPass"]', {
       timeout: 500,
     });
-    zoomOut(page, 2);
     //---------------------------------- PROMPT
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("prompt");
@@ -160,7 +161,7 @@ test(
     await page
       .getByTestId("promptsPrompt")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 50, y: 150 },
+        targetPosition: { x: 350, y: 300 },
       });
 
     //---------------------------------- OPENAI
@@ -172,7 +173,7 @@ test(
     await page
       .getByTestId("modelsOpenAI")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 50, y: 300 },
+        targetPosition: { x: 500, y: 300 },
       });
 
     //---------------------------------- CONDITIONAL ROUTER
@@ -184,7 +185,7 @@ test(
     await page
       .getByTestId("logicIf-Else")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 750, y: 150 },
+        targetPosition: { x: 650, y: 300 },
       });
     //---------------------------------- CHAT OUTPUT
     await page.getByTestId("sidebar-search-input").click();
@@ -195,7 +196,7 @@ test(
     await page
       .getByTestId("outputsChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 100, y: 75 },
+        targetPosition: { x: 800, y: 300 },
       });
     await page.waitForSelector('[data-testid="outputsChat Output"]', {
       timeout: 500,
@@ -209,7 +210,7 @@ test(
     await page
       .getByTestId("outputsChat Output")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
-        targetPosition: { x: 250, y: 75 },
+        targetPosition: { x: 800, y: 400 },
       });
     await page.waitForSelector('[data-testid="outputsChat Output"]', {
       timeout: 500,

src/frontend/tests/core/integrations/starter-projects.spec.ts

@@ -59,7 +59,6 @@ test(
     });
 
     await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
 
     const edges = await page.locator(".react-flow__edge-interaction").count();
     const nodes = await page.getByTestId("div-generic-node").count();

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

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-
+import { zoomOut } from "../../utils/zoom-out";
 test(
   "PromptTemplateComponent",
   { tag: ["@release", "@workspace"] },
@@ -187,6 +187,7 @@ test(
 
     await page.getByText("Close").last().click();
 
+    await zoomOut(page, 2);
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("advanced-button-modal").click();
 

src/frontend/tests/extended/features/minimize.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { zoomOut } from "../../utils/zoom-out";
 
 test(
   "user must be able to minimize and expand a component",
@@ -33,6 +34,8 @@ test(
 
     await adjustScreenView(page);
 
+    await zoomOut(page, 4);
+
     await page.getByTestId("more-options-modal").click();
 
     await page.waitForSelector("data-testid=minimize-button-modal", {

src/frontend/tests/extended/features/sticky-notes.spec.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { zoomOut } from "../../utils/zoom-out";
 
 test(
   "user should be able to interact with sticky notes",
@@ -52,9 +53,7 @@ The future of AI is both exciting and uncertain. As the technology continues to
     });
 
     await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
+    await zoomOut(page, 6);
-    await page.getByTestId("zoom_out").click();
-
     await page.getByTestId("note_node").click();
 
     await page.locator(".generic-node-desc-text").last().dblclick();
@@ -122,8 +121,6 @@ The future of AI is both exciting and uncertain. As the technology continues to
     await page.getByText("Copy").click();
 
     await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
 
     //double click
     await targetElement.click();

src/frontend/tests/extended/features/twoEdges.spec.ts

@@ -21,10 +21,6 @@ test(
 
     await focusElementsOnBoard({ page });
 
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-
     await page.getByText("Retriever", { exact: true }).first().isHidden();
     await page.getByTestId("icon-ChevronDown").last().isVisible();
     await page.getByTestId("icon-ChevronDown").last().click();

src/frontend/tests/utils/adjust-screen-view.ts

@@ -3,7 +3,7 @@ import { Page } from "playwright/test";
 export async function adjustScreenView(
   page: Page,
   {
-    numberOfZoomOut = 3,
+    numberOfZoomOut = 1,
   }: {
     numberOfZoomOut?: number;
   } = {},
@@ -11,6 +11,12 @@ export async function adjustScreenView(
   await page.getByTestId("fit_view").click();
 
   for (let i = 0; i < numberOfZoomOut; i++) {
-    await page.getByTestId("zoom_out").click();
+    const zoomOutButton = page.getByTestId("zoom_out");
+
+    if (await zoomOutButton.isDisabled()) {
+      break;
+    } else {
+      await zoomOutButton.click();
+    }
   }
 }

src/frontend/tests/utils/zoom-out.ts

@@ -1,6 +1,6 @@
 import { Page } from "@playwright/test";
 
-export async function zoomOut(page: Page, times: number = 4) {
+export async function zoomOut(page: Page, times: number = 2) {
   for (let i = 0; i < times; i++) {
     await page.getByTestId("zoom_out").click();
   }