diff --git a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx index 8ccdd0b53..0e47c97af 100644 --- a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx +++ b/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( initialData?.default_fields ?? [], ); diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx index 4b0581525..fd06e58c5 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx +++ b/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 diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx index fd9075311..1ec86b803 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx +++ b/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; diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx index 2c66af43f..b50ff6cab 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx +++ b/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) { - const { handleOnNewValue, id, disabled, editNode, value, isToolMode } = - baseInputProps; + const { handleOnNewValue, id, isToolMode } = 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} /> ); diff --git a/src/frontend/src/components/core/parameterRenderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/index.tsx index 95bdd0c7f..f4ed3b7c1 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/index.tsx +++ b/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} /> ); diff --git a/src/frontend/src/components/core/parameterRenderComponent/types.ts b/src/frontend/src/components/core/parameterRenderComponent/types.ts index d4d08ad7a..6d26dd4ff 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/types.ts +++ b/src/frontend/src/components/core/parameterRenderComponent/types.ts @@ -63,6 +63,7 @@ export type KeyPairListComponentType = { export type StrRenderComponentType = { templateData: Partial; 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[]; diff --git a/src/frontend/src/hooks/flows/use-add-flow.ts b/src/frontend/src/hooks/flows/use-add-flow.ts index 2d34ddc36..8c3771d23 100644 --- a/src/frontend/src/hooks/flows/use-add-flow.ts +++ b/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( - node, - flowData?.edges, - unavaliableFields, - globalVariablesEntries, - ); + updateGroupRecursion(node, flowData?.edges); }); // Create a new flow with a default name if no flow is provided. if (params?.override && flow) { diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index b1489527c..8a2b821b1 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/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((set, get) => ({ id: newId, }, }; - updateGroupRecursion( - newNode, - selection.edges, - useGlobalVariablesStore.getState().unavailableFields, - useGlobalVariablesStore.getState().globalVariablesEntries, - ); + updateGroupRecursion(newNode, selection.edges); // Add the new node to the list of nodes in state newNodes = newNodes diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 94a7be448..caadb160b 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -1625,30 +1625,11 @@ export function isOutputType(type: string): boolean { return OUTPUT_TYPES.has(type); } -export function updateGroupRecursion( - groupNode: NodeType, - edges: Edge[], - unavailableFields: - | { - [name: string]: string; - } - | undefined, - globalVariablesEntries: string[] | undefined, -) { - updateGlobalVariables( - groupNode.data.node, - unavailableFields, - globalVariablesEntries, - ); +export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) { if (groupNode.data.node?.flow) { groupNode.data.node.flow.data!.nodes.forEach((node) => { if (node.data.node?.flow) { - updateGroupRecursion( - node, - node.data.node.flow.data!.edges, - unavailableFields, - globalVariablesEntries, - ); + updateGroupRecursion(node, node.data.node.flow.data!.edges); } }); 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,