From 5311c8ee7e75309e9d9c7672c8a86ae77bd71dd4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 17 Nov 2021 13:49:34 +0000
Subject: [PATCH 01/41] save inputted test data

---
 .../builderStore/store/automation/index.js    |  2 +-
 .../FlowChart/FlowItem.svelte                 |  7 +--
 .../SetupPanel/AutomationBlockSetup.svelte    | 44 +++++++++----------
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 16cc490bb2..50a1f476ef 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -87,7 +87,7 @@ const automationActions = store => ({
     const response = await api.post(`/api/automations/${_id}/test`, testData)
     const json = await response.json()
     store.update(state => {
-      state.selectedAutomation.testResults = json
+      state.selectedAutomation.automation.testResults = json
       return state
     })
   },
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 7ddc5c3e48..5ce55437be 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -25,9 +25,10 @@
   let resultsModal
   let setupToggled
   let blockComplete
-  $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
-    step => step.stepId === block.stepId
-  )
+  $: testResult =
+    $automationStore.selectedAutomation.automation.testResults?.steps.filter(
+      step => step.stepId === block.stepId
+    )
 
   $: isTrigger = block.type === "TRIGGER"
 
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 874a0e68eb..e7208518d5 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -51,31 +51,31 @@
     : { schema: {} }
   $: schemaFields = table ? Object.values(table.schema) : []
 
-  const onChange = debounce(
-    async function (e, key) {
-      if (isTestModal) {
-        // Special case for webhook, as it requires a body, but the schema already brings back the body's contents
-        if (stepId === "WEBHOOK") {
-          automationStore.actions.addTestDataToAutomation({
-            body: {
-              [key]: e.detail,
-              ...$automationStore.selectedAutomation.automation.testData.body,
-            },
-          })
-        }
+  const onChange = debounce(async function (e, key) {
+    if (isTestModal) {
+      // Special case for webhook, as it requires a body, but the schema already brings back the body's contents
+      if (stepId === "WEBHOOK") {
         automationStore.actions.addTestDataToAutomation({
-          [key]: e.detail,
+          body: {
+            [key]: e.detail,
+            ...$automationStore.selectedAutomation.automation.testData.body,
+          },
         })
-        testData[key] = e.detail
-      } else {
-        block.inputs[key] = e.detail
-        await automationStore.actions.save(
-          $automationStore.selectedAutomation?.automation
-        )
       }
-    },
-    isTestModal ? 0 : 800
-  )
+      automationStore.actions.addTestDataToAutomation({
+        [key]: e.detail,
+      })
+      testData[key] = e.detail
+      await automationStore.actions.save(
+        $automationStore.selectedAutomation?.automation
+      )
+    } else {
+      block.inputs[key] = e.detail
+      await automationStore.actions.save(
+        $automationStore.selectedAutomation?.automation
+      )
+    }
+  }, 800)
 
   function getAvailableBindings(block, automation) {
     if (!block || !automation) {

From f237cd891e2bf5a7204bc3c23bf606a202464953 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 17 Nov 2021 14:28:14 +0000
Subject: [PATCH 02/41] fix animation issue with automation blocks

---
 .../automation/AutomationBuilder/FlowChart/FlowChart.svelte      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index fee8afd711..2d6881d652 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -84,7 +84,6 @@
         class="block"
         animate:flip={{ duration: 500 }}
         in:fly|local={{ x: 500, duration: 1500 }}
-        out:fly|local={{ x: 500, duration: 800 }}
       >
         <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
       </div>

From b902e017dd3b7fbc57befac08a2b011021ef95c7 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 18 Nov 2021 11:41:51 +0000
Subject: [PATCH 03/41] fix bug with test results

---
 .../builder/src/builderStore/store/automation/index.js     | 4 +++-
 .../automation/AutomationBuilder/FlowChart/FlowItem.svelte | 7 +++----
 .../automation/AutomationPanel/AutomationList.svelte       | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 50a1f476ef..7bd0ccca22 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -87,13 +87,15 @@ const automationActions = store => ({
     const response = await api.post(`/api/automations/${_id}/test`, testData)
     const json = await response.json()
     store.update(state => {
-      state.selectedAutomation.automation.testResults = json
+      state.selectedAutomation.testResults = json
       return state
     })
   },
   select: automation => {
     store.update(state => {
+      let testResults = state.selectedAutomation?.testResults
       state.selectedAutomation = new Automation(cloneDeep(automation))
+      state.selectedAutomation.testResults = testResults
       state.selectedBlock = null
       return state
     })
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 5ce55437be..ba80e195ab 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -25,11 +25,10 @@
   let resultsModal
   let setupToggled
   let blockComplete
-  $: testResult =
-    $automationStore.selectedAutomation.automation.testResults?.steps.filter(
-      step => step.stepId === block.stepId
-    )
 
+  $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
+    step => step.stepId === block.stepId
+  )
   $: isTrigger = block.type === "TRIGGER"
 
   $: selected = $automationStore.selectedBlock?.id === block.id
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
index 79de4bfbe6..aa3ab027a8 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@@ -9,6 +9,7 @@
   onMount(() => {
     automationStore.actions.fetch()
   })
+
   function selectAutomation(automation) {
     automationStore.actions.select(automation)
     $goto(`./${automation._id}`)

From d16ea9108247bb8ffcf61bbcf38edd53b91e3531 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 18 Nov 2021 14:29:31 +0000
Subject: [PATCH 04/41] remove uneeded add action button

---
 .../AutomationBuilder/FlowChart/FlowItem.svelte          | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index ba80e195ab..7f379ba138 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -150,15 +150,6 @@
               >Finish and test automation</Button
             >
           {/if}
-          <Button
-            disabled={!hasCompletedInputs}
-            on:click={() => {
-              setupToggled = false
-              actionModal.show()
-            }}
-            primary={!isTrigger}
-            cta={isTrigger}>Add Action</Button
-          >
         {/if}
       </Layout>
     </div>

From 0b8c074b81ea8c793df51dc12fb541237664c0c9 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 18 Nov 2021 15:14:23 +0000
Subject: [PATCH 05/41] disable ability to rename external datasource

---
 .../backend/TableNavigator/popovers/EditTablePopover.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 04094b881a..64c6c0225a 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -22,7 +22,7 @@
   let templateScreens
   let willBeDeleted
 
-  $: external = table?.type === "external"
+  $: internal = table?.type === "internal"
 
   function showDeleteModal() {
     templateScreens = $allScreens.filter(
@@ -66,7 +66,9 @@
   <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  {#if internal}
+    <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  {/if}
   <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
 </ActionMenu>
 

From f77f7c1e5f09a8dd95ad6c07f6b858d3e5af3903 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 15:36:16 +0000
Subject: [PATCH 06/41] Add dynamic filter component

---
 .../design/AppPreview/componentStructure.json |   3 +-
 packages/client/manifest.json                 |  11 ++
 .../app/dynamic-filter/DynamicFilter.svelte   |  37 ++++
 .../app/dynamic-filter/FilterModal.svelte     | 176 ++++++++++++++++++
 .../components/app/dynamic-filter/index.js    |   1 +
 packages/client/src/components/app/index.js   |   1 +
 6 files changed, 228 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
 create mode 100644 packages/client/src/components/app/dynamic-filter/FilterModal.svelte
 create mode 100644 packages/client/src/components/app/dynamic-filter/index.js

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 357ea5a7be..b237347c44 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -67,6 +67,7 @@
       "icon",
       "embed"
     ]
-  }
+  },
+  "dynamicfilter"
 ]
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 050ac4a63a..ba7f95e42e 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2623,6 +2623,17 @@
       }
     ]
   },
+  "dynamicfilter": {
+    "name": "Dynamic Filter",
+    "icon": "FilterEdit",
+    "settings": [
+      {
+        "type": "dataProvider",
+        "label": "Provider",
+        "key": "dataProvider"
+      }
+    ]
+  },
   "tableblock": {
     "block": true,
     "name": "Table block",
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
new file mode 100644
index 0000000000..6cd0d2be5b
--- /dev/null
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { Button, ModalContent, Modal } from "@budibase/bbui"
+  import { getContext } from "svelte"
+  import FilterModal from "./FilterModal.svelte"
+
+  export let dataProvider
+
+  const component = getContext("component")
+  const { styleable } = getContext("sdk")
+
+  $: schema = dataProvider?.schema
+  $: schemaFields = Object.values(schema || {})
+
+  let modal
+  let tmpFilters = []
+  let filters = []
+
+  const openEditor = () => {
+    tmpFilters = [...filters]
+    modal.show()
+  }
+
+  const updateQuery = () => {
+    filters = [...tmpFilters]
+  }
+</script>
+
+<div use:styleable={$component.styles}>
+  <Button on:click={openEditor} secondary icon="FilterEdit">
+    Edit filters
+  </Button>
+  <Modal bind:this={modal}>
+    <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
+      <FilterModal bind:filters={tmpFilters} {schemaFields} />
+    </ModalContent>
+  </Modal>
+</div>
diff --git a/packages/client/src/components/app/dynamic-filter/FilterModal.svelte b/packages/client/src/components/app/dynamic-filter/FilterModal.svelte
new file mode 100644
index 0000000000..99b9a1a6f6
--- /dev/null
+++ b/packages/client/src/components/app/dynamic-filter/FilterModal.svelte
@@ -0,0 +1,176 @@
+<script>
+  import {
+    Body,
+    Button,
+    Combobox,
+    DatePicker,
+    DrawerContent,
+    Icon,
+    Input,
+    Layout,
+    Select,
+  } from "@budibase/bbui"
+  import { generate } from "shortid"
+  import {
+    getValidOperatorsForType,
+    OperatorOptions,
+  } from "builder/src/constants/lucene"
+
+  export let schemaFields
+  export let filters = []
+
+  const BannedTypes = ["link", "attachment", "formula"]
+
+  $: fieldOptions = (schemaFields ?? [])
+    .filter(field => !BannedTypes.includes(field.type))
+    .map(field => field.name)
+
+  const addFilter = () => {
+    filters = [
+      ...filters,
+      {
+        id: generate(),
+        field: null,
+        operator: OperatorOptions.Equals.value,
+        value: null,
+        valueType: "Value",
+      },
+    ]
+  }
+
+  const removeFilter = id => {
+    filters = filters.filter(field => field.id !== id)
+  }
+
+  const duplicateFilter = id => {
+    const existingFilter = filters.find(filter => filter.id === id)
+    const duplicate = { ...existingFilter, id: generate() }
+    filters = [...filters, duplicate]
+  }
+
+  const onFieldChange = (expression, field) => {
+    // Update the field type
+    expression.type = schemaFields.find(x => x.name === field)?.type
+
+    // Ensure a valid operator is set
+    const validOperators = getValidOperatorsForType(expression.type).map(
+      x => x.value
+    )
+    if (!validOperators.includes(expression.operator)) {
+      expression.operator = validOperators[0] ?? OperatorOptions.Equals.value
+      onOperatorChange(expression, expression.operator)
+    }
+
+    // if changed to an array, change default value to empty array
+    const idx = filters.findIndex(x => x.field === field)
+    if (expression.type === "array") {
+      filters[idx].value = []
+    } else {
+      filters[idx].value = null
+    }
+  }
+
+  const onOperatorChange = (expression, operator) => {
+    const noValueOptions = [
+      OperatorOptions.Empty.value,
+      OperatorOptions.NotEmpty.value,
+    ]
+    expression.noValue = noValueOptions.includes(operator)
+    if (expression.noValue) {
+      expression.value = null
+    }
+  }
+
+  const getFieldOptions = field => {
+    const schema = schemaFields.find(x => x.name === field)
+    return schema?.constraints?.inclusion || []
+  }
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding>
+      <Body size="S">
+        {#if !filters?.length}
+          Add your first filter expression.
+        {:else}
+          Results are filtered to only those which match all of the following
+          constraints.
+        {/if}
+      </Body>
+      {#if filters?.length}
+        <div class="fields">
+          {#each filters as filter, idx}
+            <Select
+              bind:value={filter.field}
+              options={fieldOptions}
+              on:change={e => onFieldChange(filter, e.detail)}
+              placeholder="Column"
+            />
+            <Select
+              disabled={!filter.field}
+              options={getValidOperatorsForType(filter.type)}
+              bind:value={filter.operator}
+              on:change={e => onOperatorChange(filter, e.detail)}
+              placeholder={null}
+            />
+            {#if ["string", "longform", "number"].includes(filter.type)}
+              <Input disabled={filter.noValue} bind:value={filter.value} />
+            {:else if ["options", "array"].includes(filter.type)}
+              <Combobox
+                disabled={filter.noValue}
+                options={getFieldOptions(filter.field)}
+                bind:value={filter.value}
+              />
+            {:else if filter.type === "boolean"}
+              <Combobox
+                disabled={filter.noValue}
+                options={[
+                  { label: "True", value: "true" },
+                  { label: "False", value: "false" },
+                ]}
+                bind:value={filter.value}
+              />
+            {:else if filter.type === "datetime"}
+              <DatePicker disabled={filter.noValue} bind:value={filter.value} />
+            {:else}
+              <Input disabled />
+            {/if}
+            <Icon
+              name="Duplicate"
+              hoverable
+              size="S"
+              on:click={() => duplicateFilter(filter.id)}
+            />
+            <Icon
+              name="Close"
+              hoverable
+              size="S"
+              on:click={() => removeFilter(filter.id)}
+            />
+          {/each}
+        </div>
+      {/if}
+      <div>
+        <Button icon="AddCircle" size="M" secondary on:click={addFilter}>
+          Add filter
+        </Button>
+      </div>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  .fields {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    align-items: center;
+    grid-template-columns: 1fr 120px 1fr auto auto;
+  }
+</style>
diff --git a/packages/client/src/components/app/dynamic-filter/index.js b/packages/client/src/components/app/dynamic-filter/index.js
new file mode 100644
index 0000000000..5ac7d31730
--- /dev/null
+++ b/packages/client/src/components/app/dynamic-filter/index.js
@@ -0,0 +1 @@
+export { default as dynamicfilter } from "./DynamicFilter.svelte"
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 92725f0738..f5d085e97b 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -33,6 +33,7 @@ export * from "./charts"
 export * from "./forms"
 export * from "./table"
 export * from "./blocks"
+export * from "./dynamic-filter"
 
 // Deprecated component left for compatibility in old apps
 export { default as navigation } from "./deprecated/Navigation.svelte"

From 34a00df86b5c3f9d523ef9d3ac22ed578f911250 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 15:43:51 +0000
Subject: [PATCH 07/41] Add settings to dynamic filter to control button text
 and allowed filter fields

---
 packages/client/manifest.json                 | 12 +++++++++
 .../app/dynamic-filter/DynamicFilter.svelte   | 27 ++++++++++++++-----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index ba7f95e42e..da1d87c5ab 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2631,6 +2631,18 @@
         "type": "dataProvider",
         "label": "Provider",
         "key": "dataProvider"
+      },
+      {
+        "type": "multifield",
+        "label": "Allowed filter fields",
+        "key": "allowedFields",
+        "placeholder": "All fields"
+      },
+      {
+        "type": "text",
+        "label": "Button text",
+        "key": "buttonText",
+        "defaultValue": "Edit filters"
       }
     ]
   },
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 6cd0d2be5b..80a1b919bb 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -4,17 +4,32 @@
   import FilterModal from "./FilterModal.svelte"
 
   export let dataProvider
+  export let allowedFields
+  export let buttonText
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")
 
-  $: schema = dataProvider?.schema
-  $: schemaFields = Object.values(schema || {})
-
   let modal
   let tmpFilters = []
   let filters = []
 
+  $: schema = dataProvider?.schema
+  $: schemaFields = getSchemaFields(schema, allowedFields)
+  $: text = buttonText || "Edit filters"
+
+  const getSchemaFields = (schema, allowedFields) => {
+    let clonedSchema = {}
+    if (!allowedFields?.length) {
+      clonedSchema = schema
+    } else {
+      allowedFields?.forEach(field => {
+        clonedSchema[field] = schema[field]
+      })
+    }
+    return Object.values(clonedSchema || {})
+  }
+
   const openEditor = () => {
     tmpFilters = [...filters]
     modal.show()
@@ -26,11 +41,11 @@
 </script>
 
 <div use:styleable={$component.styles}>
-  <Button on:click={openEditor} secondary icon="FilterEdit">
-    Edit filters
+  <Button on:click={openEditor} secondary>
+    {text}
   </Button>
   <Modal bind:this={modal}>
-    <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
+    <ModalContent title={text} size="XL" onConfirm={updateQuery}>
       <FilterModal bind:filters={tmpFilters} {schemaFields} />
     </ModalContent>
   </Modal>

From 33e5e198b7bb333017c30bc2f2e7f990f4f74d89 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 18:41:37 +0000
Subject: [PATCH 08/41] Refactor how extending data provider queries works to
 support multiple extensions per key

---
 .../src/components/app/DataProvider.svelte    | 17 +++++----
 .../src/components/app/DateRangePicker.svelte | 38 ++++++++++++-------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 08f2fb06cd..e9d306cc3b 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -275,11 +275,10 @@
     allRows = res.rows
   }
 
-  const addQueryExtension = (key, operator, field, value) => {
-    if (!key || !operator || !field) {
+  const addQueryExtension = (key, extension) => {
+    if (!key || !extension) {
       return
     }
-    const extension = { operator, field, value }
     queryExtensions = { ...queryExtensions, [key]: extension }
   }
 
@@ -295,11 +294,13 @@
   const extendQuery = (defaultQuery, extensions) => {
     const extensionValues = Object.values(extensions || {})
     let extendedQuery = { ...defaultQuery }
-    extensionValues.forEach(({ operator, field, value }) => {
-      extendedQuery[operator] = {
-        ...extendedQuery[operator],
-        [field]: value,
-      }
+    extensionValues.forEach(extension => {
+      Object.entries(extension || {}).forEach(([operator, fields]) => {
+        extendedQuery[operator] = {
+          ...extendedQuery[operator],
+          ...fields,
+        }
+      })
     })
 
     if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {
diff --git a/packages/client/src/components/app/DateRangePicker.svelte b/packages/client/src/components/app/DateRangePicker.svelte
index 651a19abc4..9f3207d4d2 100644
--- a/packages/client/src/components/app/DateRangePicker.svelte
+++ b/packages/client/src/components/app/DateRangePicker.svelte
@@ -13,15 +13,6 @@
 
   const component = getContext("component")
   const { styleable, ActionTypes, getAction } = getContext("sdk")
-
-  $: addExtension = getAction(
-    dataProvider?.id,
-    ActionTypes.AddDataProviderQueryExtension
-  )
-  $: removeExtension = getAction(
-    dataProvider?.id,
-    ActionTypes.RemoveDataProviderQueryExtension
-  )
   const options = [
     "Last 1 day",
     "Last 7 days",
@@ -32,10 +23,24 @@
   ]
   let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
 
-  $: queryExtension = getQueryExtension(value)
-  $: addExtension?.($component.id, "range", field, queryExtension)
+  $: dataProviderId = dataProvider?.id
+  $: addExtension = getAction(
+    dataProviderId,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProviderId,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
+  $: queryExtension = getQueryExtension(field, value)
+  $: addExtension?.($component.id, queryExtension)
+
+  const getQueryExtension = (field, value) => {
+    if (!field || !value) {
+      return null
+    }
+    console.log("getting extension for " + value)
 
-  const getQueryExtension = value => {
     let low = dayjs.utc().subtract(1, "year")
     let high = dayjs.utc().add(1, "day")
 
@@ -51,7 +56,14 @@
       low = dayjs.utc().subtract(6, "months")
     }
 
-    return { low: low.format(), high: high.format() }
+    return {
+      range: {
+        [field]: {
+          low: low.format(),
+          high: high.format(),
+        },
+      },
+    }
   }
 
   onDestroy(() => {

From b7b424b7f89d8eaca2e02b1fc297b35b315c08b8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:31:00 +0000
Subject: [PATCH 09/41] Add modal container to top level of client apps

---
 packages/client/src/components/ClientApp.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 119a26800f..98dec9667b 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -121,6 +121,9 @@
                   -->
                   <div id="flatpickr-root" />
 
+                  <!-- Modal container to ensure they sit on top -->
+                  <div class="modal-container" />
+
                   <!-- Layers on top of app -->
                   <NotificationDisplay />
                   <ConfirmationDisplay />

From 327ee5726d795993f18167641a7dfff10a26f8e0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:31:25 +0000
Subject: [PATCH 10/41] Ensure important builder store variables do not get
 unassigned when setting the builder store state

---
 packages/client/src/stores/builder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 08ac6ba906..35fb3edae2 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -10,7 +10,6 @@ const dispatchEvent = (type, data = {}) => {
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
-    appId: null,
     layout: null,
     screen: null,
     selectedComponentId: null,
@@ -94,6 +93,7 @@ const createBuilderStore = () => {
   }
   return {
     ...writableStore,
+    set: state => writableStore.set({ ...initialState, ...state }),
     subscribe: derivedStore.subscribe,
     actions,
   }

From a1b2f9d57dfd4d4fe708c099bf9994f9fbb015c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:32:00 +0000
Subject: [PATCH 11/41] Enable dynamic filter component to update data provider
 queries

---
 .../app/dynamic-filter/DynamicFilter.svelte   | 60 ++++++++++++++-----
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 80a1b919bb..d471b3a021 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -1,22 +1,50 @@
 <script>
-  import { Button, ModalContent, Modal } from "@budibase/bbui"
-  import { getContext } from "svelte"
+  import { get } from "svelte/store"
+  import { getContext, onDestroy } from "svelte"
+  import { ModalContent, Modal } from "@budibase/bbui"
   import FilterModal from "./FilterModal.svelte"
+  import { buildLuceneQuery } from "builder/src/helpers/lucene"
+  import Button from "../Button.svelte"
 
   export let dataProvider
   export let allowedFields
   export let buttonText
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { builderStore, ActionTypes, getAction } = getContext("sdk")
 
   let modal
   let tmpFilters = []
   let filters = []
 
+  $: dataProviderId = dataProvider?.id
+  $: addExtension = getAction(
+    dataProviderId,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProviderId,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
   $: schema = dataProvider?.schema
   $: schemaFields = getSchemaFields(schema, allowedFields)
-  $: text = buttonText || "Edit filters"
+  $: text = getText(buttonText, filters)
+
+  // Add query extension to data provider
+  $: {
+    if (filters?.length) {
+      const queryExtension = buildLuceneQuery(filters)
+      addExtension?.($component.id, queryExtension)
+    }
+  }
+
+  const getText = (buttonText, filters) => {
+    let text = buttonText || "Edit filters"
+    if (filters?.length) {
+      text += ` (${filters.length})`
+    }
+    return text
+  }
 
   const getSchemaFields = (schema, allowedFields) => {
     let clonedSchema = {}
@@ -31,6 +59,9 @@
   }
 
   const openEditor = () => {
+    if (get(builderStore).inBuilder) {
+      return
+    }
     tmpFilters = [...filters]
     modal.show()
   }
@@ -38,15 +69,16 @@
   const updateQuery = () => {
     filters = [...tmpFilters]
   }
+
+  onDestroy(() => {
+    removeExtension?.($component.id)
+  })
 </script>
 
-<div use:styleable={$component.styles}>
-  <Button on:click={openEditor} secondary>
-    {text}
-  </Button>
-  <Modal bind:this={modal}>
-    <ModalContent title={text} size="XL" onConfirm={updateQuery}>
-      <FilterModal bind:filters={tmpFilters} {schemaFields} />
-    </ModalContent>
-  </Modal>
-</div>
+<Button onClick={openEditor} {text} />
+
+<Modal bind:this={modal}>
+  <ModalContent title={text} size="XL" onConfirm={updateQuery}>
+    <FilterModal bind:filters={tmpFilters} {schemaFields} />
+  </ModalContent>
+</Modal>

From a9a50545c92a7aac686c965cec2e059b9e89aa75 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:32:42 +0000
Subject: [PATCH 12/41] Be more explicit about the boolean nature of component
 settings in the manifest and add back in a render key to fix toggling
 contenteditable attribute on dom elements

---
 .../client/src/components/Component.svelte    | 76 +++++++++++--------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a4ee290028..b248ee1277 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -72,13 +72,18 @@
   $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
   $: inDragPath = inSelectedPath && $builderStore.editMode
 
+  // Derive definition properties which can all be optional, so need to be
+  // coerced to booleans
+  $: editable = !!definition?.editable
+  $: hasChildren = !!definition?.hasChildren
+  $: showEmptyState = !!definition?.showEmptyState
+
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: interactive =
     $builderStore.inBuilder &&
     ($builderStore.previewType === "layout" || insideScreenslot) &&
     !isBlock
-  $: editable = definition?.editable
   $: editing = editable && selected && $builderStore.editMode
   $: draggable = !inDragPath && interactive && !isLayout && !isScreen
   $: droppable = interactive && !isLayout && !isScreen
@@ -86,8 +91,8 @@
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
   // in the component manifest.
-  $: empty = interactive && !children.length && definition?.hasChildren
-  $: emptyState = empty && definition?.showEmptyState !== false
+  $: empty = interactive && !children.length && hasChildren
+  $: emptyState = empty && showEmptyState
 
   // Raw settings are all settings excluding internal props and children
   $: rawSettings = getRawSettings(instance)
@@ -103,6 +108,9 @@
   // Build up the final settings object to be passed to the component
   $: cacheSettings(enrichedSettings, nestedSettings, conditionalSettings)
 
+  // Render key is used to determine when components need to fully remount
+  $: renderKey = getRenderKey(id, editing)
+
   // Update component context
   $: componentStore.set({
     id,
@@ -268,35 +276,43 @@
       })
     }
   }
+
+  // Generates a key used to determine when components need to fully remount.
+  // Currently only toggling editing requires remounting.
+  const getRenderKey = (id, editing) => {
+    return hashString(`${id}-${editing}`)
+  }
 </script>
 
-{#if constructor && cachedSettings && (visible || inSelectedPath)}
-  <!-- The ID is used as a class because getElementsByClassName is O(1) -->
-  <!-- and the performance matters for the selection indicators -->
-  <div
-    class={`component ${id}`}
-    class:draggable
-    class:droppable
-    class:empty
-    class:interactive
-    class:editing
-    class:block={isBlock}
-    data-id={id}
-    data-name={name}
-  >
-    <svelte:component this={constructor} {...cachedSettings}>
-      {#if children.length}
-        {#each children as child (child._id)}
-          <svelte:self instance={child} />
-        {/each}
-      {:else if emptyState}
-        <Placeholder />
-      {:else if isBlock}
-        <slot />
-      {/if}
-    </svelte:component>
-  </div>
-{/if}
+{#key renderKey}
+  {#if constructor && cachedSettings && (visible || inSelectedPath)}
+    <!-- The ID is used as a class because getElementsByClassName is O(1) -->
+    <!-- and the performance matters for the selection indicators -->
+    <div
+      class={`component ${id}`}
+      class:draggable
+      class:droppable
+      class:empty
+      class:interactive
+      class:editing
+      class:block={isBlock}
+      data-id={id}
+      data-name={name}
+    >
+      <svelte:component this={constructor} {...cachedSettings}>
+        {#if children.length}
+          {#each children as child (child._id)}
+            <svelte:self instance={child} />
+          {/each}
+        {:else if emptyState}
+          <Placeholder />
+        {:else if isBlock}
+          <slot />
+        {/if}
+      </svelte:component>
+    </div>
+  {/if}
+{/key}
 
 <style>
   .component {

From bfe562c9eaccdac5edb0b217cec9523f42404812 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:32:57 +0000
Subject: [PATCH 13/41] Update editable components to trim whitespace when
 editing inline

---
 packages/client/src/components/app/Button.svelte      | 2 +-
 packages/client/src/components/app/Heading.svelte     | 2 +-
 packages/client/src/components/app/Link.svelte        | 2 +-
 packages/client/src/components/app/Text.svelte        | 2 +-
 packages/client/src/components/app/forms/Field.svelte | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index f00b114b2b..5b06475b30 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -25,7 +25,7 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    builderStore.actions.updateProp("text", e.target.textContent.trim())
   }
 </script>
 
diff --git a/packages/client/src/components/app/Heading.svelte b/packages/client/src/components/app/Heading.svelte
index 0450d2d11d..b27862f164 100644
--- a/packages/client/src/components/app/Heading.svelte
+++ b/packages/client/src/components/app/Heading.svelte
@@ -47,7 +47,7 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
     builderStore.actions.updateProp("text", sanitized)
   }
 </script>
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index 9587b34f11..851b2f0b66 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/packages/client/src/components/app/Link.svelte
@@ -47,7 +47,7 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    builderStore.actions.updateProp("text", e.target.textContent.trim())
   }
 </script>
 
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index 14681ebbaf..679434edeb 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/packages/client/src/components/app/Text.svelte
@@ -46,7 +46,7 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
     builderStore.actions.updateProp("text", sanitized)
   }
 </script>
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 3ef184c4a9..79de01351a 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -49,7 +49,7 @@
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
   const updateLabel = e => {
-    builderStore.actions.updateProp("label", e.target.textContent)
+    builderStore.actions.updateProp("label", e.target.textContent.trim())
   }
 </script>
 

From 9057b8e521423d9f865aea22c41523619843c4f6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:38:55 +0000
Subject: [PATCH 14/41] Update logic for determining whether to show empty
 state or not

---
 packages/client/src/components/Component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index b248ee1277..d8cdbd3f53 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -76,7 +76,7 @@
   // coerced to booleans
   $: editable = !!definition?.editable
   $: hasChildren = !!definition?.hasChildren
-  $: showEmptyState = !!definition?.showEmptyState
+  $: showEmptyState = definition?.showEmptyState !== false
 
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview

From 8581c06721e6872a00e9f3d27f2ec6abb4bd2235 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 22 Nov 2021 09:43:57 +0000
Subject: [PATCH 15/41] fix broken automation test

---
 packages/builder/cypress/integration/createAutomation.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index 0620a15e25..afd405d5ab 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -22,9 +22,9 @@ context("Create a automation", () => {
     cy.get(".spectrum-Picker-label").click()
     cy.wait(500)
     cy.contains("dog").click()
-
+    cy.wait(2000)
     // Create action
-    cy.contains("Add Action").click()
+    cy.get(".block > .spectrum-Icon").click()
     cy.get(".modal-inner-wrapper").within(() => {
       cy.wait(1000)
       cy.contains("Create Row").trigger('mouseover').click().click()

From fbe1b02e934740d9ff2ea72af68f1a2ae4783753 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 22 Nov 2021 10:07:30 +0000
Subject: [PATCH 16/41] remove delete button for datasource plus

---
 .../backend/TableNavigator/popovers/EditTablePopover.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 64c6c0225a..118786d66c 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -68,8 +68,8 @@
   </div>
   {#if internal}
     <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+    <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
   {/if}
-  <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
 </ActionMenu>
 
 <Modal bind:this={editorModal}>

From cc019feab1ab0ceec23aeaddf13a19c0a0720a6f Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 22 Nov 2021 10:09:27 +0000
Subject: [PATCH 17/41] Revert "remove delete button for datasource plus"

This reverts commit fbe1b02e934740d9ff2ea72af68f1a2ae4783753.
---
 .../backend/TableNavigator/popovers/EditTablePopover.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 118786d66c..64c6c0225a 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -68,8 +68,8 @@
   </div>
   {#if internal}
     <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
-    <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
   {/if}
+  <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
 </ActionMenu>
 
 <Modal bind:this={editorModal}>

From aa46f15ff6c5ee3c12f5eddc0d8656891712d4b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 13:34:28 +0000
Subject: [PATCH 18/41] Update default button text of dynamic filter component

---
 packages/client/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b9252d076b..7bf9b77bda 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2666,7 +2666,7 @@
         "type": "text",
         "label": "Button text",
         "key": "buttonText",
-        "defaultValue": "Edit filters"
+        "defaultValue": "Filter"
       }
     ]
   },

From ab7959a32c146a6378c41d78357240abda22ff67 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 13:42:09 +0000
Subject: [PATCH 19/41] Fix issue with not correctly removing dynamic filters
 when clearing all filters

---
 .../src/components/app/dynamic-filter/DynamicFilter.svelte      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index d471b3a021..92b78905ef 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -35,6 +35,8 @@
     if (filters?.length) {
       const queryExtension = buildLuceneQuery(filters)
       addExtension?.($component.id, queryExtension)
+    } else {
+      removeExtension?.($component.id)
     }
   }
 

From f12ab5aebdb4fcf530075f9435a4d170fe20e9c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 14:09:54 +0000
Subject: [PATCH 20/41] Removing log statement

---
 packages/client/src/components/app/DateRangePicker.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/app/DateRangePicker.svelte b/packages/client/src/components/app/DateRangePicker.svelte
index 9f3207d4d2..0246b68198 100644
--- a/packages/client/src/components/app/DateRangePicker.svelte
+++ b/packages/client/src/components/app/DateRangePicker.svelte
@@ -39,7 +39,6 @@
     if (!field || !value) {
       return null
     }
-    console.log("getting extension for " + value)
 
     let low = dayjs.utc().subtract(1, "year")
     let high = dayjs.utc().add(1, "day")

From 0fcc7619d09bb60297119a853eb7c442ef408e16 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 14:48:04 +0000
Subject: [PATCH 21/41] Reorganise component structure

---
 .../design/AppPreview/componentStructure.json | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index b237347c44..240de3ea6c 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -8,12 +8,24 @@
       "repeaterblock"
     ]
   },
-  "section",
-  "container",
-  "dataprovider",
-  "table",
-  "repeater",
-  "button",
+  {
+    "name": "Layout",
+    "icon": "ClassicGridView",
+    "children": [
+      "container",
+      "section"
+    ]
+  },
+  {
+    "name": "Data",
+    "icon": "Data",
+    "children": [
+      "dataprovider",
+      "repeater",
+      "table",
+      "dynamicfilter"
+    ]
+  },
   {
     "name": "Form",
     "icon": "Form",
@@ -60,6 +72,7 @@
     "children": [
       "heading",
       "text",
+      "button",
       "divider",
       "image",
       "backgroundimage",
@@ -67,7 +80,6 @@
       "icon",
       "embed"
     ]
-  },
-  "dynamicfilter"
+  }
 ]
 

From 4ef99cd6034f8428162ed7a0ef83aebafad827a9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 14:48:34 +0000
Subject: [PATCH 22/41] Add button variant, size and quiet settings to dynamic
 filter. Allow dyanmic filter button text to be edited inline

---
 packages/client/manifest.json                 | 66 ++++++++++++++++++-
 .../app/dynamic-filter/DynamicFilter.svelte   | 17 +++--
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7bf9b77bda..25e7840a66 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -247,7 +247,6 @@
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
     "editable": true,
-    "illegalChildren": ["section"],
     "showSettingsBar": true,
     "settings": [
       {
@@ -2650,6 +2649,8 @@
   "dynamicfilter": {
     "name": "Dynamic Filter",
     "icon": "FilterEdit",
+    "showSettingsBar": true,
+    "editable": true,
     "settings": [
       {
         "type": "dataProvider",
@@ -2665,8 +2666,69 @@
       {
         "type": "text",
         "label": "Button text",
-        "key": "buttonText",
+        "key": "text",
         "defaultValue": "Filter"
+      },
+      {
+        "type": "select",
+        "showInBar": true,
+        "label": "Button variant",
+        "key": "type",
+        "options": [
+          {
+            "label": "Primary",
+            "value": "primary"
+          }, {
+            "label": "Secondary",
+            "value": "secondary"
+          },
+          {
+            "label": "Action",
+            "value": "cta"
+          },
+          {
+            "label": "Warning",
+            "value": "warning"
+          },
+          {
+            "label": "Over Background",
+            "value": "overBackground"
+          }
+        ],
+        "defaultValue": "primary"
+      },
+      {
+        "type": "select",
+        "label": "Button size",
+        "showInBar": true,
+        "key": "size",
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra large",
+            "value": "XL"
+          }
+        ],
+        "defaultValue": "M"
+      },
+      {
+        "type": "boolean",
+        "label": "Quiet button",
+        "key": "quiet",
+        "showInBar": true,
+        "barIcon": "VisibilityOff",
+        "barTitle": "Quiet variant"
       }
     ]
   },
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 92b78905ef..f85fe7bedd 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -8,7 +8,10 @@
 
   export let dataProvider
   export let allowedFields
-  export let buttonText
+  export let text = ""
+  export let size = "M"
+  export let type = "primary"
+  export let quiet = false
 
   const component = getContext("component")
   const { builderStore, ActionTypes, getAction } = getContext("sdk")
@@ -28,7 +31,7 @@
   )
   $: schema = dataProvider?.schema
   $: schemaFields = getSchemaFields(schema, allowedFields)
-  $: text = getText(buttonText, filters)
+  $: buttonText = getButtonText(text, filters)
 
   // Add query extension to data provider
   $: {
@@ -40,12 +43,12 @@
     }
   }
 
-  const getText = (buttonText, filters) => {
-    let text = buttonText || "Edit filters"
+  const getButtonText = (text, filters) => {
+    let buttonText = text || "Filter"
     if (filters?.length) {
-      text += ` (${filters.length})`
+      buttonText += ` (${filters.length})`
     }
-    return text
+    return buttonText
   }
 
   const getSchemaFields = (schema, allowedFields) => {
@@ -77,7 +80,7 @@
   })
 </script>
 
-<Button onClick={openEditor} {text} />
+<Button onClick={openEditor} text={buttonText} {size} {type} {quiet} />
 
 <Modal bind:this={modal}>
   <ModalContent title={text} size="XL" onConfirm={updateQuery}>

From d9b7426d29315bae9399f59637a886c7c4692e1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 15:26:41 +0000
Subject: [PATCH 23/41] Update cypress tests to account for component
 restructuring

---
 .../addMultiOptionDatatype.spec.js            | 74 ++++++++++---------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
index bc2619c53d..1b9fee8cbc 100644
--- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
+++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
@@ -1,41 +1,43 @@
 context("Add Multi-Option Datatype", () => {
-    before(() => {
-      cy.login()
-      cy.createTestApp()
-    })
+  before(() => {
+    cy.login()
+    cy.createTestApp()
+  })
 
-    it("should create a new table, with data", () => {
-        cy.createTable("Multi Data")
-        cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
-        cy.addRowMultiValue(["1", "2", "3", "4", "5"])
-    })
+  it("should create a new table, with data", () => {
+    cy.createTable("Multi Data")
+    cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
+    cy.addRowMultiValue(["1", "2", "3", "4", "5"])
+  })
 
-    it ("should add form with multi select picker, containing 5 options", () => {
-        cy.navigateToFrontend()
-        cy.wait(500)
-        // Add data provider
-        cy.get(`[data-cy="category-Data Provider"]`).click()
-        cy.get('[data-cy="dataSource-prop-control"]').click()
-        cy.get(".dropdown").contains("Multi Data").click()
-        cy.wait(500)
-        // Add Form with schema to match table
-        cy.addComponent("Form", "Form")
-        cy.get('[data-cy="dataSource-prop-control"').click()
-        cy.get(".dropdown").contains("Multi Data").click()
-        cy.wait(500)
-        // Add multi-select picker to form
-        cy.addComponent("Form", "Multi-select Picker").then((componentId) => {
-            cy.get('[data-cy="field-prop-control"]').type("Test Data").type('{enter}')
-            cy.wait(1000)
-            cy.getComponent(componentId).contains("Choose some options").click()
-            // Check picker has 5 items
-            cy.getComponent(componentId).find('li').should('have.length', 5)
-            // Select all items
-            for (let i = 1; i < 6; i++) {
-                cy.getComponent(componentId).find('li').contains(i).click()
-            }
-            // Check items have been selected
-            cy.getComponent(componentId).find('.spectrum-Picker-label').contains("(5)")
-        })
+  it("should add form with multi select picker, containing 5 options", () => {
+    cy.navigateToFrontend()
+    cy.wait(500)
+    // Add data provider
+    cy.get(`[data-cy="component-Data Provider"]`).click()
+    cy.get('[data-cy="dataSource-prop-control"]').click()
+    cy.get(".dropdown").contains("Multi Data").click()
+    cy.wait(500)
+    // Add Form with schema to match table
+    cy.addComponent("Form", "Form")
+    cy.get('[data-cy="dataSource-prop-control"').click()
+    cy.get(".dropdown").contains("Multi Data").click()
+    cy.wait(500)
+    // Add multi-select picker to form
+    cy.addComponent("Form", "Multi-select Picker").then(componentId => {
+      cy.get('[data-cy="field-prop-control"]').type("Test Data").type("{enter}")
+      cy.wait(1000)
+      cy.getComponent(componentId).contains("Choose some options").click()
+      // Check picker has 5 items
+      cy.getComponent(componentId).find("li").should("have.length", 5)
+      // Select all items
+      for (let i = 1; i < 6; i++) {
+        cy.getComponent(componentId).find("li").contains(i).click()
+      }
+      // Check items have been selected
+      cy.getComponent(componentId)
+        .find(".spectrum-Picker-label")
+        .contains("(5)")
     })
+  })
 })

From 6b2e235c35c43b43f8406f48c726ae25c8a4f8fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 22 Nov 2021 16:29:03 +0000
Subject: [PATCH 24/41] Fix cypress tests

---
 .../builder/cypress/integration/addMultiOptionDatatype.spec.js   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
index 1b9fee8cbc..b3e0f413f8 100644
--- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
+++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
@@ -14,6 +14,7 @@ context("Add Multi-Option Datatype", () => {
     cy.navigateToFrontend()
     cy.wait(500)
     // Add data provider
+    cy.get(`[data-cy="category-Data"]`).click()
     cy.get(`[data-cy="component-Data Provider"]`).click()
     cy.get('[data-cy="dataSource-prop-control"]').click()
     cy.get(".dropdown").contains("Multi Data").click()

From b2fbe308be0a0b97ee0b03b4555110524a9c3b10 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 23 Nov 2021 13:54:05 +0000
Subject: [PATCH 25/41] show datasource plus popover conditionally

---
 .../popovers/EditTablePopover.svelte          | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index d2c2692b42..0211a37557 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -72,17 +72,17 @@
   }
 </script>
 
-<ActionMenu>
-  <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
-  </div>
-  {#if external}
-    <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
-  {/if}
-  {#if allowDeletion}
+{#if allowDeletion}
+  <ActionMenu>
+    <div slot="control" class="icon">
+      <Icon s hoverable name="MoreSmallList" />
+    </div>
+    {#if !external}
+      <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+    {/if}
     <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
-  {/if}
-</ActionMenu>
+  </ActionMenu>
+{/if}
 
 <Modal bind:this={editorModal}>
   <ModalContent

From 8547ea2f2c3f55cf4006d11ea870f614d05f039a Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 23 Nov 2021 13:57:12 +0000
Subject: [PATCH 26/41] v0.9.185-alpha.15

---
 lerna.json                             |  2 +-
 packages/auth/package.json             |  2 +-
 packages/bbui/package.json             |  2 +-
 packages/builder/package.json          |  8 ++++----
 packages/cli/package.json              |  2 +-
 packages/client/package.json           |  6 +++---
 packages/server/package.json           | 10 +++++-----
 packages/string-templates/package.json |  2 +-
 packages/worker/package.json           |  6 +++---
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/lerna.json b/lerna.json
index 215bdfdec5..34b27e7623 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 7ac1a6c21f..8c18da2881 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index d818ea7987..c63b223dd6 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 84c2d66e53..2428e04229 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.14",
-    "@budibase/client": "^0.9.185-alpha.14",
+    "@budibase/bbui": "^0.9.185-alpha.15",
+    "@budibase/client": "^0.9.185-alpha.15",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.185-alpha.14",
+    "@budibase/string-templates": "^0.9.185-alpha.15",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index f99ece2077..b46d7b7a94 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 607328c591..fe0710427b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.14",
+    "@budibase/bbui": "^0.9.185-alpha.15",
     "@budibase/standard-components": "^0.9.139",
-    "@budibase/string-templates": "^0.9.185-alpha.14",
+    "@budibase/string-templates": "^0.9.185-alpha.15",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index 69bb378c83..58d95665df 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -68,9 +68,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.14",
-    "@budibase/client": "^0.9.185-alpha.14",
-    "@budibase/string-templates": "^0.9.185-alpha.14",
+    "@budibase/auth": "^0.9.185-alpha.15",
+    "@budibase/client": "^0.9.185-alpha.15",
+    "@budibase/string-templates": "^0.9.185-alpha.15",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",
@@ -155,4 +155,4 @@
     "oracledb": "^5.3.0"
   },
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc"
-}
\ No newline at end of file
+}
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 697c54b99e..33e41b825d 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 5ea63c75b4..239cd1231e 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.14",
+  "version": "0.9.185-alpha.15",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -29,8 +29,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.14",
-    "@budibase/string-templates": "^0.9.185-alpha.14",
+    "@budibase/auth": "^0.9.185-alpha.15",
+    "@budibase/string-templates": "^0.9.185-alpha.15",
     "@koa/router": "^8.0.0",
     "@sentry/node": "^6.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",

From 4145f6eccce3432cd720614bdf4f967bc29eb203 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 23 Nov 2021 14:05:20 +0000
Subject: [PATCH 27/41] Refactor client and server binding panels into single
 generic panel. Enable JS for formula fields

---
 .../DataTable/modals/CreateEditColumn.svelte  |   2 +-
 .../common/bindings/BindingPanel.svelte       |  74 ++++--
 .../common/bindings/ClientBindingPanel.svelte |  30 +++
 .../bindings/DrawerBindableCombobox.svelte    |   6 +-
 .../bindings/DrawerBindableInput.svelte       |   6 +-
 .../common/bindings/ModalBindableInput.svelte |   6 +-
 .../common/bindings/ServerBindingPanel.svelte | 222 ++----------------
 .../FilterEditor/FilterDrawer.svelte          |   4 +-
 8 files changed, 116 insertions(+), 234 deletions(-)
 create mode 100644 packages/builder/src/components/common/bindings/ClientBindingPanel.svelte

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 841e781cf2..7902212b7e 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -389,7 +389,7 @@
       value={field.formula}
       on:change={e => (field.formula = e.detail)}
       bindings={getBindings({ table })}
-      serverSide="true"
+      allowJS
     />
   {:else if field.type === AUTO_TYPE}
     <Select
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index eed078c16c..1a098d9567 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -22,7 +22,7 @@
 
   const dispatch = createEventDispatcher()
 
-  export let bindableProperties
+  export let bindings
   export let value = ""
   export let valid
   export let allowJS = false
@@ -36,17 +36,22 @@
   let hbsValue = initialValueJS ? null : value
 
   $: usingJS = mode === "JavaScript"
-  $: ({ context } = groupBy("type", bindableProperties))
   $: searchRgx = new RegExp(search, "ig")
-  $: filteredBindings = context?.filter(context => {
-    return context.readableBinding.match(searchRgx)
-  })
+  $: categories = Object.entries(groupBy("category", bindings))
+  $: filteredCategories = categories
+    .map(([name, categoryBindings]) => ({
+      name,
+      bindings: categoryBindings?.filter(binding => {
+        return binding.readableBinding.match(searchRgx)
+      }),
+    }))
+    .filter(category => category.bindings?.length > 0)
   $: filteredHelpers = helpers?.filter(helper => {
     return helper.label.match(searchRgx) || helper.description.match(searchRgx)
   })
 
   const updateValue = value => {
-    valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+    valid = isValid(readableToRuntimeBinding(bindings, value))
     if (valid) {
       dispatch("change", value)
     }
@@ -91,7 +96,7 @@
   }
 
   onMount(() => {
-    valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+    valid = isValid(readableToRuntimeBinding(bindings, value))
   })
 </script>
 
@@ -102,18 +107,29 @@
         <div class="heading">Search</div>
         <Search placeholder="Search" bind:value={search} />
       </section>
-      {#if filteredBindings?.length}
-        <section>
-          <div class="heading">Bindable Values</div>
-          <ul>
-            {#each filteredBindings as binding}
-              <li on:click={() => addBinding(binding)}>
-                {binding.readableBinding}
-              </li>
-            {/each}
-          </ul>
-        </section>
-      {/if}
+      {#each filteredCategories as category}
+        {#if category.bindings?.length}
+          <section>
+            <div class="heading">{category.name}</div>
+            <ul>
+              {#each category.bindings as binding}
+                <li on:click={() => addBinding(binding)}>
+                  <span class="binding__label">{binding.readableBinding}</span>
+                  {#if binding.type}
+                    <span class="binding__type">{binding.type}</span>
+                  {/if}
+                  {#if binding.description}
+                    <br />
+                    <div class="binding__description">
+                      {binding.description || ""}
+                    </div>
+                  {/if}
+                </li>
+              {/each}
+            </ul>
+          </section>
+        {/if}
+      {/each}
       {#if filteredHelpers?.length && !usingJS}
         <section>
           <div class="heading">Helpers</div>
@@ -162,7 +178,7 @@
                 height={200}
                 value={decodeJSBinding(jsValue)}
                 on:change={onChangeJSValue}
-                hints={context?.map(x => `$("${x.readableBinding}")`)}
+                hints={bindings?.map(x => `$("${x.readableBinding}")`)}
               />
               <Body size="S">
                 JavaScript expressions are executed as functions, so ensure that
@@ -234,6 +250,24 @@
     color: var(--spectrum-global-color-gray-900) !important;
   }
 
+  .binding__label {
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+  .binding__description {
+    color: var(--spectrum-global-color-gray-700);
+    margin: 0.5rem 0 0 0;
+    white-space: normal;
+  }
+  .binding__type {
+    font-family: monospace;
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: var(--border-radius-s);
+    padding: 2px 4px;
+    margin-left: 2px;
+    font-weight: 600;
+  }
+
   .helper {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
new file mode 100644
index 0000000000..6c05953fa2
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -0,0 +1,30 @@
+<script>
+  import BindingPanel from "./BindingPanel.svelte"
+
+  export let bindings = []
+  export let valid
+  export let value = ""
+  export let allowJS = false
+
+  $: enrichedBindings = enrichBindings(bindings)
+
+  // Ensure bindings have the correct categories
+  const enrichBindings = bindings => {
+    if (!bindings?.length) {
+      return bindings
+    }
+    return bindings?.map(binding => ({
+      ...binding,
+      category: "Bindable Values",
+      type: null,
+    }))
+  }
+</script>
+
+<BindingPanel
+  bind:valid
+  bindings={enrichedBindings}
+  {value}
+  {allowJS}
+  on:change
+/>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index af0732eb84..08845d1798 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -4,11 +4,11 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 
-  export let panel = BindingPanel
+  export let panel = ClientBindingPanel
   export let value = ""
   export let bindings = []
   export let title = "Bindings"
@@ -82,7 +82,7 @@
     value={readableValue}
     close={handleClose}
     on:change={event => (tempValue = event.detail)}
-    bindableProperties={bindings}
+    {bindings}
     {allowJS}
   />
 </Drawer>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index e03e07710f..5b135e8778 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -4,11 +4,11 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 
-  export let panel = BindingPanel
+  export let panel = ClientBindingPanel
   export let value = ""
   export let bindings = []
   export let title = "Bindings"
@@ -63,7 +63,7 @@
     bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
-    bindableProperties={bindings}
+    {bindings}
     {allowJS}
   />
 </Drawer>
diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index 2a72d7a315..fa46097142 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -10,10 +10,10 @@
   export let panel = ServerBindingPanel
   export let value = ""
   export let bindings = []
-  export let thin = true
   export let title = "Bindings"
   export let placeholder
   export let label
+  export let allowJS = false
 
   const dispatch = createEventDispatcher()
   let bindingModal
@@ -34,7 +34,6 @@
 <div class="control">
   <Input
     {label}
-    {thin}
     value={readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
@@ -55,7 +54,8 @@
         value={readableValue}
         bind:valid
         on:change={e => (tempValue = e.detail)}
-        bindableProperties={bindings}
+        {bindings}
+        {allowJS}
       />
     </div>
   </ModalContent>
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 66b567f343..213e5bbf1d 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,209 +1,27 @@
 <script>
-  import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
-  import { handlebarsCompletions } from "constants/completions"
-  import { readableToRuntimeBinding } from "builderStore/dataBinding"
-  import { addHBSBinding } from "./utils"
+  import BindingPanel from "./BindingPanel.svelte"
 
-  const dispatch = createEventDispatcher()
-
-  export let bindableProperties = []
-  export let valid = true
+  export let bindings = []
+  export let valid
   export let value = ""
+  export let allowJS = false
 
-  let helpers = handlebarsCompletions()
-  let getCaretPosition
-  let search = ""
+  $: enrichedBindings = enrichBindings(bindings)
 
-  $: categories = Object.entries(groupBy("category", bindableProperties))
-  $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
-  $: dispatch("change", value)
-  $: searchRgx = new RegExp(search, "ig")
-  $: filteredCategories = categories.map(([categoryName, bindings]) => {
-    const filteredBindings = bindings.filter(binding => {
-      return binding.label.match(searchRgx)
-    })
-    return [categoryName, filteredBindings]
-  })
-  $: filteredHelpers = helpers?.filter(helper => {
-    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
-  })
+  // Ensure bindings have the correct properties
+  const enrichBindings = bindings => {
+    return bindings?.map(binding => ({
+      ...binding,
+      readableBinding: binding.readableBinding || binding.label,
+      runtimeBinding: binding.runtimeBinding || binding.path,
+    }))
+  }
 </script>
 
-<DrawerContent>
-  <svelte:fragment slot="sidebar">
-    <div class="container">
-      <section>
-        <div class="heading">Search</div>
-        <Search placeholder="Search" bind:value={search} />
-      </section>
-      {#each filteredCategories as [categoryName, bindings]}
-        {#if bindings.length}
-          <section>
-            <div class="heading">{categoryName}</div>
-            <ul>
-              {#each bindings as binding}
-                <li
-                  on:click={() => {
-                    value = addHBSBinding(value, getCaretPosition(), binding)
-                  }}
-                >
-                  <span class="binding__label">{binding.label}</span>
-                  <span class="binding__type">{binding.type}</span>
-                  {#if binding.description}
-                    <br />
-                    <div class="binding__description">
-                      {binding.description || ""}
-                    </div>
-                  {/if}
-                </li>
-              {/each}
-            </ul>
-          </section>
-        {/if}
-      {/each}
-      {#if filteredHelpers?.length}
-        <section>
-          <div class="heading">Helpers</div>
-          <ul>
-            {#each filteredHelpers as helper}
-              <li
-                on:click={() => {
-                  value = addHBSBinding(value, getCaretPosition(), helper.text)
-                }}
-              >
-                <div class="helper">
-                  <div class="helper__name">{helper.displayText}</div>
-                  <div class="helper__description">
-                    {@html helper.description}
-                  </div>
-                  <pre class="helper__example">{helper.example || ''}</pre>
-                </div>
-              </li>
-            {/each}
-          </ul>
-        </section>
-      {/if}
-    </div>
-  </svelte:fragment>
-  <div class="main">
-    <TextArea
-      bind:getCaretPosition
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the textbox."
-    />
-    {#if !valid}
-      <p class="syntax-error">
-        Current Handlebars syntax is invalid, please check the guide
-        <a href="https://handlebarsjs.com/guide/">here</a>
-        for more details.
-      </p>
-    {/if}
-  </div>
-</DrawerContent>
-
-<style>
-  .main :global(textarea) {
-    min-height: 150px !important;
-  }
-
-  .container {
-    margin: calc(-1 * var(--spacing-xl));
-  }
-  .heading {
-    font-size: var(--font-size-s);
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--spectrum-global-color-gray-600);
-    padding: var(--spacing-xl) 0 var(--spacing-m) 0;
-  }
-
-  section {
-    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
-  }
-  section:not(:first-child) {
-    border-top: var(--border-light);
-  }
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    border: var(--border-light);
-    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
-      border-color 130ms ease-in-out;
-  }
-  li:not(:last-of-type) {
-    margin-bottom: var(--spacing-s);
-  }
-  li :global(*) {
-    transition: color 130ms ease-in-out;
-  }
-  li:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-global-color-gray-500);
-    cursor: pointer;
-  }
-  li:hover :global(*) {
-    color: var(--spectrum-global-color-gray-900) !important;
-  }
-
-  .helper {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: var(--spacing-xs);
-  }
-  .helper__name {
-    font-weight: bold;
-  }
-  .helper__description,
-  .helper__description :global(*) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-  .helper__example {
-    white-space: normal;
-    margin: 0.5rem 0 0 0;
-    font-weight: 700;
-  }
-  .helper__description :global(p) {
-    margin: 0;
-  }
-
-  .syntax-error {
-    padding-top: var(--spacing-m);
-    color: var(--red);
-    font-size: 12px;
-  }
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-
-  .binding__label {
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-  .binding__description {
-    color: var(--spectrum-global-color-gray-700);
-    margin: 0.5rem 0 0 0;
-    white-space: normal;
-  }
-  .binding__type {
-    font-family: monospace;
-    background-color: var(--spectrum-global-color-gray-200);
-    border-radius: var(--border-radius-s);
-    padding: 2px 4px;
-    margin-left: 2px;
-    font-weight: 600;
-  }
-</style>
+<BindingPanel
+  bind:valid
+  bindings={enrichedBindings}
+  {value}
+  {allowJS}
+  on:change
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte
index 22363ff8f6..e30fd6d491 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte
@@ -11,14 +11,14 @@
     Select,
   } from "@budibase/bbui"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { generate } from "shortid"
   import { getValidOperatorsForType, OperatorOptions } from "constants/lucene"
 
   export let schemaFields
   export let filters = []
   export let bindings = []
-  export let panel = BindingPanel
+  export let panel = ClientBindingPanel
   export let allowBindings = true
 
   const BannedTypes = ["link", "attachment", "formula"]

From cc40a68423e32f6b6a6855e201c39f0325b64980 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 23 Nov 2021 14:45:50 +0000
Subject: [PATCH 28/41] fix bg color of screen wizard modal

---
 .../src/components/design/NavigationPanel/NewScreenModal.svelte  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index fbf2af2e4b..514dc545ac 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -90,7 +90,6 @@
 
   .content {
     letter-spacing: 0px;
-    color: #2c2c2c;
   }
   .item {
     cursor: pointer;

From c89e807e313e95aff366c3b3c4b540cc080c9ee6 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 23 Nov 2021 15:00:21 +0000
Subject: [PATCH 29/41] issue with datasource plus autogen

---
 .../components/design/NavigationPanel/NewScreenModal.svelte    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 514dc545ac..398ff72d23 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -13,6 +13,7 @@
   $: blankSelected = selectedScreens?.length === 1
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
   let templates = getTemplates($store, $tables.list)
+  console.log($tables.list)
   const toggleScreenSelection = table => {
     if (selectedScreens.find(s => s.name.includes(table.name))) {
       selectedScreens = selectedScreens.filter(
@@ -60,7 +61,7 @@
     </div>
     <Detail size="S">Autogenerated Screens</Detail>
 
-    {#each $tables.list.filter(table => table.type !== "external" && table._id !== "ta_users") as table}
+    {#each $tables.list.filter(table => table._id !== "ta_users") as table}
       <div
         class:disabled={blankSelected}
         class:selected={selectedScreens.find(x => x.name.includes(table.name))}

From a0fd1993dca0b39d292e2f1496c5655ccad7e497 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 23 Nov 2021 15:02:10 +0000
Subject: [PATCH 30/41] remove log

---
 .../src/components/design/NavigationPanel/NewScreenModal.svelte  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 398ff72d23..e7c9ef6ff2 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -13,7 +13,6 @@
   $: blankSelected = selectedScreens?.length === 1
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
   let templates = getTemplates($store, $tables.list)
-  console.log($tables.list)
   const toggleScreenSelection = table => {
     if (selectedScreens.find(s => s.name.includes(table.name))) {
       selectedScreens = selectedScreens.filter(

From 5ba6f4bd54bf5651990889c4b4feb1ac06671e48 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 23 Nov 2021 15:23:55 +0000
Subject: [PATCH 31/41] v0.9.185-alpha.16

---
 lerna.json                             | 2 +-
 packages/auth/package.json             | 2 +-
 packages/bbui/package.json             | 2 +-
 packages/builder/package.json          | 8 ++++----
 packages/cli/package.json              | 2 +-
 packages/client/package.json           | 6 +++---
 packages/server/package.json           | 8 ++++----
 packages/string-templates/package.json | 2 +-
 packages/worker/package.json           | 6 +++---
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 34b27e7623..549dbfe8ff 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 8c18da2881..801ba46825 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index c63b223dd6..bad57f07ba 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 2428e04229..ffa6191d88 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.15",
-    "@budibase/client": "^0.9.185-alpha.15",
+    "@budibase/bbui": "^0.9.185-alpha.16",
+    "@budibase/client": "^0.9.185-alpha.16",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.185-alpha.15",
+    "@budibase/string-templates": "^0.9.185-alpha.16",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index b46d7b7a94..1036a1cdb4 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index fe0710427b..bd823aff26 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.15",
+    "@budibase/bbui": "^0.9.185-alpha.16",
     "@budibase/standard-components": "^0.9.139",
-    "@budibase/string-templates": "^0.9.185-alpha.15",
+    "@budibase/string-templates": "^0.9.185-alpha.16",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index 58d95665df..25ec6c0835 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -68,9 +68,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.15",
-    "@budibase/client": "^0.9.185-alpha.15",
-    "@budibase/string-templates": "^0.9.185-alpha.15",
+    "@budibase/auth": "^0.9.185-alpha.16",
+    "@budibase/client": "^0.9.185-alpha.16",
+    "@budibase/string-templates": "^0.9.185-alpha.16",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 33e41b825d..2817c86a4f 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 239cd1231e..745ec328aa 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.15",
+  "version": "0.9.185-alpha.16",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -29,8 +29,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.15",
-    "@budibase/string-templates": "^0.9.185-alpha.15",
+    "@budibase/auth": "^0.9.185-alpha.16",
+    "@budibase/string-templates": "^0.9.185-alpha.16",
     "@koa/router": "^8.0.0",
     "@sentry/node": "^6.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",

From 24a700f3910cce2360268cd65f71f74cd53adfbd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 23 Nov 2021 16:40:31 +0000
Subject: [PATCH 32/41] Add readonly prop to combobox

---
 packages/bbui/src/Form/Combobox.svelte       | 2 ++
 packages/bbui/src/Form/Core/Combobox.svelte  | 2 ++
 packages/bbui/src/Form/Core/TextField.svelte | 8 ++++----
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 368e8bec4b..83927b05db 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -6,6 +6,7 @@
   export let value = null
   export let label = undefined
   export let disabled = false
+  export let readonly = false
   export let labelPosition = "above"
   export let error = null
   export let placeholder = "Choose an option or type"
@@ -33,6 +34,7 @@
     {value}
     {options}
     {placeholder}
+    {readonly}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index 6a1390eeea..6a6423cccf 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -9,6 +9,7 @@
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let options = []
   export let getOptionLabel = option => option
@@ -73,6 +74,7 @@
       value={value || ""}
       placeholder={placeholder || ""}
       {disabled}
+      {readonly}
       class="spectrum-Textfield-input spectrum-InputGroup-input"
     />
   </div>
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 85c71338f7..d2064ddde0 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -16,15 +16,15 @@
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = value => {
+  const updateValue = newValue => {
     if (readonly) {
       return
     }
     if (type === "number") {
-      const float = parseFloat(value)
-      value = isNaN(float) ? null : float
+      const float = parseFloat(newValue)
+      newValue = isNaN(float) ? null : float
     }
-    dispatch("change", value)
+    dispatch("change", newValue)
   }
 
   const onFocus = () => {

From 19d74d3fb6b8d08e1913febc9df8fdcb00518e66 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 23 Nov 2021 16:41:09 +0000
Subject: [PATCH 33/41] Set inputs to readonly when displaying the javascript
 function helper label to prevent accidentally setting explicit text

---
 .../common/bindings/DrawerBindableCombobox.svelte           | 1 +
 .../components/common/bindings/DrawerBindableInput.svelte   | 1 +
 .../components/common/bindings/ModalBindableInput.svelte    | 6 +++++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index 08845d1798..c8716352e5 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -55,6 +55,7 @@
   <Combobox
     {label}
     {disabled}
+    readonly={isJS}
     value={isJS ? "(JavaScript function)" : readableValue}
     on:type={e => onChange(e.detail, false)}
     on:pick={e => onChange(e.detail, true)}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 5b135e8778..073e575869 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -40,6 +40,7 @@
   <Input
     {label}
     {disabled}
+    readonly={isJS}
     value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index fa46097142..3776f1dc84 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -6,6 +6,7 @@
   } from "builderStore/dataBinding"
   import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
+  import { isJSBinding } from "@budibase/string-templates"
 
   export let panel = ServerBindingPanel
   export let value = ""
@@ -18,8 +19,10 @@
   const dispatch = createEventDispatcher()
   let bindingModal
   let valid = true
+
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
+  $: isJS = isJSBinding(value)
 
   const saveBinding = () => {
     onChange(tempValue)
@@ -34,7 +37,8 @@
 <div class="control">
   <Input
     {label}
-    value={readableValue}
+    readonly={isJS}
+    value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
   />

From 46bb498122a79e52c8793d730a091067cb1498a3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 23 Nov 2021 16:57:51 +0000
Subject: [PATCH 34/41] Ensure CodeMirror hints are rendered on top of modals

---
 .../builder/src/components/common/CodeMirrorEditor.svelte | 8 ++++++--
 .../src/components/common/bindings/BindingPanel.svelte    | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
index e99fed0d41..84f6db74ef 100644
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@@ -1,6 +1,4 @@
 <script context="module">
-  import { Label } from "@budibase/bbui"
-
   export const EditorModes = {
     JS: {
       name: "javascript",
@@ -21,6 +19,7 @@
 </script>
 
 <script>
+  import { Label } from "@budibase/bbui"
   import CodeMirror from "components/integration/codemirror"
   import { themeStore } from "builderStore"
   import { createEventDispatcher, onMount } from "svelte"
@@ -156,4 +155,9 @@
   div :global(.CodeMirror-focused) {
     border-color: var(--spectrum-alias-border-color-mouse-focus);
   }
+
+  /* Ensure hints are always on top */
+  :global(.CodeMirror-hints) {
+    z-index: 999999;
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 1a098d9567..ee0169f9e7 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -49,6 +49,7 @@
   $: filteredHelpers = helpers?.filter(helper => {
     return helper.label.match(searchRgx) || helper.description.match(searchRgx)
   })
+  $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)
 
   const updateValue = value => {
     valid = isValid(readableToRuntimeBinding(bindings, value))
@@ -178,7 +179,7 @@
                 height={200}
                 value={decodeJSBinding(jsValue)}
                 on:change={onChangeJSValue}
-                hints={bindings?.map(x => `$("${x.readableBinding}")`)}
+                hints={codeMirrorHints}
               />
               <Body size="S">
                 JavaScript expressions are executed as functions, so ensure that

From 8d44e9aa20c7ce3e581eb6f1d3b57a803bb69870 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 23 Nov 2021 17:40:49 +0000
Subject: [PATCH 35/41] Update dynamic filter component styles and remove lots
 of settings

---
 packages/client/manifest.json                 | 37 -------------------
 .../client/src/components/app/Button.svelte   | 24 +++++++++++-
 .../app/dynamic-filter/DynamicFilter.svelte   | 24 ++++++------
 3 files changed, 34 insertions(+), 51 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 25e7840a66..26ccbb760e 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2650,7 +2650,6 @@
     "name": "Dynamic Filter",
     "icon": "FilterEdit",
     "showSettingsBar": true,
-    "editable": true,
     "settings": [
       {
         "type": "dataProvider",
@@ -2669,34 +2668,6 @@
         "key": "text",
         "defaultValue": "Filter"
       },
-      {
-        "type": "select",
-        "showInBar": true,
-        "label": "Button variant",
-        "key": "type",
-        "options": [
-          {
-            "label": "Primary",
-            "value": "primary"
-          }, {
-            "label": "Secondary",
-            "value": "secondary"
-          },
-          {
-            "label": "Action",
-            "value": "cta"
-          },
-          {
-            "label": "Warning",
-            "value": "warning"
-          },
-          {
-            "label": "Over Background",
-            "value": "overBackground"
-          }
-        ],
-        "defaultValue": "primary"
-      },
       {
         "type": "select",
         "label": "Button size",
@@ -2721,14 +2692,6 @@
           }
         ],
         "defaultValue": "M"
-      },
-      {
-        "type": "boolean",
-        "label": "Quiet button",
-        "key": "quiet",
-        "showInBar": true,
-        "barIcon": "VisibilityOff",
-        "barTitle": "Quiet variant"
       }
     ]
   },
diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index 5b06475b30..18bb935edb 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -12,6 +12,10 @@
   export let type = "primary"
   export let quiet = false
 
+  // For internal use only for now - not defined in the manifest
+  export let icon = null
+  export let active = false
+
   let node
 
   $: $component.editing && node?.focus()
@@ -35,10 +39,22 @@
   {disabled}
   use:styleable={$component.styles}
   on:click={onClick}
-  contenteditable={$component.editing}
+  contenteditable={$component.editing && !icon}
   on:blur={$component.editing ? updateText : null}
   bind:this={node}
+  class:active
 >
+  {#if icon}
+    <svg
+      class:hasText={componentText?.length > 0}
+      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
   {componentText}
 </button>
 
@@ -56,4 +72,10 @@
   .spectrum-Button::after {
     display: none;
   }
+  .spectrum-Icon.hasText {
+    margin-right: var(--spectrum-button-primary-icon-gap);
+  }
+  .active {
+    color: var(--spectrum-global-color-blue-600);
+  }
 </style>
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index f85fe7bedd..9c12cdb658 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -10,8 +10,6 @@
   export let allowedFields
   export let text = ""
   export let size = "M"
-  export let type = "primary"
-  export let quiet = false
 
   const component = getContext("component")
   const { builderStore, ActionTypes, getAction } = getContext("sdk")
@@ -31,7 +29,7 @@
   )
   $: schema = dataProvider?.schema
   $: schemaFields = getSchemaFields(schema, allowedFields)
-  $: buttonText = getButtonText(text, filters)
+  $: buttonText = text || "Filter"
 
   // Add query extension to data provider
   $: {
@@ -43,14 +41,6 @@
     }
   }
 
-  const getButtonText = (text, filters) => {
-    let buttonText = text || "Filter"
-    if (filters?.length) {
-      buttonText += ` (${filters.length})`
-    }
-    return buttonText
-  }
-
   const getSchemaFields = (schema, allowedFields) => {
     let clonedSchema = {}
     if (!allowedFields?.length) {
@@ -80,10 +70,18 @@
   })
 </script>
 
-<Button onClick={openEditor} text={buttonText} {size} {type} {quiet} />
+<Button
+  onClick={openEditor}
+  icon="Properties"
+  text={buttonText}
+  {size}
+  type="secondary"
+  quiet
+  active={filters?.length > 0}
+/>
 
 <Modal bind:this={modal}>
-  <ModalContent title={text} size="XL" onConfirm={updateQuery}>
+  <ModalContent title={buttonText} size="XL" onConfirm={updateQuery}>
     <FilterModal bind:filters={tmpFilters} {schemaFields} />
   </ModalContent>
 </Modal>

From f2365738d64a3a0905ec1d901335c2062f1cebf9 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 23 Nov 2021 20:15:28 +0000
Subject: [PATCH 36/41] v0.9.185-alpha.17

---
 lerna.json                             | 2 +-
 packages/auth/package.json             | 2 +-
 packages/bbui/package.json             | 2 +-
 packages/builder/package.json          | 8 ++++----
 packages/cli/package.json              | 2 +-
 packages/client/package.json           | 6 +++---
 packages/server/package.json           | 8 ++++----
 packages/string-templates/package.json | 2 +-
 packages/worker/package.json           | 6 +++---
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 549dbfe8ff..5091226d19 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 801ba46825..e00a15a0b5 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index bad57f07ba..7d7c3635ca 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index ffa6191d88..832221c8b9 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.16",
-    "@budibase/client": "^0.9.185-alpha.16",
+    "@budibase/bbui": "^0.9.185-alpha.17",
+    "@budibase/client": "^0.9.185-alpha.17",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.185-alpha.16",
+    "@budibase/string-templates": "^0.9.185-alpha.17",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 1036a1cdb4..4919287cc5 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index bd823aff26..b4d937543c 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.16",
+    "@budibase/bbui": "^0.9.185-alpha.17",
     "@budibase/standard-components": "^0.9.139",
-    "@budibase/string-templates": "^0.9.185-alpha.16",
+    "@budibase/string-templates": "^0.9.185-alpha.17",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index 25ec6c0835..dbfe769ae4 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -68,9 +68,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.16",
-    "@budibase/client": "^0.9.185-alpha.16",
-    "@budibase/string-templates": "^0.9.185-alpha.16",
+    "@budibase/auth": "^0.9.185-alpha.17",
+    "@budibase/client": "^0.9.185-alpha.17",
+    "@budibase/string-templates": "^0.9.185-alpha.17",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 2817c86a4f..3d71148c92 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 745ec328aa..8c36fa6402 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.16",
+  "version": "0.9.185-alpha.17",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -29,8 +29,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.16",
-    "@budibase/string-templates": "^0.9.185-alpha.16",
+    "@budibase/auth": "^0.9.185-alpha.17",
+    "@budibase/string-templates": "^0.9.185-alpha.17",
     "@koa/router": "^8.0.0",
     "@sentry/node": "^6.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",

From fa9fc496f665357abcc484e114ee776bfa88cf74 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 24 Nov 2021 08:20:23 +0000
Subject: [PATCH 37/41] Remove text setting from dynamic filter component

---
 packages/client/manifest.json                               | 6 ------
 .../src/components/app/dynamic-filter/DynamicFilter.svelte  | 6 ++----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 26ccbb760e..d16b117215 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2662,12 +2662,6 @@
         "key": "allowedFields",
         "placeholder": "All fields"
       },
-      {
-        "type": "text",
-        "label": "Button text",
-        "key": "text",
-        "defaultValue": "Filter"
-      },
       {
         "type": "select",
         "label": "Button size",
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 9c12cdb658..20909d011c 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -8,7 +8,6 @@
 
   export let dataProvider
   export let allowedFields
-  export let text = ""
   export let size = "M"
 
   const component = getContext("component")
@@ -29,7 +28,6 @@
   )
   $: schema = dataProvider?.schema
   $: schemaFields = getSchemaFields(schema, allowedFields)
-  $: buttonText = text || "Filter"
 
   // Add query extension to data provider
   $: {
@@ -73,7 +71,7 @@
 <Button
   onClick={openEditor}
   icon="Properties"
-  text={buttonText}
+  text="Filter"
   {size}
   type="secondary"
   quiet
@@ -81,7 +79,7 @@
 />
 
 <Modal bind:this={modal}>
-  <ModalContent title={buttonText} size="XL" onConfirm={updateQuery}>
+  <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
     <FilterModal bind:filters={tmpFilters} {schemaFields} />
   </ModalContent>
 </Modal>

From 81ad2b7cb2010beb18856ab0d5127431d59c76aa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 24 Nov 2021 08:44:12 +0000
Subject: [PATCH 38/41] Fix relationship paths not using correct readable and
 runtime bindings in server binding panel

---
 .../src/components/common/bindings/ServerBindingPanel.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 213e5bbf1d..a56384cba9 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,5 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { makePropSafe } from "@budibase/string-templates"
 
   export let bindings = []
   export let valid
@@ -12,8 +13,8 @@
   const enrichBindings = bindings => {
     return bindings?.map(binding => ({
       ...binding,
-      readableBinding: binding.readableBinding || binding.label,
-      runtimeBinding: binding.runtimeBinding || binding.path,
+      readableBinding: binding.label || binding.readableBinding,
+      runtimeBinding: binding.path || binding.runtimeBinding,
     }))
   }
 </script>

From f7377c71daf70c92a9fdaccad5bb9b6f0e525a26 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Wed, 24 Nov 2021 08:48:23 +0000
Subject: [PATCH 39/41] v0.9.185-alpha.18

---
 lerna.json                             | 2 +-
 packages/auth/package.json             | 2 +-
 packages/bbui/package.json             | 2 +-
 packages/builder/package.json          | 8 ++++----
 packages/cli/package.json              | 2 +-
 packages/client/package.json           | 6 +++---
 packages/server/package.json           | 8 ++++----
 packages/string-templates/package.json | 2 +-
 packages/worker/package.json           | 6 +++---
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 5091226d19..2358f3ac08 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index e00a15a0b5..c7a9a5d9b4 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 7d7c3635ca..14a23e0f61 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 832221c8b9..f96c6a31ef 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.17",
-    "@budibase/client": "^0.9.185-alpha.17",
+    "@budibase/bbui": "^0.9.185-alpha.18",
+    "@budibase/client": "^0.9.185-alpha.18",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.185-alpha.17",
+    "@budibase/string-templates": "^0.9.185-alpha.18",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 4919287cc5..4c4b5c87f6 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index b4d937543c..7bf53dee2c 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.17",
+    "@budibase/bbui": "^0.9.185-alpha.18",
     "@budibase/standard-components": "^0.9.139",
-    "@budibase/string-templates": "^0.9.185-alpha.17",
+    "@budibase/string-templates": "^0.9.185-alpha.18",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index dbfe769ae4..4b323a4255 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -68,9 +68,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.17",
-    "@budibase/client": "^0.9.185-alpha.17",
-    "@budibase/string-templates": "^0.9.185-alpha.17",
+    "@budibase/auth": "^0.9.185-alpha.18",
+    "@budibase/client": "^0.9.185-alpha.18",
+    "@budibase/string-templates": "^0.9.185-alpha.18",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 3d71148c92..29e36c0b5a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 8c36fa6402..1ddad677f1 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.17",
+  "version": "0.9.185-alpha.18",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -29,8 +29,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.17",
-    "@budibase/string-templates": "^0.9.185-alpha.17",
+    "@budibase/auth": "^0.9.185-alpha.18",
+    "@budibase/string-templates": "^0.9.185-alpha.18",
     "@koa/router": "^8.0.0",
     "@sentry/node": "^6.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",

From 5e7feb08da68f72c20ca4c3c984f44fb37de0b90 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 24 Nov 2021 08:53:14 +0000
Subject: [PATCH 40/41] Remove unused import

---
 .../src/components/common/bindings/ServerBindingPanel.svelte     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index a56384cba9..5440ba0b18 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,6 +1,5 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { makePropSafe } from "@budibase/string-templates"
 
   export let bindings = []
   export let valid

From 1497e2d48971b3327ddb70abb7b6e10d7eb51952 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Wed, 24 Nov 2021 09:17:53 +0000
Subject: [PATCH 41/41] v0.9.185-alpha.19

---
 lerna.json                             | 2 +-
 packages/auth/package.json             | 2 +-
 packages/bbui/package.json             | 2 +-
 packages/builder/package.json          | 8 ++++----
 packages/cli/package.json              | 2 +-
 packages/client/package.json           | 6 +++---
 packages/server/package.json           | 8 ++++----
 packages/string-templates/package.json | 2 +-
 packages/worker/package.json           | 6 +++---
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 2358f3ac08..1cd2802044 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index c7a9a5d9b4..3d43666fb7 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 14a23e0f61..9373420039 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index f96c6a31ef..7491f77e96 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.18",
-    "@budibase/client": "^0.9.185-alpha.18",
+    "@budibase/bbui": "^0.9.185-alpha.19",
+    "@budibase/client": "^0.9.185-alpha.19",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.185-alpha.18",
+    "@budibase/string-templates": "^0.9.185-alpha.19",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 4c4b5c87f6..4c65256f32 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 7bf53dee2c..74091fe94f 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.185-alpha.18",
+    "@budibase/bbui": "^0.9.185-alpha.19",
     "@budibase/standard-components": "^0.9.139",
-    "@budibase/string-templates": "^0.9.185-alpha.18",
+    "@budibase/string-templates": "^0.9.185-alpha.19",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index 4b323a4255..4fc9a40c74 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -68,9 +68,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.18",
-    "@budibase/client": "^0.9.185-alpha.18",
-    "@budibase/string-templates": "^0.9.185-alpha.18",
+    "@budibase/auth": "^0.9.185-alpha.19",
+    "@budibase/client": "^0.9.185-alpha.19",
+    "@budibase/string-templates": "^0.9.185-alpha.19",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 29e36c0b5a..fa5c13b3fc 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 1ddad677f1..3d6ffb12b5 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.185-alpha.18",
+  "version": "0.9.185-alpha.19",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -29,8 +29,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.185-alpha.18",
-    "@budibase/string-templates": "^0.9.185-alpha.18",
+    "@budibase/auth": "^0.9.185-alpha.19",
+    "@budibase/string-templates": "^0.9.185-alpha.19",
     "@koa/router": "^8.0.0",
     "@sentry/node": "^6.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",