Remove duplication

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,

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>
+<ColumnEditor
-<Drawer bind:this={drawer} title="Dynamic Filter Columns">
+  {...$$props}
-  <svelte:fragment slot="description">
+  on:change={e => dispatch("change", e.detail)}
-    Configure the columns in your dynamic filter.
+  allowCellEditing={false}
-  </svelte:fragment>
+/>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer
-    slot="body"
-    bind:columns={boundValue}
-    {options}
-    {schema}
-    allowCellEditing={false}
-  />
-</Drawer>

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>

packages/client/manifest.json

@@ -3940,11 +3940,10 @@
         "required": true
       },
       {
-        "type": "allowedFields",
+        "type": "columns/basic",
         "label": "Allowed filter columns",
         "key": "allowedFields",
-        "dependsOn": "dataProvider",
+        "dependsOn": "dataProvider"
-        "nested": true
       },
       {
         "type": "select",