Adding a few fixes for bugs related to user table, user table views and some async functions that weren't awaiting promises.

packages/builder/src/builderStore/store/frontend.js

@@ -289,7 +289,7 @@ export const getFrontendStore = () => {
           ...extras,
         }
       },
-      create: (componentName, presetProps) => {
+      create: async (componentName, presetProps) => {
         const selected = get(selectedComponent)
         const asset = get(currentAsset)
         const state = get(store)
@@ -345,7 +345,7 @@ export const getFrontendStore = () => {
         parentComponent._children.push(componentInstance)
 
         // Save components and update UI
-        store.actions.preview.saveSelected()
+        await store.actions.preview.saveSelected()
         store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
@@ -359,7 +359,7 @@ export const getFrontendStore = () => {
 
         return componentInstance
       },
-      delete: component => {
+      delete: async component => {
         if (!component) {
           return
         }
@@ -374,7 +374,7 @@ export const getFrontendStore = () => {
           )
           store.actions.components.select(parent)
         }
-        store.actions.preview.saveSelected()
+        await store.actions.preview.saveSelected()
       },
       copy: (component, cut = false) => {
         const selectedAsset = get(currentAsset)
@@ -479,7 +479,7 @@ export const getFrontendStore = () => {
         selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
-      updateProp: (name, value) => {
+      updateProp: async (name, value) => {
         let component = get(selectedComponent)
         if (!name || !component) {
           return
@@ -489,7 +489,7 @@ export const getFrontendStore = () => {
           state.selectedComponentId = component._id
           return state
         })
-        store.actions.preview.saveSelected()
+        await store.actions.preview.saveSelected()
       },
       links: {
         save: async (url, title) => {

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -15,7 +15,7 @@
   import TableLoadingOverlay from "./TableLoadingOverlay"
   import TableHeader from "./TableHeader"
   import "@budibase/svelte-ag-grid/dist/index.css"
-  import { TableNames } from "constants"
+  import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
 
   export let schema = {}
   export let data = []
@@ -53,6 +53,7 @@
     if (isUsersTable) {
       schema.email.displayFieldName = "Email"
       schema.roleId.displayFieldName = "Role"
+      schema.status.displayFieldName = "Status"
     }
   }
 
@@ -83,7 +84,7 @@
       if (!allowEditing) {
         return false
       }
-      return !(isUsersTable && ["email", "roleId"].includes(key))
+      return !(isUsersTable && UNEDITABLE_USER_FIELDS.includes(key))
     }
 
     for (let [key, value] of Object.entries(schema || {})) {

packages/builder/src/components/backend/DataTable/ViewDataTable.svelte

@@ -53,6 +53,7 @@
 <Table
   title={decodeURI(name)}
   schema={view.schema}
+  tableId={view.tableId}
   {data}
   {loading}
   bind:hideAutocolumns>

packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte

@@ -168,7 +168,9 @@
     </div>
   {/if}
   <div class="footer">
+    <div class="add-filter">
     <Button text on:click={addFilter}>Add Filter</Button>
+    </div>
     <div class="buttons">
       <Button secondary on:click={onClosed}>Cancel</Button>
       <Button primary on:click={saveView}>Save</Button>
@@ -213,4 +215,8 @@
     margin: 0;
     font-size: var(--font-size-xs);
   }
+
+  .add-filter {
+    margin-right: 16px;
+  }
 </style>

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -39,14 +39,14 @@
     return enrichedStructure
   }
 
-  const onItemChosen = (item, idx) => {
+  const onItemChosen = async (item, idx) => {
     if (item.isCategory) {
       // Select and open this category
       selectedIndex = idx
       popover.show()
     } else {
       // Add this component
-      store.actions.components.create(item.component)
+      await store.actions.components.create(item.component)
       popover.hide()
     }
   }

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -64,8 +64,8 @@
     pasteComponent("below")
   }
 
-  const deleteComponent = () => {
+  const deleteComponent = async () => {
-    store.actions.components.delete(component)
+    await store.actions.components.delete(component)
   }
 
   const storeComponentForCopy = (cut = false) => {

packages/builder/src/constants/index.js

@@ -10,7 +10,7 @@ export const FrontendTypes = {
 }
 
 // fields on the user table that cannot be edited
-export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId"]
+export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId", "status"]
 
 export const LAYOUT_NAMES = {
   MASTER: {