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

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 { Label } from "@/components/ui/label";
+import { SwitchBar } from "@/components/SwitchBar";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import { useContext, useState } from "react";
-import {
-  WorkflowEditorParameterType,
-  WorkflowParameterValueType,
-} from "../../types/workflowTypes";
+import { Label } from "@/components/ui/label";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 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 { SwitchBar } from "@/components/SwitchBar";
+import { Cross2Icon } from "@radix-ui/react-icons";
+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;
+    }
   }
 }