feat: allow flow name to be edited from the main page or by clicking header (#5525)

* Added flowData to allow changing flow name without being on the flow

* Added being able to edit the flow name just by clicking the name

* Added handleEdit and edit details option on flow dropdown

* Added flow settings modal to grid and list

* Added flowData type and select option

* Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Fixed useCallback import

* Implemented details boolean to not show endpoint, changed title of flow settings modal

* Changed Flow Settings to Edit Details

* Changed Flow Settings modal description

* Fixed empty name not appearing, fixed naming conditions not considered

* 📝 (editFlowSettingsComponent/index.tsx): add data-testid attribute to input element for flow name for testing purposes
✨ (edit-flow-name.spec.ts): create test to ensure user can edit flow name by clicking on the header or main page, with various random names generated for testing purposes

* Fixed tests that used Flow Settings

* Fixed tests that rely on flow name to open edit details

* Fixed tests

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/tests/core/features/auto-login-off.spec.ts

@@ -128,8 +128,8 @@ test(
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
 
-    await page.getByTestId("flow-configuration-button").click();
-    await page.getByText("Flow Settings", { exact: true }).last().click();
+    await page.getByTestId("flow_menu_trigger").click();
+    await page.getByText("Edit Details", { exact: true }).last().click();
 
     await page.getByPlaceholder("Flow Name").fill(randomFlowName);
 
@@ -201,8 +201,8 @@ test(
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
 
-    await page.getByTestId("flow-configuration-button").click();
-    await page.getByText("Flow Settings", { exact: true }).last().click();
+    await page.getByTestId("flow_menu_trigger").click();
+    await page.getByText("Edit Details", { exact: true }).last().click();
 
     await page.getByPlaceholder("Flow Name").fill(secondRandomFlowName);
 

src/frontend/tests/core/features/store-shard-2.spec.ts

@@ -116,8 +116,8 @@ test("should share component with share button", async ({ page }) => {
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
   await page.waitForTimeout(1000);
   const flowName = await page.getByTestId("flow_name").innerText();
-  await page.getByTestId("flow_name").click();
-  await page.getByText("Flow Settings").click();
+  await page.getByTestId("flow_menu_trigger").click();
+  await page.getByText("Edit Details").click();
   const flowDescription = await page
     .getByPlaceholder("Flow description")
     .inputValue();

src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts

@@ -25,8 +25,8 @@ test(
 
     await page.getByTestId("fit_view").click();
 
-    await page.getByTestId("flow-configuration-button").click();
-    await page.getByText("Flow Settings").click();
+    await page.getByTestId("flow_menu_trigger").click();
+    await page.getByText("Edit Details").click();
     await page.getByPlaceholder("Flow name").fill(randomName);
     await page.getByText("Save").last().click();
     await page.getByTestId("icon-ChevronLeft").last().click();
@@ -72,8 +72,8 @@ test(
 
     await page.getByTestId(`card-${randomName}`).first().click();
 
-    await page.getByTestId("flow-configuration-button").click();
-    await page.getByText("Flow Settings").click();
+    await page.getByTestId("flow_menu_trigger").click();
+    await page.getByText("Edit Details").click();
     await page.getByPlaceholder("Flow name").fill(secondRandomName);
     await page.getByText("Save").last().click();
     await page.getByTestId("icon-ChevronLeft").last().click();

src/frontend/tests/extended/features/edit-flow-name.spec.ts

@@ -0,0 +1,106 @@
+import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { simulateDragAndDrop } from "../../utils/simulate-drag-and-drop";
+test(
+  "user should be able to edit flow name by clicking on the header or on the main page",
+  { tag: ["@release"] },
+  async ({ page }) => {
+    const randomName = Math.random().toString(36).substring(2, 15);
+    const randomName2 = Math.random().toString(36).substring(2, 15);
+    const randomName3 = Math.random().toString(36).substring(2, 15);
+    const randomName4 = Math.random().toString(36).substring(2, 15);
+
+    await awaitBootstrapTest(page);
+
+    await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+    await page.getByTestId("flow_name").click();
+
+    await page.getByTestId("input-flow-name").fill(randomName);
+
+    await page.keyboard.press("Enter");
+
+    let flowName = await page.getByTestId("flow_name").textContent();
+
+    expect(flowName).toBe(randomName);
+
+    await page.getByTestId("icon-ChevronLeft").first().click();
+
+    await page.waitForSelector('[data-testid="home-dropdown-menu"]', {
+      timeout: 5000,
+    });
+
+    await page.waitForSelector(`text=${randomName}`, {
+      timeout: 3000,
+      state: "visible",
+    });
+
+    expect(await page.getByText(randomName).count()).toBe(1);
+
+    await page.getByText(randomName).click();
+
+    await page.getByTestId("flow_name").click();
+
+    await page.getByTestId("input-flow-name").fill(randomName2);
+
+    await page.keyboard.press("Enter");
+
+    flowName = await page.getByTestId("flow_name").textContent();
+
+    expect(flowName).toBe(randomName2);
+
+    await page.getByTestId("icon-ChevronLeft").first().click();
+
+    await page.waitForSelector('[data-testid="home-dropdown-menu"]', {
+      timeout: 5000,
+    });
+
+    await page.waitForSelector(`text=${randomName2}`, {
+      timeout: 3000,
+      state: "visible",
+    });
+
+    expect(await page.getByText(randomName2).count()).toBe(1);
+
+    await page.getByTestId("home-dropdown-menu").first().click();
+
+    await page.getByTestId("btn-edit-flow").click();
+
+    await page.getByTestId("input-flow-name").fill(randomName3);
+
+    await page.getByTestId("save-flow-settings").click();
+
+    await page.waitForSelector(`text=${randomName3}`, {
+      timeout: 3000,
+      state: "visible",
+    });
+
+    expect(await page.getByText(randomName3).count()).toBe(1);
+
+    await page.getByText(randomName3).click();
+
+    await page.getByTestId("flow_name").click();
+
+    await page.getByTestId("input-flow-name").fill(randomName4);
+
+    await page.keyboard.press("Enter");
+
+    flowName = await page.getByTestId("flow_name").textContent();
+
+    expect(flowName).toBe(randomName4);
+
+    await page.getByTestId("icon-ChevronLeft").first().click();
+
+    await page.waitForSelector('[data-testid="home-dropdown-menu"]', {
+      timeout: 5000,
+    });
+
+    await page.waitForSelector(`text=${randomName4}`, {
+      timeout: 3000,
+      state: "visible",
+    });
+
+    expect(await page.getByText(randomName4).count()).toBe(1);
+  },
+);

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

@@ -15,8 +15,8 @@ test(
       timeout: 3000,
     });
 
-    await page.getByTestId("flow_name").click();
-    await page.getByText("Flow Settings").first().click();
+    await page.getByTestId("flow_menu_trigger").click();
+    await page.getByText("Edit Details").first().click();
     await page
       .getByPlaceholder("Flow name")
       .fill(
@@ -39,8 +39,8 @@ test(
 
     await page.getByText("Changes saved successfully").isVisible();
 
-    await page.getByTestId("flow_name").click();
-    await page.getByText("Flow Settings").first().click();
+    await page.getByTestId("flow_menu_trigger").click();
+    await page.getByText("Edit Details").first().click();
 
     const flowName = await page.getByPlaceholder("Flow name").inputValue();
     const flowDescription = await page