Enable dynamic filter component to update data provider queries

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

@@ -1,22 +1,50 @@
 <script>
-  import { Button, ModalContent, Modal } from "@budibase/bbui"
-  import { getContext } from "svelte"
+  import { get } from "svelte/store"
+  import { getContext, onDestroy } from "svelte"
+  import { ModalContent, Modal } from "@budibase/bbui"
   import FilterModal from "./FilterModal.svelte"
+  import { buildLuceneQuery } from "builder/src/helpers/lucene"
+  import Button from "../Button.svelte"
 
   export let dataProvider
   export let allowedFields
   export let buttonText
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { builderStore, ActionTypes, getAction } = getContext("sdk")
 
   let modal
   let tmpFilters = []
   let filters = []
 
+  $: dataProviderId = dataProvider?.id
+  $: addExtension = getAction(
+    dataProviderId,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProviderId,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
   $: schema = dataProvider?.schema
   $: schemaFields = getSchemaFields(schema, allowedFields)
-  $: text = buttonText || "Edit filters"
+  $: text = getText(buttonText, filters)
+
+  // Add query extension to data provider
+  $: {
+    if (filters?.length) {
+      const queryExtension = buildLuceneQuery(filters)
+      addExtension?.($component.id, queryExtension)
+    }
+  }
+
+  const getText = (buttonText, filters) => {
+    let text = buttonText || "Edit filters"
+    if (filters?.length) {
+      text += ` (${filters.length})`
+    }
+    return text
+  }
 
   const getSchemaFields = (schema, allowedFields) => {
     let clonedSchema = {}
@@ -31,6 +59,9 @@
   }
 
   const openEditor = () => {
+    if (get(builderStore).inBuilder) {
+      return
+    }
     tmpFilters = [...filters]
     modal.show()
   }
@@ -38,15 +69,16 @@
   const updateQuery = () => {
     filters = [...tmpFilters]
   }
+
+  onDestroy(() => {
+    removeExtension?.($component.id)
+  })
 </script>
 
-<div use:styleable={$component.styles}>
-  <Button on:click={openEditor} secondary>
-    {text}
-  </Button>
-  <Modal bind:this={modal}>
-    <ModalContent title={text} size="XL" onConfirm={updateQuery}>
-      <FilterModal bind:filters={tmpFilters} {schemaFields} />
-    </ModalContent>
-  </Modal>
-</div>
+<Button onClick={openEditor} {text} />
+
+<Modal bind:this={modal}>
+  <ModalContent title={text} size="XL" onConfirm={updateQuery}>
+    <FilterModal bind:filters={tmpFilters} {schemaFields} />
+  </ModalContent>
+</Modal>