changed naming cred params when added to login block (#4034)

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<AppNode>();
@@ -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.credentialId === newValue
-                parameter.key === 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) {
       </Select>
       <CredentialsModal
         onCredentialCreated={(id) => {
-          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,
             },
           ]);
         }}