diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx index 8597d71a..55592a3b 100644 --- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx @@ -36,10 +36,13 @@ import { stringify as convertToYAML } from "yaml"; import { AWSSecretParameter, WorkflowApiResponse, + WorkflowEditorParameterTypes, + WorkflowParameterTypes, WorkflowParameterValueType, WorkflowSettings, } from "../types/workflowTypes"; import { + BitwardenCreditCardDataParameterYAML, BitwardenLoginCredentialParameterYAML, BitwardenSensitiveInformationParameterYAML, BlockYAML, @@ -50,6 +53,11 @@ import { } from "../types/workflowYamlTypes"; import { WorkflowHeader } from "./WorkflowHeader"; import { WorkflowParametersStateContext } from "./WorkflowParametersStateContext"; +import { + BITWARDEN_CLIENT_ID_AWS_SECRET_KEY, + BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY, + BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY, +} from "./constants"; import { edgeTypes } from "./edges"; import { AppNode, @@ -82,11 +90,12 @@ function convertToParametersYAML( | BitwardenLoginCredentialParameterYAML | ContextParameterYAML | BitwardenSensitiveInformationParameterYAML + | BitwardenCreditCardDataParameterYAML > { return parameters.map((parameter) => { - if (parameter.parameterType === "workflow") { + if (parameter.parameterType === WorkflowEditorParameterTypes.Workflow) { return { - parameter_type: "workflow", + parameter_type: WorkflowParameterTypes.Workflow, key: parameter.key, description: parameter.description || null, workflow_parameter_type: parameter.dataType, @@ -94,39 +103,58 @@ function convertToParametersYAML( ? {} : { default_value: parameter.defaultValue }), }; - } else if (parameter.parameterType === "context") { + } else if ( + parameter.parameterType === WorkflowEditorParameterTypes.Context + ) { return { - parameter_type: "context", + parameter_type: WorkflowParameterTypes.Context, key: parameter.key, description: parameter.description || null, source_parameter_key: parameter.sourceParameterKey, }; - } else if (parameter.parameterType === "secret") { + } else if ( + parameter.parameterType === WorkflowEditorParameterTypes.Secret + ) { return { - parameter_type: "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: "SKYVERN_BITWARDEN_CLIENT_ID", + bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY, bitwarden_client_secret_aws_secret_key: - "SKYVERN_BITWARDEN_CLIENT_SECRET", + BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY, bitwarden_master_password_aws_secret_key: - "SKYVERN_BITWARDEN_MASTER_PASSWORD", + BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY, + }; + } else if ( + parameter.parameterType === WorkflowEditorParameterTypes.CreditCardData + ) { + return { + parameter_type: WorkflowParameterTypes.Bitwarden_Credit_Card_Data, + key: parameter.key, + 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_secret_aws_secret_key: + BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY, + bitwarden_master_password_aws_secret_key: + BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY, }; } else { return { - parameter_type: "bitwarden_login_credential", + parameter_type: WorkflowParameterTypes.Bitwarden_Login_Credential, key: parameter.key, description: parameter.description || null, bitwarden_collection_id: parameter.collectionId, url_parameter_key: parameter.urlParameterKey, - bitwarden_client_id_aws_secret_key: "SKYVERN_BITWARDEN_CLIENT_ID", + bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY, bitwarden_client_secret_aws_secret_key: - "SKYVERN_BITWARDEN_CLIENT_SECRET", + BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY, bitwarden_master_password_aws_secret_key: - "SKYVERN_BITWARDEN_MASTER_PASSWORD", + BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY, }; } }); @@ -161,6 +189,13 @@ export type ParametersState = Array< collectionId: string; description?: string | null; } + | { + key: string; + parameterType: "creditCardData"; + itemId: string; + collectionId: string; + description?: string | null; + } >; type Props = { diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx index bfbf5239..295343d2 100644 --- a/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx @@ -7,7 +7,12 @@ import { useWorkflowQuery } from "../hooks/useWorkflowQuery"; import { FlowRenderer } from "./FlowRenderer"; import { getElements } from "./workflowEditorUtils"; import { LogoMinimized } from "@/components/LogoMinimized"; -import { WorkflowSettings } from "../types/workflowTypes"; +import { + isDisplayedInWorkflowEditor, + WorkflowEditorParameterTypes, + WorkflowParameterTypes, + WorkflowSettings, +} from "../types/workflowTypes"; function WorkflowEditor() { const { workflowPermanentId } = useParams(); @@ -27,7 +32,6 @@ function WorkflowEditor() { setHasChanges(false); }); - // TODO if (isLoading) { return (
@@ -56,13 +60,7 @@ function WorkflowEditor() { initialNodes={elements.nodes} initialEdges={elements.edges} initialParameters={workflow.workflow_definition.parameters - .filter( - (parameter) => - parameter.parameter_type === "workflow" || - parameter.parameter_type === "bitwarden_login_credential" || - parameter.parameter_type === "context" || - parameter.parameter_type === "bitwarden_sensitive_information", - ) + .filter((parameter) => isDisplayedInWorkflowEditor(parameter)) .map((parameter) => { if (parameter.parameter_type === "workflow") { return { @@ -90,6 +88,17 @@ function WorkflowEditor() { identityFields: parameter.bitwarden_identity_fields, description: parameter.description, }; + } else if ( + parameter.parameter_type === + WorkflowParameterTypes.Bitwarden_Credit_Card_Data + ) { + return { + key: parameter.key, + parameterType: WorkflowEditorParameterTypes.CreditCardData, + collectionId: parameter.bitwarden_collection_id, + itemId: parameter.bitwarden_item_id, + description: parameter.description, + }; } else { return { key: parameter.key, diff --git a/skyvern-frontend/src/routes/workflows/editor/constants.ts b/skyvern-frontend/src/routes/workflows/editor/constants.ts index 4a38ffed..7da2dfd3 100644 --- a/skyvern-frontend/src/routes/workflows/editor/constants.ts +++ b/skyvern-frontend/src/routes/workflows/editor/constants.ts @@ -14,3 +14,9 @@ export const SMTP_USERNAME_AWS_KEY = "SKYVERN_SMTP_USERNAME_SES"; export const SMTP_PASSWORD_AWS_KEY = "SKYVERN_SMTP_PASSWORD_SES"; export const EMAIL_BLOCK_SENDER = "hello@skyvern.com"; + +export const BITWARDEN_CLIENT_ID_AWS_SECRET_KEY = "SKYVERN_BITWARDEN_CLIENT_ID"; +export const BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY = + "SKYVERN_BITWARDEN_CLIENT_SECRET"; +export const BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY = + "SKYVERN_BITWARDEN_MASTER_PASSWORD"; diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx index 6a451a39..0fa52bb1 100644 --- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx @@ -2,7 +2,10 @@ import { Cross2Icon } from "@radix-ui/react-icons"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { useState } from "react"; -import { WorkflowParameterValueType } from "../../types/workflowTypes"; +import { + WorkflowEditorParameterType, + WorkflowParameterValueType, +} from "../../types/workflowTypes"; import { Select, SelectContent, @@ -21,7 +24,7 @@ import { SourceParameterKeySelector } from "../../components/SourceParameterKeyS import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area"; type Props = { - type: "workflow" | "credential" | "context" | "secret"; + type: WorkflowEditorParameterType; onClose: () => void; onSave: (value: ParametersState[number]) => void; }; @@ -35,7 +38,7 @@ const workflowParameterTypeOptions = [ { label: "JSON", value: WorkflowParameterValueType.JSON }, ]; -function header(type: "workflow" | "credential" | "context" | "secret") { +function header(type: WorkflowEditorParameterType) { if (type === "workflow") { return "Add Input Parameter"; } @@ -45,6 +48,9 @@ function header(type: "workflow" | "credential" | "context" | "secret") { if (type === "secret") { return "Add Secret Parameter"; } + if (type === "creditCardData") { + return "Add Credit Card Data Parameter"; + } return "Add Context Parameter"; } @@ -68,6 +74,7 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) { const [identityKey, setIdentityKey] = useState(""); const [identityFields, setIdentityFields] = useState(""); + const [itemId, setItemId] = useState(""); return ( @@ -230,6 +237,24 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
)} + {type === "creditCardData" && ( + <> +
+ + setItemId(e.target.value)} + /> +
+
+ + setCollectionId(e.target.value)} + /> +
+ + )}
)} + {type === "creditCardData" && ( + <> +
+ + setItemId(e.target.value)} + /> +
+
+ + setCollectionId(e.target.value)} + /> +
+ + )}