fix(components): fix dropdown component id attribute to include index for uniqueness

fix(components): fix dict component id attribute to include index for uniqueness
fix(components): fix code area component id attribute to include id for uniqueness
fix(modals): fix edit node modal dict component id attribute to include id for uniqueness
fix(modals): fix dict area modal save button data-testid attribute for testing
fix(pages): fix node toolbar component class name for more options button
fix(types): add id property to dropdown component type
fix(types): add id property to dict component type
feat(tests): add end-to-end test for dropdown component
feat(tests): add end-to-end test for dict component
feat(tests): add end-to-end test for node toolbar component
feat(tests): add end-to-end test for nested component
feat(tests): add input component test
feat(tests): add toggle component test

src/frontend/tests/end-to-end/dropdownComponent.spec.ts

@@ -0,0 +1,104 @@
+import { expect, test } from "@playwright/test";
+
+test("dropDownComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("amazon");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .getByTestId("llmsAmazon Bedrock")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("dropdown-2-display").click();
+  await page.getByTestId("ai21.j2-grande-instruct-0-option").click();
+
+  let value = await page.getByTestId("dropdown-2-display").innerText();
+  if (value !== "ai21.j2-grande-instruct") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("dropdown-2-display").click();
+  await page.getByTestId("ai21.j2-jumbo-instruct-1-option").click();
+
+  value = await page.getByTestId("dropdown-2-display").innerText();
+  if (value !== "ai21.j2-jumbo-instruct") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  value = await page.getByTestId("dropdown-edit-1-display").innerText();
+  if (value !== "ai21.j2-jumbo-instruct") {
+    expect(false).toBeTruthy();
+  }
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeFalsy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeTruthy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_id"]').isChecked()
+  ).toBeTruthy();
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeFalsy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeTruthy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_id"]').isChecked()
+  ).toBeTruthy();
+
+  await page.getByTestId("dropdown-edit-1-display").click();
+  await page.getByTestId("ai21.j2-ultra-v1-5-option").click();
+
+  value = await page.getByTestId("dropdown-edit-1-display").innerText();
+  if (value !== "ai21.j2-ultra-v1") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  value = await page.getByTestId("dropdown-2-display").innerText();
+  if (value !== "ai21.j2-ultra-v1") {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/end-to-end/nestedComponent.spec.ts

@@ -0,0 +1,239 @@
+import { expect, test } from "@playwright/test";
+
+test("NestedComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("pinecone");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .getByTestId("vectorstoresPinecone")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeFalsy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeTruthy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeTruthy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeFalsy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeFalsy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeTruthy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeTruthy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeFalsy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeFalsy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeTruthy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeTruthy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.getByTestId("div-dict-input").click();
+
+  const spanElement = await page
+    .locator('//*[@id="radix-:r4i:"]/div[2]/div/div/code/div/div/span[1]')
+    .innerHTML();
+
+  if (spanElement !== "yourkey") {
+    expect(true).toBeFalsy();
+  }
+});

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

@@ -23,7 +23,7 @@ test("InputComponent", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="sideChroma"]')
+    .getByTestId("vectorstoresChroma")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -44,7 +44,8 @@ test("InputComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="editAdvancedIcon"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
   expect(
@@ -154,7 +155,8 @@ test("InputComponent", async ({ page }) => {
         '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
       )
       .click();
-    await page.locator('//*[@id="editAdvancedIcon"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showcollection_name"]').click();
     expect(

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

@@ -22,7 +22,7 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.waitForTimeout(2000);
   await page
-    .locator('//*[@id="sideDirectoryLoader"]')
+    .getByTestId("documentloadersDirectoryLoader")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -32,8 +32,8 @@ test("ToggleComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showload_hidden"]').click();
   expect(
@@ -62,8 +62,8 @@ test("ToggleComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   expect(
     await page.locator('//*[@id="toggle-edit-1"]').isChecked()
@@ -144,8 +144,8 @@ test("ToggleComponent", async ({ page }) => {
     await page
       .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
       .click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showload_hidden"]').click();
     expect(