From 3d2a76438c36ff8c683b9c6914b661fa4c5a984f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 16:58:13 -0300
Subject: [PATCH] fix(parameterComponent): fix logic for setting load_from_db
 property in template object fix(codeTabsComponent): fix logic for setting
 load_from_db property in template object fix(EditNodeModal): fix logic for
 setting load_from_db property in template object fix(globalVariablesPage):
 fix logic for deleting global variable by id feat(globalVariables): add
 getVariableId function to retrieve variable id by key feat(types): add
 getVariableId function to GlobalVariablesStore type

---
 src/backend/langflow/api/v1/credential.py     |   3 -
 .../components/parameterComponent/index.tsx   |  26 +++--
 .../components/codeTabsComponent/index.tsx    |  12 ++
 .../src/modals/EditNodeModal/index.tsx        | 104 ++++++++++--------
 .../src/pages/globalVariablesPage/index.tsx   |  10 +-
 src/frontend/src/stores/globalVariables.ts    |   3 +
 .../types/zustand/globalVariables/index.ts    |   1 +
 7 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
index 3b1411cf5..6d9883ce7 100644
--- a/src/backend/langflow/api/v1/credential.py
+++ b/src/backend/langflow/api/v1/credential.py
@@ -8,9 +8,6 @@ from langflow.services.auth import utils as auth_utils
 from langflow.services.auth.utils import get_current_active_user
 from langflow.services.database.models.credential import Credential, CredentialCreate, CredentialRead, CredentialUpdate
 from langflow.services.database.models.user.model import User
-from langflow.services.deps import get_session, get_settings_service
-                                                          CredentialRead,
-                                                          CredentialUpdate)
 from langflow.services.database.models.user.model import User
 from langflow.services.deps import get_session, get_settings_service
 
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index a32acce57..7b04f6be4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -421,16 +421,26 @@ export default function ParameterComponent({
                       title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
                     the real value will be update on run`,
                     });
+                    setNode(data.id, (oldNode) => {
+                      let newNode = cloneDeep(oldNode);
+                      newNode.data = {
+                        ...newNode.data,
+                      };
+                      newNode.data.node.template[name].load_from_db = true;
+                      return newNode;
+                    });
+                  }
+                  else{
+                    setNode(data.id, (oldNode) => {
+                      let newNode = cloneDeep(oldNode);
+                      newNode.data = {
+                        ...newNode.data,
+                      };
+                      newNode.data.node.template[name].load_from_db = false;
+                      return newNode;
+                    });
                   }
                   //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;
-                  });
                 }}
               />
             )}
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 8cc423725..5e9c3c486 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -394,6 +394,18 @@ export default function CodeTabsComponent({
                                                             title: `the value inserted in ${templateField} is a global variable, \n 
                                                           the real value will be update on run`,
                                                           });
+                                                          newInputList![
+                                                            i
+                                                          ].data.node.template[
+                                                            templateField
+                                                          ].load_from_db = true;
+                                                        }
+                                                        else{
+                                                          newInputList![
+                                                            i
+                                                          ].data.node.template[
+                                                            templateField
+                                                          ].load_from_db = false;
                                                         }
                                                         return newInputList;
                                                       });
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 146b2c744..6bbed22fa 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -163,11 +163,11 @@ const EditNodeModal = forwardRef(
                                 scapedJSONStringfy(
                                   myData.node!.template[templateParam].proxy
                                     ? {
-                                        ...id,
-                                        proxy:
-                                          myData.node?.template[templateParam]
-                                            .proxy,
-                                      }
+                                      ...id,
+                                      proxy:
+                                        myData.node?.template[templateParam]
+                                          .proxy,
+                                    }
                                     : id
                                 )
                             ) ?? false;
@@ -178,7 +178,7 @@ const EditNodeModal = forwardRef(
                                   content={
                                     myData.node?.template[templateParam].proxy
                                       ? myData.node?.template[templateParam]
-                                          .proxy?.id
+                                        .proxy?.id
                                       : null
                                   }
                                 >
@@ -186,16 +186,16 @@ const EditNodeModal = forwardRef(
                                     {myData.node?.template[templateParam]
                                       .display_name
                                       ? myData.node.template[templateParam]
-                                          .display_name
+                                        .display_name
                                       : myData.node?.template[templateParam]
-                                          .name}
+                                        .name}
                                   </span>
                                 </ShadTooltip>
                               </TableCell>
                               <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                                 {myData.node?.template[templateParam].type ===
                                   "str" &&
-                                !myData.node.template[templateParam].options ? (
+                                  !myData.node.template[templateParam].options ? (
                                   <div className="mx-auto">
                                     {myData.node.template[templateParam]
                                       .list ? (
@@ -205,12 +205,12 @@ const EditNodeModal = forwardRef(
                                         value={
                                           !myData.node.template[templateParam]
                                             .value ||
-                                          myData.node.template[templateParam]
-                                            .value === ""
+                                            myData.node.template[templateParam]
+                                              .value === ""
                                             ? [""]
                                             : myData.node.template[
-                                                templateParam
-                                              ].value
+                                              templateParam
+                                            ].value
                                         }
                                         onChange={(value: string[]) => {
                                           handleOnNewValue(
@@ -220,7 +220,7 @@ const EditNodeModal = forwardRef(
                                         }}
                                       />
                                     ) : myData.node.template[templateParam]
-                                        .multiline ? (
+                                      .multiline ? (
                                       <TextAreaComponent
                                         id={
                                           "textarea-edit-" +
@@ -275,24 +275,36 @@ const EditNodeModal = forwardRef(
                                               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;
+                                            });
+                                          }
+                                          else {
+                                            setNode(data.id, (oldNode) => {
+                                              let newNode = cloneDeep(oldNode);
+                                              newNode.data = {
+                                                ...newNode.data,
+                                              };
+                                              newNode.data.node.template[
+                                                templateParam
+                                              ].load_from_db = false;
+                                              return newNode;
+                                            });
                                           }
-                                          //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;
-                                          });
                                         }}
                                       />
                                     )}
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "NestedDict" ? (
+                                  .type === "NestedDict" ? (
                                   <div className="  w-full">
                                     <DictComponent
                                       disabled={disabled}
@@ -302,10 +314,10 @@ const EditNodeModal = forwardRef(
                                           templateParam
                                         ]?.value?.toString() === "{}"
                                           ? {
-                                              yourkey: "value",
-                                            }
+                                            yourkey: "value",
+                                          }
                                           : myData.node!.template[templateParam]
-                                              .value
+                                            .value
                                       }
                                       onChange={(newValue) => {
                                         myData.node!.template[
@@ -320,7 +332,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "dict" ? (
+                                  .type === "dict" ? (
                                   <div
                                     className={classNames(
                                       "max-h-48 w-full overflow-auto custom-scroll",
@@ -336,14 +348,14 @@ const EditNodeModal = forwardRef(
                                       value={
                                         myData.node!.template[templateParam]
                                           .value?.length === 0 ||
-                                        !myData.node!.template[templateParam]
-                                          .value
+                                          !myData.node!.template[templateParam]
+                                            .value
                                           ? [{ "": "" }]
                                           : convertObjToArray(
-                                              myData.node!.template[
-                                                templateParam
-                                              ].value
-                                            )
+                                            myData.node!.template[
+                                              templateParam
+                                            ].value
+                                          )
                                       }
                                       duplicateKey={errorDuplicateKey}
                                       onChange={(newValue) => {
@@ -363,7 +375,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "bool" ? (
+                                  .type === "bool" ? (
                                   <div className="ml-auto">
                                     {" "}
                                     <ToggleShadComponent
@@ -383,7 +395,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "float" ? (
+                                  .type === "float" ? (
                                   <div className="mx-auto">
                                     <FloatComponent
                                       disabled={disabled}
@@ -402,7 +414,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "str" &&
+                                  .type === "str" &&
                                   myData.node.template[templateParam]
                                     .options ? (
                                   <div className="mx-auto">
@@ -424,7 +436,7 @@ const EditNodeModal = forwardRef(
                                     ></Dropdown>
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "int" ? (
+                                  .type === "int" ? (
                                   <div className="mx-auto">
                                     <IntComponent
                                       id={"edit-int-input-" + index}
@@ -440,7 +452,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "file" ? (
+                                  .type === "file" ? (
                                   <div className="mx-auto">
                                     <InputFileComponent
                                       editNode={true}
@@ -464,7 +476,7 @@ const EditNodeModal = forwardRef(
                                     ></InputFileComponent>
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "prompt" ? (
+                                  .type === "prompt" ? (
                                   <div className="mx-auto">
                                     <PromptAreaComponent
                                       readonly={
@@ -495,13 +507,13 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "code" ? (
+                                  .type === "code" ? (
                                   <div className="mx-auto">
                                     <CodeAreaComponent
                                       readonly={
                                         myData.node?.flow &&
-                                        myData.node.template[templateParam]
-                                          .dynamic
+                                          myData.node.template[templateParam]
+                                            .dynamic
                                           ? true
                                           : false
                                       }
@@ -526,7 +538,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "Any" ? (
+                                  .type === "Any" ? (
                                   "-"
                                 ) : (
                                   <div className="hidden"></div>
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
index 40c2322f7..5a9a6fabf 100644
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -11,12 +11,20 @@ export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
   const removeGlobalVariable = useGlobalVariablesStore(
     (state) => state.removeGlobalVariable
   );
 
   function handleDelete(key: string) {
-    deleteGlobalVariable(key).then((_) => removeGlobalVariable(key));
+    const id = getVariableId(key);
+    if(id!==undefined)
+    {
+      deleteGlobalVariable(id).then((_) => removeGlobalVariable(key));
+
+    }else{
+      console.error("id is undefined");
+    }
   }
   return (
     <PageLayout
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 377cd00f0..5e9adeecb 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -27,5 +27,8 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
+    getVariableId: (key) => {
+      return get().globalVariables[key]?.id;
+    }
   })
 );
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 95c15a310..3e7f01e84 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -6,4 +6,5 @@ export type GlobalVariablesStore = {
   }) => void;
   addGlobalVariable: (key: string, id: string, provider?: string) => void;
   removeGlobalVariable: (key: string) => void;
+  getVariableId: (key: string) => string | undefined;
 };