Save credential parameters as credential input parameter and display … (#1968)

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

@@ -25,7 +25,7 @@ import { z } from "zod";
 import { WorkflowParameter } from "./types/workflowTypes";
 import { WorkflowParameterInput } from "./WorkflowParameterInput";
 import { AxiosError } from "axios";
-
+import { getLabelForWorkflowParameterType } from "./editor/workflowEditorUtils";
 type Props = {
   workflowParameters: Array<WorkflowParameter>;
   initialValues: Record<string, unknown>;
@@ -206,7 +206,9 @@ function RunWorkflowForm({
                             <div className="flex items-center gap-2 text-lg">
                               {parameter.key}
                               <span className="text-sm text-slate-400">
-                                {parameter.workflow_parameter_type}
+                                {getLabelForWorkflowParameterType(
+                                  parameter.workflow_parameter_type,
+                                )}
                               </span>
                             </div>
                             <h2 className="text-sm text-slate-400">

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -38,6 +38,7 @@ import {
   WorkflowApiResponse,
   WorkflowEditorParameterTypes,
   WorkflowParameterTypes,
+  WorkflowParameterValueType,
   WorkflowSettings,
 } from "../types/workflowTypes";
 import {
@@ -163,10 +164,11 @@ function convertToParametersYAML(
         };
       } else {
         return {
-          parameter_type: WorkflowParameterTypes.Credential,
+          parameter_type: WorkflowParameterTypes.Workflow,
+          workflow_parameter_type: WorkflowParameterValueType.CredentialId,
+          default_value: parameter.credentialId,
           key: parameter.key,
           description: parameter.description || null,
-          credential_id: parameter.credentialId,
         };
       }
     }

skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx

@@ -11,6 +11,7 @@ import {
   isDisplayedInWorkflowEditor,
   WorkflowEditorParameterTypes,
   WorkflowParameterTypes,
+  WorkflowParameterValueType,
   WorkflowSettings,
 } from "../types/workflowTypes";
 import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
@@ -78,6 +79,17 @@ function WorkflowEditor() {
               if (
                 parameter.parameter_type === WorkflowParameterTypes.Workflow
               ) {
+                if (
+                  parameter.workflow_parameter_type ===
+                  WorkflowParameterValueType.CredentialId
+                ) {
+                  return {
+                    key: parameter.key,
+                    parameterType: WorkflowEditorParameterTypes.Credential,
+                    credentialId: parameter.default_value as string,
+                    description: parameter.description,
+                  };
+                }
                 return {
                   key: parameter.key,
                   parameterType: WorkflowEditorParameterTypes.Workflow,

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

@@ -39,7 +39,6 @@ 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 },
 ];
 

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

@@ -31,6 +31,7 @@ import {
   WorkflowEditorParameterType,
   WorkflowEditorParameterTypes,
 } from "../../types/workflowTypes";
+import { getLabelForWorkflowParameterType } from "../workflowEditorUtils";
 
 const WORKFLOW_EDIT_PANEL_WIDTH = 20 * 16;
 const WORKFLOW_EDIT_PANEL_GAP = 1 * 16;
@@ -134,7 +135,7 @@ function WorkflowParametersPanel() {
                       <span className="text-sm">{parameter.key}</span>
                       {parameter.parameterType === "workflow" ? (
                         <span className="text-sm text-slate-400">
-                          {parameter.dataType}
+                          {getLabelForWorkflowParameterType(parameter.dataType)}
                         </span>
                       ) : (
                         <span className="text-sm text-slate-400">

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

@@ -5,12 +5,12 @@ import { nanoid } from "nanoid";
 import {
   WorkflowBlockTypes,
   WorkflowParameterTypes,
+  WorkflowParameterValueType,
   type AWSSecretParameter,
   type OutputParameter,
   type Parameter,
   type WorkflowApiResponse,
   type WorkflowBlock,
-  type WorkflowParameterValueType,
   type WorkflowSettings,
 } from "../types/workflowTypes";
 import {
@@ -1960,6 +1960,31 @@ function getWorkflowErrors(nodes: Array<AppNode>): Array<string> {
   return errors;
 }
 
+function getLabelForWorkflowParameterType(type: WorkflowParameterValueType) {
+  if (type === WorkflowParameterValueType.String) {
+    return "string";
+  }
+  if (type === WorkflowParameterValueType.Float) {
+    return "float";
+  }
+  if (type === WorkflowParameterValueType.Integer) {
+    return "integer";
+  }
+  if (type === WorkflowParameterValueType.Boolean) {
+    return "boolean";
+  }
+  if (type === WorkflowParameterValueType.FileURL) {
+    return "file_url";
+  }
+  if (type === WorkflowParameterValueType.JSON) {
+    return "json";
+  }
+  if (type === WorkflowParameterValueType.CredentialId) {
+    return "credential";
+  }
+  return type;
+}
+
 export {
   convert,
   convertEchoParameters,
@@ -1971,6 +1996,7 @@ export {
   getBlockNameOfOutputParameterKey,
   getDefaultValueForParameterType,
   getElements,
+  getLabelForWorkflowParameterType,
   getWorkflowSettings,
   getOutputParameterKey,
   getPreviousNodeIds,