fix: update hidden secret_str load_from_db when adding flow (#5289)

* Added updateGlobalVariables again to update the hidden secretstr parameters

* Fixed updateGroupRecursion calls

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

@@ -1,8 +1,8 @@
-import { useGetRefreshFlows } from "@/controllers/API/queries/flows/use-get-refresh-flows";
 import { usePostAddFlow } from "@/controllers/API/queries/flows/use-post-add-flow";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useFolderStore } from "@/stores/foldersStore";
+import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
 import { useTypesStore } from "@/stores/typesStore";
 import { FlowType } from "@/types/flow";
 import {
@@ -28,6 +28,13 @@ const useAddFlow = () => {
 
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
 
+  const unavailableFields = useGlobalVariablesStore(
+    (state) => state.unavailableFields,
+  );
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries,
+  );
+
   const { mutate: postAddFlow } = usePostAddFlow();
 
   const addFlow = async (params?: {
@@ -41,7 +48,12 @@ const useAddFlow = () => {
         ? await processDataFromFlow(flow)
         : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
       flowData?.nodes.forEach((node) => {
-        updateGroupRecursion(node, flowData?.edges);
+        updateGroupRecursion(
+          node,
+          flowData?.edges,
+          unavailableFields,
+          globalVariablesEntries,
+        );
       });
       // Create a new flow with a default name if no flow is provided.
       if (params?.override && flow) {

src/frontend/src/stores/flowStore.ts

@@ -46,6 +46,7 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
+import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
 import { useMessagesStore } from "./messagesStore";
 import { useTypesStore } from "./typesStore";
 
@@ -397,7 +398,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           id: newId,
         },
       };
-      updateGroupRecursion(newNode, selection.edges);
+      updateGroupRecursion(
+        newNode,
+        selection.edges,
+        useGlobalVariablesStore.getState().unavailableFields,
+        useGlobalVariablesStore.getState().globalVariablesEntries,
+      );
 
       // Add the new node to the list of nodes in state
       newNodes = newNodes

src/frontend/src/utils/reactflowUtils.ts

@@ -1625,11 +1625,30 @@ export function isOutputType(type: string): boolean {
   return OUTPUT_TYPES.has(type);
 }
 
-export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
+export function updateGroupRecursion(
+  groupNode: NodeType,
+  edges: Edge[],
+  unavailableFields:
+    | {
+        [name: string]: string;
+      }
+    | undefined,
+  globalVariablesEntries: string[] | undefined,
+) {
+  updateGlobalVariables(
+    groupNode.data.node,
+    unavailableFields,
+    globalVariablesEntries,
+  );
   if (groupNode.data.node?.flow) {
     groupNode.data.node.flow.data!.nodes.forEach((node) => {
       if (node.data.node?.flow) {
-        updateGroupRecursion(node, node.data.node.flow.data!.edges);
+        updateGroupRecursion(
+          node,
+          node.data.node.flow.data!.edges,
+          unavailableFields,
+          globalVariablesEntries,
+        );
       }
     });
     let newFlow = groupNode.data.node!.flow;
@@ -1640,6 +1659,40 @@ export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
     updateEdgesIds(flowEdges, idsMap);
   }
 }
+export function updateGlobalVariables(
+  node: APIClassType | undefined,
+  unavailableFields:
+    | {
+        [name: string]: string;
+      }
+    | undefined,
+  globalVariablesEntries: string[] | undefined,
+) {
+  if (node && node.template) {
+    Object.keys(node.template).forEach((field) => {
+      if (
+        globalVariablesEntries &&
+        node!.template[field].load_from_db &&
+        !globalVariablesEntries.includes(node!.template[field].value)
+      ) {
+        node!.template[field].value = "";
+        node!.template[field].load_from_db = false;
+      }
+      if (
+        !node!.template[field].load_from_db &&
+        node!.template[field].value === "" &&
+        unavailableFields &&
+        Object.keys(unavailableFields).includes(
+          node!.template[field].display_name ?? "",
+        )
+      ) {
+        node!.template[field].value =
+          unavailableFields[node!.template[field].display_name ?? ""];
+        node!.template[field].load_from_db = true;
+      }
+    });
+  }
+}
 
 export function getGroupOutputNodeId(
   flow: FlowType,