show credentials in login block credential selector (#1887)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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) => (
+        {options.map((option) => (
-          <SelectItem key={parameter.key} value={parameter.key}>
+          <SelectItem key={option.value} value={option.value}>
-            {parameter.key}
+            {option.label}
           </SelectItem>
         ))}
-        {credentialParameters.length === 0 && (
+        {options.length === 0 && (
           <SelectItem value={noneItemValue} key={noneItemValue}>
             No credential parameters found
           </SelectItem>

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

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,
   });
 }