Adding dynamic filter capabilities, also updating search field select in builder to make sure it removes banned search field types.

packages/builder/src/components/design/PropertiesPanel/PropertyControls/SearchFieldSelect.svelte

@@ -7,7 +7,7 @@
   import { currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import { createEventDispatcher } from "svelte"
-  import { getTableFields } from "helpers/searchFields"
+  import { getFields } from "helpers/searchFields"
 
   export let componentInstance = {}
   export let value = ""
@@ -20,19 +20,14 @@
   $: boundValue = getSelectedOption(value, options)
 
   function getOptions(ds, dsSchema) {
-    let base = Object.keys(dsSchema)
+    let base = Object.values(dsSchema)
     if (!ds?.tableId) {
       return base
     }
     const currentTable = $tables.list.find(table => table._id === ds.tableId)
-    if (currentTable && currentTable.sql) {
+    return getFields(base, { allowLinks: currentTable.sql }).map(
-      for (let column of Object.values(currentTable.schema)) {
+      field => field.name
-        if (column.type === "link") {
+    )
-          base = base.concat(getTableFields(column).map(field => field.name))
-        }
-      }
-    }
-    return base
   }
 
   function getSelectedOption(selectedOptions, allOptions) {

packages/builder/src/helpers/searchFields.js

@@ -17,15 +17,15 @@ export function getTableFields(linkField) {
 }
 
 export function getFields(fields, { allowLinks } = { allowLinks: true }) {
-  let fieldNames = fields.filter(
+  let filteredFields = fields.filter(
     field => !BannedSearchTypes.includes(field.type)
   )
   if (allowLinks) {
     const linkFields = fields.filter(field => field.type === "link")
     for (let linkField of linkFields) {
       // only allow one depth of SQL relationship filtering
-      fieldNames = fieldNames.concat(getTableFields(linkField))
+      filteredFields = filteredFields.concat(getTableFields(linkField))
     }
   }
-  return fieldNames
+  return filteredFields
 }

packages/client/src/components/app/DataProvider.svelte

@@ -67,6 +67,7 @@
   $: dataContext = {
     rows: $fetch.rows,
     info: $fetch.info,
+    datasource: dataSource || {},
     schema: $fetch.schema,
     rowsLength: $fetch.rows.length,
 

packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte

@@ -11,11 +11,14 @@
   export let size = "M"
 
   const component = getContext("component")
-  const { builderStore, ActionTypes, getAction } = getContext("sdk")
+  const { builderStore, ActionTypes, getAction, fetchDatasourceSchema } =
+    getContext("sdk")
 
   let modal
   let tmpFilters = []
   let filters = []
+  let schemaLoaded = false,
+    schema
 
   $: dataProviderId = dataProvider?.id
   $: addExtension = getAction(
@@ -26,7 +29,7 @@
     dataProviderId,
     ActionTypes.RemoveDataProviderQueryExtension
   )
-  $: schema = dataProvider?.schema
+  $: fetchSchema(dataProvider || {})
   $: schemaFields = getSchemaFields(schema, allowedFields)
 
   // Add query extension to data provider
@@ -39,7 +42,20 @@
     }
   }
 
-  const getSchemaFields = (schema, allowedFields) => {
+  async function fetchSchema(dataProvider) {
+    const datasource = dataProvider?.datasource
+    if (datasource) {
+      schema = await fetchDatasourceSchema(datasource, {
+        enrichRelationships: true,
+      })
+    }
+    schemaLoaded = true
+  }
+
+  function getSchemaFields(schema, allowedFields) {
+    if (!schemaLoaded) {
+      return {}
+    }
     let clonedSchema = {}
     if (!allowedFields?.length) {
       clonedSchema = schema
@@ -68,18 +84,20 @@
   })
 </script>
 
-<Button
+{#if schemaLoaded}
-  onClick={openEditor}
+  <Button
-  icon="Properties"
+    onClick={openEditor}
-  text="Filter"
+    icon="Properties"
-  {size}
+    text="Filter"
-  type="secondary"
+    {size}
-  quiet
+    type="secondary"
-  active={filters?.length > 0}
+    quiet
-/>
+    active={filters?.length > 0}
+  />
 
-<Modal bind:this={modal}>
+  <Modal bind:this={modal}>
-  <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
+    <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
-    <FilterModal bind:filters={tmpFilters} {schemaFields} />
+      <FilterModal bind:filters={tmpFilters} {schemaFields} />
-  </ModalContent>
+    </ModalContent>
-</Modal>
+  </Modal>
+{/if}

packages/client/src/utils/schema.js

@@ -58,7 +58,7 @@ export const fetchDatasourceSchema = async (
   schema = { ...schema, ...jsonAdditions }
 
   // Check for any relationship fields if required
-  if (options?.enrichRelationships) {
+  if (options?.enrichRelationships && definition.sql) {
     let relationshipAdditions = {}
     for (let fieldKey of Object.keys(schema)) {
       const fieldSchema = schema[fieldKey]