Fix: Fixes part of text input output component test where component popover elements are block others

README.md

@@ -105,7 +105,6 @@ Alternatively, click the **"Open in Cloud Shell"** button below to launch Google
 
 Use this template to deploy Langflow 1.0 on Railway:
 
-
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
 
 ## Deploy on Render

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "1.0.2"
+version = "1.0.3"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <[email protected]>"]
 maintainers = [

src/backend/base/langflow/main.py

@@ -42,7 +42,7 @@ async def dispatch(self, request: Request, call_next):
         async def message_poller(sentinel, handler_task, request):
             nonlocal queue
             while True:
-                message = await request.receive
+                message = await request.receive()
                 if message["type"] == "http.disconnect":
                     handler_task.cancel()
                     return sentinel  # Break the loop

src/backend/base/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow-base"
-version = "0.0.78"
+version = "0.0.79"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <[email protected]>"]
 maintainers = [

src/frontend/src/App.tsx

@@ -103,13 +103,6 @@ export default function App() {
       if (isAuthenticated) {
         try {
           await setupAxiosDefaults();
-
-          const res = await getGlobalVariables();
-          setGlobalVariables(res);
-
-          checkHasStore();
-          fetchApiData();
-
           resolve();
         } catch (error) {
           console.error("Failed to fetch data:", error);

src/frontend/src/contexts/authContext.tsx

@@ -1,9 +1,15 @@
 import { createContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Cookies from "universal-cookie";
-import { getLoggedUser, requestLogout } from "../controllers/API";
+import {
+  getGlobalVariables,
+  getLoggedUser,
+  requestLogout,
+} from "../controllers/API";
 import useAlertStore from "../stores/alertStore";
 import { useFolderStore } from "../stores/foldersStore";
+import { useGlobalVariablesStore } from "../stores/globalVariablesStore/globalVariables";
+import { useStoreStore } from "../stores/storeStore";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
 
@@ -45,6 +51,11 @@ export function AuthProvider({ children }): React.ReactElement {
   );
 
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const setGlobalVariables = useGlobalVariablesStore(
+    (state) => state.setGlobalVariables,
+  );
+  const checkHasStore = useStoreStore((state) => state.checkHasStore);
+  const fetchApiData = useStoreStore((state) => state.fetchApiData);
 
   useEffect(() => {
     const storedAccessToken = cookies.get("access_token_lf");
@@ -66,8 +77,11 @@ export function AuthProvider({ children }): React.ReactElement {
         setUserData(user);
         const isSuperUser = user!.is_superuser;
         setIsAdmin(isSuperUser);
-
         getFoldersApi(true, true);
+        const res = await getGlobalVariables();
+        setGlobalVariables(res);
+        checkHasStore();
+        fetchApiData();
       })
       .catch((error) => {
         setLoading(false);

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

@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
+import { focusElementsOnBoard, offsetElements } from "../reactflowE2ETestUtils";
 
 test("TextInputOutputComponent", async ({ page }) => {
   if (!process.env.CI) {
@@ -56,22 +57,40 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  // Click and hold on the first element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-    )
-    .hover();
-  await page.mouse.down();
+  const component1 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]',
+  );
 
-  // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  const element1 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
+  );
 
-  // Release the mouse
+  const component2 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]',
+  );
+
+  const element2 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
+  );
+
+  await offsetElements({
+    sourceElement: component1,
+    targetElement: component2,
+    page,
+  });
+
+  await focusElementsOnBoard({
+    page,
+  });
+
+  // ensure elements popups are not blocking
+  component1.blur();
+  component2.blur();
+
+  // Click and hold on the first element and move to the second element
+  await element1?.dragTo(element2);
+
+  // ensure the mouse button is up
   await page.mouse.up();
 
   await page.getByPlaceholder("Search").click();

src/frontend/tests/reactflowE2ETestUtils.ts

@@ -0,0 +1,26 @@
+export const offsetElements = async ({
+    sourceElement,
+    targetElement,
+    page,
+  }) => {
+    // Get bounding boxes
+    const box1 = await sourceElement.boundingBox();
+    const box2 = await targetElement.boundingBox();
+
+    await page.mouse.move((box2?.x || 0) + 5, (box2?.y || 0) + 5);
+    await page.mouse.down();
+
+    // Move to the right of the source element
+    await page.mouse.move(
+      (box2?.x || 0) + (box2?.width || 0) / 2 + (box1?.width || 0),
+      box2?.y || 0,
+    );
+    await page.mouse.up();
+  };
+
+  export const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.locator(
+      '//*[@id="react-flow-id"]/div/div[2]/button[3]',
+    );
+    focusElements.click();
+  };