Merge branch 'main' into refactorGetFile

.github/workflows/ci.yml

@@ -23,13 +23,12 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
-
 jobs:
   set-ci-condition:
     name: Should Run CI
     runs-on: ubuntu-latest
     outputs:
-      should-run-ci:  ${{ (contains( github.event.pull_request.labels.*.name, 'lgtm') && github.event.pull_request.draft == false) || (github.event_name == 'workflow_dispatch' || github.event_name == 'workflow_call') }}
+      should-run-ci: ${{ (contains( github.event.pull_request.labels.*.name, 'lgtm') && github.event.pull_request.draft == false) || (github.event_name == 'workflow_dispatch' || github.event_name == 'workflow_call') }}
     steps:
       #  Do anything just to make the job run
       - run: echo "Debug CI Condition"
@@ -71,6 +70,8 @@ jobs:
     name: Run Frontend Tests
     if: ${{ needs.path-filter.outputs.python == 'true' || needs.path-filter.outputs.frontend == 'true' || needs.path-filter.outputs.tests == 'true' }}
     uses: ./.github/workflows/typescript_test.yml
+    with:
+      tests_folder: "tests/end-to-end"
     secrets:
       OPENAI_API_KEY: "${{ secrets.OPENAI_API_KEY }}"
       STORE_API_KEY: "${{ secrets.STORE_API_KEY }}"
@@ -91,7 +92,14 @@ jobs:
   # https://github.com/langchain-ai/langchain/blob/master/.github/workflows/check_diffs.yml
   ci_success:
     name: "CI Success"
-    needs: [test-backend, test-frontend, lint-backend, test-docs-build, set-ci-condition ]
+    needs:
+      [
+        test-backend,
+        test-frontend,
+        lint-backend,
+        test-docs-build,
+        set-ci-condition,
+      ]
     if: always()
     runs-on: ubuntu-latest
     env:
@@ -104,4 +112,4 @@ jobs:
           echo $JOBS_JSON
           echo $RESULTS_JSON
           echo "Exiting with $EXIT_CODE"
-          exit $EXIT_CODE
+          exit $EXIT_CODE

.github/workflows/typescript_test.yml

@@ -7,12 +7,23 @@ on:
         required: true
       STORE_API_KEY:
         required: true
+    inputs:
+      tests_folder:
+        description: "(Optional) Tests to run"
+        required: false
+        type: string
+        default: "tests"
   workflow_dispatch:
     inputs:
       branch:
         description: "(Optional) Branch to checkout"
         required: false
         type: string
+      tests_folder:
+        description: "(Optional) Tests to run"
+        required: false
+        type: string
+        default: "tests"
 
 env:
   POETRY_VERSION: "1.8.3"
@@ -29,30 +40,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex:
-          [
-            1,
-            2,
-            3,
-            4,
-            5,
-            6,
-            7,
-            8,
-            9,
-            10,
-            11,
-            12,
-            13,
-            14,
-            15,
-            16,
-            17,
-            18,
-            19,
-            20,
-          ]
-        shardTotal: [20]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
     env:
       OPENAI_API_KEY: ${{ inputs.openai_api_key || secrets.OPENAI_API_KEY }}
       STORE_API_KEY: ${{ inputs.store_api_key || secrets.STORE_API_KEY }}
@@ -138,7 +127,7 @@ jobs:
           max_attempts: 2
           command: |
             cd src/frontend
-            npx playwright test --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
+            npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
 
       - name: Upload blob report to GitHub Actions Artifacts
         if: always()
@@ -158,8 +147,8 @@ jobs:
       EXIT_CODE: ${{!contains(needs.setup-and-test.result, 'failure') && !contains(needs.setup-and-test.result, 'cancelled') && '0' || '1'}}
     steps:
       - name: "Should Merge Reports"
-      # If the CI was successful, we don't need to merge the reports
-      # so we can skip all the steps below
+        # If the CI was successful, we don't need to merge the reports
+        # so we can skip all the steps below
         id: should_merge_reports
         run: |
           if [ "$EXIT_CODE" == "0" ]; then

src/frontend/src/App.tsx

@@ -13,7 +13,7 @@ import {
   useRefreshAccessToken,
 } from "./controllers/API/queries/auth";
 import { useGetVersionQuery } from "./controllers/API/queries/version";
-import { setupAxiosDefaults } from "./controllers/API/utils";
+import useSaveConfig from "./hooks/use-save-config";
 import router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import useAuthStore from "./stores/authStore";
@@ -56,7 +56,7 @@ export default function App() {
           login(user["access_token"], "auto");
           setUserData(user);
           setAutoLogin(true);
-          fetchAllData();
+          refreshStars();
           // mutateRefresh({ refresh_token: refreshToken });
         }
       },
@@ -70,7 +70,7 @@ export default function App() {
               logout();
             } else {
               mutateRefresh({ refresh_token: refreshToken });
-              fetchAllData();
+              refreshStars();
               getUser();
             }
           }
@@ -96,25 +96,7 @@ export default function App() {
     return () => clearInterval(intervalId);
   }, [isLoginPage]);
 
-  const fetchAllData = async () => {
-    setTimeout(async () => {
-      await Promise.all([refreshStars(), fetchData()]);
-    }, 1000);
-  };
-
-  const fetchData = async () => {
-    return new Promise<void>(async (resolve, reject) => {
-      if (isAuthenticated) {
-        try {
-          await setupAxiosDefaults();
-          resolve();
-        } catch (error) {
-          console.error("Failed to fetch data:", error);
-          reject();
-        }
-      }
-    });
-  };
+  useSaveConfig();
 
   return (
     //need parent component with width and height

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -49,7 +49,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const getTypes = useTypesStore((state) => state.getTypes);
   const saveFlow = useSaveFlow();
-  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVING !== "false";
+  const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
   const updatedAt = currentSavedFlow?.updated_at;
@@ -58,7 +58,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
 
   const changesNotSaved =
     customStringify(currentFlow) !== customStringify(currentSavedFlow) &&
-    !shouldAutosave;
+    !autoSaving;
 
   const savedText =
     updatedAt && changesNotSaved
@@ -144,7 +144,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               <IconComponent name="Settings2" className="header-menu-options" />
               Settings
             </DropdownMenuItem>
-            {!shouldAutosave && (
+            {!autoSaving && (
               <DropdownMenuItem onClick={handleSave} className="cursor-pointer">
                 <ToolbarSelectItem
                   value="Save"
@@ -252,11 +252,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
         <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
       </div>
       <div className="flex items-center">
-        {!shouldAutosave && (
+        {!autoSaving && (
           <Button
             variant="primary"
             size="icon"
-            disabled={shouldAutosave || !changesNotSaved || isBuilding}
+            disabled={autoSaving || !changesNotSaved || isBuilding}
             className={cn("mr-1 h-9 px-2")}
             onClick={handleSave}
           >
@@ -265,7 +265,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
         )}
         <ShadTooltip
           content={
-            shouldAutosave ? (
+            autoSaving ? (
               SAVED_HOVER +
               (updatedAt
                 ? new Date(updatedAt).toLocaleString("en-US", {

src/frontend/src/controllers/API/helpers/constants.ts

@@ -18,6 +18,7 @@ export const URLs = {
   FLOWS: `flows`,
   FOLDERS: `folders`,
   VARIABLES: `variables`,
+  CONFIG: `config`,
 } as const;
 
 export function getURL(key: keyof typeof URLs, params: any = {}) {

src/frontend/src/controllers/API/queries/config/use-get-config.ts

@@ -0,0 +1,25 @@
+import { useQueryFunctionType } from "../../../../types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export interface ConfigResponse {
+  frontend_timeout: number;
+  auto_saving: boolean;
+}
+
+export const useGetConfigQuery: useQueryFunctionType<
+  undefined,
+  ConfigResponse
+> = (options) => {
+  const { query } = UseRequestProcessor();
+
+  const getConfigFn = async () => {
+    const response = await api.get<ConfigResponse>(`${getURL("CONFIG")}`);
+    return response["data"];
+  };
+
+  const queryResult = query(["useGetConfigQuery"], getConfigFn, options);
+
+  return queryResult;
+};

src/frontend/src/hooks/flows/use-autosave-flow.ts

@@ -1,13 +1,14 @@
 import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { useDebounce } from "../use-debounce";
 import useSaveFlow from "./use-save-flow";
 
 const useAutoSaveFlow = () => {
   const saveFlow = useSaveFlow();
-  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVING !== "false";
+  const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
 
-  const autoSaveFlow = shouldAutosave
+  const autoSaveFlow = autoSaving
     ? useDebounce((flow?: FlowType) => {
         saveFlow(flow);
       }, SAVE_DEBOUNCE_TIME)

src/frontend/src/hooks/use-save-config.ts

@@ -0,0 +1,22 @@
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import axios from "axios";
+import { useEffect } from "react";
+import { useGetConfigQuery } from "../controllers/API/queries/config/use-get-config";
+
+function useSaveConfig() {
+  const { data } = useGetConfigQuery();
+  const setAutoSaving = useFlowsManagerStore((state) => state.setAutoSaving);
+
+  useEffect(() => {
+    if (data) {
+      const timeoutInMilliseconds = data.frontend_timeout
+        ? data.frontend_timeout * 1000
+        : 30000;
+      axios.defaults.baseURL = "";
+      axios.defaults.timeout = timeoutInMilliseconds;
+      setAutoSaving(data.auto_saving);
+    }
+  }, [data]);
+}
+
+export default useSaveConfig;

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

@@ -33,7 +33,7 @@ export default function FlowSettingsModal({
   );
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
-  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVING !== "false";
+  const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
   function handleClick(): void {
     setIsSaving(true);
     if (!currentFlow) return;
@@ -42,7 +42,7 @@ export default function FlowSettingsModal({
     newFlow.description = description;
     newFlow.endpoint_name =
       endpoint_name && endpoint_name.length > 0 ? endpoint_name : null;
-    if (shouldAutosave) {
+    if (autoSaving) {
       saveFlow(newFlow)
         ?.then(() => {
           setOpen(false);

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

@@ -39,7 +39,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
   const updatedAt = currentSavedFlow?.updated_at;
 
-  const shouldAutosave = process.env.LANGFLOW_AUTO_SAVING !== "false";
+  const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
 
   const handleSave = () => {
     saveFlow().then(() => (blocker.proceed ? blocker.proceed() : null));
@@ -136,7 +136,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
                 })
               : undefined
           }
-          autoSave={shouldAutosave}
+          autoSave={autoSaving}
         />
       )}
     </>

src/frontend/src/stores/flowsManagerStore.ts

@@ -24,6 +24,8 @@ const past = {};
 const future = {};
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
+  autoSaving: true,
+  setAutoSaving: (autoSaving: boolean) => set({ autoSaving }),
   examples: [],
   setExamples: (examples: FlowType[]) => {
     set({ examples });

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -1,6 +1,8 @@
 import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
+  autoSaving: boolean;
+  setAutoSaving: (autoSaving: boolean) => void;
   getFlowById: (id: string) => FlowType | undefined;
   flows: Array<FlowType> | undefined;
   setFlows: (flows: FlowType[]) => void;

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

@@ -1,6 +1,8 @@
 import { expect, test } from "@playwright/test";
 
-test("RetrievalQA - Tooltip", async ({ page }) => {
+test("user must see on handle hover a tooltip with possibility connections", async ({
+  page,
+}) => {
   await page.goto("/");
   await page.waitForTimeout(1000);
 

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

@@ -1,6 +1,8 @@
 import { expect, test } from "@playwright/test";
 
-test("LLMChain - Filter", async ({ page }) => {
+test("user must see on handle click the possibility connections - LLMChain", async ({
+  page,
+}) => {
   await page.goto("/");
   await page.waitForTimeout(2000);
 

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

@@ -1,6 +1,8 @@
 import { expect, test } from "@playwright/test";
 
-test("GlobalVariables", async ({ page }) => {
+test("user must be able to save or delete a global variable", async ({
+  page,
+}) => {
   await page.goto("/");
   await page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/chatInputOutputUser-shard-2.spec.ts → src/frontend/tests/scheduled-end-to-end/chatInputOutputUser-shard-2.spec.ts

@@ -1,6 +1,5 @@
 import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
-import { readFileSync } from "fs";
 import path from "path";
 
 test("user must interact with chat with Input/Output", async ({ page }) => {