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.

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>