Fix dirty-checking for workflows that use a Code Block (#3679)

skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx

@@ -42,8 +42,6 @@ function WorkflowDataSchemaInputGroup({
     return TSON.parse(value);
   }, [value]);
 
-  console.log({ tsonResult });
-
   const getDataSchemaSuggestionMutation = useMutation({
     mutationFn: async () => {
       const client = await getClient(credentialGetter);

skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx

@@ -9,6 +9,7 @@ import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
+import { deepEqualStringArrays } from "@/util/equality";
 
 function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
   const { updateNodeData } = useReactFlow();
@@ -64,10 +65,20 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
           <WorkflowBlockInputSet
             nodeId={id}
             onChange={(parameterKeys) => {
+              const differs = !deepEqualStringArrays(
+                inputs.parameterKeys,
+                Array.from(parameterKeys),
+              );
+
+              if (!differs) {
+                return;
+              }
+
               setInputs({
                 ...inputs,
                 parameterKeys: Array.from(parameterKeys),
               });
+
               updateNodeData(id, { parameterKeys: Array.from(parameterKeys) });
             }}
             values={new Set(inputs.parameterKeys ?? [])}

skyvern-frontend/src/util/equality.test.ts

@@ -0,0 +1,39 @@
+import { deepEqualStringArrays } from "./equality";
+import { describe, test, expect } from "vitest";
+
+describe("deepEqualStringArrays", () => {
+  test("both undefined", () => {
+    expect(deepEqualStringArrays(undefined, undefined)).toBe(true);
+  });
+
+  test("one undefined, one defined", () => {
+    expect(deepEqualStringArrays(undefined, ["a"])).toBe(false);
+    expect(deepEqualStringArrays(["a"], undefined)).toBe(false);
+  });
+
+  test("both null", () => {
+    expect(deepEqualStringArrays(null, null)).toBe(true);
+  });
+
+  test("one null, one defined", () => {
+    expect(deepEqualStringArrays(null, ["a"])).toBe(false);
+    expect(deepEqualStringArrays(["a"], null)).toBe(false);
+  });
+
+  test("different lengths", () => {
+    expect(deepEqualStringArrays(["a"], ["a", "b"])).toBe(false);
+    expect(deepEqualStringArrays(["a", "b"], ["a"])).toBe(false);
+  });
+
+  test("same elements, same order", () => {
+    expect(deepEqualStringArrays(["a", "b", "c"], ["a", "b", "c"])).toBe(true);
+  });
+
+  test("same elements, different order", () => {
+    expect(deepEqualStringArrays(["a", "b", "c"], ["c", "b", "a"])).toBe(false);
+  });
+
+  test("different elements", () => {
+    expect(deepEqualStringArrays(["a", "b", "c"], ["a", "b", "d"])).toBe(false);
+  });
+});

skyvern-frontend/src/util/equality.ts

@@ -0,0 +1,13 @@
+function deepEqualStringArrays(
+  a: string[] | null | undefined,
+  b: string[] | null | undefined,
+): boolean {
+  if (a === undefined && b === undefined) return true;
+  if (a === undefined || b === undefined) return false;
+  if (a === null && b === null) return true;
+  if (a === null || b === null) return false;
+  if (a.length !== b.length) return false;
+  return a.every((val, i) => val === b[i]);
+}
+
+export { deepEqualStringArrays };