Handle drawers

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -37,7 +37,7 @@
     hbAutocomplete,
     EditorModes,
   } from "components/common/CodeEditor"
-  import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
+  import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
   import { LuceneUtils, Utils } from "@budibase/frontend-core"
   import {
     getSchemaForDatasourcePlus,
@@ -442,7 +442,7 @@
               <Button cta slot="buttons" on:click={() => saveFilters(key)}>
                 Save
               </Button>
-              <FilterDrawer
+              <FilterBuilder
                 slot="body"
                 {filters}
                 {bindings}

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

@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
-  import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
+  import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
 
   export let schema
   export let filters
@@ -40,7 +40,7 @@
     onConfirm={() => dispatch("change", tempValue)}
   >
     <div class="wrapper">
-      <FilterDrawer
+      <FilterBuilder
         allowBindings={false}
         {filters}
         {schemaFields}

packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { DrawerContent } from "@budibase/bbui"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
 
@@ -61,35 +60,23 @@
   }
 </script>
 
-<DrawerContent padding={false}>
-  <FilterBuilder
-    bind:filters={rawFilters}
-    behaviourFilters={true}
-    {schemaFields}
-    {datasource}
-    {allowBindings}
-  >
-    <div slot="filteringHeroContent" class="filteringHeroContent" />
-    <div slot="binding" let:filter>
-      <DrawerBindableInput
-        disabled={filter.noValue}
-        title={filter.field}
-        value={filter.value}
-        placeholder="Value"
-        {panel}
-        {bindings}
-        on:change={event => (filter.value = event.detail)}
-      />
-    </div>
-  </FilterBuilder>
-</DrawerContent>
-
-<style>
-  .filteringHeroContent {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    align-items: center;
-    grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
-  }
-</style>
+<FilterBuilder
+  bind:filters={rawFilters}
+  behaviourFilters={true}
+  {schemaFields}
+  {datasource}
+  {allowBindings}
+>
+  <div slot="filteringHeroContent" />
+  <div slot="binding" let:filter>
+    <DrawerBindableInput
+      disabled={filter.noValue}
+      title={filter.field}
+      value={filter.value}
+      placeholder="Value"
+      {panel}
+      {bindings}
+      on:change={event => (filter.value = event.detail)}
+    />
+  </div>
+</FilterBuilder>

packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte

@@ -1,8 +1,14 @@
 <script>
-  import { notifications, ActionButton, Button, Drawer } from "@budibase/bbui"
+  import {
+    notifications,
+    ActionButton,
+    Button,
+    Drawer,
+    DrawerContent,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import FilterDrawer from "./FilterDrawer.svelte"
+  import FilterBuilder from "./FilterBuilder.svelte"
   import { selectedScreen } from "stores/builder"
 
   const dispatch = createEventDispatcher()
@@ -40,14 +46,15 @@
 </div>
 <Drawer bind:this={drawer} title="Filtering" on:drawerHide on:drawerShow>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
-  <FilterDrawer
-    slot="body"
-    filters={value}
-    {bindings}
-    {schemaFields}
-    {datasource}
-    on:change={e => (tempValue = e.detail)}
-  />
+  <DrawerContent slot="body">
+    <FilterBuilder
+      filters={value}
+      {bindings}
+      {schemaFields}
+      {datasource}
+      on:change={e => (tempValue = e.detail)}
+    />
+  </DrawerContent>
 </Drawer>
 
 <style>

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

@@ -10,7 +10,11 @@
     Select,
   } from "@budibase/bbui"
   import { generate } from "shortid"
-  import { LuceneUtils, Constants } from "@budibase/frontend-core"
+  import {
+    LuceneUtils,
+    Constants,
+    FilterBuilder,
+  } from "@budibase/frontend-core"
   import { getContext } from "svelte"
 
   export let schemaFields
@@ -105,6 +109,7 @@
 
 <div class="container" class:mobile={$context.device.mobile}>
   <Layout noPadding>
+    <FilterBuilder bind:filters {schemaFields} {datasource} />
     <Body size="S">
       {#if !filters?.length}
         Add your first filter expression.