From d676367cd5c975fbe791d4ffb6417f55d2d79ad2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 14:46:45 -0300 Subject: [PATCH 1/7] Change default type to be Credential on Global Variabel Modal --- .../components/core/GlobalVariableModal/GlobalVariableModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx index 8ccdd0b53bf9..0e47c97af2db 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 ?? [], ); From 46c944ecce14ea4f388e2234de0314028bacb098 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 14:59:53 -0300 Subject: [PATCH 2/7] Removed clipping on input password --- .../components/inputComponent/components/popover/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8147ce84c757..0a96c191dfa8 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 From 8b389ca1d1a2ed9457eda6eb9d5495eb7634f45d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 15:29:44 -0300 Subject: [PATCH 3/7] Updated StrRenderComponent to receive display_name --- .../src/components/core/parameterRenderComponent/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/components/core/parameterRenderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/index.tsx index 95bdd0c7feb0..f4ed3b7c169e 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} /> ); From f14dc2fabaf24940ee69a57c1719c3058e8e6a35 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 15:29:56 -0300 Subject: [PATCH 4/7] Updated InputGlobal and StrRender to receive display_name --- .../src/components/core/parameterRenderComponent/types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/frontend/src/components/core/parameterRenderComponent/types.ts b/src/frontend/src/components/core/parameterRenderComponent/types.ts index d4d08ad7afe9..6d26dd4ff225 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[]; From 576d233310eba96b5e18f04da326372b82a3d48d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 15:30:14 -0300 Subject: [PATCH 5/7] Update InputGlobalComponent to handle fields already applied --- .../components/inputGlobalComponent/index.tsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) 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 fd9075311b88..1ec86b803041 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; From 9657e6d9c1b941dce515f6441f54ea3eac461601 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 15:30:27 -0300 Subject: [PATCH 6/7] Passed display name from strRender to inputglobal --- .../components/strRenderComponent/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 2c66af43f283..b50ff6cab93a 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} /> ); From e743309cde2dd8a030ca066811b76029498634aa Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 3 Dec 2024 15:33:11 -0300 Subject: [PATCH 7/7] Update updateGroupRecursion to not need updateGlobalVariables since it's already dealt with by the InputGlobalComponent --- src/frontend/src/hooks/flows/use-add-flow.ts | 14 +---- src/frontend/src/stores/flowStore.ts | 8 +-- src/frontend/src/utils/reactflowUtils.ts | 58 +------------------- 3 files changed, 4 insertions(+), 76 deletions(-) diff --git a/src/frontend/src/hooks/flows/use-add-flow.ts b/src/frontend/src/hooks/flows/use-add-flow.ts index 9fa303d7a1c3..d9a1c059a451 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(); @@ -49,12 +42,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. const folder_id = folderId ?? myCollectionId ?? ""; diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index b1489527c7a9..8a2b821b1830 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 7386e59ff4c5..8734201778db 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -1624,30 +1624,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; @@ -1659,41 +1640,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,