add 1Password credential parameter support to workflow editor (#2657)

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
Co-authored-by: Shuchang Zheng <wintonzheng0325@gmail.com>

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

@@ -48,6 +48,7 @@ import {
   BlockYAML,
   ContextParameterYAML,
   CredentialParameterYAML,
+  OnePasswordCredentialParameterYAML,
   ParameterYAML,
   WorkflowCreateYAMLRequest,
   WorkflowParameterYAML,
@@ -68,6 +69,12 @@ import {
 } from "./nodes";
 import { WorkflowNodeLibraryPanel } from "./panels/WorkflowNodeLibraryPanel";
 import { WorkflowParametersPanel } from "./panels/WorkflowParametersPanel";
+import {
+  ParametersState,
+  parameterIsSkyvernCredential,
+  parameterIsOnePasswordCredential,
+  parameterIsBitwardenCredential,
+} from "./types";
 import "./reactFlowOverrideStyles.css";
 import {
   convertEchoParameters,
@@ -84,7 +91,7 @@ import {
   nodeAdderNode,
   startNode,
 } from "./workflowEditorUtils";
-import { parameterIsBitwardenCredential, ParametersState } from "./types";
+
 import { useAutoPan } from "./useAutoPan";
 
 function convertToParametersYAML(
@@ -95,9 +102,22 @@ function convertToParametersYAML(
   | ContextParameterYAML
   | BitwardenSensitiveInformationParameterYAML
   | BitwardenCreditCardDataParameterYAML
+  | OnePasswordCredentialParameterYAML
   | CredentialParameterYAML
 > {
-  return parameters.map((parameter) => {
+  return parameters
+    .map(
+      (
+        parameter: ParametersState[number],
+      ):
+        | WorkflowParameterYAML
+        | BitwardenLoginCredentialParameterYAML
+        | ContextParameterYAML
+        | BitwardenSensitiveInformationParameterYAML
+        | BitwardenCreditCardDataParameterYAML
+        | OnePasswordCredentialParameterYAML
+        | CredentialParameterYAML
+        | undefined => {
         if (parameter.parameterType === WorkflowEditorParameterTypes.Workflow) {
           return {
             parameter_type: WorkflowParameterTypes.Workflow,
@@ -121,20 +141,23 @@ function convertToParametersYAML(
           parameter.parameterType === WorkflowEditorParameterTypes.Secret
         ) {
           return {
-        parameter_type: WorkflowParameterTypes.Bitwarden_Sensitive_Information,
+            parameter_type:
+              WorkflowParameterTypes.Bitwarden_Sensitive_Information,
             key: parameter.key,
             bitwarden_identity_key: parameter.identityKey,
             bitwarden_identity_fields: parameter.identityFields,
             description: parameter.description || null,
             bitwarden_collection_id: parameter.collectionId,
-        bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
+            bitwarden_client_id_aws_secret_key:
+              BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
             bitwarden_client_secret_aws_secret_key:
               BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY,
             bitwarden_master_password_aws_secret_key:
               BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
           };
         } else if (
-      parameter.parameterType === WorkflowEditorParameterTypes.CreditCardData
+          parameter.parameterType ===
+          WorkflowEditorParameterTypes.CreditCardData
         ) {
           return {
             parameter_type: WorkflowParameterTypes.Bitwarden_Credit_Card_Data,
@@ -142,7 +165,8 @@ function convertToParametersYAML(
             description: parameter.description || null,
             bitwarden_item_id: parameter.itemId,
             bitwarden_collection_id: parameter.collectionId,
-        bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
+            bitwarden_client_id_aws_secret_key:
+              BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
             bitwarden_client_secret_aws_secret_key:
               BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY,
             bitwarden_master_password_aws_secret_key:
@@ -164,7 +188,7 @@ function convertToParametersYAML(
               bitwarden_master_password_aws_secret_key:
                 BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
             };
-      } else {
+          } else if (parameterIsSkyvernCredential(parameter)) {
             return {
               parameter_type: WorkflowParameterTypes.Workflow,
               workflow_parameter_type: WorkflowParameterValueType.CredentialId,
@@ -172,9 +196,39 @@ function convertToParametersYAML(
               key: parameter.key,
               description: parameter.description || null,
             };
+          } else if (parameterIsOnePasswordCredential(parameter)) {
+            return {
+              parameter_type: WorkflowParameterTypes.OnePassword,
+              key: parameter.key,
+              description: parameter.description || null,
+              vault_id: parameter.vaultId,
+              item_id: parameter.itemId,
+            };
           }
         }
-  });
+        return undefined;
+      },
+    )
+    .filter(
+      (
+        param:
+          | WorkflowParameterYAML
+          | BitwardenLoginCredentialParameterYAML
+          | ContextParameterYAML
+          | BitwardenSensitiveInformationParameterYAML
+          | BitwardenCreditCardDataParameterYAML
+          | OnePasswordCredentialParameterYAML
+          | CredentialParameterYAML
+          | undefined,
+      ): param is
+        | WorkflowParameterYAML
+        | BitwardenLoginCredentialParameterYAML
+        | ContextParameterYAML
+        | BitwardenSensitiveInformationParameterYAML
+        | BitwardenCreditCardDataParameterYAML
+        | OnePasswordCredentialParameterYAML
+        | CredentialParameterYAML => param !== undefined,
+    );
 }
 
 type Props = {
@@ -207,7 +261,8 @@ function FlowRenderer({
     useWorkflowPanelStore();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const [parameters, setParameters] = useState(initialParameters);
+  const [parameters, setParameters] =
+    useState<ParametersState>(initialParameters);
   const [title, setTitle] = useState(initialTitle);
   const nodesInitialized = useNodesInitialized();
   const { hasChanges, setHasChanges } = useWorkflowHasChangesStore();

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

@@ -14,6 +14,7 @@ import {
   WorkflowParameterValueType,
   WorkflowSettings,
 } from "../types/workflowTypes";
+import { ParametersState } from "./types";
 import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
 
 function WorkflowEditor() {
@@ -74,7 +75,8 @@ function WorkflowEditor() {
           initialTitle={workflow.title}
           initialNodes={elements.nodes}
           initialEdges={elements.edges}
-          initialParameters={workflow.workflow_definition.parameters
+          initialParameters={
+            workflow.workflow_definition.parameters
               .filter((parameter) => isDisplayedInWorkflowEditor(parameter))
               .map((parameter) => {
                 if (
@@ -139,7 +141,21 @@ function WorkflowEditor() {
                     credentialId: parameter.credential_id,
                     description: parameter.description,
                   };
-              } else {
+                } else if (
+                  parameter.parameter_type ===
+                  WorkflowParameterTypes.OnePassword
+                ) {
+                  return {
+                    key: parameter.key,
+                    parameterType: WorkflowEditorParameterTypes.OnePassword,
+                    vaultId: parameter.vault_id,
+                    itemId: parameter.item_id,
+                    description: parameter.description,
+                  };
+                } else if (
+                  parameter.parameter_type ===
+                  WorkflowParameterTypes.Bitwarden_Login_Credential
+                ) {
                   return {
                     key: parameter.key,
                     parameterType: WorkflowEditorParameterTypes.Credential,
@@ -149,7 +165,10 @@ function WorkflowEditor() {
                     description: parameter.description,
                   };
                 }
-            })}
+                return undefined;
+              })
+              .filter(Boolean) as ParametersState
+          }
           workflow={workflow}
         />
       </ReactFlowProvider>

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

@@ -80,9 +80,11 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
     string | undefined
   >(undefined);
 
-  const [credentialType, setCredentialType] = useState<"bitwarden" | "skyvern">(
+  const [credentialType, setCredentialType] = useState<
-    "skyvern",
+    "bitwarden" | "skyvern" | "onepassword"
-  );
+  >("skyvern");
+  const [vaultId, setVaultId] = useState("");
+  const [itemId, setItemId] = useState("");
 
   const [identityKey, setIdentityKey] = useState("");
   const [identityFields, setIdentityFields] = useState("");
@@ -200,11 +202,14 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
             <SwitchBar
               value={credentialType}
               onChange={(value) => {
-                setCredentialType(value as "bitwarden" | "skyvern");
+                setCredentialType(
+                  value as "bitwarden" | "skyvern" | "onepassword",
+                );
               }}
               options={[
                 { label: "Skyvern", value: "skyvern" },
                 { label: "Bitwarden", value: "bitwarden" },
+                { label: "1Password", value: "onepassword" },
               ]}
             />
           )}
@@ -237,6 +242,24 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
               </div>
             </>
           )}
+          {type === "credential" && credentialType === "onepassword" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Vault ID</Label>
+                <Input
+                  value={vaultId}
+                  onChange={(e) => setVaultId(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Item ID</Label>
+                <Input
+                  value={itemId}
+                  onChange={(e) => setItemId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
           {type === "context" && (
             <div className="space-y-1">
               <Label className="text-xs text-slate-300">Source Parameter</Label>
@@ -387,6 +410,23 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                     description,
                   });
                 }
+                if (type === "credential" && credentialType === "onepassword") {
+                  if (vaultId.trim() === "" || itemId.trim() === "") {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to add parameter",
+                      description: "Vault ID and Item ID are required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "onepassword",
+                    vaultId,
+                    itemId,
+                    description,
+                  });
+                }
                 if (type === "secret" || type === "creditCardData") {
                   if (!bitwardenCollectionId) {
                     toast({

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

@@ -26,6 +26,7 @@ import { WorkflowParameterInput } from "../../WorkflowParameterInput";
 import {
   parameterIsBitwardenCredential,
   parameterIsSkyvernCredential,
+  parameterIsOnePasswordCredential,
   ParametersState,
 } from "../types";
 import { getDefaultValueForParameterType } from "../workflowEditorUtils";
@@ -78,8 +79,17 @@ function WorkflowParameterEditPanel({
   const isSkyvernCredential =
     initialValues.parameterType === "credential" &&
     parameterIsSkyvernCredential(initialValues);
-  const [credentialType, setCredentialType] = useState<"bitwarden" | "skyvern">(
+  const isOnePasswordCredential =
-    isBitwardenCredential ? "bitwarden" : "skyvern",
+    initialValues.parameterType === "onepassword" &&
+    parameterIsOnePasswordCredential(initialValues);
+  const [credentialType, setCredentialType] = useState<
+    "bitwarden" | "skyvern" | "onepassword"
+  >(
+    isBitwardenCredential
+      ? "bitwarden"
+      : isOnePasswordCredential
+        ? "onepassword"
+        : "skyvern",
   );
   const [urlParameterKey, setUrlParameterKey] = useState(
     isBitwardenCredential ? initialValues.urlParameterKey ?? "" : "",
@@ -143,6 +153,12 @@ function WorkflowParameterEditPanel({
   const [credentialId, setCredentialId] = useState(
     isSkyvernCredential ? initialValues.credentialId : "",
   );
+  const [vaultId, setVaultId] = useState(
+    isOnePasswordCredential ? initialValues.vaultId : "",
+  );
+  const [opItemId, setOpItemId] = useState(
+    isOnePasswordCredential ? initialValues.itemId : "",
+  );
 
   const [bitwardenLoginCredentialItemId, setBitwardenLoginCredentialItemId] =
     useState(isBitwardenCredential ? initialValues.itemId ?? "" : "");
@@ -256,11 +272,14 @@ function WorkflowParameterEditPanel({
             <SwitchBar
               value={credentialType}
               onChange={(value) => {
-                setCredentialType(value as "bitwarden" | "skyvern");
+                setCredentialType(
+                  value as "bitwarden" | "skyvern" | "onepassword",
+                );
               }}
               options={[
                 { label: "Skyvern", value: "skyvern" },
                 { label: "Bitwarden", value: "bitwarden" },
+                { label: "1Password", value: "onepassword" },
               ]}
             />
           )}
@@ -293,6 +312,24 @@ function WorkflowParameterEditPanel({
               </div>
             </>
           )}
+          {type === "credential" && credentialType === "onepassword" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Vault ID</Label>
+                <Input
+                  value={vaultId}
+                  onChange={(e) => setVaultId(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Item ID</Label>
+                <Input
+                  value={opItemId}
+                  onChange={(e) => setOpItemId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
           {type === "context" && (
             <div className="space-y-1">
               <Label className="text-xs text-slate-300">Source Parameter</Label>
@@ -430,6 +467,23 @@ function WorkflowParameterEditPanel({
                     description,
                   });
                 }
+                if (type === "credential" && credentialType === "onepassword") {
+                  if (vaultId.trim() === "" || opItemId.trim() === "") {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to save parameter",
+                      description: "Vault ID and Item ID are required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "onepassword",
+                    vaultId,
+                    itemId: opItemId,
+                    description,
+                  });
+                }
                 if (type === "secret" || type === "creditCardData") {
                   if (!collectionId) {
                     toast({

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

@@ -153,7 +153,10 @@ function WorkflowParametersPanel() {
                             active: true,
                             operation: "edit",
                             parameter: parameter,
-                            type: parameter.parameterType,
+                            type:
+                              parameter.parameterType === "onepassword"
+                                ? WorkflowEditorParameterTypes.OnePassword
+                                : parameter.parameterType,
                           });
                         }}
                       />

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

@@ -16,6 +16,14 @@ export type SkyvernCredential = {
   credentialId: string;
 };
 
+export type OnePasswordCredential = {
+  key: string;
+  description?: string | null;
+  parameterType: "onepassword";
+  vaultId: string;
+  itemId: string;
+};
+
 export function parameterIsBitwardenCredential(
   parameter: CredentialParameterState,
 ): parameter is BitwardenLoginCredential {
@@ -28,9 +36,16 @@ export function parameterIsSkyvernCredential(
   return "credentialId" in parameter;
 }
 
+export function parameterIsOnePasswordCredential(
+  parameter: CredentialParameterState,
+): parameter is OnePasswordCredential {
+  return "vaultId" in parameter && "itemId" in parameter;
+}
+
 export type CredentialParameterState =
   | BitwardenLoginCredential
-  | SkyvernCredential;
+  | SkyvernCredential
+  | OnePasswordCredential;
 
 export type ParametersState = Array<
   | {
@@ -53,6 +68,7 @@ export type ParametersState = Array<
       identityFields: Array<string>;
       collectionId: string;
       description?: string | null;
+      maybe?: boolean;
     }
   | {
       key: string;

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

@@ -1614,7 +1614,8 @@ function getAvailableOutputParameterKeys(
 function convertParametersToParameterYAML(
   parameters: Array<Exclude<Parameter, OutputParameter>>,
 ): Array<ParameterYAML> {
-  return parameters.map((parameter) => {
+  return parameters
+    .map((parameter) => {
       const base = {
         key: parameter.key,
         description: parameter.description,
@@ -1695,8 +1696,17 @@ function convertParametersToParameterYAML(
             credential_id: parameter.credential_id,
           };
         }
+        case WorkflowParameterTypes.OnePassword: {
+          return {
+            ...base,
+            parameter_type: WorkflowParameterTypes.OnePassword,
+            vault_id: parameter.vault_id,
+            item_id: parameter.item_id,
+          };
         }
-  });
+      }
+    })
+    .filter(Boolean);
 }
 
 function convertBlocksToBlockYAML(

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

@@ -61,6 +61,17 @@ export type BitwardenCreditCardDataParameter = WorkflowParameterBase & {
   deleted_at: string | null;
 };
 
+export type OnePasswordCredentialParameter = WorkflowParameterBase & {
+  parameter_type: "onepassword";
+  workflow_id: string;
+  onepassword_credential_parameter_id: string;
+  vault_id: string;
+  item_id: string;
+  created_at: string;
+  modified_at: string;
+  deleted_at: string | null;
+};
+
 export type CredentialParameter = WorkflowParameterBase & {
   parameter_type: "credential";
   workflow_id: string;
@@ -118,6 +129,7 @@ export const WorkflowParameterTypes = {
   Bitwarden_Login_Credential: "bitwarden_login_credential",
   Bitwarden_Sensitive_Information: "bitwarden_sensitive_information",
   Bitwarden_Credit_Card_Data: "bitwarden_credit_card_data",
+  OnePassword: "onepassword",
   Credential: "credential",
 } as const;
 
@@ -132,6 +144,7 @@ export function isDisplayedInWorkflowEditor(
   | BitwardenCreditCardDataParameter
   | BitwardenLoginCredentialParameter
   | BitwardenSensitiveInformationParameter
+  | OnePasswordCredentialParameter
   | CredentialParameter {
   return (
     parameter.parameter_type === WorkflowParameterTypes.Workflow ||
@@ -142,6 +155,7 @@ export function isDisplayedInWorkflowEditor(
       WorkflowParameterTypes.Bitwarden_Sensitive_Information ||
     parameter.parameter_type ===
       WorkflowParameterTypes.Bitwarden_Credit_Card_Data ||
+    parameter.parameter_type === WorkflowParameterTypes.OnePassword ||
     parameter.parameter_type === WorkflowParameterTypes.Credential
   );
 }
@@ -153,6 +167,7 @@ export type Parameter =
   | BitwardenLoginCredentialParameter
   | BitwardenSensitiveInformationParameter
   | BitwardenCreditCardDataParameter
+  | OnePasswordCredentialParameter
   | AWSSecretParameter
   | CredentialParameter;
 
@@ -222,6 +237,7 @@ export const WorkflowEditorParameterTypes = {
   Secret: "secret",
   Context: "context",
   CreditCardData: "creditCardData",
+  OnePassword: "onepassword",
 } as const;
 
 export type WorkflowEditorParameterType =

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

@@ -23,11 +23,12 @@ export type ParameterYAML =
   | WorkflowParameterYAML
   | BitwardenLoginCredentialParameterYAML
   | AWSSecretParameterYAML
-  | CredentialParameterYAML
+  | BitwardenSensitiveInformationParameterYAML
+  | BitwardenCreditCardDataParameterYAML
+  | OnePasswordCredentialParameterYAML
   | ContextParameterYAML
   | OutputParameterYAML
-  | BitwardenSensitiveInformationParameterYAML
+  | CredentialParameterYAML;
-  | BitwardenCreditCardDataParameterYAML;
 
 export type ParameterYAMLBase = {
   parameter_type: string;
@@ -78,6 +79,12 @@ export type BitwardenCreditCardDataParameterYAML = ParameterYAMLBase & {
   bitwarden_master_password_aws_secret_key: string;
 };
 
+export type OnePasswordCredentialParameterYAML = ParameterYAMLBase & {
+  parameter_type: "onepassword";
+  vault_id: string;
+  item_id: string;
+};
+
 export type ContextParameterYAML = ParameterYAMLBase & {
   parameter_type: "context";
   source_parameter_key: string;