From 87322d62866a3529c6933e56ca8a2f6c01457fa8 Mon Sep 17 00:00:00 2001
From: ykeremy <kerem@skyvern.com>
Date: Thu, 12 Sep 2024 14:30:39 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'skyvern-fronte?=
 =?UTF-8?q?nd/src/'=20with=20remote=20'skyvern-frontend/src/'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ELLIPSIS_HIDDEN -->

| :rocket: | This description was created by [Ellipsis](https://www.ellipsis.dev) for commit d893ec0d6e77410d3255715d2dc1599c92c24b92  |
|--------|--------|

fix: auto-filter deleted parameters from `parameterKeys` in task nodes

### Summary:
Update `WorkflowParametersPanel` to auto-filter deleted parameters and add utility for `nodeAdder` identification.

**Key points**:
- **Behavior**: Deleting a parameter removes it from `parameterKeys` in `task` nodes; editing updates `parameterKeys` with the new key.
- **Utilities**: Add `isNodeAdderNode()` to identify `nodeAdder` nodes.
- **Types**: Change `NodeAdderNodeData` type to `Record<string, unknown>` to allow unknown properties.

----
Generated with :heart: by [ellipsis.dev](https://www.ellipsis.dev)

<!-- ELLIPSIS_HIDDEN -->
---
 .../routes/workflows/editor/FlowRenderer.tsx  | 28 ++++++-------
 .../editor/panels/WorkflowParametersPanel.tsx | 41 +++++++++++++++++++
 2 files changed, 55 insertions(+), 14 deletions(-)

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 (
     <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",