From 91a37075277bc7b671a88c9427d3b5f7352db6a4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 1 Feb 2023 17:53:50 +0000
Subject: [PATCH] Generate bindings for unsaved "Update State" actions (#9508)

* Ensure update state actions have a binding for their own key

* Make own binding generation more futureproof

* Refactor array.find to array.some

* Move state binding generation up a level to account for all actions needing to be able to reference newly created state bindings
---
 .../builder/src/builderStore/dataBinding.js   | 21 ++++++-----
 .../ButtonActionDrawer.svelte                 | 36 +++++++++++++++++--
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index b8fa22e51b..fca106edbd 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -509,21 +509,24 @@ const getSelectedRowsBindings = asset => {
   return bindings
 }
 
+export const makeStateBinding = key => {
+  return {
+    type: "context",
+    runtimeBinding: `${makePropSafe("state")}.${makePropSafe(key)}`,
+    readableBinding: `State.${key}`,
+    category: "State",
+    icon: "AutomatedSegment",
+    display: { name: key },
+  }
+}
+
 /**
  * Gets all state bindings that are globally available.
  */
 const getStateBindings = () => {
   let bindings = []
   if (get(store).clientFeatures?.state) {
-    const safeState = makePropSafe("state")
-    bindings = getAllStateVariables().map(key => ({
-      type: "context",
-      runtimeBinding: `${safeState}.${makePropSafe(key)}`,
-      readableBinding: `State.${key}`,
-      category: "State",
-      icon: "AutomatedSegment",
-      display: { name: key },
-    }))
+    bindings = getAllStateVariables().map(makeStateBinding)
   }
   return bindings
 }
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
index 1d18fa3a92..43e3b0ed99 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -11,7 +11,10 @@
   } from "@budibase/bbui"
   import { getAvailableActions } from "./index"
   import { generate } from "shortid"
-  import { getEventContextBindings } from "builderStore/dataBinding"
+  import {
+    getEventContextBindings,
+    makeStateBinding,
+  } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
 
   const flipDurationMs = 150
@@ -52,7 +55,7 @@
     actions,
     selectedAction?.id
   )
-  $: allBindings = eventContexBindings.concat(bindings)
+  $: allBindings = getAllBindings(bindings, eventContexBindings, actions)
   $: {
     // Ensure each action has a unique ID
     if (actions) {
@@ -111,6 +114,33 @@
   function handleDndFinalize(e) {
     actions = e.detail.items
   }
+
+  const getAllBindings = (bindings, eventContextBindings, actions) => {
+    let allBindings = eventContextBindings.concat(bindings)
+
+    // Ensure bindings are generated for all "update state" action keys
+    actions
+      .filter(action => {
+        // Find all "Update State" actions which set values
+        return (
+          action[EVENT_TYPE_KEY] === "Update State" &&
+          action.parameters?.type === "set" &&
+          action.parameters.key
+        )
+      })
+      .forEach(action => {
+        // Check we have a binding for this action, and generate one if not
+        const stateBinding = makeStateBinding(action.parameters.key)
+        const hasKey = allBindings.some(binding => {
+          return binding.runtimeBinding === stateBinding.runtimeBinding
+        })
+        if (!hasKey) {
+          allBindings.push(stateBinding)
+        }
+      })
+
+    return allBindings
+  }
 </script>
 
 <DrawerContent>
@@ -186,7 +216,7 @@
         <div class="selected-action-container">
           <svelte:component
             this={selectedActionComponent}
-            parameters={selectedAction.parameters}
+            bind:parameters={selectedAction.parameters}
             bindings={allBindings}
             {nested}
           />