Merge branch 'spectrum-bbui' into spectrum/kevs-bits-and-bobs-the-sequel

packages/bbui/src/Button/Button.svelte

@@ -23,15 +23,13 @@
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
-  on:click|preventDefault
+  on:click|preventDefault>
->
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}
+      aria-label={icon}>
-    >
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
@@ -46,4 +44,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .active {
+    color: var(--spectrum-global-color-blue-600) !important;
+  }
 </style>

packages/bbui/src/Styleguide/Label.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel`}>
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-Form-itemLabel`}>
   <slot />
 </label>
 

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
+  size="S"
+  quiet
+  on:click={modal.show}
   active={view.field && view.calculation}>
   Calculate
 </Button>
-</div>
+<Modal bind:this={modal}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  <CalculateModal {view} />
-  <CalculatePopover {view} onClosed={dropdown.hide} />
+</Modal>
-</Popover>

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

@@ -1,16 +1,13 @@
 <script>
-  import { Popover, Button } from "@budibase/bbui"
+  import { Modal, Button } from "@budibase/bbui"
-  import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
+  import CreateViewModal from "../modals/CreateViewModal.svelte"
 
-  let anchor
+  let modal
-  let dropdown
 </script>
 
-<div bind:this={anchor}>
+<Button icon="CollectionAdd" primary size="S" quiet on:click={modal.show}>
-  <Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
   Create New View
 </Button>
-</div>
+<Modal bind:this={modal}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  <CreateViewModal />
-  <CreateViewPopover onClosed={dropdown.hide} />
+</Modal>
-</Popover>

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

@@ -1,18 +1,15 @@
 <script>
-  import { Button, Icon, Popover } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
-  import ExportPopover from "../popovers/ExportPopover.svelte"
+  import ExportModal from "../modals/ExportModal.svelte"
 
   export let view
 
-  let anchor
+  let modal
-  let dropdown
 </script>
 
-<div bind:this={anchor}>
+<Button icon="Download" primary size="S" quiet on:click={modal.show}>
-  <Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
   Export
 </Button>
-</div>
+<Modal bind:this={modal}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  <ExportModal {view} />
-  <ExportPopover {view} onClosed={dropdown.hide} />
+</Modal>
-</Popover>

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

@@ -1,20 +1,21 @@
 <script>
-  import { Popover, Button, Icon } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
-  import FilterPopover from "../popovers/FilterPopover.svelte"
+  import FilterModal from "../modals/FilterModal.svelte"
 
   export let view = {}
 
-  let anchor
+  let modal
-  let dropdown
 </script>
 
-<div bind:this={anchor}>
+<Button
-  <Button icon="Filter" primary size="S" quiet
+  icon="Filter"
-    on:click={dropdown.show}
+  primary
-    active={view.filters && view.filters.length}>
+  size="S"
+  quiet
+  on:click={modal.show}
+  active={view.filters?.length}>
   Filter
 </Button>
-</div>
+<Modal bind:this={modal}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  <FilterModal {view} />
-  <FilterPopover {view} onClosed={dropdown.hide} />
+</Modal>
-</Popover>

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"
+  primary
+  size="S"
+  quiet
+  active={!!view.groupBy}
+  on:click={modal.show}>
   Group By
 </Button>
-</div>
+<Modal bind:this={modal}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  <GroupByModal {view} />
-  <GroupByPopover {view} onClosed={dropdown.hide} />
+</Modal>
-</Popover>

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

@@ -1,29 +1,25 @@
 <script>
-  import { Button, Popover } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import { permissions } from "stores/backend"
-  import ManageAccessPopover from "../popovers/ManageAccessPopover.svelte"
+  import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
   export let resourceId
 
-  let anchor
+  let modal
-  let dropdown
   let resourcePermissions
 
   async function openDropdown() {
     resourcePermissions = await permissions.forResource(resourceId)
-    dropdown.show()
+    modal.show()
   }
 </script>
 
-<div bind:this={anchor}>
 <Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
   Manage Access
 </Button>
-</div>
+<Modal bind:this={modal}>
-<Popover bind:this={dropdown} {anchor} align="left">
+  <ManageAccessModal
-  <ManageAccessPopover
     {resourceId}
     levels={$permissions}
-    permissions={resourcePermissions}
+    permissions={resourcePermissions} />
-    onClosed={dropdown.hide} />
+</Modal>
-</Popover>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Select, Label, notifications } from "@budibase/bbui"
+  import { Select, Label, notifications, ModalContent } from "@budibase/bbui"
   import { tables, views } from "stores/backend"
   import analytics from "analytics"
 
@@ -35,13 +35,15 @@
   function saveView() {
     views.save(view)
     notifications.success(`View ${view.name} saved.`)
-    onClosed()
     analytics.captureEvent("Added View Calculate", { field: view.field })
   }
 </script>
 
-<div class="actions">
+<ModalContent
-  <h5>Calculate</h5>
+  title="Calculate"
+  confirmText="Save"
+  onConfirm={saveView}
+  disabled={!view.field}>
   <div class="input-group-row">
     <Label>The</Label>
     <Select
@@ -54,31 +56,9 @@
       <Select bind:value={view.field} options={fields} />
     {/if}
   </div>
-  <div class="footer">
+</ModalContent>
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button cta on:click={saveView} disabled={!view.field}>Save</Button>
-  </div>
-</div>
 
 <style>
-  .actions {
-    width: 200px;
-    display: grid;
-    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: auto 1fr;

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

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Input, notifications, Heading } from "@budibase/bbui"
+  import { Input, notifications, ModalContent } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { views as viewsStore } from "stores/backend"
   import { tables } from "stores/backend"
@@ -23,37 +23,14 @@
       field,
     })
     notifications.success(`View ${name} created`)
-    onClosed()
     analytics.captureEvent("View Created", { name })
     $goto(`../../view/${name}`)
   }
 </script>
 
-<div class="actions">
+<ModalContent
-  <Heading s>Create View</Heading>
+  title="Create View"
+  confirmText="Create View"
+  onConfirm={saveView}>
   <Input label="View Name" thin bind:value={name} />
-  <div class="footer">
+</ModalContent>
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button cta on:click={saveView}>Save View</Button>
-  </div>
-</div>
-
-<style>
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
-    width: 240px;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>

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

@@ -21,7 +21,7 @@
 
   // Changes the selected role
   const changeRole = event => {
-    const id = event?.target?.value
+    const id = event?.detail
     const role = $roles.find(role => role._id === id)
     if (role) {
       selectedRole = {
@@ -94,42 +94,34 @@
     secondary
     label="Role"
     value={selectedRoleId}
-    on:change={changeRole}>
+    on:change={changeRole}
-    <option value="">Create new role</option>
+    options={$roles}
-    {#each $roles as role}
+    placeholder="Create new role"
-      <option value={role._id}>{role.name}</option>
+    getOptionValue={role => role._id}
-    {/each}
+    getOptionLabel={role => role.name} />
-  </Select>
   {#if selectedRole}
     <Input
       label="Name"
       bind:value={selectedRole.name}
-      thin
       disabled={builtInRoles.includes(selectedRole.name)} />
     <Select
-      thin
-      secondary
       label="Inherits Role"
-      bind:value={selectedRole.inherits}>
+      bind:value={selectedRole.inherits}
-      <option value="">None</option>
+      options={otherRoles}
-      {#each otherRoles as role}
+      getOptionValue={role => role._id}
-        <option value={role._id}>{role.name}</option>
+      getOptionLabel={role => role.name}
-      {/each}
+      placeholder="None" />
-    </Select>
     <Select
-      thin
-      secondary
       label="Base Permissions"
-      bind:value={selectedRole.permissionId}>
+      bind:value={selectedRole.permissionId}
-      <option value="">Choose permissions</option>
+      options={basePermissions}
-      {#each basePermissions as basePerm}
+      getOptionValue={x => x._id}
-        <option value={basePerm._id}>{basePerm.name}</option>
+      getOptionLabel={x => x.name}
-      {/each}
+      placeholder="Choose permissions" />
-    </Select>
   {/if}
   <div slot="footer">
     {#if !isCreating}
-      <Button red on:click={deleteRole}>Delete</Button>
+      <Button warning on:click={deleteRole}>Delete</Button>
     {/if}
   </div>
 </ModalContent>

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

@@ -0,0 +1,37 @@
+<script>
+  import { Select, ModalContent } from "@budibase/bbui"
+  import download from "downloadjs"
+
+  const FORMATS = [
+    {
+      name: "CSV",
+      key: "csv",
+    },
+    {
+      name: "JSON",
+      key: "json",
+    },
+  ]
+
+  export let view
+
+  let exportFormat = FORMATS[0].key
+
+  async function exportView() {
+    download(
+      `/api/views/export?view=${encodeURIComponent(
+        view.name
+      )}&format=${exportFormat}`
+    )
+  }
+</script>
+
+<ModalContent title="Export Data" confirmText="Export" onConfirm={exportView}>
+  <Select
+    label="Format"
+    bind:value={exportFormat}
+    options={FORMATS}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.key} />
+</ModalContent>

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/modals/ManageAccessModal.svelte

@@ -1,14 +1,13 @@
 <script>
   import { roles, permissions as permissionsStore } from "stores/backend"
   import {
-    Button,
     Label,
     Input,
     Select,
     Spacer,
     notifications,
-    Heading,
     Body,
+    ModalContent,
   } from "@budibase/bbui"
   import { capitalise } from "../../../../helpers"
 
@@ -31,12 +30,8 @@
   }
 </script>
 
-<div class="popover">
+<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
-  <Heading s>Who Can Access This Data?</Heading>
-  <div class="note">
   <Body s>Specify the minimum access level role for this data.</Body>
-  </div>
-  <Spacer large />
   <div class="row">
     <Label extraSmall grey>Level</Label>
     <Label extraSmall grey>Role</Label>
@@ -50,41 +45,12 @@
         getOptionValue={x => x._id} />
     {/each}
   </div>
-
+</ModalContent>
-  <Spacer large />
-
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-  </div>
-</div>
 
 <style>
-  .popover {
-    display: grid;
-    width: 400px;
-    padding: var(--spacing-xl);
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-    margin-top: var(--spacing-l);
-  }
-
   .row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: var(--spacing-s);
   }
-
-  .note {
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
 </style>

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

@@ -1,63 +0,0 @@
-<script>
-  import { Button, Select, Heading } from "@budibase/bbui"
-  import download from "downloadjs"
-
-  const FORMATS = [
-    {
-      name: "CSV",
-      key: "csv",
-    },
-    {
-      name: "JSON",
-      key: "json",
-    },
-  ]
-
-  export let view
-  export let onClosed
-
-  let exportFormat = FORMATS[0].key
-
-  async function exportView() {
-    download(
-      `/api/views/export?view=${encodeURIComponent(
-        view.name
-      )}&format=${exportFormat}`
-    )
-    onClosed()
-  }
-</script>
-
-<div class="popover">
-  <Heading s>Export Data</Heading>
-  <Select
-    label="Format"
-    bind:value={exportFormat}
-    options={FORMATS}
-    getOptionLabel={x => x.name}
-    getOptionValue={x => x.key} />
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button cta on:click={exportView}>Export</Button>
-  </div>
-</div>
-
-<style>
-  .popover {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
-    width: 240px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>

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>