Auto filter deleted parameters from parameter_keys (#819)

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,

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 (
     <div className="relative w-[25rem] rounded-xl border border-slate-700 bg-slate-950 p-5 shadow-xl">
@@ -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<string>
+                                      ).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<string>
+                              ).map((key) => {
+                                if (
+                                  key === operationPanelState.parameter?.key
+                                ) {
+                                  return editedParameter.key;
+                                }
+                                return key;
+                              }),
+                            },
+                          };
+                        }
+                        return node;
+                      });
+                    });
                     setOperationPanelState({
                       active: false,
                       operation: "edit",