Don't allow cell edit for dynamic filter col conf

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,

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>

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

packages/client/manifest.json

@@ -3940,7 +3940,7 @@
         "required": true
       },
       {
-        "type": "columns",
+        "type": "allowedFields",
         "label": "Allowed filter columns",
         "key": "allowedFields",
         "dependsOn": "dataProvider",