feat: adds new Edit Details popover, removes flow menu, fixes nav alignment, adds new Flow Status overlay (#8087)

* Updated flow settings component size

* Added FlowSettingsComponent to contain modal content

* Removed unused imports

* Changed Flow Settings Modal to use new component

* Changed Flow Menu styling, removing Saved and context menu, and adding a direct click to edit flow info

* Removed unused styling

* Updated nav position and truncation

* updated alert styling

* Added z index to header

* Added flow settings coming from the bottom

* Changed flow settings to not crash when there is no flow

* Removed unused imports

* Implemented flow details using popover

* Removed onClick

* Changed canvas controls position and color

* Changed panel tooltip side and classes

* Added log canvas component

* Added children to flow logs modal

* Added log canvas component into page

* Changed position and shadow of canvas controls

* removed endpoint name from edit flow settings

* added endpoint name change into tweaks modal

* Added endpoint editing to tweaks

* Implemented storing the error in the flowBuildStatus

* Updated type

* Added Flow Building Component

* Added Flow Building Component implementation

* Added red color

* Added past build flow params

* Implemented design of flowBuildingComponent

* Implemented build error storing on flowStore

* Implemented build error on flow store

* Changed notifications test

* Set build error as null when building

* Reset build error when exiting flow

* Changed from error to buildError

* Changed flowStore to have buildInfo instead of buildError

* Changed flowBuildingComponent to have buildInfo and display successful builds

* Added handleDismissed instead of setting dismissed as true

* Updated tests to current Update implementation

* Updated tests to remove click on built successfully

* Updated tests and data-testid to match new Flow Name editing behavior

* fixed auto login test

* Fixed edit-flow-name test and save changes on node

* fixed tests

* Changed Share to Publish and added test ids

* added Rename Flow util for tests

* Changed tests to use new RenameFlow

* Fixed auto save off

* Added data test id to flow building component

* Removed pulsing from Name Invalid

* Made name editable but not saveable when invalid

* Added character name reached on description

* Added transition on pencil

* Modularized alert store to separate notification history and notifications

* Added errors to notification history

* Fixed flow building component position and update all components

* Fixed animations

* Fixed animation

* Added same animation to Update All Components

* Updated animations to make update only appear when flow building is not appearing

* fix flow settings test

* Fixed build status not being redefined

* ✨ (UpdateAllComponents/index.tsx): Refactor containerVariants to CONTAINER_VARIANTS for consistency and readability
📝 (visual-variants.ts): Add visual variants for buttons and time in flowBuildingComponent
♻️ (flowBuildingComponent/index.tsx): Import visual variants from separate file for better organization and maintainability

* Fixed offset width of time

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/frontend/tests/extended/features/auto-save-off.spec.ts

@@ -47,21 +47,6 @@ test(
 
     await page.getByTestId("fit_view").click();
 
-    expect(await page.getByText("Saved").last().isVisible()).toBeTruthy();
-
-    await page
-      .getByText("Saved")
-      .first()
-      .hover()
-      .then(async () => {
-        await expect(
-          page.getByText("Auto-saving is disabled").nth(0),
-        ).toBeVisible({ timeout: 5000 });
-        await expect(
-          page.getByText("Enable auto-saving to avoid losing progress.").nth(0),
-        ).toBeVisible({ timeout: 3000 });
-      });
-
     expect(await page.getByTestId("save-flow-button").isEnabled()).toBeTruthy();
 
     await page.waitForSelector("text=loading", {
@@ -136,7 +121,7 @@ test(
       timeout: 5000,
     });
 
-    await expect(page.getByTestId("title-NVIDIA")).toBeVisible({
+    await expect(page.getByTestId("title-NVIDIA").first()).toBeVisible({
       timeout: 5000,
     });
 

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

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { renameFlow } from "../../utils/rename-flow";
 test(
   "user should be able to edit flow name by clicking on the header or on the main page",
   { tag: ["@release", "@workspace", "@components"] },
@@ -13,16 +14,9 @@ test(
 
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-    await page.getByTestId("input-flow-name").click();
-    await page.waitForTimeout(1000);
+    await renameFlow(page, { flowName: randomName });
 
-    await page.getByTestId("input-flow-name").fill(randomName);
-
-    await page.keyboard.press("Enter");
-
-    await page.waitForTimeout(1000);
-
-    let flowName = await page.getByTestId("input-flow-name").inputValue();
+    let { flowName } = await renameFlow(page);
 
     expect(flowName).toBe(randomName);
 
@@ -41,17 +35,11 @@ test(
 
     await page.getByText(randomName).click();
 
-    await page.getByTestId("input-flow-name").click();
+    await renameFlow(page, { flowName: randomName2 });
 
-    await page.getByTestId("input-flow-name").fill(randomName2);
+    let { flowName: flowName2 } = await renameFlow(page);
 
-    await page.keyboard.press("Enter");
-
-    await page.waitForTimeout(1000);
-
-    flowName = await page.getByTestId("input-flow-name").inputValue();
-
-    expect(flowName).toBe(randomName2);
+    expect(flowName2).toBe(randomName2);
 
     await page.getByTestId("icon-ChevronLeft").first().click();
 
@@ -66,13 +54,19 @@ test(
 
     expect(await page.getByText(randomName2).count()).toBe(1);
 
-    await page.getByTestId("home-dropdown-menu").first().click();
+    await page.getByText(randomName2).click();
 
-    await page.getByTestId("btn-edit-flow").click();
+    await renameFlow(page, { flowName: randomName3 });
 
-    await page.getByTestId("input-flow-name").fill(randomName3);
+    let { flowName: flowName3 } = await renameFlow(page);
 
-    await page.getByTestId("save-flow-settings").click();
+    expect(flowName3).toBe(randomName3);
+
+    await page.getByTestId("icon-ChevronLeft").first().click();
+
+    await page.waitForSelector('[data-testid="home-dropdown-menu"]', {
+      timeout: 5000,
+    });
 
     await page.waitForSelector(`text=${randomName3}`, {
       timeout: 3000,
@@ -83,17 +77,11 @@ test(
 
     await page.getByText(randomName3).click();
 
-    await page.getByTestId("input-flow-name").click();
+    await renameFlow(page, { flowName: randomName4 });
 
-    await page.getByTestId("input-flow-name").fill(randomName4);
+    let { flowName: flowName4 } = await renameFlow(page);
 
-    await page.keyboard.press("Enter");
-
-    await page.waitForTimeout(1000);
-
-    flowName = await page.getByTestId("input-flow-name").inputValue();
-
-    expect(flowName).toBe(randomName4);
+    expect(flowName4).toBe(randomName4);
 
     await page.getByTestId("icon-ChevronLeft").first().click();
 

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

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { renameFlow } from "../../utils/rename-flow";
 
 test(
   "flowSettings",
@@ -11,53 +12,50 @@ test(
       timeout: 30000,
     });
     await page.getByTestId("blank-flow").click();
-    await page.waitForSelector('[data-testid="input-flow-name"]', {
-      timeout: 3000,
-    });
 
-    await page.getByTestId("flow_menu_trigger").click();
-    await page.getByText("Edit Details").first().click();
+    await page.getByTestId("flow_name").isVisible({ timeout: 3000 });
+    await page.getByTestId("flow_name").click();
+    await page.waitForTimeout(500);
+
+    await page.getByTestId("input-flow-name").click();
+
     await page
-      .getByPlaceholder("Flow name")
+      .getByTestId("input-flow-name")
       .fill(
         "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
       );
 
     await page.getByText("Character limit reached").isVisible();
 
-    await page.getByPlaceholder("Flow name").click();
+    await page.getByTestId("input-flow-name").click();
     const randomName = Math.random().toString(36).substring(2);
-    await page.getByPlaceholder("Flow name").fill(randomName);
-    await page.getByPlaceholder("Flow name").click();
+    await page.getByTestId("input-flow-name").fill(randomName);
     await page
-      .getByPlaceholder("Flow description")
+      .getByTestId("input-flow-description")
       .fill(
         "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
       );
 
+    await page.getByTestId("save-flow-settings").isEnabled({ timeout: 3000 });
     await page.getByTestId("save-flow-settings").click();
 
-    await page.getByText("Changes saved successfully").isVisible();
+    await page
+      .getByText("Changes saved successfully")
+      .last()
+      .isVisible({ timeout: 3000 });
+    await page.getByText("Changes saved successfully").last().click();
 
-    await page.getByTestId("flow_menu_trigger").click();
-    await page.getByText("Edit Details").first().click();
+    await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+      timeout: 30000,
+    });
 
-    const flowName = await page.getByPlaceholder("Flow name").inputValue();
-    const flowDescription = await page
-      .getByPlaceholder("Flow description")
-      .inputValue();
+    const { flowName, flowDescription } = await renameFlow(page);
 
-    if (flowName != randomName) {
-      expect(false).toBeTruthy();
-    }
+    expect(flowName == randomName).toBeTruthy();
 
-    if (
-      flowDescription !=
-      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
-    ) {
-      expect(false).toBeTruthy();
-    }
-    await page.getByText("Saved").first().isVisible();
-    await page.getByTestId("icon-CheckCircle2").first().isVisible();
+    expect(
+      flowDescription ==
+        "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name ",
+    ).toBeTruthy();
   },
 );

src/frontend/tests/extended/features/loop-component.spec.ts

@@ -217,9 +217,6 @@ test(
     // Build and run
     await page.getByTestId("button_run_chat output").click();
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
 
     // Verify output
     await page.waitForSelector(

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

@@ -27,10 +27,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page.getByTestId("notification_button").click();
 
     // Add explicit waits before checking visibility
@@ -39,7 +35,7 @@ test(
       state: "visible",
     });
 
-    await page.waitForSelector("text=Running components", {
+    await page.waitForSelector("text=Running", {
       timeout: 30000,
       state: "visible",
     });
@@ -52,13 +48,11 @@ test(
     const trashIcon = page.getByTestId("icon-Trash2").last();
     await expect(trashIcon).toBeVisible();
 
-    const runningComponentsText = page
-      .getByText("Running components", { exact: true })
-      .last();
+    const runningComponentsText = page.getByText("Running").last();
     await expect(runningComponentsText).toBeVisible();
 
     const builtSuccessfullyText = page
-      .getByText("Text Input built successfully", { exact: true })
+      .getByText("Flow built successfully", { exact: true })
       .last();
     await expect(builtSuccessfullyText).toBeVisible();
   },

src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts

@@ -34,13 +34,6 @@ test(
       timeout: 30000 * 3,
     });
 
-    await page
-      .getByText("built successfully")
-      .last()
-      .click({
-        timeout: 30000 * 3,
-      });
-
     await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
       timeout: 30000,
     });

src/frontend/tests/extended/integrations/youtube-transcripts.spec.ts

@@ -16,13 +16,11 @@ test.skip(
 
     await page.getByTestId("fit_view").click();
 
-    let outdatedComponents = await page
-      .getByTestId("icon-AlertTriangle")
-      .count();
+    let outdatedComponents = await page.getByTestId("update-button").count();
 
     while (outdatedComponents > 0) {
-      await page.getByTestId("icon-AlertTriangle").first().click();
-      outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+      await page.getByTestId("update-button").first().click();
+      outdatedComponents = await page.getByTestId("update-button").count();
     }
 
     await page

src/frontend/tests/extended/regression/general-bugs-move-flow-from-folder.spec.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { renameFlow } from "../../utils/rename-flow";
 
 test("user must be able to move flow from folder", async ({ page }) => {
   const randomName = Math.random().toString(36).substring(2, 15);
@@ -9,17 +10,7 @@ test("user must be able to move flow from folder", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[data-testid="input-flow-name"]', {
-    timeout: 3000,
-  });
-
-  await page.getByTestId("flow_menu_trigger").click();
-  await page.getByText("Edit Details").first().click();
-  await page.getByPlaceholder("Flow name").fill(randomName);
-
-  await page.getByTestId("save-flow-settings").click();
-
-  await page.getByText("Changes saved successfully").isVisible();
+  await renameFlow(page, { flowName: randomName });
 
   await page.getByTestId("icon-ChevronLeft").click();
   await page.waitForSelector('[data-testid="add-project-button"]', {

src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts

@@ -1,5 +1,6 @@
 import { expect, Page, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { renameFlow } from "../../utils/rename-flow";
 
 async function verifyTextareaValue(
   page: Page,
@@ -55,11 +56,7 @@ test(
       state: "visible",
     });
 
-    await page.getByTestId("input-flow-name").click();
-
-    await page.getByTestId("input-flow-name").fill(randomFlowName);
-
-    await page.keyboard.press("Enter");
+    await renameFlow(page, { flowName: randomFlowName });
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");

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

@@ -37,9 +37,6 @@ test(
     await uploadFile(page, "chain.png");
 
     await page.getByTestId("button_run_chat output").click();
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
 
     await page.getByRole("button", { name: "Playground", exact: true }).click();
 

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

@@ -24,10 +24,6 @@ test(
     await page.getByTestId("button_run_chat output").click();
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 30000,
-    });
-
     await page.getByTestId("user-profile-settings").click();
 
     await page.waitForSelector('text="Settings"');