Update table filter button to be a detail popover

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -1,11 +1,12 @@
 <script>
   import { createEventDispatcher } from "svelte"
-  import { ActionButton, Drawer, DrawerContent, Button } from "@budibase/bbui"
+  import { ActionButton, Button } from "@budibase/bbui"
   import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
   import { getUserBindings } from "dataBinding"
   import { makePropSafe } from "@budibase/string-templates"
   import { search } from "@budibase/frontend-core"
   import { tables } from "stores/builder"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   export let schema
   export let filters
@@ -14,7 +15,7 @@
 
   const dispatch = createEventDispatcher()
 
-  let drawer
+  let popover
 
   $: localFilters = filters
   $: schemaFields = search.getFields(
@@ -39,39 +40,27 @@
     },
     ...getUserBindings(),
   ]
+
+  const openPopover = () => {
+    localFilters = filters
+    popover.show()
+  }
 </script>
 
-<ActionButton
+<DetailPopover bind:this={popover} title="Configure filters" width={800}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
       icon="Filter"
       quiet
       {disabled}
-  on:click={drawer.show}
+      on:click={openPopover}
-  selected={filterCount > 0}
+      selected={open || filterCount > 0}
       accentColor="#004EA6"
->
-  {filterCount ? `Filter: ${filterCount}` : "Filter"}
-</ActionButton>
-
-<Drawer
-  bind:this={drawer}
-  title="Filtering"
-  on:drawerHide
-  on:drawerShow={() => {
-    localFilters = filters
-  }}
-  forceModal
->
-  <Button
-    cta
-    slot="buttons"
-    on:click={() => {
-      dispatch("change", localFilters)
-      drawer.hide()
-    }}
     >
-    Save
+      {filterCount ? `Filter: ${filterCount}` : "Filter"}
-  </Button>
+    </ActionButton>
-  <DrawerContent slot="body">
+  </svelte:fragment>
+
   <FilterBuilder
     filters={localFilters}
     {schemaFields}
@@ -79,5 +68,16 @@
     on:change={e => (localFilters = e.detail)}
     {bindings}
   />
-  </DrawerContent>
+  <div>
-</Drawer>
+    <Button
+      cta
+      slot="buttons"
+      on:click={() => {
+        dispatch("change", localFilters)
+        popover.hide()
+      }}
+    >
+      Save
+    </Button>
+  </div>
+</DetailPopover>