From cde801d99b128f1dc70c67d31cfa3b3277cf27bf Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 17 Jan 2022 16:48:49 +0000
Subject: [PATCH] Adding dynamic filter capabilities, also updating search
 field select in builder to make sure it removes banned search field types.

---
 .../PropertyControls/SearchFieldSelect.svelte | 15 ++----
 packages/builder/src/helpers/searchFields.js  |  6 +--
 .../src/components/app/DataProvider.svelte    |  1 +
 .../app/dynamic-filter/DynamicFilter.svelte   | 52 +++++++++++++------
 packages/client/src/utils/schema.js           |  2 +-
 5 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SearchFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SearchFieldSelect.svelte
index ad8fad8a87..474fbc676c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SearchFieldSelect.svelte
+++ b/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) {
-      for (let column of Object.values(currentTable.schema)) {
-        if (column.type === "link") {
-          base = base.concat(getTableFields(column).map(field => field.name))
-        }
-      }
-    }
-    return base
+    return getFields(base, { allowLinks: currentTable.sql }).map(
+      field => field.name
+    )
   }
 
   function getSelectedOption(selectedOptions, allOptions) {
diff --git a/packages/builder/src/helpers/searchFields.js b/packages/builder/src/helpers/searchFields.js
index 3f3ca1ce7e..650e04a680 100644
--- a/packages/builder/src/helpers/searchFields.js
+++ b/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
 }
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 71c54db4da..2341eef3b2 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/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,
 
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 20909d011c..6a114afe3e 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/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
-  onClick={openEditor}
-  icon="Properties"
-  text="Filter"
-  {size}
-  type="secondary"
-  quiet
-  active={filters?.length > 0}
-/>
+{#if schemaLoaded}
+  <Button
+    onClick={openEditor}
+    icon="Properties"
+    text="Filter"
+    {size}
+    type="secondary"
+    quiet
+    active={filters?.length > 0}
+  />
 
-<Modal bind:this={modal}>
-  <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
-    <FilterModal bind:filters={tmpFilters} {schemaFields} />
-  </ModalContent>
-</Modal>
+  <Modal bind:this={modal}>
+    <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
+      <FilterModal bind:filters={tmpFilters} {schemaFields} />
+    </ModalContent>
+  </Modal>
+{/if}
diff --git a/packages/client/src/utils/schema.js b/packages/client/src/utils/schema.js
index dc00430fcd..4189aa7f2b 100644
--- a/packages/client/src/utils/schema.js
+++ b/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]