Credentials UI (#1828)

2025-02-24 11:54:18 -08:00
parent 39ab9c0603
commit c5a2438e7f
13 changed files with 337 additions and 27 deletions
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -47,6 +47,7 @@ import {
  BitwardenSensitiveInformationParameterYAML,
  BlockYAML,
  ContextParameterYAML,
+  CredentialParameterYAML,
  ParameterYAML,
  WorkflowCreateYAMLRequest,
  WorkflowParameterYAML,
@@ -91,6 +92,7 @@ function convertToParametersYAML(
  | ContextParameterYAML
  | BitwardenSensitiveInformationParameterYAML
  | BitwardenCreditCardDataParameterYAML
+  | CredentialParameterYAML
 > {
  return parameters.map((parameter) => {
    if (parameter.parameterType === WorkflowEditorParameterTypes.Workflow) {
@@ -143,6 +145,15 @@ function convertToParametersYAML(
        bitwarden_master_password_aws_secret_key:
          BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
      };
+    } else if (
+      parameter.parameterType === WorkflowEditorParameterTypes.Credential
+    ) {
+      return {
+        parameter_type: WorkflowParameterTypes.Credential,
+        key: parameter.key,
+        description: parameter.description || null,
+        credential_id: parameter.credentialId,
+      };
    } else {
      return {
        parameter_type: WorkflowParameterTypes.Bitwarden_Login_Credential,
@@ -170,7 +181,7 @@ export type ParametersState = Array<
    }
  | {
      key: string;
-      parameterType: "credential";
+      parameterType: "bitwardenLoginCredential";
      collectionId: string;
      urlParameterKey: string;
      description?: string | null;
@@ -196,6 +207,12 @@ export type ParametersState = Array<
      collectionId: string;
      description?: string | null;
    }
+  | {
+      key: string;
+      parameterType: "credential";
+      credentialId: string;
+      description?: string | null;
+    }
 >;

 type Props = {
--- a/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
@@ -75,27 +75,32 @@ function WorkflowEditor() {
          initialParameters={workflow.workflow_definition.parameters
            .filter((parameter) => isDisplayedInWorkflowEditor(parameter))
            .map((parameter) => {
-              if (parameter.parameter_type === "workflow") {
+              if (
+                parameter.parameter_type === WorkflowParameterTypes.Workflow
+              ) {
                return {
                  key: parameter.key,
-                  parameterType: "workflow",
+                  parameterType: WorkflowEditorParameterTypes.Workflow,
                  dataType: parameter.workflow_parameter_type,
                  defaultValue: parameter.default_value,
                  description: parameter.description,
                };
-              } else if (parameter.parameter_type === "context") {
+              } else if (
+                parameter.parameter_type === WorkflowParameterTypes.Context
+              ) {
                return {
                  key: parameter.key,
-                  parameterType: "context",
+                  parameterType: WorkflowEditorParameterTypes.Context,
                  sourceParameterKey: parameter.source.key,
                  description: parameter.description,
                };
              } else if (
-                parameter.parameter_type === "bitwarden_sensitive_information"
+                parameter.parameter_type ===
+                WorkflowParameterTypes.Bitwarden_Sensitive_Information
              ) {
                return {
                  key: parameter.key,
-                  parameterType: "secret",
+                  parameterType: WorkflowEditorParameterTypes.Secret,
                  collectionId: parameter.bitwarden_collection_id,
                  identityKey: parameter.bitwarden_identity_key,
                  identityFields: parameter.bitwarden_identity_fields,
@@ -112,10 +117,20 @@ function WorkflowEditor() {
                  itemId: parameter.bitwarden_item_id,
                  description: parameter.description,
                };
+              } else if (
+                parameter.parameter_type === WorkflowParameterTypes.Credential
+              ) {
+                return {
+                  key: parameter.key,
+                  parameterType: WorkflowEditorParameterTypes.Credential,
+                  credentialId: parameter.credential_id,
+                  description: parameter.description,
+                };
              } else {
                return {
                  key: parameter.key,
-                  parameterType: "credential",
+                  parameterType:
+                    WorkflowEditorParameterTypes.BitwardenLoginCredential,
                  collectionId: parameter.bitwarden_collection_id,
                  urlParameterKey: parameter.url_parameter_key,
                  description: parameter.description,
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
@@ -1,7 +1,7 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import {
  WorkflowEditorParameterType,
  WorkflowParameterValueType,
@@ -22,6 +22,8 @@ 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";

 type Props = {
  type: WorkflowEditorParameterType;
@@ -45,6 +47,9 @@ function header(type: WorkflowEditorParameterType) {
  if (type === "credential") {
    return "Add Credential Parameter";
  }
+  if (type === "bitwardenLoginCredential") {
+    return "Add Bitwarden Login Credential Parameter";
+  }
  if (type === "secret") {
    return "Add Secret Parameter";
  }
@@ -55,6 +60,7 @@ function header(type: WorkflowEditorParameterType) {
 }

 function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
+  const isCloud = useContext(CloudContext);
  const [key, setKey] = useState("");
  const [urlParameterKey, setUrlParameterKey] = useState("");
  const [description, setDescription] = useState("");
@@ -76,6 +82,8 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
  const [identityFields, setIdentityFields] = useState("");
  const [itemId, setItemId] = useState("");

+  const [credentialId, setCredentialId] = useState("");
+
  return (
    <ScrollArea>
      <ScrollAreaViewport className="max-h-[500px]">
@@ -181,7 +189,7 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
              </div>
            </>
          )}
-          {type === "credential" && (
+          {type === "bitwardenLoginCredential" && (
            <>
              <div className="space-y-1">
                <Label className="text-xs text-slate-300">
@@ -255,6 +263,18 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
              </div>
            </>
          )}
+          {
+            // temporarily cloud only
+            type === "credential" && isCloud && (
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Credential</Label>
+                <CredentialSelector
+                  value={credentialId}
+                  onChange={(value) => setCredentialId(value)}
+                />
+              </div>
+            )
+          }
          <div className="flex justify-end">
            <Button
              onClick={() => {
@@ -290,7 +310,7 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                  });
                }
                if (
-                  type === "credential" ||
+                  type === "bitwardenLoginCredential" ||
                  type === "secret" ||
                  type === "creditCardData"
                ) {
@@ -303,10 +323,10 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                    return;
                  }
                }
-                if (type === "credential") {
+                if (type === "bitwardenLoginCredential") {
                  onSave({
                    key,
-                    parameterType: "credential",
+                    parameterType: "bitwardenLoginCredential",
                    collectionId,
                    urlParameterKey,
                    description,
@@ -346,7 +366,23 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                  onSave({
                    key,
                    parameterType: "context",
-                    sourceParameterKey: sourceParameterKey,
+                    sourceParameterKey,
+                    description,
+                  });
+                }
+                if (type === "credential") {
+                  if (!credentialId) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to add parameter",
+                      description: "Credential is required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "credential",
+                    credentialId,
                    description,
                  });
                }
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx
@@ -1,7 +1,7 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
-import { useState } from "react";
+import { useState, useContext } from "react";
 import {
  WorkflowEditorParameterType,
  WorkflowParameterValueType,
@@ -22,6 +22,8 @@ import { WorkflowParameterInput } from "../../WorkflowParameterInput";
 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";

 type Props = {
  type: WorkflowEditorParameterType;
@@ -49,6 +51,9 @@ function header(type: WorkflowEditorParameterType) {
  if (type === "secret") {
    return "Edit Secret Parameter";
  }
+  if (type === "bitwardenLoginCredential") {
+    return "Edit Bitwarden Login Credential Parameter";
+  }
  if (type === "creditCardData") {
    return "Edit Credit Card Data Parameter";
  }
@@ -61,9 +66,10 @@ function WorkflowParameterEditPanel({
  onSave,
  initialValues,
 }: Props) {
+  const isCloud = useContext(CloudContext);
  const [key, setKey] = useState(initialValues.key);
  const [urlParameterKey, setUrlParameterKey] = useState(
-    initialValues.parameterType === "credential"
+    initialValues.parameterType === "bitwardenLoginCredential"
      ? initialValues.urlParameterKey
      : "",
  );
@@ -71,7 +77,7 @@ function WorkflowParameterEditPanel({
    initialValues.description ?? "",
  );
  const [collectionId, setCollectionId] = useState(
-    initialValues.parameterType === "credential" ||
+    initialValues.parameterType === "bitwardenLoginCredential" ||
      initialValues.parameterType === "secret" ||
      initialValues.parameterType === "creditCardData"
      ? initialValues.collectionId
@@ -123,6 +129,12 @@ function WorkflowParameterEditPanel({
      : "",
  );

+  const [credentialId, setCredentialId] = useState(
+    initialValues.parameterType === "credential"
+      ? initialValues.credentialId
+      : "",
+  );
+
  return (
    <ScrollArea>
      <ScrollAreaViewport className="max-h-[500px]">
@@ -228,7 +240,7 @@ function WorkflowParameterEditPanel({
              </div>
            </>
          )}
-          {type === "credential" && (
+          {type === "bitwardenLoginCredential" && (
            <>
              <div className="space-y-1">
                <Label className="text-xs text-slate-300">
@@ -302,6 +314,18 @@ function WorkflowParameterEditPanel({
              </div>
            </>
          )}
+          {
+            // temporarily cloud only
+            type === "credential" && isCloud && (
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Credential</Label>
+                <CredentialSelector
+                  value={credentialId}
+                  onChange={(value) => setCredentialId(value)}
+                />
+              </div>
+            )
+          }
          <div className="flex justify-end">
            <Button
              onClick={() => {
@@ -337,7 +361,7 @@ function WorkflowParameterEditPanel({
                  });
                }
                if (
-                  type === "credential" ||
+                  type === "bitwardenLoginCredential" ||
                  type === "secret" ||
                  type === "creditCardData"
                ) {
@@ -350,10 +374,10 @@ function WorkflowParameterEditPanel({
                    return;
                  }
                }
-                if (type === "credential") {
+                if (type === "bitwardenLoginCredential") {
                  onSave({
                    key,
-                    parameterType: "credential",
+                    parameterType: "bitwardenLoginCredential",
                    urlParameterKey,
                    collectionId,
                    description,
@@ -397,6 +421,22 @@ function WorkflowParameterEditPanel({
                    description,
                  });
                }
+                if (type === "credential") {
+                  if (!credentialId) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to save parameter",
+                      description: "Credential is required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "credential",
+                    credentialId,
+                    description,
+                  });
+                }
              }}
            >
              Save
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx
@@ -79,7 +79,7 @@ function WorkflowParametersPanel() {
                setOperationPanelState({
                  active: true,
                  operation: "add",
-                  type: "workflow",
+                  type: WorkflowEditorParameterTypes.Workflow,
                });
              }}
            >
@@ -90,7 +90,7 @@ function WorkflowParametersPanel() {
                setOperationPanelState({
                  active: true,
                  operation: "add",
-                  type: "credential",
+                  type: WorkflowEditorParameterTypes.Credential,
                });
              }}
            >
@@ -101,7 +101,18 @@ function WorkflowParametersPanel() {
                setOperationPanelState({
                  active: true,
                  operation: "add",
-                  type: "secret",
+                  type: WorkflowEditorParameterTypes.BitwardenLoginCredential,
+                });
+              }}
+            >
+              Bitwarden Login Credential Parameter
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                setOperationPanelState({
+                  active: true,
+                  operation: "add",
+                  type: WorkflowEditorParameterTypes.Secret,
                });
              }}
            >
--- a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
@@ -1559,6 +1559,13 @@ function convertParametersToParameterYAML(
          default_value: parameter.default_value,
        };
      }
+      case WorkflowParameterTypes.Credential: {
+        return {
+          ...base,
+          parameter_type: WorkflowParameterTypes.Credential,
+          credential_id: parameter.credential_id,
+        };
+      }
    }
  });
 }