Update other backend popovers to be modals

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

@@ -1,20 +1,21 @@
 <script>
-  import { Popover, Button } from "@budibase/bbui"
+  import { Modal, Button } from "@budibase/bbui"
-  import CalculatePopover from "../popovers/CalculatePopover.svelte"
+  import CalculateModal from "../modals/CalculateModal.svelte"
 
   export let view = {}
 
-  let anchor
+  let modal
-  let dropdown
 </script>
 
-<div bind:this={anchor}>
+<Button
-  <Button icon="Calculator" primary size="S" quiet
+  icon="Calculator"
-    on:click={dropdown.show}
+  primary
-    active={view.field && view.calculation}>
+  size="S"
-    Calculate
+  quiet
-  </Button>
+  on:click={modal.show}
-</div>
+  active={view.field && view.calculation}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  Calculate
-  <CalculatePopover {view} onClosed={dropdown.hide} />
+</Button>
-</Popover>
+<Modal bind:this={modal}>
+  <CalculateModal {view} />
+</Modal>

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

@@ -1,6 +1,6 @@
 <script>
   import { Button, Modal } from "@budibase/bbui"
-  import FilterPopover from "../popovers/FilterPopover.svelte"
+  import FilterModal from "../modals/FilterModal.svelte"
 
   export let view = {}
 
@@ -17,5 +17,5 @@
   Filter
 </Button>
 <Modal bind:this={modal}>
-  <FilterPopover {view} />
+  <FilterModal {view} />
 </Modal>

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

@@ -1,18 +1,21 @@
 <script>
-  import { Popover, Button } from "@budibase/bbui"
+  import { Modal, Button } from "@budibase/bbui"
-  import GroupByPopover from "../popovers/GroupByPopover.svelte"
+  import GroupByModal from "../modals/GroupByModal.svelte"
 
   export let view = {}
 
-  let anchor
+  let modal
-  let dropdown
 </script>
 
-<div bind:this={anchor}>
+<Button
-  <Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
+  icon="Group"
-    Group By
+  primary
-  </Button>
+  size="S"
-</div>
+  quiet
-<Popover bind:this={dropdown} {anchor} align="left">
+  active={!!view.groupBy}
-  <GroupByPopover {view} onClosed={dropdown.hide} />
+  on:click={modal.show}>
-</Popover>
+  Group By
+</Button>
+<Modal bind:this={modal}>
+  <GroupByModal {view} />
+</Modal>

packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte

@@ -1,7 +1,16 @@
 <script>
-  import { Button, Input, Select, DatePicker } from "@budibase/bbui"
+  import {
+    Button,
+    Input,
+    Body,
+    Select,
+    DatePicker,
+    ModalContent,
+    Label,
+    notifications,
+    Icon,
+  } from "@budibase/bbui"
   import { tables, views } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
   import analytics from "analytics"
 
   const CONDITIONS = [
@@ -55,7 +64,6 @@
   function saveView() {
     views.save(view)
     notifications.success(`View ${view.name} saved.`)
-    onClosed()
     analytics.captureEvent("Added View Filter", {
       filters: JSON.stringify(view.filters),
     })
@@ -67,7 +75,7 @@
   }
 
   function addFilter() {
-    view.filters.push({})
+    view.filters.push({ conjunction: "AND" })
     view.filters = view.filters
   }
 
@@ -98,9 +106,8 @@
     // reset if type changed
     if (
       filter.key &&
-      ev.target.value &&
+      ev.detail &&
-      viewTable.schema[filter.key].type !==
+      viewTable.schema[filter.key].type !== viewTable.schema[ev.detail].type
-        viewTable.schema[ev.target.value].type
     ) {
       filter.value = ""
     }
@@ -110,17 +117,21 @@
   const getOptionValue = x => x.key
 </script>
 
-<div class="actions">
+<ModalContent
-  <h5>Filter</h5>
+  title="Filter"
+  confirmText="Save"
+  onConfirm={saveView}
+  size="large">
   {#if view.filters.length}
     <div class="input-group-row">
       {#each view.filters as filter, idx}
         {#if idx === 0}
-          <p>Where</p>
+          <Label>Where</Label>
         {:else}
           <Select
             bind:value={filter.conjunction}
             options={CONJUNCTIONS}
+            placeholder={null}
             {getOptionLabel}
             {getOptionValue} />
         {/if}
@@ -152,61 +163,22 @@
             placeholder={filter.key || fields[0]}
             bind:value={filter.value} />
         {/if}
-        <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
+        <Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
       {/each}
     </div>
+  {:else}
+    <Body s>Add a filter to get started.</Body>
   {/if}
-  <div class="footer">
+  <div slot="footer">
-    <div class="add-filter">
+    <Button secondary on:click={addFilter}>Add Filter</Button>
-      <Button text on:click={addFilter}>Add Filter</Button>
-    </div>
-    <div class="buttons">
-      <Button secondary on:click={onClosed}>Cancel</Button>
-      <Button cta on:click={saveView}>Save</Button>
-    </div>
   </div>
-</div>
+</ModalContent>
 
 <style>
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
-  .ri-close-circle-fill {
-    cursor: pointer;
-  }
-
   .input-group-row {
     display: grid;
-    grid-template-columns: minmax(50px, auto) 1fr 1fr 1fr 15px;
+    grid-template-columns: minmax(70px, auto) 1fr 1fr 1fr 15px;
     gap: var(--spacing-s);
     align-items: center;
   }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
-
-  .add-filter {
-    margin-right: 16px;
-  }
 </style>

packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { Button, Select, ModalContent, notifications } from "@budibase/bbui"
+  import { tables, views } from "stores/backend"
+  import { FIELDS } from "constants/backend"
+
+  export let view = {}
+  export let onClosed
+
+  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
+  $: fields =
+    viewTable &&
+    Object.entries(viewTable.schema)
+      .filter(entry => entry[1].type !== FIELDS.LINK.type)
+      .map(([key]) => key)
+
+  function saveView() {
+    views.save(view)
+    notifications.success(`View ${view.name} saved.`)
+  }
+</script>
+
+<ModalContent title="Group By" confirmText="Save" onConfirm={saveView}>
+  <Select bind:value={view.groupBy} options={fields} />
+</ModalContent>

packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte

@@ -1,63 +0,0 @@
-<script>
-  import { Button, Select } from "@budibase/bbui"
-  import { tables, views } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-
-  export let view = {}
-  export let onClosed
-
-  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
-  $: fields =
-    viewTable &&
-    Object.entries(viewTable.schema)
-      .filter(entry => entry[1].type !== FIELDS.LINK.type)
-      .map(([key]) => key)
-
-  function saveView() {
-    views.save(view)
-    notifications.success(`View ${view.name} saved.`)
-    onClosed()
-  }
-</script>
-
-<div class="actions">
-  <h5>Group By</h5>
-  <Select bind:value={view.groupBy} options={fields} />
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button cta on:click={saveView}>Save</Button>
-  </div>
-</div>
-
-<style>
-  .actions {
-    display: grid;
-    width: 200px;
-    grid-gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-
-  .input-group-row {
-    display: grid;
-    grid-template-columns: 20px 1fr;
-    gap: var(--spacing-s);
-    align-items: center;
-  }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
-</style>