fix(parameterComponent): add options prop to ParameterComponent to display global variables in dropdown

feat(codeTabsComponent): add support for global variables in InputComponent and DictComponent
feat(inputComponent): remove dependency on globalVariablesStore and use options prop instead
feat(editNodeModal): add support for global variables in InputComponent

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -413,6 +413,7 @@ export default function ParameterComponent({
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
+                options={globalVariablesEntries}
                 onChange={(value) => {
                   handleOnNewValue(value);
                   if (globalVariablesEntries.includes(value)) {

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -28,8 +28,10 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
+import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { codeTabsPropsType } from "../../types/components";
 import {
   convertObjToArray,
@@ -54,8 +56,12 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const dark = useDarkStore((state) => state.dark);
   const unselectAll = useFlowStore((state) => state.unselectAll);
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
 
   const setNodes = useFlowStore((state) => state.setNodes);
+  const setNoticeData = useAlertStore((state) => state.setNoticeData);
 
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
@@ -347,6 +353,9 @@ export default function CodeTabsComponent({
                                                   </div>
                                                 ) : (
                                                   <InputComponent
+                                                    options={
+                                                      globalVariablesEntries
+                                                    }
                                                     editNode={true}
                                                     disabled={false}
                                                     password={
@@ -376,6 +385,16 @@ export default function CodeTabsComponent({
                                                         ].data.node.template[
                                                           templateField
                                                         ].value = target;
+                                                        if (
+                                                          globalVariablesEntries.includes(
+                                                            target
+                                                          )
+                                                        ) {
+                                                          setNoticeData({
+                                                            title: `the value inserted in ${templateField} is a global variable, \n 
+                                                          the real value will be update on run`,
+                                                          });
+                                                        }
                                                         return newInputList;
                                                       });
                                                       tweaks.buildTweakObject!(

src/frontend/src/components/inputComponent/index.tsx

@@ -1,7 +1,6 @@
 import { Listbox, Transition } from "@headlessui/react";
 import * as Form from "@radix-ui/react-form";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
@@ -27,12 +26,7 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
-  const globalVariablesEntries = useGlobalVariablesStore(
+  const [filteredOpts, setFilteredValue] = useState<string[]>(options);
-    (state) => state.globalVariablesEntries
-  );
-  const [filteredOpts, setFilteredValue] = useState<string[]>(
-    globalVariablesEntries
-  );
 
   // Clear component state
   useEffect(() => {
@@ -197,19 +191,21 @@ export default function InputComponent({
         </>
       )}
 
-      <span
+      {options.length > 0 && (
-        className={
+        <span
-          password
+          className={
-            ? "dropdown-component-arrow  right-8"
+            password
-            : "dropdown-component-arrow right-0"
+              ? "dropdown-component-arrow  right-8"
-        }
+              : "dropdown-component-arrow right-0"
-      >
+          }
-        <IconComponent
+        >
-          name="ChevronsUpDown"
+          <IconComponent
-          className="dropdown-component-arrow-color"
+            name="ChevronsUpDown"
-          aria-hidden="true"
+            className="dropdown-component-arrow-color"
-        />
+            aria-hidden="true"
-      </span>
+          />
+        </span>
+      )}
 
       {password && (
         <button

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -28,7 +28,9 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
   limitScrollFieldsModal,
 } from "../../constants/constants";
+import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { NodeDataType } from "../../types/flow";
 import {
   convertObjToArray,
@@ -59,6 +61,10 @@ const EditNodeModal = forwardRef(
     const setPending = useFlowStore((state) => state.setPending);
     const edges = useFlowStore((state) => state.edges);
     const setNode = useFlowStore((state) => state.setNode);
+    const setNoticeData = useAlertStore((state) => state.setNoticeData);
+    const globalVariablesEntries = useGlobalVariablesStore(
+      (state) => state.globalVariablesEntries
+    );
 
     function changeAdvanced(n) {
       setMyData((old) => {
@@ -245,6 +251,7 @@ const EditNodeModal = forwardRef(
                                       <InputComponent
                                         id={"input-" + index}
                                         editNode={true}
+                                        options={globalVariablesEntries}
                                         disabled={disabled}
                                         password={
                                           myData.node.template[templateParam]
@@ -259,6 +266,27 @@ const EditNodeModal = forwardRef(
                                             value,
                                             templateParam
                                           );
+                                          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[
+                                              templateParam
+                                            ].load_from_db = true;
+                                            return newNode;
+                                          });
                                         }}
                                       />
                                     )}