From 3c5e45bf3f3d5e3b23733508f74233577ac9fc05 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Wed, 5 Mar 2025 09:47:24 -0500
Subject: [PATCH] show credentials in login block credential selector (#1887)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 .../LoginNode/CredentialParameterSelector.tsx | 66 +++++++++++++++++--
 .../editor/nodes/LoginNode/LoginNode.tsx      |  2 +-
 .../workflows/hooks/useCredentialsQuery.ts    | 11 +++-
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/CredentialParameterSelector.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/CredentialParameterSelector.tsx
index aed355e0..eb9dca24 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/CredentialParameterSelector.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/CredentialParameterSelector.tsx
@@ -5,8 +5,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCredentialsQuery } from "@/routes/workflows/hooks/useCredentialsQuery";
+import CloudContext from "@/store/CloudContext";
+import { useContext, useId } from "react";
 import { useWorkflowParametersState } from "../../useWorkflowParametersState";
-import { useId } from "react";
 
 type Props = {
   value?: string;
@@ -14,16 +17,67 @@ type Props = {
 };
 
 function CredentialParameterSelector({ value, onChange }: Props) {
-  const [workflowParameters] = useWorkflowParametersState();
+  const [workflowParameters, setWorkflowParameters] =
+    useWorkflowParametersState();
   const credentialParameters = workflowParameters.filter(
     (parameter) => parameter.parameterType === "credential",
   );
+  const isCloud = useContext(CloudContext);
+  const { data: credentials = [], isLoading } = useCredentialsQuery({
+    enabled: isCloud,
+  });
   const noneItemValue = useId();
 
+  if (isCloud && isLoading) {
+    return <Skeleton className="h-8 w-full" />;
+  }
+
+  const credentialOptions = credentials.map((credential) => ({
+    label: credential.name,
+    value: credential.credential_id,
+    type: "credential",
+  }));
+
+  const credentialParameterOptions = credentialParameters.map((parameter) => ({
+    label: parameter.key,
+    value: parameter.key,
+    type: "parameter",
+  }));
+
+  const filteredCredentialParameterOptions = credentialParameterOptions.filter(
+    (option) =>
+      !credentialOptions.some(
+        (credential) => credential.value === option.value,
+      ),
+  );
+
+  const options = [...credentialOptions, ...filteredCredentialParameterOptions];
+
   return (
     <Select
       value={value}
       onValueChange={(value) => {
+        const option = options.find((option) => option.value === value);
+        if (option?.type === "credential") {
+          const existingCredential = workflowParameters.find((parameter) => {
+            return (
+              parameter.parameterType === "credential" &&
+              "credentialId" in parameter &&
+              parameter.credentialId === value &&
+              parameter.key === value
+            );
+          });
+          if (!existingCredential) {
+            setWorkflowParameters((prev) => [
+              ...prev,
+              {
+                parameterType: "credential",
+                credentialId: value,
+                key: value,
+              },
+            ]);
+          }
+        }
         if (value === noneItemValue) {
           onChange?.("");
         } else {
@@ -35,12 +89,12 @@ function CredentialParameterSelector({ value, onChange }: Props) {
         <SelectValue placeholder="Select a credential parameter" />
       </SelectTrigger>
       <SelectContent>
-        {credentialParameters.map((parameter) => (
-          <SelectItem key={parameter.key} value={parameter.key}>
-            {parameter.key}
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
           </SelectItem>
         ))}
-        {credentialParameters.length === 0 && (
+        {options.length === 0 && (
           <SelectItem value={noneItemValue} key={noneItemValue}>
             No credential parameters found
           </SelectItem>
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
index e71eaf49..4713c514 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
@@ -151,7 +151,7 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
             />
           </div>
           <div className="space-y-2">
-            <Label className="text-xs text-slate-300">Credential Key</Label>
+            <Label className="text-xs text-slate-300">Credential</Label>
             <CredentialParameterSelector
               value={
                 data.parameterKeys.length > 0
diff --git a/skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts b/skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts
index 8546aed3..38ee3419 100644
--- a/skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts
+++ b/skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts
@@ -3,7 +3,15 @@ import { CredentialApiResponse } from "@/api/types";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 
-function useCredentialsQuery() {
+type QueryReturnType = Array<CredentialApiResponse>;
+type UseQueryOptions = Omit<
+  Parameters<typeof useQuery<QueryReturnType>>[0],
+  "queryKey" | "queryFn"
+>;
+
+type Props = UseQueryOptions;
+
+function useCredentialsQuery(props: Props = {}) {
   const credentialGetter = useCredentialGetter();
 
   return useQuery<Array<CredentialApiResponse>>({
@@ -14,6 +22,7 @@ function useCredentialsQuery() {
       params.set("page_size", "25");
       return client.get("/credentials", { params }).then((res) => res.data);
     },
+    ...props,
   });
 }