Add new workflow parameter type in UI, credential (#1897)

skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx

@@ -5,6 +5,7 @@ import { CodeEditor } from "./components/CodeEditor";
 import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { Label } from "@/components/ui/label";
 import { WorkflowParameterValueType } from "./types/workflowTypes";
+import { CredentialSelector } from "./components/CredentialSelector";
 
 type Props = {
   type: WorkflowParameterValueType;
@@ -80,6 +81,16 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
       />
     );
   }
+
+  if (type === "credential_id") {
+    const credentialId = value as string | null;
+    return (
+      <CredentialSelector
+        value={credentialId ?? ""}
+        onChange={(value) => onChange(value)}
+      />
+    );
+  }
 }
 
 export { WorkflowParameterInput };

skyvern-frontend/src/routes/workflows/components/CredentialParameterSourceSelector.tsx

@@ -0,0 +1,69 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCredentialsQuery } from "../hooks/useCredentialsQuery";
+import { useWorkflowParametersState } from "../editor/useWorkflowParametersState";
+import { WorkflowParameterValueType } from "../types/workflowTypes";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+function CredentialParameterSourceSelector({ value, onChange }: Props) {
+  const { data: credentials, isFetching } = useCredentialsQuery();
+  const [workflowParameters] = useWorkflowParametersState();
+  const workflowParametersOfTypeCredentialId = workflowParameters.filter(
+    (parameter) =>
+      parameter.parameterType === "workflow" &&
+      parameter.dataType === WorkflowParameterValueType.CredentialId,
+  );
+
+  if (isFetching) {
+    return <Skeleton className="h-10 w-full" />;
+  }
+
+  if (!credentials) {
+    return null;
+  }
+
+  const credentialOptions = credentials?.map((credential) => ({
+    label: credential.name,
+    value: credential.credential_id,
+    type: "credential",
+  }));
+
+  const workflowParameterOptionsOfTypeCredentialId =
+    workflowParametersOfTypeCredentialId.map((parameter) => ({
+      label: parameter.key,
+      value: parameter.key,
+      type: "parameter",
+    }));
+
+  const options = [
+    ...credentialOptions,
+    ...workflowParameterOptionsOfTypeCredentialId,
+  ];
+
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a credential" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { CredentialParameterSourceSelector };

skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx

@@ -16,7 +16,7 @@ type Props = {
   onChange?: (value: string) => void;
 };
 
-function CredentialParameterSelector({ value, onChange }: Props) {
+function LoginBlockCredentialSelector({ value, onChange }: Props) {
   const [workflowParameters, setWorkflowParameters] =
     useWorkflowParametersState();
   const credentialParameters = workflowParameters.filter(
@@ -104,4 +104,4 @@ function CredentialParameterSelector({ value, onChange }: Props) {
   );
 }
 
-export { CredentialParameterSelector };
+export { LoginBlockCredentialSelector };

skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx

@@ -29,13 +29,12 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
 import { errorMappingExampleValue } from "../types";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
-import { CredentialParameterSelector } from "./CredentialParameterSelector";
 import type { LoginNode } from "./types";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
-
+import { LoginBlockCredentialSelector } from "./LoginBlockCredentialSelector";
 function LoginNode({ id, data }: NodeProps<LoginNode>) {
   const { updateNodeData } = useReactFlow();
   const { editable } = data;
@@ -152,7 +151,7 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
           </div>
           <div className="space-y-2">
             <Label className="text-xs text-slate-300">Credential</Label>
-            <CredentialParameterSelector
+            <LoginBlockCredentialSelector
               value={
                 data.parameterKeys.length > 0
                   ? data.parameterKeys[0]

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx

@@ -1,11 +1,9 @@
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { SwitchBar } from "@/components/SwitchBar";
-import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import { useContext, useState } from "react";
+import { Label } from "@/components/ui/label";
-import {
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
-  WorkflowEditorParameterType,
-  WorkflowParameterValueType,
-} from "../../types/workflowTypes";
 import {
   Select,
   SelectContent,
@@ -14,17 +12,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Button } from "@/components/ui/button";
-import { ParametersState } from "../types";
-import { WorkflowParameterInput } from "../../WorkflowParameterInput";
-import { Checkbox } from "@/components/ui/checkbox";
-import { getDefaultValueForParameterType } from "../workflowEditorUtils";
 import { toast } from "@/components/ui/use-toast";
-import { SourceParameterKeySelector } from "../../components/SourceParameterKeySelector";
-import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import CloudContext from "@/store/CloudContext";
-import { CredentialSelector } from "../../components/CredentialSelector";
+import { Cross2Icon } from "@radix-ui/react-icons";
-import { SwitchBar } from "@/components/SwitchBar";
+import { useContext, useState } from "react";
+import { CredentialParameterSourceSelector } from "../../components/CredentialParameterSourceSelector";
+import { SourceParameterKeySelector } from "../../components/SourceParameterKeySelector";
+import {
+  WorkflowEditorParameterType,
+  WorkflowParameterValueType,
+} from "../../types/workflowTypes";
+import { WorkflowParameterInput } from "../../WorkflowParameterInput";
+import { ParametersState } from "../types";
+import { getDefaultValueForParameterType } from "../workflowEditorUtils";
 import { validateBitwardenLoginCredential } from "./util";
 
 type Props = {
@@ -39,6 +39,7 @@ const workflowParameterTypeOptions = [
   { label: "integer", value: WorkflowParameterValueType.Integer },
   { label: "boolean", value: WorkflowParameterValueType.Boolean },
   { label: "file", value: WorkflowParameterValueType.FileURL },
+  { label: "credential", value: WorkflowParameterValueType.CredentialId },
   { label: "JSON", value: WorkflowParameterValueType.JSON },
 ];
 
@@ -299,7 +300,7 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
               isCloud && (
                 <div className="space-y-1">
                   <Label className="text-xs text-slate-300">Credential</Label>
-                  <CredentialSelector
+                  <CredentialParameterSourceSelector
                     value={credentialId}
                     onChange={(value) => setCredentialId(value)}
                   />

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx

@@ -16,7 +16,7 @@ import { toast } from "@/components/ui/use-toast";
 import CloudContext from "@/store/CloudContext";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { useContext, useState } from "react";
-import { CredentialSelector } from "../../components/CredentialSelector";
+import { CredentialParameterSourceSelector } from "../../components/CredentialParameterSourceSelector";
 import { SourceParameterKeySelector } from "../../components/SourceParameterKeySelector";
 import {
   WorkflowEditorParameterType,
@@ -44,6 +44,7 @@ const workflowParameterTypeOptions = [
   { label: "integer", value: WorkflowParameterValueType.Integer },
   { label: "boolean", value: WorkflowParameterValueType.Boolean },
   { label: "file", value: WorkflowParameterValueType.FileURL },
+  { label: "credential", value: WorkflowParameterValueType.CredentialId },
   { label: "JSON", value: WorkflowParameterValueType.JSON },
 ];
 
@@ -353,7 +354,7 @@ function WorkflowParameterEditPanel({
               isCloud && (
                 <div className="space-y-1">
                   <Label className="text-xs text-slate-300">Credential</Label>
-                  <CredentialSelector
+                  <CredentialParameterSourceSelector
                     value={credentialId}
                     onChange={(value) => setCredentialId(value)}
                   />

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -1438,6 +1438,9 @@ function getDefaultValueForParameterType(
     case "file_url": {
       return null;
     }
+    case "credential_id": {
+      return null;
+    }
   }
 }
 

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -103,6 +103,7 @@ export const WorkflowParameterValueType = {
   Boolean: "boolean",
   JSON: "json",
   FileURL: "file_url",
+  CredentialId: "credential_id",
 } as const;
 
 export type WorkflowParameterValueType =