fix(extraSidebarComponent): import 'set' function from lodash to fix compilation error

fix(extraSidebarComponent): include display_name property in search filter condition to improve search functionality
fix(extraSidebarComponent): add 'data' dependency to useEffect to ensure proper re-rendering
feat(extraSidebarComponent): add support for process.env.PORT environment variable to be able to run app on a configurable port
test(onlyFront/saveComponents.spec): add test for saving a component in the frontend
test(onlyFront/saveComponents.spec): simulate dropping a file and assert that the flow is displayed
test(onlyFront/saveComponents.spec): simulate grouping elements and assert that the group is created
test(onlyFront/saveComponents.spec): simulate typing and saving a flow component

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -57,8 +57,10 @@ export default function ExtraSidebar(): JSX.Element {
       let ret = {};
       Object.keys(data).forEach((d: keyof APIObjectType, i) => {
         ret[d] = {};
-        let keys = Object.keys(data[d]).filter((nd) =>
+        let keys = Object.keys(data[d]).filter(
-          nd.toLowerCase().includes(e.toLowerCase())
+          (nd) =>
+            nd.toLowerCase().includes(e.toLowerCase()) ||
+            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase())
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -94,7 +96,7 @@ export default function ExtraSidebar(): JSX.Element {
       setFilterEdge([]);
       setSearch("");
     }
-  }, [getFilterEdge]);
+  }, [getFilterEdge, data]);
 
   useEffect(() => {
     if (getFilterEdge?.length > 0) {
@@ -131,7 +133,7 @@ export default function ExtraSidebar(): JSX.Element {
         return ret;
       });
     }
-  }, [getFilterEdge]);
+  }, [getFilterEdge, data]);
 
   return (
     <div className="side-bar-arrangement">

src/frontend/tests/onlyFront/saveComponents.spec.ts

@@ -0,0 +1,90 @@
+import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
+
+test.describe("save component tests", () => {
+  /// <reference lib="dom"/>
+  test("save component tests", async ({ page }) => {
+    await page.routeFromHAR("harFiles/langflow.har", {
+      url: "**/api/v1/**",
+      update: false,
+    });
+    await page.route("**/api/v1/flows/", async (route) => {
+      const json = {
+        id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+      };
+      await route.fulfill({ json, status: 201 });
+    });
+    await page.goto("http:localhost:3000/");
+    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+    // Read your file into a buffer.
+    const jsonContent = readFileSync(
+      "tests/onlyFront/assets/flow.json",
+      "utf-8"
+    );
+
+    // Create the DataTransfer and File
+    const dataTransfer = await page.evaluateHandle((data) => {
+      const dt = new DataTransfer();
+      // Convert the buffer to a hex array
+      const file = new File([data], "flow.json", {
+        type: "application/json",
+      });
+      dt.items.add(file);
+      return dt;
+    }, jsonContent);
+
+    // Now dispatch
+    await page.dispatchEvent('//*[@id="root"]/div/div[2]/div[2]', "drop", {
+      dataTransfer,
+    });
+    expect(
+      await page
+        .locator(".main-page-flows-display")
+        .evaluate((el) => el.children)
+    ).toBeTruthy();
+    await page.getByRole("button", { name: "Edit Flow" }).click();
+    //inside the flow
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[1]/div/div[1]/div"
+      )
+      .click({
+        modifiers: ["Control"],
+      });
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div"
+      )
+      .click({
+        modifiers: ["Control"],
+      });
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[3]/div/div[1]/div"
+      )
+      .click({
+        modifiers: ["Control"],
+      });
+    await page.getByRole("button", { name: "Group" }).click();
+    expect(
+      await page
+        .locator(
+          "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div/div"
+        )
+        .isVisible()
+    ).toBeTruthy();
+    await page.getByPlaceholder("Type something...").first().click();
+    await page.getByPlaceholder("Type something...").first().fill("save");
+    await page.locator(".react-flow__pane").click();
+    await page
+      .locator(".side-bar-buttons-arrangement > div:nth-child(3)")
+      .click();
+    //more option click
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[2]/div/span/button[3]/div/div"
+      )
+      .click();
+    await page.getByLabel("Save").click();
+  });
+});