From 68d0a4c3360f3354f36ac233aa51ea864b9bf0a5 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Fri, 18 Nov 2022 15:52:30 +0000
Subject: [PATCH 1/6] Allow custom labels for dynamic filter

---
 packages/client/manifest.json                              | 7 ++++---
 .../src/components/app/dynamic-filter/DynamicFilter.svelte | 5 +++--
 .../src/components/app/dynamic-filter/FilterModal.svelte   | 5 ++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 45bb38439a..66bed98e3c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3940,10 +3940,11 @@
         "required": true
       },
       {
-        "type": "multifield",
-        "label": "Allowed filter fields",
+        "type": "columns",
+        "label": "Allowed filter columns",
         "key": "allowedFields",
-        "placeholder": "All fields"
+        "dependsOn": "dataProvider",
+        "nested": true
       },
       {
         "type": "select",
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 141ce2e955..7ee704cd84 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -61,8 +61,9 @@
       clonedSchema = schema
     } else {
       allowedFields?.forEach(field => {
-        if (schema[field]) {
-          clonedSchema[field] = schema[field]
+        if (schema[field.name]) {
+          clonedSchema[field.name] = schema[field.name]
+          clonedSchema[field.name].displayName = field.displayName
         }
       })
     }
diff --git a/packages/client/src/components/app/dynamic-filter/FilterModal.svelte b/packages/client/src/components/app/dynamic-filter/FilterModal.svelte
index b8815279dd..8d89d3a6ff 100644
--- a/packages/client/src/components/app/dynamic-filter/FilterModal.svelte
+++ b/packages/client/src/components/app/dynamic-filter/FilterModal.svelte
@@ -25,7 +25,10 @@
         !BannedTypes.includes(field.type) ||
         (field.type === "formula" && field.formulaType === "static")
     )
-    .map(field => field.name)
+    .map(field => ({
+      label: field.displayName || field.name,
+      value: field.name,
+    }))
 
   const addFilter = () => {
     filters = [

From 79dc972c564a066c7ac35d8825df3d825a221a58 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Fri, 18 Nov 2022 16:19:49 +0000
Subject: [PATCH 2/6] Don't allow cell edit for dynamic filter col conf

---
 .../design/settings/componentSettings.js      |  2 +
 .../ColumnEditor/BasicColumnEditor.svelte     | 83 +++++++++++++++++++
 .../controls/ColumnEditor/ColumnDrawer.svelte |  5 +-
 packages/client/manifest.json                 |  4 +-
 4 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 441993fe1c..05cc4ecc14 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -19,6 +19,7 @@ import FormFieldSelect from "./controls/FormFieldSelect.svelte"
 import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
 import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
+import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 
 const componentMap = {
@@ -42,6 +43,7 @@ const componentMap = {
   filter: FilterEditor,
   url: URLSelect,
   columns: ColumnEditor,
+  allowedFields: BasicColumnEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
new file mode 100644
index 0000000000..4aafc71d54
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
@@ -0,0 +1,83 @@
+<script>
+  import { Button, ActionButton, Drawer } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import ColumnDrawer from "./ColumnDrawer.svelte"
+  import { cloneDeep } from "lodash/fp"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+
+  export let componentInstance
+  export let value = []
+
+  const dispatch = createEventDispatcher()
+
+  let drawer
+  let boundValue
+
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchema($currentAsset, datasource)
+  $: options = Object.keys(schema || {})
+  $: sanitisedValue = getValidColumns(value, options)
+  $: updateBoundValue(sanitisedValue)
+
+  const getSchema = (asset, datasource) => {
+    const schema = getSchemaForDatasource(asset, datasource).schema
+
+    // Don't show ID and rev in tables
+    if (schema) {
+      delete schema._id
+      delete schema._rev
+    }
+
+    return schema
+  }
+
+  const updateBoundValue = value => {
+    boundValue = cloneDeep(value)
+  }
+
+  const getValidColumns = (columns, options) => {
+    if (!Array.isArray(columns) || !columns.length) {
+      return []
+    }
+    // We need to account for legacy configs which would just be an array
+    // of strings
+    if (typeof columns[0] === "string") {
+      columns = columns.map(col => ({
+        name: col,
+        displayName: col,
+      }))
+    }
+    return columns.filter(column => {
+      return options.includes(column.name)
+    })
+  }
+
+  const open = () => {
+    updateBoundValue(sanitisedValue)
+    drawer.show()
+  }
+
+  const save = () => {
+    dispatch("change", getValidColumns(boundValue, options))
+    drawer.hide()
+  }
+</script>
+
+<ActionButton on:click={open}>Configure columns</ActionButton>
+<Drawer bind:this={drawer} title="Dynamic Filter Columns">
+  <svelte:fragment slot="description">
+    Configure the columns in your dynamic filter.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <ColumnDrawer
+    slot="body"
+    bind:columns={boundValue}
+    {options}
+    {schema}
+    allowCellEditing={false}
+  />
+</Drawer>
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
index cf85b2506b..87fbba3b52 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
@@ -17,6 +17,7 @@
   export let columns = []
   export let options = []
   export let schema = {}
+  export let allowCellEditing = true
 
   const flipDurationMs = 150
   let dragDisabled = true
@@ -123,7 +124,9 @@
                   on:change={e => (column.displayName = e.detail)}
                 />
                 <Input bind:value={column.displayName} placeholder="Label" />
-                <CellEditor bind:column />
+                {#if allowCellEditing}
+                  <CellEditor bind:column />
+                {/if}
                 <Icon
                   name="Close"
                   hoverable
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 66bed98e3c..ebbd185497 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3940,7 +3940,7 @@
         "required": true
       },
       {
-        "type": "columns",
+        "type": "allowedFields",
         "label": "Allowed filter columns",
         "key": "allowedFields",
         "dependsOn": "dataProvider",
@@ -5271,4 +5271,4 @@
       "suffix": "repeater"
     }
   }
-}
+}
\ No newline at end of file

From e7becbf84947dd54317791ed9e6fa92d88f3abfb Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Mon, 21 Nov 2022 14:48:26 +0000
Subject: [PATCH 3/6] Remove duplication

---
 .../design/settings/componentSettings.js      |  2 +-
 .../ColumnEditor/BasicColumnEditor.svelte     | 83 ++-----------------
 .../controls/ColumnEditor/ColumnEditor.svelte |  9 +-
 packages/client/manifest.json                 |  5 +-
 4 files changed, 17 insertions(+), 82 deletions(-)

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 05cc4ecc14..1d8df7a052 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -43,7 +43,7 @@ const componentMap = {
   filter: FilterEditor,
   url: URLSelect,
   columns: ColumnEditor,
-  allowedFields: BasicColumnEditor,
+  "columns/basic": BasicColumnEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
index 4aafc71d54..1aaf325099 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
@@ -1,83 +1,12 @@
 <script>
-  import { Button, ActionButton, Drawer } from "@budibase/bbui"
+  import ColumnEditor from "./ColumnEditor.svelte"
   import { createEventDispatcher } from "svelte"
-  import ColumnDrawer from "./ColumnDrawer.svelte"
-  import { cloneDeep } from "lodash/fp"
-  import {
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builderStore/dataBinding"
-  import { currentAsset } from "builderStore"
-
-  export let componentInstance
-  export let value = []
 
   const dispatch = createEventDispatcher()
-
-  let drawer
-  let boundValue
-
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchema($currentAsset, datasource)
-  $: options = Object.keys(schema || {})
-  $: sanitisedValue = getValidColumns(value, options)
-  $: updateBoundValue(sanitisedValue)
-
-  const getSchema = (asset, datasource) => {
-    const schema = getSchemaForDatasource(asset, datasource).schema
-
-    // Don't show ID and rev in tables
-    if (schema) {
-      delete schema._id
-      delete schema._rev
-    }
-
-    return schema
-  }
-
-  const updateBoundValue = value => {
-    boundValue = cloneDeep(value)
-  }
-
-  const getValidColumns = (columns, options) => {
-    if (!Array.isArray(columns) || !columns.length) {
-      return []
-    }
-    // We need to account for legacy configs which would just be an array
-    // of strings
-    if (typeof columns[0] === "string") {
-      columns = columns.map(col => ({
-        name: col,
-        displayName: col,
-      }))
-    }
-    return columns.filter(column => {
-      return options.includes(column.name)
-    })
-  }
-
-  const open = () => {
-    updateBoundValue(sanitisedValue)
-    drawer.show()
-  }
-
-  const save = () => {
-    dispatch("change", getValidColumns(boundValue, options))
-    drawer.hide()
-  }
 </script>
 
-<ActionButton on:click={open}>Configure columns</ActionButton>
-<Drawer bind:this={drawer} title="Dynamic Filter Columns">
-  <svelte:fragment slot="description">
-    Configure the columns in your dynamic filter.
-  </svelte:fragment>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer
-    slot="body"
-    bind:columns={boundValue}
-    {options}
-    {schema}
-    allowCellEditing={false}
-  />
-</Drawer>
+<ColumnEditor
+  {...$$props}
+  on:change={e => dispatch("change", e.detail)}
+  allowCellEditing={false}
+/>
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
index 132f856492..04cde4260f 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
@@ -11,6 +11,7 @@
 
   export let componentInstance
   export let value = []
+  export let allowCellEditing = true
 
   const dispatch = createEventDispatcher()
 
@@ -73,5 +74,11 @@
     Configure the columns in your table.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
+  <ColumnDrawer
+    slot="body"
+    bind:columns={boundValue}
+    {options}
+    {schema}
+    {allowCellEditing}
+  />
 </Drawer>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index ebbd185497..996500c4c6 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3940,11 +3940,10 @@
         "required": true
       },
       {
-        "type": "allowedFields",
+        "type": "columns/basic",
         "label": "Allowed filter columns",
         "key": "allowedFields",
-        "dependsOn": "dataProvider",
-        "nested": true
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",

From ba5116e6bc1b2b824034dd76fa5d95153050ea90 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Mon, 21 Nov 2022 15:02:44 +0000
Subject: [PATCH 4/6] Handle original mappings

---
 .../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 7ee704cd84..df06979f48 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -64,6 +64,8 @@
         if (schema[field.name]) {
           clonedSchema[field.name] = schema[field.name]
           clonedSchema[field.name].displayName = field.displayName
+        } else if (schema[field]) {
+          clonedSchema[field] = schema[field]
         }
       })
     }

From 8fae013203876f3d14b74ad88c0b45ddaaaa0baf Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Mon, 21 Nov 2022 15:11:21 +0000
Subject: [PATCH 5/6] Add subject prop

---
 .../settings/controls/ColumnEditor/BasicColumnEditor.svelte  | 1 +
 .../settings/controls/ColumnEditor/ColumnEditor.svelte       | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
index 1aaf325099..73fb335514 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
@@ -9,4 +9,5 @@
   {...$$props}
   on:change={e => dispatch("change", e.detail)}
   allowCellEditing={false}
+  subject="Dynamic Filter"
 />
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
index 04cde4260f..36cc9f619d 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
@@ -12,6 +12,7 @@
   export let componentInstance
   export let value = []
   export let allowCellEditing = true
+  export let subject = "Table"
 
   const dispatch = createEventDispatcher()
 
@@ -69,9 +70,9 @@
 </script>
 
 <ActionButton on:click={open}>Configure columns</ActionButton>
-<Drawer bind:this={drawer} title="Table Columns">
+<Drawer bind:this={drawer} title="{subject} Columns">
   <svelte:fragment slot="description">
-    Configure the columns in your table.
+    Configure the columns in your {subject.toLowerCase()}.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={save}>Save</Button>
   <ColumnDrawer

From f385d7a6a9d8fa9cac2bc9441666701d365be99b Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Mon, 21 Nov 2022 16:24:24 +0000
Subject: [PATCH 6/6] Refactor

---
 .../settings/controls/ColumnEditor/BasicColumnEditor.svelte  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
index 73fb335514..053735cc6d 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
@@ -1,13 +1,10 @@
 <script>
   import ColumnEditor from "./ColumnEditor.svelte"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
 </script>
 
 <ColumnEditor
   {...$$props}
-  on:change={e => dispatch("change", e.detail)}
+  on:change
   allowCellEditing={false}
   subject="Dynamic Filter"
 />