diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx index 6af7079c3..05e73bead 100644 --- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx @@ -1,3 +1,5 @@ +import { DeleteNodeCallbackContext } from "@/store/DeleteNodeCallbackContext"; +import { useWorkflowPanelStore } from "@/store/WorkflowPanelStore"; import { Background, BackgroundVariant, @@ -10,8 +12,20 @@ import { useNodesState, } from "@xyflow/react"; import "@xyflow/react/dist/style.css"; +import { nanoid } from "nanoid"; +import { useEffect, useState } from "react"; +import { WorkflowParameterValueType } from "../types/workflowTypes"; +import { + BitwardenLoginCredentialParameterYAML, + BlockYAML, + WorkflowParameterYAML, +} from "../types/workflowYamlTypes"; import { WorkflowHeader } from "./WorkflowHeader"; +import { WorkflowParametersStateContext } from "./WorkflowParametersStateContext"; +import { edgeTypes } from "./edges"; import { AppNode, nodeTypes } from "./nodes"; +import { WorkflowNodeLibraryPanel } from "./panels/WorkflowNodeLibraryPanel"; +import { WorkflowParametersPanel } from "./panels/WorkflowParametersPanel"; import "./reactFlowOverrideStyles.css"; import { createNode, @@ -19,20 +33,6 @@ import { getWorkflowBlocks, layout, } from "./workflowEditorUtils"; -import { useEffect, useState } from "react"; -import { WorkflowParametersPanel } from "./panels/WorkflowParametersPanel"; -import { edgeTypes } from "./edges"; -import { useWorkflowPanelStore } from "@/store/WorkflowPanelStore"; -import { WorkflowNodeLibraryPanel } from "./panels/WorkflowNodeLibraryPanel"; -import { - BitwardenLoginCredentialParameterYAML, - BlockYAML, - WorkflowParameterYAML, -} from "../types/workflowYamlTypes"; -import { WorkflowParametersStateContext } from "./WorkflowParametersStateContext"; -import { WorkflowParameterValueType } from "../types/workflowTypes"; -import { DeleteNodeCallbackContext } from "@/store/DeleteNodeCallbackContext"; -import { nanoid } from "nanoid"; function convertToParametersYAML( parameters: ParametersState, diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx index c37763915..1e40f9955 100644 --- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx @@ -24,6 +24,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; +import { useReactFlow } from "@xyflow/react"; const WORKFLOW_EDIT_PANEL_WIDTH = 20 * 16; const WORKFLOW_EDIT_PANEL_GAP = 1 * 16; @@ -42,6 +43,7 @@ function WorkflowParametersPanel() { parameter: null, type: "workflow", }); + const { setNodes } = useReactFlow(); return (
@@ -142,6 +144,22 @@ function WorkflowParametersPanel() { (p) => p.key !== parameter.key, ), ); + setNodes((nodes) => { + return nodes.map((node) => { + if (node.type === "task") { + return { + ...node, + data: { + ...node.data, + parameterKeys: ( + node.data.parameterKeys as Array + ).filter((key) => key !== parameter.key), + }, + }; + } + return node; + }); + }); }} > Delete @@ -202,6 +220,29 @@ function WorkflowParametersPanel() { return parameter; }), ); + setNodes((nodes) => { + return nodes.map((node) => { + if (node.type === "task") { + return { + ...node, + data: { + ...node.data, + parameterKeys: ( + node.data.parameterKeys as Array + ).map((key) => { + if ( + key === operationPanelState.parameter?.key + ) { + return editedParameter.key; + } + return key; + }), + }, + }; + } + return node; + }); + }); setOperationPanelState({ active: false, operation: "edit",