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/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"');