diff --git a/src/frontend/src/hooks/flows/use-add-flow.ts b/src/frontend/src/hooks/flows/use-add-flow.ts index 8c3771d23..3fbbcb32a 100644 --- a/src/frontend/src/hooks/flows/use-add-flow.ts +++ b/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) { diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index caa315d13..0b53ec3b9 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/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((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 diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index caadb160b..b32994ace 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/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,