Make component setting updates sequential to prevent 409s

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -7,6 +7,7 @@
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
   import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
   import { getComponentForSettingType } from "./PropertyControls/componentSettings"
+  import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
@@ -40,13 +41,13 @@
     ]
   }
 
-  const updateProp = async (key, value) => {
+  const updateProp = Utils.sequential(async (key, value) => {
     try {
       await store.actions.components.updateProp(key, value)
     } catch (error) {
       notifications.error("Error updating component prop")
     }
-  }
+  })
 
   const canRenderControl = setting => {
     const control = getComponentForSettingType(setting?.type)

packages/frontend-core/src/index.js

@@ -1,7 +1,5 @@
 export { createAPIClient } from "./api"
-export { createLocalStorageStore } from "./stores/localStorage"
 export { fetchData } from "./fetch/fetchData"
 export * as Constants from "./constants"
-export * as LuceneUtils from "./utils/lucene"
+export * from "./stores"
-export * as JSONUtils from "./utils/json"
+export * from "./utils"
-export * as CookieUtils from "./utils/cookies"

packages/frontend-core/src/stores/index.js

@@ -0,0 +1 @@
+export { createLocalStorageStore } from "./localStorage"

packages/frontend-core/src/utils/index.js

@@ -0,0 +1,4 @@
+export * as LuceneUtils from "./lucene"
+export * as JSONUtils from "./json"
+export * as CookieUtils from "./cookies"
+export * as Utils from "./utils"

packages/frontend-core/src/utils/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Utility to wrap an async function and ensure all invocations happen
+ * sequentially.
+ * @param fn the async function to run
+ * @return {Promise} a sequential version of the function
+ */
+export const sequential = fn => {
+  let promise
+  return async (...params) => {
+    if (promise) {
+      await promise
+    }
+    promise = fn(...params)
+    await promise
+    promise = null
+  }
+}