fix: ensure global vars load properly on first flow (#12538)

* fix: Ensure global vars load properly on first flow

* Add tests

---------

Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>

Author: 2 people

src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/__tests__/index.test.tsx

@@ -0,0 +1,107 @@
+import { render, waitFor } from "@testing-library/react";
+import InputGlobalComponent from "..";
+
+const mockUseGetGlobalVariables = jest.fn();
+
+jest.mock("@/controllers/API/queries/variables", () => ({
+  useGetGlobalVariables: () => mockUseGetGlobalVariables(),
+}));
+
+jest.mock("@/shared/components/delete-confirmation-modal", () => () => null);
+
+jest.mock(
+  "@/components/core/GlobalVariableModal/GlobalVariableModal",
+  () =>
+    function GlobalVariableModal({ children }: { children?: React.ReactNode }) {
+      return <>{children}</>;
+    },
+);
+
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+jest.mock("@/components/ui/command", () => ({
+  CommandItem: ({ children }: { children?: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+jest.mock(
+  "@/components/core/parameterRenderComponent/components/inputComponent",
+  () => ({
+    __esModule: true,
+    default: () => null,
+  }),
+);
+
+describe("InputGlobalComponent", () => {
+  const handleOnNewValue = jest.fn();
+
+  const renderComponent = () =>
+    render(
+      <InputGlobalComponent
+        id="global-var-input"
+        value="MISSING_VAR"
+        display_name="API Key"
+        handleOnNewValue={handleOnNewValue}
+        load_from_db
+        password={false}
+        editNode={false}
+        disabled={false}
+      />,
+    );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("clears missing saved variables only after a successful settled fetch", async () => {
+    mockUseGetGlobalVariables.mockReturnValue({
+      data: [],
+      isFetchedAfterMount: true,
+      isFetching: false,
+      isSuccess: true,
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(handleOnNewValue).toHaveBeenCalledWith(
+        { value: "", load_from_db: false },
+        { skipSnapshot: true },
+      );
+    });
+  });
+
+  it("does not clear while a background refetch is still in flight", async () => {
+    mockUseGetGlobalVariables.mockReturnValue({
+      data: [{ name: "OTHER_VAR" }],
+      isFetchedAfterMount: false,
+      isFetching: true,
+      isSuccess: true,
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(handleOnNewValue).not.toHaveBeenCalled();
+    });
+  });
+
+  it("does not clear when the global variables query fails", async () => {
+    mockUseGetGlobalVariables.mockReturnValue({
+      data: undefined,
+      isFetchedAfterMount: true,
+      isFetching: false,
+      isSuccess: false,
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(handleOnNewValue).not.toHaveBeenCalled();
+    });
+  });
+});

src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
 import type { GlobalVariable } from "./types";
 
@@ -41,6 +41,7 @@ export const useInitialLoad = (
   disabled: boolean,
   loadFromDb: boolean,
   globalVariables: GlobalVariable[],
+  canValidateMissingVariable: boolean,
   valueExists: boolean,
   unavailableField: string | null,
   handleOnNewValue: (
@@ -54,17 +55,32 @@ export const useInitialLoad = (
   // Keep the latest handleOnNewValue reference
   handleOnNewValueRef.current = handleOnNewValue;
 
-  // Handle database loading when value doesn't exist
+  // Handle database loading when value doesn't exist.
+  // Guard on the settled query state so we don't clear values while the
+  // global variables query is still in flight, during background refetches,
+  // or after failed fetches.
   useEffect(() => {
-    if (disabled || !loadFromDb || !globalVariables.length || valueExists) {
+    if (
+      disabled ||
+      !loadFromDb ||
+      !canValidateMissingVariable ||
+      !globalVariables.length ||
+      valueExists
+    ) {
       return;
     }
 
     handleOnNewValueRef.current(
       { value: "", load_from_db: false },
       { skipSnapshot: true },
     );
-  }, [disabled, loadFromDb, globalVariables.length, valueExists]);
+  }, [
+    disabled,
+    loadFromDb,
+    canValidateMissingVariable,
+    globalVariables.length,
+    valueExists,
+  ]);
 
   // Handle unavailable field initialization
   useEffect(() => {

src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from "react";
 import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
 import GeneralDeleteConfirmationModal from "@/shared/components/delete-confirmation-modal";
+import { looksLikeVariableName } from "../../../../../utils/reactflowUtils";
 import { cn } from "../../../../../utils/utils";
 import ForwardedIconComponent from "../../../../common/genericIconComponent";
 import { CommandItem } from "../../../../ui/command";
 import GlobalVariableModal from "../../../GlobalVariableModal/GlobalVariableModal";
 import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
 import type { InputGlobalComponentType, InputProps } from "../../types";
-import { looksLikeVariableName } from "../../../../../utils/reactflowUtils";
 import InputComponent from "../inputComponent";
 import {
   useGlobalVariableValue,
@@ -30,7 +30,12 @@ export default function InputGlobalComponent({
   hasRefreshButton = false,
   showParameter = true,
 }: InputProps<string, InputGlobalComponentType>): JSX.Element | null {
-  const { data: globalVariables } = useGetGlobalVariables();
+  const {
+    data: globalVariables,
+    isFetchedAfterMount: isGlobalVariablesFetchedAfterMount,
+    isFetching: isGlobalVariablesFetching,
+    isSuccess: isGlobalVariablesFetchSuccessful,
+  } = useGetGlobalVariables();
 
   // // Safely cast the data to our typed interface
   const typedGlobalVariables: GlobalVariable[] = globalVariables ?? [];
@@ -44,25 +49,46 @@ export default function InputGlobalComponent({
     typedGlobalVariables,
   );
   const unavailableField = useUnavailableField(display_name, currentValue);
+  const canValidateMissingVariable =
+    isGlobalVariablesFetchSuccessful &&
+    !isGlobalVariablesFetching &&
+    isGlobalVariablesFetchedAfterMount;
 
   useInitialLoad(
     isDisabled,
     loadFromDb,
     typedGlobalVariables,
+    canValidateMissingVariable,
     valueExists,
     unavailableField,
     handleOnNewValue,
   );
 
-  // Clean up when selected variable no longer exists
+  // Clean up when selected variable no longer exists.
+  // Only validate against a successful, settled query result for this mount.
+  // This avoids clearing values during the initial fetch, during background
+  // refetches against cached data, or after failed requests.
   useEffect(() => {
-    if (loadFromDb && currentValue && !valueExists && !isDisabled) {
+    if (
+      canValidateMissingVariable &&
+      loadFromDb &&
+      currentValue &&
+      !valueExists &&
+      !isDisabled
+    ) {
       handleOnNewValue(
         { value: "", load_from_db: false },
         { skipSnapshot: true },
       );
     }
-  }, [loadFromDb, currentValue, valueExists, isDisabled, handleOnNewValue]);
+  }, [
+    canValidateMissingVariable,
+    loadFromDb,
+    currentValue,
+    valueExists,
+    isDisabled,
+    handleOnNewValue,
+  ]);
 
   // Create handlers object for better organization
   const handlers: GlobalVariableHandlers = {