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/core/features/auto-login-off.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(
   "when auto_login is false, admin can CRUD user's and should see just your own flows",
@@ -146,12 +147,7 @@ test(
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
 
-    await page.getByTestId("flow_menu_trigger").click();
-    await page.getByText("Edit Details", { exact: true }).last().click();
-
-    await page.getByPlaceholder("Flow Name").fill(randomFlowName);
-
-    await page.getByText("Save", { exact: true }).click();
+    await renameFlow(page, { flowName: randomFlowName });
 
     await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
       timeout: 100000,
@@ -226,12 +222,7 @@ test(
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
 
-    await page.getByTestId("flow_menu_trigger").click();
-    await page.getByText("Edit Details", { exact: true }).last().click();
-
-    await page.getByPlaceholder("Flow Name").fill(secondRandomFlowName);
-
-    await page.getByText("Save", { exact: true }).click();
+    await renameFlow(page, { flowName: secondRandomFlowName });
 
     await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
       timeout: 100000,

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -45,10 +45,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page
       .getByTestId("output-inspection-message-chatoutput")
       .first()
@@ -72,10 +68,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: 15000,
-    });
-
     await page
       .getByTestId("output-inspection-message-chatoutput")
       .first()
@@ -116,10 +108,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page
       .getByTestId("output-inspection-message-chatoutput")
       .first()

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

@@ -93,16 +93,14 @@ test(
 
     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();
-      await page.waitForSelector('[data-testid="icon-AlertTriangle"]', {
+      await page.getByTestId("update-button").first().click();
+      await page.waitForSelector('[data-testid="update-button"]', {
         timeout: 1000,
       });
-      outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+      outdatedComponents = await page.getByTestId("update-button").count();
     }
 
     let filledApiKey = await page.getByTestId("remove-icon-badge").count();
@@ -157,10 +155,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page.waitForSelector(
       '[data-testid="output-inspection-message-chatoutput"]',
       {
@@ -185,10 +179,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page.waitForSelector(
       '[data-testid="output-inspection-message-chatoutput"]',
       {
@@ -242,10 +232,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page.waitForSelector(
       '[data-testid="output-inspection-message-chatoutput"]',
       {
@@ -278,10 +264,6 @@ test(
       timeout: 30000 * 3,
     });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
     await page.waitForSelector(
       '[data-testid="output-inspection-message-chatoutput"]',
       {

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

@@ -24,13 +24,11 @@ test(
     await expect(page.getByTestId(/.*rf__node.*/).first()).toBeVisible({
       timeout: 3000,
     });
-    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();
     }
 
     let filledApiKey = await page.getByTestId("remove-icon-badge").count();
@@ -39,7 +37,6 @@ test(
       filledApiKey = await page.getByTestId("remove-icon-badge").count();
     }
 
-    await page.getByTestId("icon-ChevronDown").first().click();
     await page.getByText("Logs").click();
     await page.getByText("No Data Available", { exact: true }).isVisible();
     await page.keyboard.press("Escape");
@@ -61,14 +58,6 @@ test(
 
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
-    await page.getByText("built successfully").last().click({
-      timeout: 15000,
-    });
-
-    await page
-      .getByText("Chat Output built successfully", { exact: true })
-      .isVisible();
-    await page.getByTestId("icon-ChevronDown").first().click();
     await page.getByText("Logs").click();
 
     await page.getByText("timestamp").first().isVisible();

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

@@ -2,6 +2,7 @@ import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { renameFlow } from "../../utils/rename-flow";
 
 test(
   "should filter by tag",
@@ -114,15 +115,8 @@ test("should share component with share button", async ({ page }) => {
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
-  const flowName = await page.getByTestId("input-flow-name").inputValue();
-  await page.getByTestId("flow_menu_trigger").click();
-  await page.getByText("Edit Details").click();
-  const flowDescription = await page
-    .getByPlaceholder("Flow description")
-    .inputValue();
-  await page.getByPlaceholder("Flow name").fill(randomName);
-  await page.getByText("Save").last().click();
+
+  await renameFlow(page, { flowName: randomName });
 
   await page.waitForSelector('[data-testid="shared-button-flow"]', {
     timeout: 100000,
@@ -148,8 +142,14 @@ test("should share component with share button", async ({ page }) => {
   await page.getByText("Vector Store").first().isVisible();
   await page.getByText("Prompt").last().isVisible();
   await page.getByTestId("public-checkbox").isChecked();
+
+  const flowName = await page.getByTestId("input-flow-name").inputValue();
+  const flowDescription = await page
+    .getByPlaceholder("Flow description")
+    .inputValue();
   await page.getByText(flowName).last().isVisible();
   await page.getByText(flowDescription).last().isVisible();
   await page.waitForTimeout(1000);
+
   await page.getByText("Flow shared successfully").last().isVisible();
 });

src/frontend/tests/core/features/user-flow-state-cleanup.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { renameFlow } from "../../utils/rename-flow";
 
 test(
   "flow state should be properly cleaned up between user sessions",
@@ -110,13 +110,9 @@ test(
     });
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
     await page.waitForSelector('[data-testid="fit_view"]', { timeout: 30000 });
-    await page.getByTestId("flow_menu_trigger").click();
-    await page.getByText("Edit Details", { exact: true }).last().click();
-    await page.getByPlaceholder("Flow Name").fill(userAFlowName);
-    await page.getByText("Save", { exact: true }).click();
-    await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
-      timeout: 30000,
-    });
+
+    await renameFlow(page, { flowName: userAFlowName });
+
     await page.getByTestId("icon-ChevronLeft").first().click();
 
     // Verify User A can see their flow