fix: apply variables to fields automatically, remove password truncation from variable fields (#5031)

* Change default type to be Credential on Global Variabel Modal

* Removed clipping on input password

* Updated StrRenderComponent to receive display_name

* Updated InputGlobal and StrRender to receive display_name

* Update InputGlobalComponent to handle fields already applied

* Passed display name from strRender to inputglobal

* Update updateGroupRecursion to not need updateGlobalVariables since it's already dealt with by the InputGlobalComponent

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

@@ -44,7 +44,7 @@ export default function GlobalVariableModal({
 }): JSX.Element {
   const [key, setKey] = useState(initialData?.name ?? "");
   const [value, setValue] = useState(initialData?.value ?? "");
-  const [type, setType] = useState(initialData?.type ?? "Generic");
+  const [type, setType] = useState(initialData?.type ?? "Credential");
   const [fields, setFields] = useState<string[]>(
     initialData?.default_fields ?? [],
   );

src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx

@@ -134,7 +134,7 @@ const CustomInputPopover = ({
                 editNode && disabled && "h-fit w-fit",
                 disabled &&
                   "disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground",
-                password && "max-w-64 text-clip pr-14",
+                password && "text-clip pr-14",
               )}
               placeholder={
                 selectedOptions?.length > 0 || selectedOption ? "" : placeholder

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

@@ -2,6 +2,7 @@ import {
   useDeleteGlobalVariables,
   useGetGlobalVariables,
 } from "@/controllers/API/queries/variables";
+import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
 import { useEffect } from "react";
 import DeleteConfirmationModal from "../../../../../modals/deleteConfirmationModal";
 import useAlertStore from "../../../../../stores/alertStore";
@@ -14,6 +15,7 @@ import { InputGlobalComponentType, InputProps } from "../../types";
 import InputComponent from "../inputComponent";
 
 export default function InputGlobalComponent({
+  display_name,
   disabled,
   handleOnNewValue,
   value,
@@ -28,9 +30,12 @@ export default function InputGlobalComponent({
 
   const { data: globalVariables } = useGetGlobalVariables();
   const { mutate: mutateDeleteGlobalVariable } = useDeleteGlobalVariables();
+  const unavailableFields = useGlobalVariablesStore(
+    (state) => state.unavailableFields,
+  );
 
   useEffect(() => {
-    if (globalVariables)
+    if (globalVariables) {
       if (
         load_from_db &&
         !globalVariables.find((variable) => variable.name === value)
@@ -40,7 +45,19 @@ export default function InputGlobalComponent({
           { skipSnapshot: true },
         );
       }
-  }, [globalVariables]);
+      if (
+        !load_from_db &&
+        value === "" &&
+        unavailableFields &&
+        Object.keys(unavailableFields).includes(display_name ?? "")
+      ) {
+        handleOnNewValue(
+          { value: unavailableFields[display_name ?? ""], load_from_db: true },
+          { skipSnapshot: true },
+        );
+      }
+    }
+  }, [globalVariables, unavailableFields]);
 
   async function handleDelete(key: string) {
     if (!globalVariables) return;

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

@@ -6,11 +6,11 @@ import TextAreaComponent from "../textAreaComponent";
 export function StrRenderComponent({
   templateData,
   name,
+  display_name,
   placeholder,
   ...baseInputProps
 }: InputProps<string, StrRenderComponentType>) {
-  const { handleOnNewValue, id, disabled, editNode, value, isToolMode } =
+  const { handleOnNewValue, id, isToolMode } = baseInputProps;
-    baseInputProps;
 
   if (!templateData.options) {
     return templateData.multiline ? (
@@ -34,7 +34,8 @@ export function StrRenderComponent({
         password={templateData.password}
         load_from_db={templateData.load_from_db}
         placeholder={placeholder}
-        id={"input-" + name}
+        display_name={display_name}
+        id={`input-${name}`}
         isToolMode={isToolMode}
       />
     );

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

@@ -96,6 +96,7 @@ export function ParameterRenderComponent({
           {...baseInputProps}
           templateData={templateData}
           name={name}
+          display_name={templateData.display_name ?? ""}
           editNode={editNode}
         />
       );

src/frontend/src/components/core/parameterRenderComponent/types.ts

@@ -63,6 +63,7 @@ export type KeyPairListComponentType = {
 export type StrRenderComponentType = {
   templateData: Partial<InputFieldType>;
   name: string;
+  display_name: string;
 };
 
 export type InputListComponentType = {
@@ -84,6 +85,7 @@ export type TextAreaComponentType = {
 export type InputGlobalComponentType = {
   load_from_db: boolean | undefined;
   password: boolean | undefined;
+  display_name: string;
 };
 export type MultiselectComponentType = {
   options: string[];

src/frontend/src/hooks/flows/use-add-flow.ts

@@ -3,7 +3,6 @@ import { usePostAddFlow } from "@/controllers/API/queries/flows/use-post-add-flo
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useFolderStore } from "@/stores/foldersStore";
-import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
 import { useTypesStore } from "@/stores/typesStore";
 import { FlowType } from "@/types/flow";
 import {
@@ -19,12 +18,6 @@ import { useParams } from "react-router-dom";
 import useDeleteFlow from "./use-delete-flow";
 
 const useAddFlow = () => {
-  const unavaliableFields = useGlobalVariablesStore(
-    (state) => state.unavailableFields,
-  );
-  const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries,
-  );
   const flows = useFlowsManagerStore((state) => state.flows);
   const setFlows = useFlowsManagerStore((state) => state.setFlows);
   const { deleteFlow } = useDeleteFlow();
@@ -48,12 +41,7 @@ const useAddFlow = () => {
         ? await processDataFromFlow(flow)
         : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
       flowData?.nodes.forEach((node) => {
-        updateGroupRecursion(
+        updateGroupRecursion(node, flowData?.edges);
-          node,
-          flowData?.edges,
-          unavaliableFields,
-          globalVariablesEntries,
-        );
       });
       // Create a new flow with a default name if no flow is provided.
       if (params?.override && flow) {

src/frontend/src/stores/flowStore.ts

@@ -46,7 +46,6 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
-import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
 import { useTypesStore } from "./typesStore";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
@@ -396,12 +395,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           id: newId,
         },
       };
-      updateGroupRecursion(
+      updateGroupRecursion(newNode, selection.edges);
-        newNode,
-        selection.edges,
-        useGlobalVariablesStore.getState().unavailableFields,
-        useGlobalVariablesStore.getState().globalVariablesEntries,
-      );
 
       // Add the new node to the list of nodes in state
       newNodes = newNodes

src/frontend/src/utils/reactflowUtils.ts

@@ -1625,30 +1625,11 @@ export function isOutputType(type: string): boolean {
   return OUTPUT_TYPES.has(type);
 }
 
-export function updateGroupRecursion(
+export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
-  groupNode: NodeType,
-  edges: Edge[],
-  unavailableFields:
-    | {
-        [name: string]: string;
-      }
-    | undefined,
-  globalVariablesEntries: string[] | undefined,
-) {
-  updateGlobalVariables(
-    groupNode.data.node,
-    unavailableFields,
-    globalVariablesEntries,
-  );
   if (groupNode.data.node?.flow) {
     groupNode.data.node.flow.data!.nodes.forEach((node) => {
       if (node.data.node?.flow) {
-        updateGroupRecursion(
+        updateGroupRecursion(node, node.data.node.flow.data!.edges);
-          node,
-          node.data.node.flow.data!.edges,
-          unavailableFields,
-          globalVariablesEntries,
-        );
       }
     });
     let newFlow = groupNode.data.node!.flow;
@@ -1660,41 +1641,6 @@ export function updateGroupRecursion(
   }
 }
 
-export function updateGlobalVariables(
-  node: APIClassType | undefined,
-  unavailableFields:
-    | {
-        [name: string]: string;
-      }
-    | undefined,
-  globalVariablesEntries: string[] | undefined,
-) {
-  if (node && node.template) {
-    Object.keys(node.template).forEach((field) => {
-      if (
-        globalVariablesEntries &&
-        node!.template[field].load_from_db &&
-        !globalVariablesEntries.includes(node!.template[field].value)
-      ) {
-        node!.template[field].value = "";
-        node!.template[field].load_from_db = false;
-      }
-      if (
-        !node!.template[field].load_from_db &&
-        node!.template[field].value === "" &&
-        unavailableFields &&
-        Object.keys(unavailableFields).includes(
-          node!.template[field].display_name ?? "",
-        )
-      ) {
-        node!.template[field].value =
-          unavailableFields[node!.template[field].display_name ?? ""];
-        node!.template[field].load_from_db = true;
-      }
-    });
-  }
-}
-
 export function getGroupOutputNodeId(
   flow: FlowType,
   p_name: string,