fix: apply field name automatically to Apply to Fields in global variable (#7195)

* added referenceField to GlobalVariableModal to show the field that created

* Added the display name of the input to global variable modal

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx

@@ -24,6 +24,7 @@ export default function GlobalVariableModal({
   children,
   asChild,
   initialData,
+  referenceField,
   open: myOpen,
   setOpen: mySetOpen,
   disabled = false,
@@ -31,6 +32,7 @@ export default function GlobalVariableModal({
   children?: JSX.Element;
   asChild?: boolean;
   initialData?: GlobalVariable;
+  referenceField?: string;
   open?: boolean;
   setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
   disabled?: boolean;
@@ -61,6 +63,9 @@ export default function GlobalVariableModal({
       setAvailableFields(
         sortByName(fields.concat(initialData?.default_fields ?? [])),
       );
+      if (referenceField && fields.includes(referenceField)) {
+        setFields([referenceField]);
+      }
     }
   }, [globalVariables, componentFields, initialData]);
 
@@ -106,7 +111,7 @@ export default function GlobalVariableModal({
   }
 
   function submitForm() {
-    if (!initialData) {
+    if (!initialData || !initialData.id) {
       handleSaveVariable();
     } else {
       updateVariable({

src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx

@@ -77,7 +77,18 @@ export default function InputGlobalComponent({
       options={globalVariables?.map((variable) => variable.name) ?? []}
       optionsPlaceholder={"Global Variables"}
       optionsIcon="Globe"
-      optionsButton={<GeneralGlobalVariableModal />}
+      optionsButton={
+        <GlobalVariableModal referenceField={display_name} disabled={disabled}>
+          <CommandItem value="doNotFilter-addNewVariable">
+            <ForwardedIconComponent
+              name="Plus"
+              className={cn("mr-2 h-4 w-4 text-primary")}
+              aria-hidden="true"
+            />
+            <span>Add New Variable</span>
+          </CommandItem>
+        </GlobalVariableModal>
+      }
       optionButton={(option) => (
         <GeneralDeleteConfirmationModal
           option={option}