replace workflow parameter React Context with a zustand store; use everywhere (#3187)

skyvern-frontend/src/components/WorkflowBlockInputSet.tsx

@@ -1,11 +1,10 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { useState, useEffect } from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import "./workflow-block-input-set.css";
-import { useWorkflowParametersState } from "@/routes/workflows/editor/useWorkflowParametersState";
-
 type Props = {
   onChange: (parameterKeys: Set<string>) => void;
   nodeId: string;
@@ -16,7 +15,7 @@ function WorkflowBlockInputSet(props: Props) {
   const { nodeId, onChange, values } = props;
   const [parameterKeys, setParameterKeys] = useState<Set<string>>(values);
   const hasKeys = parameterKeys.size > 0;
-  const [workflowParameters] = useWorkflowParametersState();
+  const { parameters: workflowParameters } = useWorkflowParametersStore();
   const availableParameterKeys = new Set(
     workflowParameters.map((parameter) => parameter.key),
   );

skyvern-frontend/src/routes/workflows/components/CredentialParameterSourceSelector.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCredentialsQuery } from "../hooks/useCredentialsQuery";
-import { useWorkflowParametersState } from "../editor/useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { WorkflowParameterValueType } from "../types/workflowTypes";
 import { PlusIcon } from "@radix-ui/react-icons";
 import {
@@ -24,7 +24,7 @@ type Props = {
 function CredentialParameterSourceSelector({ value, onChange }: Props) {
   const { data: credentials, isFetching } = useCredentialsQuery();
   const { setIsOpen, setType } = useCredentialModalState();
-  const [workflowParameters] = useWorkflowParametersState();
+  const { parameters: workflowParameters } = useWorkflowParametersStore();
   const workflowParametersOfTypeCredentialId = workflowParameters.filter(
     (parameter) =>
       parameter.parameterType === "workflow" &&

skyvern-frontend/src/routes/workflows/components/SourceParameterKeySelector.tsx

@@ -1,5 +1,5 @@
 import { useNodes } from "@xyflow/react";
-import { useWorkflowParametersState } from "../editor/useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { AppNode, isWorkflowBlockNode } from "../editor/nodes";
 import { getOutputParameterKey } from "../editor/workflowEditorUtils";
 import {
@@ -16,7 +16,7 @@ type Props = {
 };
 
 function SourceParameterKeySelector({ value, onChange }: Props) {
-  const [workflowParameters] = useWorkflowParametersState();
+  const { parameters: workflowParameters } = useWorkflowParametersStore();
   const nodes = useNodes<AppNode>();
   const contextParameterKeys = workflowParameters
     .filter((parameter) => parameter.parameterType !== "credential")

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -16,6 +16,7 @@ import {
   useWorkflowSave,
   type WorkflowSaveData,
 } from "@/store/WorkflowHasChangesStore";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { useWorkflowTitleStore } from "@/store/WorkflowTitleStore";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import {
@@ -223,7 +224,7 @@ type Props = {
   onNodesChange: (changes: Array<NodeChange<AppNode>>) => void;
   onEdgesChange: (changes: Array<EdgeChange>) => void;
   initialTitle: string;
-  initialParameters: ParametersState;
+  // initialParameters: ParametersState;
   workflow: WorkflowApiResponse;
   onDebuggableBlockCountChange: (count: number) => void;
   onMouseDownCapture?: () => void;
@@ -238,7 +239,7 @@ function FlowRenderer({
   onNodesChange,
   onEdgesChange,
   initialTitle,
-  initialParameters,
+  // initialParameters,
   workflow,
   onDebuggableBlockCountChange,
   onMouseDownCapture,
@@ -247,7 +248,8 @@ function FlowRenderer({
   const reactFlowInstance = useReactFlow();
   const debugStore = useDebugStore();
   const { title, initializeTitle } = useWorkflowTitleStore();
-  const [parameters] = useState<ParametersState>(initialParameters);
+  // const [parameters] = useState<ParametersState>(initialParameters);
+  const parameters = useWorkflowParametersStore((state) => state.parameters);
   const nodesInitialized = useNodesInitialized();
   const [shouldConstrainPan, setShouldConstrainPan] = useState(false);
   const onNodesChangeTimeoutRef = useRef<NodeJS.Timeout | null>(null);

skyvern-frontend/src/routes/workflows/editor/WorkflowDebugger.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { ReactFlowProvider } from "@xyflow/react";
 
@@ -6,6 +7,7 @@ import { WorkflowSettings } from "../types/workflowTypes";
 import { getElements } from "./workflowEditorUtils";
 import { getInitialParameters } from "./utils";
 import { Workspace } from "./Workspace";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 
 function WorkflowDebugger() {
   const { workflowPermanentId } = useParams();
@@ -13,6 +15,17 @@ function WorkflowDebugger() {
     workflowPermanentId,
   });
 
+  const setParameters = useWorkflowParametersStore(
+    (state) => state.setParameters,
+  );
+
+  useEffect(() => {
+    if (workflow) {
+      const initialParameters = getInitialParameters(workflow);
+      setParameters(initialParameters);
+    }
+  }, [workflow, setParameters]);
+
   if (!workflow) {
     return null;
   }
@@ -42,7 +55,6 @@ function WorkflowDebugger() {
         <Workspace
           initialEdges={elements.edges}
           initialNodes={elements.nodes}
-          initialParameters={getInitialParameters(workflow)}
           initialTitle={workflow.title}
           showBrowser={true}
           workflow={workflow}

skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx

@@ -1,10 +1,12 @@
 import { ReactFlowProvider } from "@xyflow/react";
 import { useParams } from "react-router-dom";
+import { useEffect } from "react";
 import { useWorkflowQuery } from "../hooks/useWorkflowQuery";
 import { getElements } from "./workflowEditorUtils";
 import { LogoMinimized } from "@/components/LogoMinimized";
 import { WorkflowSettings } from "../types/workflowTypes";
 import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { getInitialParameters } from "./utils";
 import { Workspace } from "./Workspace";
 
@@ -18,6 +20,17 @@ function WorkflowEditor() {
   const { data: globalWorkflows, isLoading: isGlobalWorkflowsLoading } =
     useGlobalWorkflowsQuery();
 
+  const setParameters = useWorkflowParametersStore(
+    (state) => state.setParameters,
+  );
+
+  useEffect(() => {
+    if (workflow) {
+      const initialParameters = getInitialParameters(workflow);
+      setParameters(initialParameters);
+    }
+  }, [workflow, setParameters]);
+
   if (isLoading || isGlobalWorkflowsLoading) {
     return (
       <div className="flex h-screen w-full items-center justify-center">
@@ -60,7 +73,6 @@ function WorkflowEditor() {
         <Workspace
           initialEdges={elements.edges}
           initialNodes={elements.nodes}
-          initialParameters={getInitialParameters(workflow)}
           initialTitle={workflow.title}
           showBrowser={false}
           workflow={workflow}

skyvern-frontend/src/routes/workflows/editor/WorkflowParametersStateContext.ts

@@ -1,13 +0,0 @@
-import { createContext } from "react";
-import { ParametersState } from "./types";
-
-type WorkflowParametersState = [
-  ParametersState,
-  React.Dispatch<React.SetStateAction<ParametersState>>,
-];
-
-const WorkflowParametersStateContext = createContext<
-  WorkflowParametersState | undefined
->(undefined);
-
-export { WorkflowParametersStateContext };

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -44,7 +44,6 @@ import { FlowRenderer, type FlowRendererProps } from "./FlowRenderer";
 import { AppNode, isWorkflowBlockNode, WorkflowBlockNode } from "./nodes";
 import { WorkflowNodeLibraryPanel } from "./panels/WorkflowNodeLibraryPanel";
 import { WorkflowParametersPanel } from "./panels/WorkflowParametersPanel";
-import { ParametersState } from "./types";
 import { getWorkflowErrors } from "./workflowEditorUtils";
 import { WorkflowHeader } from "./WorkflowHeader";
 import {
@@ -55,16 +54,12 @@ import {
   layout,
   startNode,
 } from "./workflowEditorUtils";
-import { WorkflowParametersStateContext } from "./WorkflowParametersStateContext";
 
 const Constants = {
   NewBrowserCooldown: 30000,
 } as const;
 
-type Props = Pick<
+type Props = Pick<FlowRendererProps, "initialTitle" | "workflow"> & {
-  FlowRendererProps,
-  "initialTitle" | "initialParameters" | "workflow"
-> & {
   initialNodes: Array<AppNode>;
   initialEdges: Array<Edge>;
   showBrowser?: boolean;
@@ -82,15 +77,12 @@ function Workspace({
   initialNodes,
   initialEdges,
   initialTitle,
-  initialParameters,
   showBrowser = false,
   workflow,
 }: Props) {
   const { blockLabel, workflowPermanentId } = useParams();
   const { workflowPanelState, setWorkflowPanelState, closeWorkflowPanel } =
     useWorkflowPanelStore();
-  const [parameters, setParameters] =
-    useState<ParametersState>(initialParameters);
   const debugStore = useDebugStore();
   const [debuggableBlockCount, setDebuggableBlockCount] = useState(0);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
@@ -335,9 +327,6 @@ function Workspace({
   }
 
   return (
-    <WorkflowParametersStateContext.Provider
-      value={[parameters, setParameters]}
-    >
     <div className="relative h-full w-full">
       <Dialog
         open={openDialogue}
@@ -496,7 +485,7 @@ function Workspace({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         initialTitle={initialTitle}
-          initialParameters={initialParameters}
+        // initialParameters={initialParameters}
         workflow={workflow}
         onDebuggableBlockCountChange={(c) => setDebuggableBlockCount(c)}
         onMouseDownCapture={() => promote("infiniteCanvas")}
@@ -536,7 +525,6 @@ function Workspace({
         </FloatingWindow>
       )}
     </div>
-    </WorkflowParametersStateContext.Provider>
   );
 }
 

skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx

@@ -9,7 +9,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useCredentialsQuery } from "@/routes/workflows/hooks/useCredentialsQuery";
 import CloudContext from "@/store/CloudContext";
 import { useContext } from "react";
-import { useWorkflowParametersState } from "../../useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { CredentialsModal } from "@/routes/credentials/CredentialsModal";
 import { PlusIcon } from "@radix-ui/react-icons";
 import {
@@ -30,8 +30,10 @@ type Props = {
 function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) {
   const { setIsOpen, setType } = useCredentialModalState();
   const nodes = useNodes<AppNode>();
-  const [workflowParameters, setWorkflowParameters] =
+  const {
-    useWorkflowParametersState();
+    parameters: workflowParameters,
+    setParameters: setWorkflowParameters,
+  } = useWorkflowParametersStore();
   const credentialParameters = workflowParameters.filter(
     (parameter) =>
       parameter.parameterType === "credential" ||
@@ -170,16 +172,14 @@ function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) {
       <CredentialsModal
         onCredentialCreated={(id) => {
           onChange?.(id);
-          setWorkflowParameters((prev) => {
+          setWorkflowParameters([
-            return [
+            ...workflowParameters,
-              ...prev,
             {
               parameterType: "credential",
               credentialId: id,
               key: id,
             },
-            ];
+          ]);
-          });
         }}
       />
     </>

skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/ParametersMultiSelect.tsx

@@ -1,5 +1,5 @@
 import { MultiSelect } from "@/components/ui/multi-select";
-import { useWorkflowParametersState } from "../../useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { HelpTooltip } from "@/components/HelpTooltip";
 import { helpTooltips } from "../../helpContent";
 
@@ -14,7 +14,7 @@ function ParametersMultiSelect({
   parameters,
   onParametersChange,
 }: Props) {
-  const [workflowParameters] = useWorkflowParametersState();
+  const { parameters: workflowParameters } = useWorkflowParametersStore();
   const keys = workflowParameters
     .map((parameter) => parameter.key)
     .concat(availableOutputParameters);

skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx

@@ -1,5 +1,5 @@
 import { MultiSelect } from "@/components/ui/multi-select";
-import { useWorkflowParametersState } from "../../useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { HelpTooltip } from "@/components/HelpTooltip";
 import { helpTooltips } from "../../helpContent";
 
@@ -14,7 +14,7 @@ function TaskNodeParametersPanel({
   parameters,
   onParametersChange,
 }: Props) {
-  const [workflowParameters] = useWorkflowParametersState();
+  const { parameters: workflowParameters } = useWorkflowParametersStore();
   const keys = workflowParameters
     .map((parameter) => parameter.key)
     .concat(availableOutputParameters);

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

@@ -1,5 +1,5 @@
 import { useEdges, useNodes } from "@xyflow/react";
-import { useWorkflowParametersState } from "../useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { AppNode } from ".";
 import { getAvailableOutputParameterKeys } from "../workflowEditorUtils";
 import { PlusIcon } from "@radix-ui/react-icons";
@@ -15,7 +15,7 @@ type Props = {
 
 function WorkflowBlockParameterSelect({ nodeId, onAdd }: Props) {
   const [content, setContent] = useState("parameters");
-  const [workflowParameters] = useWorkflowParametersState();
+  const { parameters: workflowParameters } = useWorkflowParametersStore();
   const nodes = useNodes<AppNode>();
   const edges = useEdges();
   const outputParameterKeys = getAvailableOutputParameterKeys(

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useWorkflowParametersState } from "../useWorkflowParametersState";
 import { WorkflowParameterAddPanel } from "./WorkflowParameterAddPanel";
 import { ParametersState } from "../types";
 import { WorkflowParameterEditPanel } from "./WorkflowParameterEditPanel";
@@ -26,6 +25,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useReactFlow } from "@xyflow/react";
 import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import {
   WorkflowEditorParameterType,
@@ -44,8 +44,10 @@ function WorkflowParametersPanel({ onMouseDownCapture }: Props) {
   const setHasChanges = useWorkflowHasChangesStore(
     (state) => state.setHasChanges,
   );
-  const [workflowParameters, setWorkflowParameters] =
+  const {
-    useWorkflowParametersState();
+    parameters: workflowParameters,
+    setParameters: setWorkflowParameters,
+  } = useWorkflowParametersStore();
   const [operationPanelState, setOperationPanelState] = useState<{
     active: boolean;
     operation: "add" | "edit";

skyvern-frontend/src/routes/workflows/editor/useWorkflowParametersState.ts

@@ -1,14 +0,0 @@
-import { useContext } from "react";
-import { WorkflowParametersStateContext } from "./WorkflowParametersStateContext";
-
-function useWorkflowParametersState() {
-  const value = useContext(WorkflowParametersStateContext);
-  if (value === undefined) {
-    throw new Error(
-      "useWorkflowParametersState must be used within a WorkflowParametersStateProvider",
-    );
-  }
-  return value;
-}
-
-export { useWorkflowParametersState };

skyvern-frontend/src/routes/workflows/hooks/useLabelChangeHandler.ts

@@ -6,7 +6,7 @@ import {
   getUpdatedParametersAfterLabelUpdateForSourceParameterKey,
 } from "../editor/workflowEditorUtils";
 import { useState } from "react";
-import { useWorkflowParametersState } from "../editor/useWorkflowParametersState";
+import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 
 type Props = {
   id: string;
@@ -17,8 +17,10 @@ function useNodeLabelChangeHandler({ id, initialValue }: Props) {
   const [label, setLabel] = useState(initialValue);
   const nodes = useNodes<AppNode>();
   const { setNodes } = useReactFlow();
-  const [workflowParameters, setWorkflowParameters] =
+  const {
-    useWorkflowParametersState();
+    parameters: workflowParameters,
+    setParameters: setWorkflowParameters,
+  } = useWorkflowParametersStore();
 
   function handleLabelChange(value: string) {
     const existingLabels = nodes

skyvern-frontend/src/store/WorkflowParametersStore.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+import { ParametersState } from "@/routes/workflows/editor/types";
+
+interface WorkflowParametersStore {
+  parameters: ParametersState;
+  setParameters: (parameters: ParametersState) => void;
+}
+
+const useWorkflowParametersStore = create<WorkflowParametersStore>((set) => {
+  return {
+    parameters: [],
+    setParameters: (parameters: ParametersState) => set({ parameters }),
+  };
+});
+
+export { useWorkflowParametersStore };