fix: adjust function that add incremental name on flows that already exists + tests (#2645)

* 🐛 (reactflowUtils.ts): fix addVersionToDuplicates to exclude the updated flow from existing names to prevent naming conflicts

* ✅ (menuBar): add data-testid to flow configuration button for testing
✅ (sideBarFolderButtons): add data-testid to delete folder button for testing
✅ (folders.spec.ts): update test to use new data-testid for delete folder button
✅ (generalBugs-shard-4.spec.ts): add new end-to-end test for flow operations

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -75,7 +75,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
       <div className="header-menu-bar">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button asChild variant="primary" size="sm">
+            <Button
+              asChild
+              variant="primary"
+              size="sm"
+              data-testid="flow-configuration-button"
+            >
               <div className="header-menu-bar-display">
                 <div className="header-menu-flow-name" data-testid="flow_name">
                   {currentFlow.name}

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -290,6 +290,7 @@ const SideBarFoldersButtonsComponent = ({
                   )}
                   {index > 0 && (
                     <Button
+                      data-testid="btn-delete-folder"
                       className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
                       onClick={(e) => {
                         handleDeleteFolder!(item);

src/frontend/src/utils/reactflowUtils.ts

@@ -368,7 +368,9 @@ export function updateEdges(edges: Edge[]) {
 }
 
 export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
-  const existingNames = flows.map((item) => item.name);
+  const flowsWithoutUpdatedFlow = flows.filter((f) => f.id !== flow.id);
+
+  const existingNames = flowsWithoutUpdatedFlow.map((item) => item.name);
   let newName = flow.name;
   let count = 1;
 

src/frontend/tests/end-to-end/folders.spec.ts

@@ -57,7 +57,7 @@ test("CRUD folders", async ({ page }) => {
     .last()
     .hover()
     .then(async () => {
-      await page.getByTestId("icon-trash").last().click();
+      await page.getByTestId("btn-delete-folder").last().click();
     });
 
   await page.getByText("Delete").last().click();

src/frontend/tests/end-to-end/generalBugs-shard-4.spec.ts

@@ -0,0 +1,125 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should be able to move flow from folder, rename it and be displayed on correct folder", async ({
+  page,
+}) => {
+  const randomName = Math.random().toString(36).substring(2);
+  const secondRandomName = Math.random().toString(36).substring(2);
+
+  await page.goto("/");
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+
+  await page.getByTestId("flow-configuration-button").click();
+  await page.getByText("Settings").click();
+  await page.getByPlaceholder("Flow name").fill(randomName);
+  await page.getByText("Save").last().click();
+  await page.getByTestId("icon-ChevronLeft").last().click();
+
+  await page.getByTestId("add-folder-button").click();
+
+  let countFolders = await page.getByText("New Folder").count();
+
+  while (countFolders > 1) {
+    await page.getByText("New Folder").first().hover();
+
+    await page.getByTestId("btn-delete-folder").first().click();
+    await page.getByText("Delete").last().click();
+    countFolders--;
+    await page.waitForTimeout(1000);
+  }
+
+  // Get the bounding boxes of the elements
+  const sourceElement = await page.getByTestId(`card-${randomName}`).first();
+  const targetElement = await page.getByText("New Folder").last();
+
+  const sourceBox = await sourceElement.boundingBox();
+  const targetBox = await targetElement.boundingBox();
+
+  // Perform the drag and drop
+  await page.mouse.move(
+    sourceBox!.x + sourceBox!.width / 2,
+    sourceBox!.y + sourceBox!.height / 2,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    targetBox!.x + targetBox!.width / 2,
+    targetBox!.y + targetBox!.height / 2,
+  );
+  await page.mouse.up();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("New Folder").last().click();
+
+  expect(await page.getByTestId(`card-${randomName}`).first().isVisible());
+
+  await page.getByTestId(`card-${randomName}`).first().click();
+
+  await page.getByTestId("flow-configuration-button").click();
+  await page.getByText("Settings").click();
+  await page.getByPlaceholder("Flow name").fill(secondRandomName);
+  await page.getByText("Save").last().click();
+  await page.getByTestId("icon-ChevronLeft").last().click();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("New Folder").last().click();
+  expect(
+    await page.getByTestId(`card-${secondRandomName}`).first().isVisible(),
+  );
+
+  // Get the bounding boxes of the elements
+  const secondSourceElement = await page
+    .getByTestId(`card-${secondRandomName}`)
+    .first();
+  const secondTargetElement = await page.getByText("New Folder").last();
+
+  const secondSourceBox = await secondSourceElement.boundingBox();
+  const secondTargetBox = await secondTargetElement.boundingBox();
+
+  // Perform the drag and drop
+  await page.mouse.move(
+    secondSourceBox!.x + secondSourceBox!.width / 2,
+    secondSourceBox!.y + secondSourceBox!.height / 2,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    secondTargetBox!.x + secondTargetBox!.width / 2,
+    secondTargetBox!.y + secondTargetBox!.height / 2,
+  );
+  await page.mouse.up();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("My Projects").last().click();
+
+  expect(
+    await page.getByTestId(`card-${secondRandomName}`).first().isVisible(),
+  );
+});