fix(extraSidebarComponent): remove unnecessary empty line

fix(extraSidebarComponent): remove unused variable
feat(extraSidebarComponent): add sectionName prop to SidebarDraggableComponent for better component identification
fix(sideBarDraggableComponent): add sectionName prop to SidebarDraggableComponent for better component identification
test(saveComponents.spec): rename test case to "save group component tests"
test(saveComponents.spec): add test case for saving default component with custom values

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

@@ -89,7 +89,6 @@ export default function ExtraSidebar(): JSX.Element {
       setSearch("");
     }
   }
-
   useEffect(() => {
     if (getFilterEdge.length === 0 && search === "") {
       setFilterData(data);
@@ -254,6 +253,7 @@ export default function ExtraSidebar(): JSX.Element {
                         key={index}
                       >
                         <SidebarDraggableComponent
+                          sectionName={SBSectionName as string}
                           apiClass={dataFilter[SBSectionName][SBItemName]}
                           key={SBItemName}
                           onDragStart={(event) =>

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

@@ -17,6 +17,7 @@ import {
 import { removeCountFromString } from "../../../../../utils/utils";
 
 export default function SidebarDraggableComponent({
+  sectionName,
   display_name,
   itemName,
   error,
@@ -25,6 +26,7 @@ export default function SidebarDraggableComponent({
   apiClass,
   official,
 }: {
+  sectionName: string;
   apiClass: APIClassType;
   display_name: string;
   itemName: string;
@@ -84,7 +86,10 @@ export default function SidebarDraggableComponent({
             );
           }}
         >
-          <div id={display_name} className="side-bar-components-div-form">
+          <div
+            id={sectionName + display_name}
+            className="side-bar-components-div-form"
+          >
             <span className="side-bar-components-text">{display_name}</span>
             <div>
               <SelectTrigger>

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

@@ -3,7 +3,7 @@ import { readFileSync } from "fs";
 
 test.describe("save component tests", () => {
   /// <reference lib="dom"/>
-  test("save component tests", async ({ page }) => {
+  test("save group component tests", async ({ page }) => {
     await page.routeFromHAR("harFiles/langflow.har", {
       url: "**/api/v1/**",
       update: false,
@@ -86,5 +86,78 @@ test.describe("save component tests", () => {
       )
       .click();
     await page.getByLabel("Save").click();
+    await page.getByPlaceholder("Search").click();
+    await page.getByPlaceholder("Search").fill("save");
+    await page.waitForTimeout(2000);
+    await page
+      .locator('//*[@id="custom_componentssave"]')
+      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+    await page.waitForTimeout(2000);
+    expect(
+      (await page.getByTestId(/.*rf__node-AgentInitializer.*/).all()).length
+    ).toBe(2);
+    await page.locator(".isolate > button").first().click();
+    expect(
+      (await page.getByTestId(/.*rf__node-AgentInitializer.*/).all()).length
+    ).toBe(1);
+    await page.getByTestId(/.*rf__node-AgentInitializer.*/).click();
+    await page.getByTestId(/.*rf__node-AgentInitializer.*/).press("Backspace");
+    await page
+      .locator('//*[@id="custom_componentssave"]')
+      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+    await page.getByTestId(/.*rf__node-AgentInitializer.*/).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("Ungroup").click();
+    expect((await page.getByTestId(/.*rf__node-.*/).all()).length).toBe(3);
+    expect(
+      (await page.getByTestId(/.*rf__edge-reactflow.*/).all()).length
+    ).toBe(2);
+  });
+
+  test("save default component with custom values", 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();
+    await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(2000);
+
+    await page.getByPlaceholder("Search").click();
+    await page.getByPlaceholder("Search").fill("Chroma");
+
+    await page
+      .locator('//*[@id="vectorstoresChroma"]')
+      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+    await page.locator("#input-8").click();
+    await page.locator("#input-8").fill("test");
+
+    await page.getByTestId(/.*rf__node-Chroma.*/).click();
+    //more node options
+    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();
+    await page.getByTestId(/.*rf__node-Chroma.*/).press("Backspace");
+    await page.getByPlaceholder("Search").click();
+    await page.getByPlaceholder("Search").fill("");
+    await page.getByPlaceholder("Search").fill("Chroma");
+    await page
+      .locator('//*[@id="custom_componentsChroma"]')
+      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+    expect(await page.locator("#input-8").inputValue()).toBe("test");
   });
 });