From 45e24058bd5394888d74246bd8b4718f285fc3fe Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 7 Feb 2024 14:01:31 -0300
Subject: [PATCH] feat(parameterComponent): add support for global variables in
 parameter input field

This commit adds support for global variables in the parameter input field of the ParameterComponent. It imports the useGlobalVariablesStore hook from the globalVariables store and uses it to access the globalVariablesEntries state. It also imports the setNoticeData function from the alert store to display a notice when a global variable is used as a parameter value.

In the onChange event handler of the input field, the commit checks if the entered value is a global variable by comparing it with the globalVariablesEntries array. If it is a global variable, the commit sets the notice data to inform the user that the real value will be updated during runtime. Additionally, the commit marks the parameter as a global variable by setting the load_from_db property of the template object to true in the setNode function.
---
 .../components/parameterComponent/index.tsx   | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 7201bba3b..1119ebb89 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -24,6 +24,7 @@ import { postCustomComponentUpdate } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
@@ -66,6 +67,10 @@ export default function ParameterComponent({
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
+  const setNoticeData = useAlertStore((state) => state.setNoticeData);
 
   const flow = currentFlow?.data?.nodes ?? null;
 
@@ -408,7 +413,24 @@ export default function ParameterComponent({
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
-                onChange={handleOnNewValue}
+                onChange={(value) => {
+                  handleOnNewValue(value);
+                  if (globalVariablesEntries.includes(value)) {
+                    setNoticeData({
+                      title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
+                    the real value will be update on run`,
+                    });
+                  }
+                  //mark as global variable
+                  setNode(data.id, (oldNode) => {
+                    let newNode = cloneDeep(oldNode);
+                    newNode.data = {
+                      ...newNode.data,
+                    };
+                    newNode.data.node.template[name].load_from_db = true;
+                    return newNode;
+                  });
+                }}
               />
             )}
           </div>