From a7be624d6448ef9ce3b6d295fb96cd0d1b4a5aba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 26 Aug 2021 11:28:44 +0100
Subject: [PATCH 1/5] Add client app state and button actions to control it

---
 .../builder/src/builderStore/dataBinding.js   | 15 +++++
 .../EventsEditor/actions/UpdateState.svelte   | 56 +++++++++++++++++++
 .../EventsEditor/actions/index.js             |  5 ++
 .../client/src/components/ClientApp.svelte    | 41 +++++++-------
 .../components/StateBindingsProvider.svelte   |  8 +++
 packages/client/src/store/index.js            |  1 +
 packages/client/src/store/state.js            | 25 +++++++++
 packages/client/src/utils/buttonActions.js    | 11 ++++
 8 files changed, 143 insertions(+), 19 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
 create mode 100644 packages/client/src/components/StateBindingsProvider.svelte
 create mode 100644 packages/client/src/store/state.js

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 00eaaf0249..f6e861137b 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -18,7 +18,9 @@ export const getBindableProperties = (asset, componentId) => {
   const userBindings = getUserBindings()
   const urlBindings = getUrlBindings(asset)
   const deviceBindings = getDeviceBindings()
+  const stateBindings = getStateBindings()
   return [
+    ...stateBindings,
     ...deviceBindings,
     ...urlBindings,
     ...contextBindings,
@@ -256,6 +258,19 @@ const getDeviceBindings = () => {
   return bindings
 }
 
+/**
+ * Gets all state bindings that are globally available.
+ */
+const getStateBindings = () => {
+  return [
+    {
+      type: "context",
+      runtimeBinding: makePropSafe("state"),
+      readableBinding: `State`,
+    },
+  ]
+}
+
 /**
  * Gets all bindable properties from URL parameters.
  */
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
new file mode 100644
index 0000000000..c85ad70289
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
@@ -0,0 +1,56 @@
+<script>
+  import { Select, Label, Input } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+  export let bindings = []
+
+  const typeOptions = [
+    {
+      label: "Set value",
+      value: "set",
+    },
+    {
+      label: "Delete value",
+      value: "delete",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "set"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Type</Label>
+  <Select
+    placeholder={null}
+    bind:value={parameters.type}
+    options={typeOptions}
+  />
+  <Label small>Key</Label>
+  <Input bind:value={parameters.key} />
+  {#if parameters.type === "set"}
+    <Label small>Value</Label>
+    <DrawerBindableInput
+      {bindings}
+      value={parameters.value}
+      on:change={e => (parameters.value = e.detail)}
+    />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 9cf2461b77..6c285939ac 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -8,6 +8,7 @@ import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
 import CloseScreenModal from "./CloseScreenModal.svelte"
 import ChangeFormStep from "./ChangeFormStep.svelte"
+import UpdateStateStep from "./UpdateState.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -57,4 +58,8 @@ export default [
     name: "Change Form Step",
     component: ChangeFormStep,
   },
+  {
+    name: "Update State",
+    component: UpdateStateStep,
+  },
 ]
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 11347821a9..d46199dbdd 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -22,6 +22,7 @@
   import ErrorSVG from "../../../builder/assets/error.svg"
   import UserBindingsProvider from "./UserBindingsProvider.svelte"
   import DeviceBindingsProvider from "./DeviceBindingsProvider.svelte"
+  import StateBindingsProvider from "./StateBindingsProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -85,28 +86,30 @@
     {:else if $screenStore.activeLayout}
       <UserBindingsProvider>
         <DeviceBindingsProvider>
-          <div id="app-root" class:preview={$builderStore.inBuilder}>
-            {#key $screenStore.activeLayout._id}
-              <Component instance={$screenStore.activeLayout.props} />
+          <StateBindingsProvider>
+            <div id="app-root" class:preview={$builderStore.inBuilder}>
+              {#key $screenStore.activeLayout._id}
+                <Component instance={$screenStore.activeLayout.props} />
+              {/key}
+            </div>
+            <NotificationDisplay />
+            <ConfirmationDisplay />
+            <PeekScreenDisplay />
+            <!-- Key block needs to be outside the if statement or it breaks -->
+            {#key $builderStore.selectedComponentId}
+              {#if $builderStore.inBuilder}
+                <SettingsBar />
+              {/if}
             {/key}
-          </div>
-          <NotificationDisplay />
-          <ConfirmationDisplay />
-          <PeekScreenDisplay />
-          <!-- Key block needs to be outside the if statement or it breaks -->
-          {#key $builderStore.selectedComponentId}
+            <!--
+                We don't want to key these by componentID as they control their own
+                re-mounting to avoid flashes.
+              -->
             {#if $builderStore.inBuilder}
-              <SettingsBar />
+              <SelectionIndicator />
+              <HoverIndicator />
             {/if}
-          {/key}
-          <!--
-              We don't want to key these by componentID as they control their own
-              re-mounting to avoid flashes.
-            -->
-          {#if $builderStore.inBuilder}
-            <SelectionIndicator />
-            <HoverIndicator />
-          {/if}
+          </StateBindingsProvider>
         </DeviceBindingsProvider>
       </UserBindingsProvider>
     {/if}
diff --git a/packages/client/src/components/StateBindingsProvider.svelte b/packages/client/src/components/StateBindingsProvider.svelte
new file mode 100644
index 0000000000..b2c049ff31
--- /dev/null
+++ b/packages/client/src/components/StateBindingsProvider.svelte
@@ -0,0 +1,8 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { stateStore } from "../store"
+</script>
+
+<Provider key="state" data={$stateStore}>
+  <slot />
+</Provider>
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index 43de7bb6da..6c99e3f453 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -7,6 +7,7 @@ export { builderStore } from "./builder"
 export { dataSourceStore } from "./dataSource"
 export { confirmationStore } from "./confirmation"
 export { peekStore } from "./peek"
+export { stateStore } from "./state"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
diff --git a/packages/client/src/store/state.js b/packages/client/src/store/state.js
new file mode 100644
index 0000000000..c32264914b
--- /dev/null
+++ b/packages/client/src/store/state.js
@@ -0,0 +1,25 @@
+import { writable } from "svelte/store"
+
+const createStateStore = () => {
+  const store = writable({})
+
+  const setValue = (key, value) => {
+    store.update(state => {
+      state[key] = value
+      return state
+    })
+  }
+  const deleteValue = key => {
+    store.update(state => {
+      delete state[key]
+      return state
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { setValue, deleteValue },
+  }
+}
+
+export const stateStore = createStateStore()
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index e6be6ec03d..11c177d4f6 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -5,6 +5,7 @@ import {
   confirmationStore,
   authStore,
   peekStore,
+  stateStore,
 } from "../store"
 import { saveRow, deleteRow, executeQuery, triggerAutomation } from "../api"
 import { ActionTypes } from "../constants"
@@ -122,6 +123,15 @@ const closeScreenModalHandler = () => {
   window.dispatchEvent(new Event("close-screen-modal"))
 }
 
+const updateStateHandler = action => {
+  const { type, key, value } = action.parameters
+  if (type === "set") {
+    stateStore.actions.setValue(key, value)
+  } else if (type === "delete") {
+    stateStore.actions.deleteValue(key)
+  }
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
@@ -134,6 +144,7 @@ const handlerMap = {
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
   ["Change Form Step"]: changeFormStepHandler,
+  ["Update State"]: updateStateHandler,
 }
 
 const confirmTextMap = {

From 21029b80ba40b5512e025c79f196dc78f635b855 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 26 Aug 2021 16:46:25 +0100
Subject: [PATCH 2/5] Automatically determine which state keys are available

---
 .../builder/src/builderStore/dataBinding.js   | 65 ++++++++++++++++---
 .../EventsEditor/actions/UpdateState.svelte   |  6 +-
 2 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index f6e861137b..887695d41e 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -1,6 +1,10 @@
 import { cloneDeep } from "lodash/fp"
 import { get } from "svelte/store"
-import { findComponent, findComponentPath } from "./storeUtils"
+import {
+  findComponent,
+  findComponentPath,
+  findAllMatchingComponents,
+} from "./storeUtils"
 import { store } from "builderStore"
 import { tables as tablesStore, queries as queriesStores } from "stores/backend"
 import { makePropSafe } from "@budibase/string-templates"
@@ -262,13 +266,12 @@ const getDeviceBindings = () => {
  * Gets all state bindings that are globally available.
  */
 const getStateBindings = () => {
-  return [
-    {
-      type: "context",
-      runtimeBinding: makePropSafe("state"),
-      readableBinding: `State`,
-    },
-  ]
+  const safeState = makePropSafe("state")
+  return getAllStateVariables().map(key => ({
+    type: "context",
+    runtimeBinding: `${safeState}.${makePropSafe(key)}`,
+    readableBinding: `State.${key}`,
+  }))
 }
 
 /**
@@ -473,3 +476,49 @@ export function runtimeToReadableBinding(bindableProperties, textWithBindings) {
     "readableBinding"
   )
 }
+
+/**
+ * Returns an array of the keys of any state variables which are set anywhere
+ * in the app.
+ */
+export const getAllStateVariables = () => {
+  let allComponents = []
+
+  // Find all onClick settings in all layouts
+  get(store).layouts.forEach(layout => {
+    const components = findAllMatchingComponents(
+      layout.props,
+      c => c.onClick != null
+    )
+    allComponents = allComponents.concat(components || [])
+  })
+
+  // Find all onClick settings in all screens
+  get(store).screens.forEach(screen => {
+    const components = findAllMatchingComponents(
+      screen.props,
+      c => c.onClick != null
+    )
+    allComponents = allComponents.concat(components || [])
+  })
+
+  // Add state bindings for all state actions
+  let bindingSet = new Set()
+  allComponents.forEach(component => {
+    if (!Array.isArray(component.onClick)) {
+      return
+    }
+    component.onClick.forEach(action => {
+      if (
+        action["##eventHandlerType"] === "Update State" &&
+        action.parameters?.type === "set" &&
+        action.parameters?.key &&
+        action.parameters?.value
+      ) {
+        bindingSet.add(action.parameters.key)
+      }
+    })
+  })
+
+  return Array.from(bindingSet)
+}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
index c85ad70289..c9a0c2119e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
@@ -1,11 +1,13 @@
 <script>
-  import { Select, Label, Input } from "@budibase/bbui"
+  import { Select, Label, Combobox } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { getAllStateVariables } from "builderStore/dataBinding"
 
   export let parameters
   export let bindings = []
 
+  const keyOptions = getAllStateVariables()
   const typeOptions = [
     {
       label: "Set value",
@@ -32,7 +34,7 @@
     options={typeOptions}
   />
   <Label small>Key</Label>
-  <Input bind:value={parameters.key} />
+  <Combobox bind:value={parameters.key} options={keyOptions} />
   {#if parameters.type === "set"}
     <Label small>Value</Label>
     <DrawerBindableInput

From 23a6267f6adadd6277b9678c1f2a6835ee97bdb0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 26 Aug 2021 17:52:04 +0100
Subject: [PATCH 3/5] Add ability to persist state values in local storage

---
 .../EventsEditor/actions/UpdateState.svelte   |  4 +-
 packages/client/src/store/state.js            | 43 ++++++++++++++++---
 packages/client/src/utils/buttonActions.js    |  4 +-
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
index c9a0c2119e..374fd59007 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Combobox } from "@budibase/bbui"
+  import { Select, Label, Combobox, Checkbox } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { getAllStateVariables } from "builderStore/dataBinding"
@@ -42,6 +42,8 @@
       value={parameters.value}
       on:change={e => (parameters.value = e.detail)}
     />
+    <div />
+    <Checkbox bind:value={parameters.persist} text="Persist this value" />
   {/if}
 </div>
 
diff --git a/packages/client/src/store/state.js b/packages/client/src/store/state.js
index c32264914b..cb20149de8 100644
--- a/packages/client/src/store/state.js
+++ b/packages/client/src/store/state.js
@@ -1,21 +1,50 @@
-import { writable } from "svelte/store"
+import { writable, get, derived } from "svelte/store"
+import { localStorageStore } from "../../../builder/src/builderStore/store/localStorage"
+import { appStore } from "./app"
 
 const createStateStore = () => {
-  const store = writable({})
+  const localStorageKey = `${get(appStore).appId}.state`
+  const persistentStore = localStorageStore(localStorageKey, {})
 
-  const setValue = (key, value) => {
-    store.update(state => {
+  // Initialise the temp store to mirror the persistent store
+  const tempStore = writable(get(persistentStore))
+
+  // Sets a value to state, optionally persistent
+  const setValue = (key, value, persist = false) => {
+    const storeToSave = persist ? persistentStore : tempStore
+    const storeToClear = persist ? tempStore : persistentStore
+    storeToSave.update(state => {
       state[key] = value
       return state
     })
-  }
-  const deleteValue = key => {
-    store.update(state => {
+    storeToClear.update(state => {
       delete state[key]
       return state
     })
   }
 
+  // Delete a certain key from both stores
+  const deleteValue = key => {
+    const stores = [tempStore, persistentStore]
+    stores.forEach(store => {
+      store.update(state => {
+        delete state[key]
+        return state
+      })
+    })
+  }
+
+  // Derive the combination of both persisted and non persisted stores
+  const store = derived(
+    [tempStore, persistentStore],
+    ([$tempStore, $persistentStore]) => {
+      return {
+        ...$tempStore,
+        ...$persistentStore,
+      }
+    }
+  )
+
   return {
     subscribe: store.subscribe,
     actions: { setValue, deleteValue },
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 11c177d4f6..4413044155 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -124,9 +124,9 @@ const closeScreenModalHandler = () => {
 }
 
 const updateStateHandler = action => {
-  const { type, key, value } = action.parameters
+  const { type, key, value, persist } = action.parameters
   if (type === "set") {
-    stateStore.actions.setValue(key, value)
+    stateStore.actions.setValue(key, value, persist)
   } else if (type === "delete") {
     stateStore.actions.deleteValue(key)
   }

From a466c314303f040d9dca6765b8f8083eb4467933 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 26 Aug 2021 18:00:36 +0100
Subject: [PATCH 4/5] Update client side lucene implemenation to mirror real
 lucene by not matching when the value is nullish

---
 packages/standard-components/src/lucene.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/lucene.js b/packages/standard-components/src/lucene.js
index 50aae1f32c..d7af0e2512 100644
--- a/packages/standard-components/src/lucene.js
+++ b/packages/standard-components/src/lucene.js
@@ -103,12 +103,12 @@ export const luceneQuery = (docs, query) => {
 
   // Process an equal match (fails if the value is different)
   const equalMatch = match("equal", (key, value, doc) => {
-    return doc[key] !== value
+    return value != null && value !== "" && doc[key] !== value
   })
 
   // Process a not-equal match (fails if the value is the same)
   const notEqualMatch = match("notEqual", (key, value, doc) => {
-    return doc[key] === value
+    return value != null && value !== "" && doc[key] === value
   })
 
   // Process an empty match (fails if the value is not empty)

From b6ea4e3aaaa165719ad999260b328f9b61dc36ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 27 Aug 2021 15:00:27 +0100
Subject: [PATCH 5/5] Add description of what persisting state values does

---
 .../EventsEditor/actions/UpdateState.svelte                | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
index 374fd59007..6c2867d4bf 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Combobox, Checkbox } from "@budibase/bbui"
+  import { Select, Label, Combobox, Checkbox, Body } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { getAllStateVariables } from "builderStore/dataBinding"
@@ -44,6 +44,11 @@
     />
     <div />
     <Checkbox bind:value={parameters.persist} text="Persist this value" />
+    <div />
+    <Body size="XS">
+      Persisted values will remain even after reloading the page or closing the
+      browser.
+    </Body>
   {/if}
 </div>