Merge pull request #21 from steebchen/feat/sidebar-inputs

feat(sidebar): save action form inputs on change to state

packages/workflow/src/ui/Provider.tsx

@@ -30,7 +30,7 @@ export type ProviderContextType = ProviderProps & {
   sidebarPosition: "right" | "left";
   setSidebarPosition: (p: "right" | "left") => void;
 
-  selectedNode: Node | undefined;
+  selectedNode: Node<any> | undefined;
   setSelectedNode: (n: Node | undefined) => void;
 
   // blankNodeParent represents the parent of a blank node.  The blank node
@@ -63,7 +63,7 @@ export const useOnChange = (): (w: Workflow) => void => {
 
 /**
  * Hook for accessing the workflow we're modifying
- * 
+ *
  */
 export const useWorkflow = (): Workflow | undefined => {
   const ctx = useContext(ProviderContext);
@@ -72,7 +72,7 @@ export const useWorkflow = (): Workflow | undefined => {
 
 /**
  * Hook for accessing the trigger which runs the workflow.
- * 
+ *
  */
 export const useTrigger = (): any => {
   const ctx = useContext(ProviderContext);
@@ -82,7 +82,7 @@ export const useTrigger = (): any => {
 /**
  * Hook for accessing the available actions we can use within
  * the workflow.
- * 
+ *
  */
 export const useAvailableActions = (): PublicEngineAction[] => {
   const ctx = useContext(ProviderContext);
@@ -93,7 +93,7 @@ export const useAvailableActions = (): PublicEngineAction[] => {
 /**
  * Hook for accessing the position of the sidebar.  Only for internal
  * use.
- * 
+ *
  * @returns the position of the sidebar.
  */
 export const useSidebarPosition = (): "right" | "left" => {
@@ -200,4 +200,4 @@ export const Provider = (props: ProviderProps & { children: React.ReactNode }) =
       {children}
     </ProviderContext.Provider>
   );
-}
+}

packages/workflow/src/ui/sidebar/ActionForm.tsx

@@ -1,4 +1,5 @@
 import { ActionInput, PublicEngineAction, WorkflowAction } from "../../types";
+import { useProvider } from '../Provider';
 
 type SidebarActionFormProps = {
   workflowAction: WorkflowAction,
@@ -37,12 +38,40 @@ export const InputFormUI = (inputs: Record<string, ActionInput>) => {
   // or previous actions.
   return (
     <>
-      {Object.entries(inputs).map(([key, input]) => (
-        <label key={key}>
-          {input.type.title || key}
-          {input.fieldType === "textarea" ? <textarea /> : <input type="text" />}
+      {Object.entries(inputs).map(([id, input]) => (
+        <label key={id}>
+          {input.type.title}
+
+          <FormUIInputRenderer input={input} id={id} />
         </label>
       ))}
     </>
   )
-}
+}
+
+const FormUIInputRenderer = ({ id, input }: { id: string, input: ActionInput }) => {
+  const { selectedNode  } = useProvider();
+
+  selectedNode!.data.action.inputs = selectedNode!.data.action.inputs || {};
+
+  if (input.fieldType === "textarea") {
+    return (
+      <textarea
+        defaultValue={selectedNode!.data.action.inputs[id]}
+        onChange={(e) => {
+          selectedNode!.data.action.inputs[id] = e.target.value;
+        }}
+      />
+    )
+  }
+
+  return (
+    <input
+      type="text"
+      defaultValue={selectedNode!.data.action.inputs[id]}
+      onChange={(e) => {
+        selectedNode!.data.action.inputs[id] = e.target.value;
+      }}
+    />
+  )
+}