From 742f93e229d1a51e4ad64f2fb3b87b84c9bf636f Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 11 Jun 2024 15:46:59 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A1=20(index.tsx):=20remove=20trailing?=
 =?UTF-8?q?=20commas=20for=20cleaner=20code=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ (tests): remove unnecessary keyboard press and fix formatting in chatInputOutputUser.spec.ts
✅ (tests): update selector for copy button in curl_api_generation.spec.ts
✅ (tests): fix formatting in intComponent.spec.ts

✅ (tests): update end-to-end tests for improved stability and clarity

- Remove redundant "Close" button clicks in logs and textInputOutput tests
- Add "more-options-modal" click in promptModalComponent and saveComponents tests
- Replace role-based selectors with test ID selectors for "Copy Code" button
- Update API key section text in userSettings test for consistency
---
 .../components/codeTabsComponent/index.tsx    | 42 +++++++++----------
 .../components/nodeToolbarComponent/index.tsx | 40 +++++++++---------
 .../end-to-end/chatInputOutputUser.spec.ts    | 14 ++-----
 .../end-to-end/curl_api_generation.spec.ts    |  4 +-
 .../tests/end-to-end/intComponent.spec.ts     | 38 ++++++++---------
 src/frontend/tests/end-to-end/logs.spec.ts    |  2 -
 .../end-to-end/promptModalComponent.spec.ts   |  6 ++-
 .../end-to-end/python_api_generation.spec.ts  |  4 +-
 .../tests/end-to-end/saveComponents.spec.ts   |  6 ++-
 .../tests/end-to-end/textInputOutput.spec.ts  | 10 ++---
 .../tests/end-to-end/tweaks_test.spec.ts      |  8 ++--
 .../tests/end-to-end/userSettings.spec.ts     |  4 +-
 12 files changed, 87 insertions(+), 91 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 0611de7cc..885de6442 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -138,7 +138,7 @@ export default function CodeTabsComponent({
               <Label
                 className={cn(
                   "relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
-                  activeTweaks ? "text-primary" : "",
+                  activeTweaks ? "text-primary" : ""
                 )}
                 htmlFor="tweaks-switch"
               >
@@ -193,7 +193,7 @@ export default function CodeTabsComponent({
               <div className="api-modal-according-display">
                 <div
                   className={classNames(
-                    "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll",
+                    "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll"
                   )}
                 >
                   {data?.map((node: any, i) => (
@@ -232,8 +232,8 @@ export default function CodeTabsComponent({
                                         .show &&
                                       LANGFLOW_SUPPORTED_TYPES.has(
                                         node.data.node.template[templateField]
-                                          .type,
-                                      ),
+                                          .type
+                                      )
                                   )
                                   .map((templateField, indx) => {
                                     return (
@@ -291,7 +291,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -337,7 +337,7 @@ export default function CodeTabsComponent({
                                                         target,
                                                         node.data.node.template[
                                                           templateField
-                                                        ],
+                                                        ]
                                                       );
                                                     }}
                                                   />
@@ -390,7 +390,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -427,7 +427,7 @@ export default function CodeTabsComponent({
                                                       e,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   size="small"
@@ -458,7 +458,7 @@ export default function CodeTabsComponent({
                                                     ].fileTypes
                                                   }
                                                   onFileChange={(
-                                                    value: any,
+                                                    value: any
                                                   ) => {
                                                     node.data.node.template[
                                                       templateField
@@ -511,7 +511,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -551,7 +551,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   value={
@@ -613,7 +613,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -659,7 +659,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -705,7 +705,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -737,8 +737,8 @@ export default function CodeTabsComponent({
                                                           ].value,
                                                           type(
                                                             node,
-                                                            templateField,
-                                                          ),
+                                                            templateField
+                                                          )
                                                         )
                                                   }
                                                   duplicateKey={
@@ -747,15 +747,15 @@ export default function CodeTabsComponent({
                                                   onChange={(target) => {
                                                     const valueToNumbers =
                                                       convertValuesToNumbers(
-                                                        target,
+                                                        target
                                                       );
                                                     node.data.node!.template[
                                                       templateField
                                                     ].value = valueToNumbers;
                                                     setErrorDuplicateKey(
                                                       hasDuplicateKeys(
-                                                        valueToNumbers,
-                                                      ),
+                                                        valueToNumbers
+                                                      )
                                                     );
                                                     setData((old) => {
                                                       let newInputList =
@@ -772,7 +772,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   isList={
@@ -820,7 +820,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 90692a853..1d0716d83 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -50,7 +50,7 @@ export default function NodeToolbarComponent({
   const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [showOverrideModal, setShowOverrideModal] = useState(false);
   const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version),
+    createFlowComponent(cloneDeep(data), version)
   );
   const preventDefault = true;
   const isMac = navigator.platform.toUpperCase().includes("MAC");
@@ -67,7 +67,7 @@ export default function NodeToolbarComponent({
         data.node.template[templateField].type === "Any" ||
         data.node.template[templateField].type === "int" ||
         data.node.template[templateField].type === "dict" ||
-        data.node.template[templateField].type === "NestedDict"),
+        data.node.template[templateField].type === "NestedDict")
   ).length;
 
   const hasStore = useStoreStore((state) => state.hasStore);
@@ -220,7 +220,7 @@ export default function NodeToolbarComponent({
   const updateNodeInternals = useUpdateNodeInternals();
 
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
+    (state) => state.setLastCopiedSelection
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -294,7 +294,7 @@ export default function NodeToolbarComponent({
           nodes,
           edges,
           setNodes,
-          setEdges,
+          setEdges
         );
         break;
       case "override":
@@ -321,14 +321,14 @@ export default function NodeToolbarComponent({
             y: 10,
             paneX: nodes.find((node) => node.id === data.id)?.position.x,
             paneY: nodes.find((node) => node.id === data.id)?.position.y,
-          },
+          }
         );
         break;
     }
   };
 
   const isSaved = flows.some((flow) =>
-    Object.values(flow).includes(data.node?.display_name!),
+    Object.values(flow).includes(data.node?.display_name!)
   );
 
   function displayShortcut({
@@ -346,7 +346,7 @@ export default function NodeToolbarComponent({
       }
     });
     const filteredShortcut = fixedShortcut.filter(
-      (key) => !key.toLowerCase().includes("shift"),
+      (key) => !key.toLowerCase().includes("shift")
     );
     let shortcutWPlus: string[] = [];
     if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@@ -370,7 +370,7 @@ export default function NodeToolbarComponent({
   const setNode = useFlowStore((state) => state.setNode);
 
   const handleOnNewValue = (
-    newValue: string | string[] | boolean | Object[],
+    newValue: string | string[] | boolean | Object[]
   ): void => {
     if (data.node!.template[name].value !== newValue) {
       takeSnapshot();
@@ -426,8 +426,8 @@ export default function NodeToolbarComponent({
             <ShadTooltip
               content={displayShortcut(
                 shortcuts.find(
-                  ({ name }) => name.split(" ")[0].toLowerCase() === "code",
-                )!,
+                  ({ name }) => name.split(" ")[0].toLowerCase() === "code"
+                )!
               )}
               side="top"
             >
@@ -446,8 +446,8 @@ export default function NodeToolbarComponent({
             <ShadTooltip
               content={displayShortcut(
                 shortcuts.find(
-                  ({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
-                )!,
+                  ({ name }) => name.split(" ")[0].toLowerCase() === "advanced"
+                )!
               )}
               side="top"
             >
@@ -458,7 +458,7 @@ export default function NodeToolbarComponent({
                 onClick={() => {
                   setShowModalAdvanced(true);
                 }}
-                data-testid="code-button-modal"
+                data-testid="advanced-button-modal"
               >
                 <IconComponent name="Settings2" className="h-4 w-4" />
               </button>
@@ -486,14 +486,14 @@ export default function NodeToolbarComponent({
           <ShadTooltip
             content={displayShortcut(
               shortcuts.find(
-                ({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
-              )!,
+                ({ name }) => name.split(" ")[0].toLowerCase() === "freeze"
+              )!
             )}
             side="top"
           >
             <button
               className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -514,7 +514,7 @@ export default function NodeToolbarComponent({
                 className={cn(
                   "h-4 w-4 transition-all",
                   // TODO UPDATE THIS COLOR TO BE A VARIABLE
-                  frozen ? "animate-wiggle text-ice" : "",
+                  frozen ? "animate-wiggle text-ice" : ""
                 )}
               />
             </button>
@@ -542,7 +542,7 @@ export default function NodeToolbarComponent({
                   <div
                     data-testid="more-options-modal"
                     className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
                     )}
                   >
                     <IconComponent
@@ -710,7 +710,9 @@ export default function NodeToolbarComponent({
                   />{" "}
                   <span className="">Delete</span>{" "}
                   <span
-                    className={` absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
+                    className={` absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2] ${
+                      deleteIsFocus ? " " : "bg-muted"
+                    }`}
                   >
                     <IconComponent
                       name="Delete"
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
index ce1a9ce27..1b27fa11f 100644
--- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
@@ -52,13 +52,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   expect(valueUser).toBe("User");
   expect(valueAI).toBe("AI");
 
-  await page.keyboard.press("Escape");
-
   await page
     .getByTestId("textarea-input_value")
     .nth(1)
     .fill(
-      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
     );
   await page.getByTestId("icon-LucideSend").click();
   await page.getByText("Close", { exact: true }).click();
@@ -89,9 +87,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     await page
       .getByText(
         "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
-        { exact: true },
+        { exact: true }
       )
-      .isVisible(),
+      .isVisible()
   );
 });
 
@@ -195,17 +193,13 @@ test("user must be able to send an image on chat", async ({ page }) => {
   await page.getByText("Chat Input", { exact: true }).click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
-  await page.getByTestId("toggle-edit-return_record").click();
-  expect(
-    await page.getByTestId("toggle-edit-return_record").isChecked(),
-  ).toBeTruthy();
   await page.getByText("Save Changes").click();
 
   await page.getByText("Playground", { exact: true }).click();
 
   const jsonContent = readFileSync(
     "src/frontend/tests/end-to-end/assets/chain.png",
-    "utf-8",
+    "utf-8"
   );
 
   // Create the DataTransfer and File
diff --git a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts b/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
index 74e3ee11e..4e8f3b8d9 100644
--- a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
+++ b/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
@@ -21,9 +21,9 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.waitForTimeout(2000);
   await page.getByText("API", { exact: true }).click();
   await page.getByRole("tab", { name: "cURL" }).click();
-  await page.getByRole("button", { name: "Copy Code" }).click();
+  await page.getByTestId("icon-Copy").last().click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent = await handle.jsonValue();
   expect(clipboardContent.length).toBeGreaterThan(0);
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 6ec81819a..50fb0d648 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -87,77 +87,77 @@ test("IntComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showmodel_kwargs"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmodel_name"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+    await page.locator('//*[@id="showmodel_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_base"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
-  ).toBeFalsy();
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked()
+  ).toBeTruthy();
 
   await page.locator('//*[@id="showopenai_api_key"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_key"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showtemperature"]').click();
   expect(
-    await page.locator('//*[@id="showtemperature"]').isChecked(),
+    await page.locator('//*[@id="showtemperature"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showmodel_kwargs"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showmodel_name"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+    await page.locator('//*[@id="showmodel_name"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showopenai_api_base"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
-  ).toBeTruthy();
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked()
+  ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_key"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_key"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showtemperature"]').click();
   expect(
-    await page.locator('//*[@id="showtemperature"]').isChecked(),
+    await page.locator('//*[@id="showtemperature"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmodel_kwargs"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showmodel_name"]').click();
   expect(
-    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+    await page.locator('//*[@id="showmodel_name"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showopenai_api_base"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
-  ).toBeFalsy();
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked()
+  ).toBeTruthy();
 
   await page.locator('//*[@id="showopenai_api_key"]').click();
   expect(
-    await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
+    await page.locator('//*[@id="showopenai_api_key"]').isChecked()
   ).toBeFalsy();
 
   await page.locator('//*[@id="showtemperature"]').click();
   expect(
-    await page.locator('//*[@id="showtemperature"]').isChecked(),
+    await page.locator('//*[@id="showtemperature"]').isChecked()
   ).toBeFalsy();
 
   await page.getByText("Save Changes", { exact: true }).click();
@@ -172,7 +172,7 @@ test("IntComponent", async ({ page }) => {
 
     await page.locator('//*[@id="showtimeout"]').click();
     expect(
-      await page.locator('//*[@id="showtimeout"]').isChecked(),
+      await page.locator('//*[@id="showtimeout"]').isChecked()
     ).toBeTruthy();
 
     const valueEditNode = await page
diff --git a/src/frontend/tests/end-to-end/logs.spec.ts b/src/frontend/tests/end-to-end/logs.spec.ts
index 24abd96bf..38310e2e3 100644
--- a/src/frontend/tests/end-to-end/logs.spec.ts
+++ b/src/frontend/tests/end-to-end/logs.spec.ts
@@ -30,8 +30,6 @@ test("should able to see and interact with logs", async ({ page }) => {
   await page.getByText("No Data Available", { exact: true }).isVisible();
   await page.keyboard.press("Escape");
 
-  await page.getByText("Close").last().click();
-
   await page
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 8c6a5ab84..75b8513a6 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -72,6 +72,8 @@ test("PromptTemplateComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
+  await page.getByTestId("more-options-modal").click();
+
   await page.getByTestId("save-button-modal").click();
 
   const replace = await page.getByTestId("replace-button").isVisible();
@@ -138,7 +140,7 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showtemplate"]').click();
   expect(
-    await page.locator('//*[@id="showtemplate"]').isChecked(),
+    await page.locator('//*[@id="showtemplate"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showprompt"]').click();
@@ -158,7 +160,7 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.locator('//*[@id="showtemplate"]').click();
   expect(
-    await page.locator('//*[@id="showtemplate"]').isChecked(),
+    await page.locator('//*[@id="showtemplate"]').isChecked()
   ).toBeTruthy();
 
   await page.locator('//*[@id="showprompt"]').click();
diff --git a/src/frontend/tests/end-to-end/python_api_generation.spec.ts b/src/frontend/tests/end-to-end/python_api_generation.spec.ts
index 2857c9eb5..e9ad74578 100644
--- a/src/frontend/tests/end-to-end/python_api_generation.spec.ts
+++ b/src/frontend/tests/end-to-end/python_api_generation.spec.ts
@@ -21,9 +21,9 @@ test("python_api_generation", async ({ page, context }) => {
   await page.waitForTimeout(2000);
   await page.getByText("API", { exact: true }).click();
   await page.getByRole("tab", { name: "Python API" }).click();
-  await page.getByRole("button", { name: "Copy Code" }).click();
+  await page.getByTestId("icon-Copy").click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent = await handle.jsonValue();
   expect(clipboardContent.length).toBeGreaterThan(0);
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 624bb5b2e..f8484c722 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -27,7 +27,7 @@ test.describe("save component tests", () => {
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "src/frontend/tests/end-to-end/assets/flow_group_test.json",
-      "utf-8",
+      "utf-8"
     );
 
     // Create the DataTransfer and File
@@ -49,7 +49,7 @@ test.describe("save component tests", () => {
       "drop",
       {
         dataTransfer,
-      },
+      }
     );
 
     const genericNoda = page.getByTestId("div-generic-node");
@@ -84,6 +84,8 @@ test.describe("save component tests", () => {
     }
 
     await page.getByTestId("title-Group").click();
+    await page.getByTestId("more-options-modal").click();
+
     await page.getByTestId("icon-SaveAll").click();
 
     const replaceButton = await page.getByTestId("replace-button").isVisible();
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 3da77e867..7fe74aacb 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -60,7 +60,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Click and hold on the first element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
     )
     .hover();
   await page.mouse.down();
@@ -68,7 +68,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Move to the second element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div'
     )
     .hover();
 
@@ -92,7 +92,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Click and hold on the first element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div'
     )
     .hover();
   await page.mouse.down();
@@ -100,7 +100,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   // Move to the second element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div',
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div'
     )
     .hover();
 
@@ -137,8 +137,6 @@ test("TextInputOutputComponent", async ({ page }) => {
 
   await page.keyboard.press("Escape");
 
-  await page.getByText("Close", { exact: true }).last().click();
-
   await page
     .getByTestId("popover-anchor-input-input_value")
     .nth(0)
diff --git a/src/frontend/tests/end-to-end/tweaks_test.spec.ts b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
index 586d0d9e1..b3d396f55 100644
--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
@@ -22,9 +22,9 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.waitForTimeout(2000);
   await page.getByText("API", { exact: true }).click();
   await page.getByRole("tab", { name: "cURL" }).click();
-  await page.getByRole("button", { name: "Copy Code" }).click();
+  await page.getByTestId("icon-Copy").click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent = await handle.jsonValue();
   const oldValue = clipboardContent;
@@ -48,9 +48,9 @@ test("curl_api_generation", async ({ page, context }) => {
     .first()
     .fill("teste");
   await page.getByRole("tab", { name: "cURL" }).click();
-  await page.getByRole("button", { name: "Copy Code" }).click();
+  await page.getByTestId("icon-Copy").click();
   const handle2 = await page.evaluateHandle(() =>
-    navigator.clipboard.readText(),
+    navigator.clipboard.readText()
   );
   const clipboardContent2 = await handle2.jsonValue();
   const newValue = clipboardContent2;
diff --git a/src/frontend/tests/end-to-end/userSettings.spec.ts b/src/frontend/tests/end-to-end/userSettings.spec.ts
index 1228fffb4..df760cbca 100644
--- a/src/frontend/tests/end-to-end/userSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/userSettings.spec.ts
@@ -108,8 +108,8 @@ test("should interact with API Keys", async ({ page }) => {
   await page.waitForTimeout(2000);
   await page.getByTestId("user-profile-settings").click();
   await page.getByText("Settings").click();
-  await page.getByText("API Keys").click();
-  await page.getByText("API Keys", { exact: true }).nth(1).isVisible();
+  await page.getByText("Langflow API").click();
+  await page.getByText("Langflow API", { exact: true }).nth(1).isVisible();
   await page.getByText("Add New").click();
   await page.getByPlaceholder("Insert a name for your API Key").isVisible();