diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx index 74c711a2..30c8b322 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx @@ -27,6 +27,24 @@ type Props = { onChange?: (value: string) => void; }; +// Function to generate a unique credential parameter key +function generateDefaultCredentialParameterKey(existingKeys: string[]): string { + const baseName = "credentials"; + + // Check if "credentials" is available + if (!existingKeys.includes(baseName)) { + return baseName; + } + + // Find the next available number + let counter = 1; + while (existingKeys.includes(`${baseName}_${counter}`)) { + counter++; + } + + return `${baseName}_${counter}`; +} + function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) { const { setIsOpen, setType } = useCredentialModalState(); const nodes = useNodes(); @@ -124,22 +142,31 @@ function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) { } const option = options.find((option) => option.value === newValue); + let parameterKeyToUse = newValue; if (option?.type === "credential") { const existingCredential = workflowParameters.find((parameter) => { return ( parameter.parameterType === "credential" && "credentialId" in parameter && - parameter.credentialId === newValue && - parameter.key === newValue + parameter.credentialId === newValue ); }); - if (!existingCredential) { + if (existingCredential) { + // Use the existing parameter's key + parameterKeyToUse = existingCredential.key; + } else { + // Generate a new parameter key based on existing keys + const existingKeys = newParameters.map((param) => param.key); + const newKey = + generateDefaultCredentialParameterKey(existingKeys); + parameterKeyToUse = newKey; + newParameters = [ ...newParameters, { parameterType: "credential", credentialId: newValue, - key: newValue, + key: newKey, }, ]; } @@ -148,7 +175,7 @@ function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) { (parameter) => parameter.key !== value, ); } - onChange?.(newValue); + onChange?.(parameterKeyToUse); setWorkflowParameters(newParameters); }} > @@ -171,13 +198,16 @@ function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) { { - onChange?.(id); + const existingKeys = workflowParameters.map((param) => param.key); + const newKey = generateDefaultCredentialParameterKey(existingKeys); + + onChange?.(newKey); setWorkflowParameters([ ...workflowParameters, { parameterType: "credential", credentialId: id, - key: id, + key: newKey, }, ]); }}