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,45 +40,44 @@
     },
     ...getUserBindings(),
   ]
+
+  const openPopover = () => {
+    localFilters = filters
+    popover.show()
+  }
 </script>
 
-<ActionButton
-  icon="Filter"
-  quiet
-  {disabled}
-  on:click={drawer.show}
-  selected={filterCount > 0}
-  accentColor="#004EA6"
->
-  {filterCount ? `Filter: ${filterCount}` : "Filter"}
-</ActionButton>
+<DetailPopover bind:this={popover} title="Configure filters" width={800}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      icon="Filter"
+      quiet
+      {disabled}
+      on:click={openPopover}
+      selected={open || filterCount > 0}
+      accentColor="#004EA6"
+    >
+      {filterCount ? `Filter: ${filterCount}` : "Filter"}
+    </ActionButton>
+  </svelte:fragment>
 
-<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
-  </Button>
-  <DrawerContent slot="body">
-    <FilterBuilder
-      filters={localFilters}
-      {schemaFields}
-      datasource={{ type: "table", tableId }}
-      on:change={e => (localFilters = e.detail)}
-      {bindings}
-    />
-  </DrawerContent>
-</Drawer>
+  <FilterBuilder
+    filters={localFilters}
+    {schemaFields}
+    datasource={{ type: "table", tableId }}
+    on:change={e => (localFilters = e.detail)}
+    {bindings}
+  />
+  <div>
+    <Button
+      cta
+      slot="buttons"
+      on:click={() => {
+        dispatch("change", localFilters)
+        popover.hide()
+      }}
+    >
+      Save
+    </Button>
+  </div>
+</DetailPopover>