From 472b5fbda57530c5b128fad1f6910984a6d85f85 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 7 Nov 2024 08:47:07 -0300
Subject: [PATCH] fix: resolve issue with adding global variable when input is
 connected (#4289)

* fix: prevent add global variable when inpiut is connected

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
---
 .../components/GlobalVariableModal/GlobalVariableModal.tsx | 7 ++++++-
 src/frontend/src/components/inputComponent/index.tsx       | 2 ++
 .../components/inputGlobalComponent/index.tsx              | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx b/src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx
index ebf99d2e2..116e9d095 100644
--- a/src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx
+++ b/src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx
@@ -25,12 +25,14 @@ export default function GlobalVariableModal({
   initialData,
   open: myOpen,
   setOpen: mySetOpen,
+  disabled = false,
 }: {
   children?: JSX.Element;
   asChild?: boolean;
   initialData?: GlobalVariable;
   open?: boolean;
   setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
+  disabled?: boolean;
 }): JSX.Element {
   const [key, setKey] = useState(initialData?.name ?? "");
   const [value, setValue] = useState(initialData?.value ?? "");
@@ -122,6 +124,7 @@ export default function GlobalVariableModal({
       setOpen={setOpen}
       size="x-small"
       onSubmit={submitForm}
+      disable={disabled}
     >
       <BaseModal.Header
         description={
@@ -138,7 +141,9 @@ export default function GlobalVariableModal({
           aria-hidden="true"
         />
       </BaseModal.Header>
-      <BaseModal.Trigger asChild={asChild}>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger disable={disabled} asChild={asChild}>
+        {children}
+      </BaseModal.Trigger>
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col gap-4 align-middle">
           <Label>Variable Name</Label>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 9a538ae9a..a313d7c92 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -159,9 +159,11 @@ export default function InputComponent({
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
             "absolute inset-y-0 flex items-center pr-2.5",
+            disabled && "cursor-not-allowed opacity-50",
           )}
         >
           <button
+            disabled={disabled}
             onClick={(e) => {
               if (disabled) return;
               setShowOptions(!showOptions);
diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx
index 4a1f5f68d..014c8ae5f 100644
--- a/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx
@@ -80,7 +80,7 @@ export default function InputGlobalComponent({
       optionsPlaceholder={"Global Variables"}
       optionsIcon="Globe"
       optionsButton={
-        <GlobalVariableModal>
+        <GlobalVariableModal disabled={disabled}>
           <CommandItem value="doNotFilter-addNewVariable">
             <ForwardedIconComponent
               name="Plus"