Merge branch 'fix/minor_bugs' into fix/api_settings

src/frontend/playwright.config.ts

@@ -15,13 +15,13 @@ dotenv.config({ path: path.resolve(__dirname, "../../.env") });
 export default defineConfig({
   testDir: "./tests",
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: 1,
+  workers: 5,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   timeout: 120 * 1000,
   // reporter: [
@@ -52,18 +52,18 @@ export default defineConfig({
       },
     },
 
-    {
+    // {
-      name: "firefox",
+    //   name: "firefox",
-      use: {
+    //   use: {
-        ...devices["Desktop Firefox"],
+    //     ...devices["Desktop Firefox"],
-        launchOptions: {
+    //     launchOptions: {
-          firefoxUserPrefs: {
+    //       firefoxUserPrefs: {
-            "dom.events.asyncClipboard.readText": true,
+    //         "dom.events.asyncClipboard.readText": true,
-            "dom.events.testing.asyncClipboard": true,
+    //         "dom.events.testing.asyncClipboard": true,
-          },
+    //       },
-        },
+    //     },
-      },
+    //   },
-    },
+    // },
   ],
   webServer: [
     {

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -7,7 +7,6 @@ import { useTypesStore } from "../../stores/typesStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
-import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
@@ -65,7 +64,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
         let responseError = error as ResponseErrorDetailAPI;
         setErrorData({
           title: "Error creating variable",
-          list: [responseError.response.data.detail ?? "Unknown error"],
+          list: [responseError?.response?.data?.detail ?? "Unknown error"],
         });
       });
   }
@@ -142,7 +141,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
           ></InputComponent>
         </div>
       </BaseModal.Content>
-      <BaseModal.Footer submit={{ label: "Save Variable" }} />
+      <BaseModal.Footer
+        submit={{ label: "Save Variable", dataTestId: "save-variable-btn" }}
+      />
     </BaseModal>
   );
 }

src/frontend/src/components/inputListComponent/index.tsx

@@ -31,7 +31,7 @@ export default function InputListComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3"
+        "flex flex-col gap-3",
       )}
     >
       {value.map((singleValue, idx) => {
@@ -55,10 +55,11 @@ export default function InputListComponent({
             />
             {idx === value.length - 1 ? (
               <button
-                onClick={() => {
+                onClick={(e) => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.push("");
                   onChange(newInputList);
+                  e.preventDefault();
                 }}
                 data-testid={
                   `input-list-plus-btn${
@@ -79,10 +80,11 @@ export default function InputListComponent({
                     editNode ? "-edit" : ""
                   }_${componentName}-` + idx
                 }
-                onClick={() => {
+                onClick={(e) => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.splice(idx, 1);
                   onChange(newInputList);
+                  e.preventDefault();
                 }}
                 disabled={disabled || playgroundDisabled}
               >

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -100,6 +100,7 @@ const SideBarFoldersButtonsComponent = ({
           size="icon"
           className="px-2"
           onClick={addNewFolder}
+          data-testid="add-folder-button"
         >
           <ForwardedIconComponent name="FolderPlus" className="w-4" />
         </Button>
@@ -108,6 +109,7 @@ const SideBarFoldersButtonsComponent = ({
           size="icon"
           className="px-2"
           onClick={handleUploadFlowsToFolder}
+          data-testid="upload-folder-button"
         >
           <ForwardedIconComponent name="Upload" className="w-4" />
         </Button>
@@ -258,6 +260,7 @@ const SideBarFoldersButtonsComponent = ({
                         }}
                         value={foldersNames[item.name]}
                         id={`input-folder-${item.name}`}
+                        data-testid={`input-folder`}
                       />
                     </div>
                   ) : (

src/frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
   {
     variants: {
       variant: {
@@ -54,7 +54,16 @@ function toTitleCase(text: string) {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { className, variant, size, loading, asChild = false, children, ...props },
+    {
+      className,
+      variant,
+      size,
+      loading,
+      disabled,
+      asChild = false,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const Comp = asChild ? Slot : "button";
@@ -66,14 +75,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <>
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
+          disabled={loading || disabled}
           ref={ref}
           {...props}
         >
           {loading ? (
-            <span className={cn("relative")}>
+            <span className="relative">
-              <span className={loading ? "invisible" : "hidden"}>
+              <span className="invisible">{newChildren}</span>
-                {newChildren}
-              </span>
               <span className="absolute inset-0 flex items-center justify-center">
                 <ForwardedIconComponent
                   name={"Loader2"}

src/frontend/src/controllers/API/api.tsx

@@ -2,11 +2,11 @@ import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { renewAccessToken } from ".";
-import { AUTHORIZED_DUPLICATE_REQUESTS } from "../../constants/constants";
 import { BuildStatus } from "../../constants/enums";
 import { AuthContext } from "../../contexts/authContext";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests";
 
 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
@@ -81,28 +81,12 @@ function ApiInterceptor() {
     // Request interceptor to add access token to every request
     const requestInterceptor = api.interceptors.request.use(
       (config) => {
-        const lastUrl = localStorage.getItem("lastUrlCalled");
+        const checkRequest = checkDuplicateRequestAndStoreRequest(config);
-        const lastMethodCalled = localStorage.getItem("lastMethodCalled");
 
-        const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
+        if (!checkRequest) {
-          config?.url!.includes(request),
+          return Promise.reject("Duplicate request.");
-        );
-
-        if (
-          config?.url === lastUrl &&
-          !isContained &&
-          lastMethodCalled === config.method
-        ) {
-          return Promise.reject("Duplicate request");
         }
 
-        localStorage.setItem("lastUrlCalled", config.url ?? "");
-        localStorage.setItem("lastMethodCalled", config.method ?? "");
-        localStorage.setItem(
-          "lastRequestData",
-          JSON.stringify(config.data) ?? "",
-        );
-
         const accessToken = cookies.get("access_token_lf");
         if (accessToken && !isAuthorizedURL(config?.url)) {
           config.headers["Authorization"] = `Bearer ${accessToken}`;

src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts

@@ -0,0 +1,30 @@
+import { AUTHORIZED_DUPLICATE_REQUESTS } from "../../../constants/constants";
+
+export function checkDuplicateRequestAndStoreRequest(config) {
+  const lastUrl = localStorage.getItem("lastUrlCalled");
+  const lastMethodCalled = localStorage.getItem("lastMethodCalled");
+  const lastRequestTime = localStorage.getItem("lastRequestTime");
+
+  const currentTime = Date.now();
+
+  const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
+    config?.url!.includes(request),
+  );
+
+  if (
+    config?.url === lastUrl &&
+    !isContained &&
+    lastMethodCalled === config.method &&
+    lastMethodCalled === "get" && // Assuming you want to check only for GET requests
+    lastRequestTime &&
+    currentTime - parseInt(lastRequestTime, 10) < 800
+  ) {
+    return false;
+  }
+
+  localStorage.setItem("lastUrlCalled", config.url ?? "");
+  localStorage.setItem("lastMethodCalled", config.method ?? "");
+  localStorage.setItem("lastRequestTime", currentTime.toString());
+
+  return true;
+}

src/frontend/src/customNodes/genericNode/index.tsx

@@ -77,10 +77,10 @@ export default function GenericNode({
     // first check if data.type in NATIVE_CATEGORIES
     // if not return
     if (!data.node?.template?.code?.value) return;
-    const thisNodeTemplate = templates[data.type].template;
+    const thisNodeTemplate = templates[data.type]?.template;
     // if the template does not have a code key
     // return
-    if (!thisNodeTemplate.code) return;
+    if (!thisNodeTemplate?.code) return;
     const currentCode = thisNodeTemplate.code?.value;
     const thisNodesCode = data.node!.template?.code?.value;
     const componentsToIgnore = ["Custom Component"];
@@ -416,6 +416,7 @@ export default function GenericNode({
                 "generic-node-title-arrangement rounded-full" +
                 (!showNode && " justify-center ")
               }
+              data-testid="generic-node-title-arrangement"
             >
               {iconNodeRender()}
               {showNode && (

src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx

@@ -40,7 +40,7 @@ const useFetchDataOnMount = (
 
           setErrorData({
             title: "Error while updating the Component",
-            list: [responseError.response.data.detail ?? "Unknown error"],
+            list: [responseError?.response?.data?.detail ?? "Unknown error"],
           });
         }
         setIsLoading(false);

src/frontend/src/customNodes/hooks/use-handle-new-value.tsx

@@ -44,7 +44,9 @@ const useHandleOnNewValue = (
         let responseError = error as ResponseErrorTypeAPI;
         setErrorData({
           title: "Error while updating the Component",
-          list: [responseError.response.data.detail.error ?? "Unknown error"],
+          list: [
+            responseError?.response?.data?.detail.error ?? "Unknown error",
+          ],
         });
       }
       setIsLoading(false);

src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx

@@ -26,7 +26,7 @@ const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => {
 
       setErrorData({
         title: "Error while updating the Component",
-        list: [responseError.response.data.detail ?? "Unknown error"],
+        list: [responseError?.response?.data?.detail ?? "Unknown error"],
       });
     }
     setIsLoading(false);

src/frontend/src/modals/baseModal/index.tsx

@@ -72,6 +72,7 @@ const Footer: React.FC<{
     icon?: ReactNode;
     loading?: boolean;
     disabled?: boolean;
+    dataTestId?: string;
   };
 }> = ({ children, submit }) => {
   return submit ? (
@@ -84,25 +85,12 @@ const Footer: React.FC<{
           </Button>
         </DialogClose>
         <Button
+          data-testid={submit.dataTestId}
           type="submit"
-          disabled={submit.loading || submit.disabled}
+          loading={submit.loading}
-          className="relative"
         >
-          <div
+          {submit.icon && submit.icon}
-            className={cn(
+          {submit.label}
-              submit.loading ? "opacity-100" : "opacity-0",
-              "absolute self-center",
-            )}
-          >
-            <ForwardedIconComponent
-              name={"Loader2"}
-              className={"animate-spin"}
-            />
-          </div>
-          <div className={cn(submit.loading ? "opacity-0" : "opacity-100")}>
-            {submit.icon && submit.icon}
-            {submit.label}
-          </div>
         </Button>
       </div>
     </div>

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -36,7 +35,7 @@ export default function FlowSettingsModal({
       .catch((err) => {
         useAlertStore.getState().setErrorData({
           title: "Error while saving changes",
-          list: [(err as AxiosError).response?.data.detail ?? ""],
+          list: [err?.response?.data.detail ?? ""],
         });
         console.error(err);
       });
@@ -79,6 +78,7 @@ export default function FlowSettingsModal({
         submit={{
           label: "Save",
           disabled: nameLists.includes(name) && name !== currentFlow!.name,
+          dataTestId: "save-flow-settings",
         }}
       />
     </BaseModal>

src/frontend/src/modals/shareModal/index.tsx

@@ -263,9 +263,7 @@ export default function ShareModal({
 
         <BaseModal.Footer
           submit={{
-            label: `Share ${
+            label: `Share ${is_component ? " Component" : " Flow"}`,
-              !loadingNames && (!is_component ? " Flow" : " Component")
-            }`,
             loading: loadingNames,
           }}
         >

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

@@ -183,10 +183,10 @@ export default function NodeToolbarComponent({
       case "update":
         takeSnapshot();
         // to update we must get the code from the templates in useTypesStore
-        const thisNodeTemplate = templates[data.type].template;
+        const thisNodeTemplate = templates[data.type]?.template;
         // if the template does not have a code key
         // return
-        if (!thisNodeTemplate.code) return;
+        if (!thisNodeTemplate?.code) return;
 
         const currentCode = thisNodeTemplate.code.value;
         if (data.node) {

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -1,6 +1,7 @@
 import * as Form from "@radix-ui/react-form";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import GradientChooserComponent from "../../../../components/gradientChooserComponent";
 import InputComponent from "../../../../components/inputComponent";
@@ -36,13 +37,12 @@ import {
 } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useStoreStore } from "../../../../stores/storeStore";
 import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../../../types/components";
 import { gradients } from "../../../../utils/styleUtils";
-import { useStoreStore } from "../../../../stores/storeStore";
-import { useParams } from "react-router-dom";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(
@@ -332,7 +332,11 @@ export default function GeneralPage() {
               </CardContent>
               <CardFooter className="border-t px-6 py-4">
                 <Form.Submit asChild>
-                  <Button loading={loadingApiKey} type="submit">
+                  <Button
+                    loading={loadingApiKey}
+                    type="submit"
+                    data-testid="api-key-save-button-store"
+                  >
                     Save
                   </Button>
                 </Form.Submit>

src/frontend/src/routes.tsx

@@ -1,183 +1,206 @@
+import { Suspense, lazy } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { ProtectedAdminRoute } from "./components/authAdminGuard";
 import { ProtectedRoute } from "./components/authGuard";
 import { ProtectedLoginRoute } from "./components/authLoginGuard";
 import { CatchAllRoute } from "./components/catchAllRoutes";
+import LoadingComponent from "./components/loadingComponent";
 import { StoreGuard } from "./components/storeGuard";
-import AdminPage from "./pages/AdminPage";
+
-import LoginAdminPage from "./pages/AdminPage/LoginPage";
+const AdminPage = lazy(() => import("./pages/AdminPage"));
-import DeleteAccountPage from "./pages/DeleteAccountPage";
+const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
-import FlowPage from "./pages/FlowPage";
+const ApiKeysPage = lazy(
-import LoginPage from "./pages/LoginPage";
+  () => import("./pages/SettingsPage/pages/ApiKeysPage"),
-import MyCollectionComponent from "./pages/MainPage/components/myCollectionComponent";
+);
-import HomePage from "./pages/MainPage/pages/mainPage";
+const DeleteAccountPage = lazy(() => import("./pages/DeleteAccountPage"));
-import PlaygroundPage from "./pages/Playground";
+const FlowPage = lazy(() => import("./pages/FlowPage"));
-import SettingsPage from "./pages/SettingsPage";
+const LoginPage = lazy(() => import("./pages/LoginPage"));
-import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
+const MyCollectionComponent = lazy(
-import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
+  () => import("./pages/MainPage/components/myCollectionComponent"),
-import ApiKeysPage from "./pages/SettingsPage/pages/ApiKeysPage";
+);
-import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
+const HomePage = lazy(() => import("./pages/MainPage/pages/mainPage"));
-import SignUp from "./pages/SignUpPage";
+const PlaygroundPage = lazy(() => import("./pages/Playground"));
-import StorePage from "./pages/StorePage";
+const SettingsPage = lazy(() => import("./pages/SettingsPage"));
-import ViewPage from "./pages/ViewPage";
+const GeneralPage = lazy(
+  () => import("./pages/SettingsPage/pages/GeneralPage"),
+);
+const GlobalVariablesPage = lazy(
+  () => import("./pages/SettingsPage/pages/GlobalVariablesPage"),
+);
+const ShortcutsPage = lazy(
+  () => import("./pages/SettingsPage/pages/ShortcutsPage"),
+);
+const SignUp = lazy(() => import("./pages/SignUpPage"));
+const StorePage = lazy(() => import("./pages/StorePage"));
+const ViewPage = lazy(() => import("./pages/ViewPage"));
 
 const Router = () => {
   return (
-    <Routes>
+    <Suspense
-      <Route
+      fallback={
-        path="/"
+        <div className="loading-page-panel">
-        element={
+          <LoadingComponent remSize={50} />
-          <ProtectedRoute>
+        </div>
-            <HomePage />
+      }
-          </ProtectedRoute>
+    >
-        }
+      <Routes>
-      >
-        <Route index element={<Navigate replace to={"all"} />} />
         <Route
-          path="flows/*"
+          path="/"
-          element={<MyCollectionComponent key="flows" type="flow" />}
-        />
-        <Route
-          path="components/*"
-          element={<MyCollectionComponent key="components" type="component" />}
-        />
-        <Route
-          path="all/*"
-          element={<MyCollectionComponent key="all" type="all" />}
-        />
-      </Route>
-      <Route
-        path="/settings"
-        element={
-          <ProtectedRoute>
-            <SettingsPage />
-          </ProtectedRoute>
-        }
-      >
-        <Route index element={<Navigate replace to={"general"} />} />
-        <Route path="global-variables" element={<GlobalVariablesPage />} />
-        <Route path="api-keys" element={<ApiKeysPage />} />
-        <Route path="general/:scrollId?" element={<GeneralPage />} />
-        <Route path="shortcuts" element={<ShortcutsPage />} />
-      </Route>
-      <Route
-        path="/store"
-        element={
-          <ProtectedRoute>
-            <StoreGuard>
-              <StorePage />
-            </StoreGuard>
-          </ProtectedRoute>
-        }
-      />
-      <Route
-        path="/store/:id/"
-        element={
-          <ProtectedRoute>
-            <StoreGuard>
-              <StorePage />
-            </StoreGuard>
-          </ProtectedRoute>
-        }
-      />
-      <Route path="/playground/:id/">
-        <Route
-          path=""
           element={
             <ProtectedRoute>
-              <PlaygroundPage />
+              <HomePage />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<Navigate replace to={"all"} />} />
+          <Route
+            path="flows/*"
+            element={<MyCollectionComponent key="flows" type="flow" />}
+          />
+          <Route
+            path="components/*"
+            element={
+              <MyCollectionComponent key="components" type="component" />
+            }
+          />
+          <Route
+            path="all/*"
+            element={<MyCollectionComponent key="all" type="all" />}
+          />
+        </Route>
+        <Route
+          path="/settings"
+          element={
+            <ProtectedRoute>
+              <SettingsPage />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<Navigate replace to={"general"} />} />
+          <Route path="global-variables" element={<GlobalVariablesPage />} />
+          <Route path="api-keys" element={<ApiKeysPage />} />
+          <Route path="general/:scrollId?" element={<GeneralPage />} />
+          <Route path="shortcuts" element={<ShortcutsPage />} />
+        </Route>
+        <Route
+          path="/store"
+          element={
+            <ProtectedRoute>
+              <StoreGuard>
+                <StorePage />
+              </StoreGuard>
             </ProtectedRoute>
           }
         />
-      </Route>
+        <Route
-      <Route path="/flow/:id/">
+          path="/store/:id/"
+          element={
+            <ProtectedRoute>
+              <StoreGuard>
+                <StorePage />
+              </StoreGuard>
+            </ProtectedRoute>
+          }
+        />
+        <Route path="/playground/:id/">
+          <Route
+            path=""
+            element={
+              <ProtectedRoute>
+                <PlaygroundPage />
+              </ProtectedRoute>
+            }
+          />
+        </Route>
+        <Route path="/flow/:id/">
+          <Route
+            path="*"
+            element={
+              <ProtectedRoute>
+                <FlowPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path=""
+            element={
+              <ProtectedRoute>
+                <FlowPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="view"
+            element={
+              <ProtectedRoute>
+                <ViewPage />
+              </ProtectedRoute>
+            }
+          />
+        </Route>
         <Route
           path="*"
           element={
             <ProtectedRoute>
-              <FlowPage />
+              <CatchAllRoute />
             </ProtectedRoute>
           }
         />
+
         <Route
-          path=""
+          path="/login"
           element={
-            <ProtectedRoute>
+            <ProtectedLoginRoute>
-              <FlowPage />
+              <LoginPage />
-            </ProtectedRoute>
+            </ProtectedLoginRoute>
           }
         />
         <Route
-          path="view"
+          path="/signup"
           element={
-            <ProtectedRoute>
+            <ProtectedLoginRoute>
-              <ViewPage />
+              <SignUp />
-            </ProtectedRoute>
+            </ProtectedLoginRoute>
           }
         />
-      </Route>
-      <Route
-        path="*"
-        element={
-          <ProtectedRoute>
-            <CatchAllRoute />
-          </ProtectedRoute>
-        }
-      />
-
-      <Route
-        path="/login"
-        element={
-          <ProtectedLoginRoute>
-            <LoginPage />
-          </ProtectedLoginRoute>
-        }
-      />
-      <Route
-        path="/signup"
-        element={
-          <ProtectedLoginRoute>
-            <SignUp />
-          </ProtectedLoginRoute>
-        }
-      />
-      <Route
-        path="/login/admin"
-        element={
-          <ProtectedLoginRoute>
-            <LoginAdminPage />
-          </ProtectedLoginRoute>
-        }
-      />
-
-      <Route
-        path="/admin"
-        element={
-          <ProtectedAdminRoute>
-            <AdminPage />
-          </ProtectedAdminRoute>
-        }
-      />
-
-      <Route path="/account">
         <Route
-          path="delete"
+          path="/login/admin"
           element={
-            <ProtectedRoute>
+            <ProtectedLoginRoute>
-              <DeleteAccountPage />
+              <LoginAdminPage />
-            </ProtectedRoute>
+            </ProtectedLoginRoute>
           }
-        ></Route>
+        />
+
         <Route
-          path="api-keys"
+          path="/admin"
           element={
-            <ProtectedRoute>
+            <ProtectedAdminRoute>
-              <ApiKeysPage />
+              <AdminPage />
-            </ProtectedRoute>
+            </ProtectedAdminRoute>
           }
-        ></Route>
+        />
-      </Route>
+
-    </Routes>
+        <Route path="/account">
+          <Route
+            path="delete"
+            element={
+              <ProtectedRoute>
+                <DeleteAccountPage />
+              </ProtectedRoute>
+            }
+          ></Route>
+          <Route
+            path="api-keys"
+            element={
+              <ProtectedRoute>
+                <ApiKeysPage />
+              </ProtectedRoute>
+            }
+          ></Route>
+        </Route>
+      </Routes>
+    </Suspense>
   );
 };
 

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

@@ -23,8 +23,8 @@ test("chat_io_teste", async ({ page }) => {
   }
 
   const jsonContent = readFileSync(
-    "tests/end-to-end/assets/ChatTest.json",
+    "src/frontend/tests/end-to-end/assets/ChatTest.json",
-    "utf-8"
+    "utf-8",
   );
 
   await page.getByTestId("blank-flow").click();
@@ -47,7 +47,7 @@ test("chat_io_teste", async ({ page }) => {
     "drop",
     {
       dataTransfer,
-    }
+    },
   );
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();

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

@@ -57,8 +57,11 @@ test("user must interact with chat with Input/Output", async ({ 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();
+
   await page
     .getByTestId("popover-anchor-input-sender_name")
     .nth(1)
@@ -68,7 +71,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .nth(0)
     .fill("TestSenderNameAI");
 
-  await page.getByText("Playground", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).last().click();
   await page.getByTestId("icon-LucideSend").click();
 
   valueUser = await page
@@ -85,8 +88,8 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     await page
       .getByText(
         "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
-        { exact: true }
+        { exact: true },
       )
-      .isVisible()
+      .isVisible(),
   );
 });

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

@@ -26,7 +26,7 @@ test.describe("drag and drop test", () => {
     await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.
     const jsonContent = readFileSync(
-      "tests/end-to-end/assets/collection.json",
+      "src/frontend/tests/end-to-end/assets/collection.json",
       "utf-8",
     );
 

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

@@ -170,7 +170,7 @@ test("dropDownComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   value = await page.getByTestId("dropdown-model_id").innerText();
   if (value !== "ai21.j2-mid-v1") {

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

@@ -148,7 +148,6 @@ test("LLMChain - Filter", async ({ page }) => {
   await expect(page.getByTestId("model_specsChatOllama")).toBeVisible();
   await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
   await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
-  await expect(page.getByTestId("model_specsCohere")).toBeVisible();
   await expect(
     page.getByTestId("model_specsGoogle Generative AI"),
   ).toBeVisible();
@@ -176,7 +175,6 @@ test("LLMChain - Filter", async ({ page }) => {
   await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
   await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
   await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsCohere")).not.toBeVisible();
 
   await page
     .locator(

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

@@ -60,26 +60,20 @@ test("FloatComponent", async ({ page }) => {
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
-  await page.locator('//*[@id="showcache"]').click();
-  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
-
-  await page.locator('//*[@id="showcache"]').click();
-  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
-
   await page.getByTestId("showformat").click();
   expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeTruthy();
 
   await page.getByTestId("showformat").click();
   expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeFalsy();
 
+  await page.getByTestId("showmirostat").click();
+  expect(await page.locator('//*[@id="showmirostat"]').isChecked()).toBeFalsy();
+
   await page.getByTestId("showmirostat").click();
   expect(
     await page.locator('//*[@id="showmirostat"]').isChecked(),
   ).toBeTruthy();
 
-  await page.getByTestId("showmirostat").click();
-  expect(await page.locator('//*[@id="showmirostat"]').isChecked()).toBeFalsy();
-
   await page.getByTestId("showmirostat_eta").click();
   expect(
     await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
@@ -138,7 +132,7 @@ test("FloatComponent", async ({ page }) => {
     await page.locator('//*[@id="showrepeat_last_n"]').isChecked(),
   ).toBeFalsy();
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   const plusButtonLocator = page.locator('//*[@id="float-input"]');
   const elementCount = await plusButtonLocator?.count();
@@ -154,7 +148,7 @@ test("FloatComponent", async ({ page }) => {
       await page.locator('//*[@id="showtemperature"]').isChecked(),
     ).toBeTruthy();
 
-    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.getByText("Save Changes", { exact: true }).click();
     await page.locator('//*[@id="float-input"]').click();
     await page.locator('//*[@id="float-input"]').fill("3");
 

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

@@ -44,7 +44,8 @@ test("flowSettings", async ({ page }) => {
       "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
     );
 
-  await page.getByText("Save").last().click();
+  await page.getByTestId("save-flow-settings").click();
+  await page.getByTestId("save-flow-settings").click();
 
   await page.waitForTimeout(1000);
 

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

@@ -31,33 +31,16 @@ test("CRUD folders", async ({ page }) => {
   await page.getByText("All").first().isVisible();
   await page.getByText("Select All").isVisible();
 
-  await page.getByText("New Folder", { exact: true }).last().click();
+  await page.getByTestId("add-folder-button").click();
-  await page.getByPlaceholder("Insert a name for the folder").fill("test");
+  await page.getByText("New Folder").last().isVisible();
-  await page
-    .getByPlaceholder("Insert a description for the folder")
-    .fill("test");
-  await page.getByText("Save Folder").click();
-
   await page.waitForTimeout(1000);
-  await page.getByText("Folder created succefully").isVisible();
+  await page.getByText("New Folder").last().dblclick();
-  await page.getByText("test").last().isVisible();
+  await page.getByTestId("input-folder").fill("new folder test name");
-  await page
+  await page.keyboard.press("Enter");
-    .getByText("test")
+  await page.getByText("new folder test name").last().isVisible();
-    .last()
-    .hover()
-    .then(async () => {
-      await page.getByTestId("icon-pencil").last().click();
-    });
-
-  await page.getByPlaceholder("Insert a name for the folder").fill("test edit");
-  await page
-    .getByPlaceholder("Insert a description for the folder")
-    .fill("test edit");
-  await page.getByText("Edit Folder").last().click();
-  await page.getByText("test edit").last().isVisible();
 
   await page
-    .getByText("test edit")
+    .getByText("new folder test name")
     .last()
     .hover()
     .then(async () => {
@@ -74,7 +57,7 @@ test("add folder by drag and drop", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   const jsonContent = readFileSync(
-    "tests/end-to-end/assets/collection.json",
+    "src/frontend/tests/end-to-end/assets/collection.json",
     "utf-8",
   );
 
@@ -131,17 +114,13 @@ test("change flow folder", async ({ page }) => {
   await page.getByText("All").first().isVisible();
   await page.getByText("Select All").isVisible();
 
-  await page.getByText("New Folder", { exact: true }).last().click();
+  await page.getByTestId("add-folder-button").click();
-  await page.getByPlaceholder("Insert a name for the folder").fill("test");
+  await page.getByText("New Folder").last().isVisible();
-  await page
-    .getByPlaceholder("Insert a description for the folder")
-    .fill("test");
-
-  await page.getByText("Save Folder").click();
-
   await page.waitForTimeout(1000);
-  await page.getByText("Folder created succefully").isVisible();
+  await page.getByText("New Folder").last().dblclick();
-  await page.getByText("test").last().isVisible();
+  await page.getByTestId("input-folder").fill("new folder test name");
+  await page.keyboard.press("Enter");
+  await page.getByText("new folder test name").last().isVisible();
 
   await page.getByText("My Projects").last().click();
   await page.getByText("Basic Prompting").first().hover();

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

@@ -69,7 +69,6 @@ test("GlobalVariables", async ({ page }) => {
   await page.getByText("Save Variable", { exact: true }).click();
   expect(page.getByText(credentialName, { exact: true })).not.toBeNull();
   await page.getByText(credentialName, { exact: true }).isVisible();
-  await page.getByText("Save Variable", { exact: true }).click();
   await page.waitForTimeout(2000);
 
   await page

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

@@ -73,9 +73,9 @@ test("InputComponent", async ({ page }) => {
     await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
   ).toBeTruthy();
 
-  await page.locator('//*[@id="showchroma_server_port"]').click();
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
   ).toBeTruthy();
 
   await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
@@ -110,9 +110,9 @@ test("InputComponent", async ({ page }) => {
     await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
   ).toBeFalsy();
 
-  await page.locator('//*[@id="showchroma_server_port"]').click();
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
@@ -138,7 +138,7 @@ test("InputComponent", async ({ page }) => {
     .getByTestId("popover-anchor-input-collection_name-edit")
     .fill("NEW_collection_name_test_123123123!@#$&*(&%$@ÇÇÇÀõe");
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   const plusButtonLocator = page.getByTestId("input-collection_name");
   const elementCount = await plusButtonLocator?.count();
@@ -155,7 +155,7 @@ test("InputComponent", async ({ page }) => {
       await page.locator('//*[@id="showcollection_name"]').isChecked(),
     ).toBeTruthy();
 
-    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.getByText("Save Changes", { exact: true }).click();
 
     let value = await page
       .getByTestId("popover-anchor-input-collection_name")

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

@@ -41,19 +41,19 @@ test("InputListComponent", async ({ page }) => {
   await page.getByTestId("edit-button-modal").click();
 
   expect(
-    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked(),
   ).toBeFalsy();
   await page.getByTestId("showmetadata_indexing_exclude").click();
   expect(
-    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked(),
   ).toBeTruthy();
 
   expect(
-    await page.getByTestId("showmetadata_indexing_include").isChecked()
+    await page.getByTestId("showmetadata_indexing_include").isChecked(),
   ).toBeFalsy();
   await page.getByTestId("showmetadata_indexing_include").click();
   expect(
-    await page.getByTestId("showmetadata_indexing_include").isChecked()
+    await page.getByTestId("showmetadata_indexing_include").isChecked(),
   ).toBeTruthy();
 
   await page
@@ -68,7 +68,7 @@ test("InputListComponent", async ({ page }) => {
     .getByTestId("input-list-input-edit_metadata_indexing_include-1")
     .fill("test1 test1 test1 test1");
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   await page
     .getByTestId("input-list-input_metadata_indexing_include-0")
@@ -93,7 +93,7 @@ test("InputListComponent", async ({ page }) => {
     .click();
 
   const plusButtonLocator = page.getByTestId(
-    "input-list-plus-btn_metadata_indexing_include-1"
+    "input-list-plus-btn_metadata_indexing_include-1",
   );
   const elementCount = await plusButtonLocator?.count();
 
@@ -164,12 +164,12 @@ test("InputListComponent", async ({ page }) => {
     .click();
 
   const plusButtonLocatorEdit0 = await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-0"
+    "input-list-plus-btn-edit_metadata_indexing_include-0",
   );
   const elementCountEdit0 = await plusButtonLocatorEdit0?.count();
 
   const plusButtonLocatorEdit2 = await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-2"
+    "input-list-plus-btn-edit_metadata_indexing_include-2",
   );
   const elementCountEdit2 = await plusButtonLocatorEdit2?.count();
 
@@ -178,13 +178,13 @@ test("InputListComponent", async ({ page }) => {
   }
 
   const minusButtonLocatorEdit1 = await page.getByTestId(
-    "input-list-minus-btn-edit_metadata_indexing_include-1"
+    "input-list-minus-btn-edit_metadata_indexing_include-1",
   );
 
   const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count();
 
   const minusButtonLocatorEdit2 = await page.getByTestId(
-    "input-list-minus-btn-edit_metadata_indexing_include-2"
+    "input-list-minus-btn-edit_metadata_indexing_include-2",
   );
 
   const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count();

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

@@ -39,6 +39,12 @@ test("IntComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByTestId("showmax_tokens").click();
+
+  await page.getByText("Save Changes", { exact: true }).click();
   await page.getByTestId("int-input-max_tokens").click();
   await page
     .getByTestId("int-input-max_tokens")
@@ -154,7 +160,7 @@ test("IntComponent", async ({ page }) => {
     await page.locator('//*[@id="showtemperature"]').isChecked(),
   ).toBeFalsy();
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   const plusButtonLocator = page.getByTestId("int-input-max_tokens");
   const elementCount = await plusButtonLocator?.count();
@@ -177,7 +183,7 @@ test("IntComponent", async ({ page }) => {
       expect(false).toBeTruthy();
     }
 
-    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.getByText("Save Changes", { exact: true }).click();
     await page.getByTestId("int-input-max_tokens").click();
     await page.getByTestId("int-input-max_tokens").fill("3");
 

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

@@ -83,7 +83,7 @@ test("KeypairListComponent", async ({ page }) => {
   expect(
     await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
   ).toBeFalsy();
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
   const elementCount = await plusButtonLocator?.count();
@@ -108,7 +108,7 @@ test("KeypairListComponent", async ({ page }) => {
     const elementKeyCount = await keyPairVerification?.count();
 
     if (elementKeyCount === 1) {
-      await page.locator('//*[@id="saveChangesBtn"]').click();
+      await page.getByText("Save Changes", { exact: true }).click();
 
       await page.getByTestId("div-generic-node").click();
 

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

@@ -47,11 +47,11 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
-  await page.getByTestId("title-Ollama").click();
+  await page.getByTestId("generic-node-title-arrangement").click();
   await page.keyboard.press(`${control}+Shift+A`);
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
-  await page.getByTestId("title-Ollama").click();
+  await page.getByTestId("generic-node-title-arrangement").click();
   await page.keyboard.press(`${control}+d`);
 
   let numberOfNodes = await page.getByTestId("title-Ollama")?.count();
@@ -71,7 +71,7 @@ test("LangflowShortcuts", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page.getByTestId("title-Ollama").click();
+  await page.getByTestId("generic-node-title-arrangement").click();
   await page.keyboard.press(`${control}+c`);
 
   await page.getByTestId("title-Ollama").click();

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

@@ -30,6 +30,8 @@ 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 ?? "");

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

@@ -189,5 +189,5 @@ test("NestedComponent", async ({ page }) => {
     await page.locator('//*[@id="showtext_key"]').isChecked(),
   ).toBeTruthy();
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 });

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

@@ -164,7 +164,7 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.locator('//*[@id="showprompt"]').click();
   expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy();
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();

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

@@ -26,7 +26,7 @@ test.describe("save component tests", () => {
 
     // Read your file into a buffer.
     const jsonContent = readFileSync(
-      "tests/end-to-end/assets/flow_group_test.json",
+      "src/frontend/tests/end-to-end/assets/flow_group_test.json",
       "utf-8",
     );
 

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

@@ -141,7 +141,6 @@ test("should add API-KEY", async ({ page }) => {
   await page.waitForTimeout(2000);
   await page.getByText("API Key Error").isVisible();
 
-  await page.getByTestId("api-key-button-store").click();
   await page
     .getByPlaceholder("Insert your API Key")
     .fill(process.env.STORE_API_KEY ?? "");
@@ -174,6 +173,9 @@ test("should like and add components and flows", async ({ page }) => {
   await page.waitForTimeout(2000);
   await page.getByText("API Key Error").isHidden();
 
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("button-store").click();
   await page.waitForTimeout(5000);
 
   const likedValue = await page

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

@@ -132,11 +132,13 @@ test("TextInputOutputComponent", async ({ page }) => {
 
   await page.getByText("Outputs", { exact: true }).nth(1).click();
   await page.getByText("Text Output", { exact: true }).nth(2).click();
-  let contentOutput = await page.getByPlaceholder("Empty").inputValue();
+  let contentOutput = await page.getByPlaceholder("Enter text...").inputValue();
   expect(contentOutput).not.toBe(null);
 
   await page.keyboard.press("Escape");
 
+  await page.getByText("Close", { exact: true }).last().click();
+
   await page
     .getByTestId("popover-anchor-input-input_value")
     .nth(0)
@@ -151,6 +153,6 @@ test("TextInputOutputComponent", async ({ page }) => {
 
   await page.getByText("Outputs", { exact: true }).nth(1).click();
   await page.getByText("Text Output", { exact: true }).nth(2).click();
-  contentOutput = await page.getByPlaceholder("Empty").inputValue();
+  contentOutput = await page.getByPlaceholder("Enter text...").inputValue();
   expect(contentOutput).not.toBe(null);
 });

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

@@ -48,7 +48,7 @@ test("ToggleComponent", async ({ page }) => {
     await page.locator('//*[@id="showload_hidden"]').isChecked(),
   ).toBeTruthy();
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   await page.getByTitle("fit view").click();
 
@@ -130,7 +130,7 @@ test("ToggleComponent", async ({ page }) => {
     await page.locator('//*[@id="showuse_multithreading"]').isChecked(),
   ).toBeFalsy();
 
-  await page.locator('//*[@id="saveChangesBtn"]').click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   const plusButtonLocator = page.getByTestId("toggle-load_hidden");
   const elementCount = await plusButtonLocator?.count();
@@ -151,7 +151,7 @@ test("ToggleComponent", async ({ page }) => {
       await page.getByTestId("toggle-edit-load_hidden").isChecked(),
     ).toBeTruthy();
 
-    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.getByText("Save Changes", { exact: true }).click();
 
     await page.getByTestId("toggle-load_hidden").click();
     expect(