Update all table popovers to be modals and fix edit roles modal

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

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

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

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

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 dropdown
+  let modal
   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>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <ManageAccessPopover
+<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
+  Manage Access
+</Button>
+<Modal bind:this={modal}>
+  <ManageAccessModal
     {resourceId}
     levels={$permissions}
-    permissions={resourcePermissions}
-    onClosed={dropdown.hide} />
-</Popover>
+    permissions={resourcePermissions} />
+</Modal>

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">
-  <Heading s>Create View</Heading>
+<ModalContent
+  title="Create View"
+  confirmText="Create View"
+  onConfirm={saveView}>
   <Input label="View Name" thin bind:value={name} />
-  <div class="footer">
-    <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>
+</ModalContent>

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}>
-    <option value="">Create new role</option>
-    {#each $roles as role}
-      <option value={role._id}>{role.name}</option>
-    {/each}
-  </Select>
+    on:change={changeRole}
+    options={$roles}
+    placeholder="Create new role"
+    getOptionValue={role => role._id}
+    getOptionLabel={role => role.name} />
   {#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}>
-      <option value="">None</option>
-      {#each otherRoles as role}
-        <option value={role._id}>{role.name}</option>
-      {/each}
-    </Select>
+      bind:value={selectedRole.inherits}
+      options={otherRoles}
+      getOptionValue={role => role._id}
+      getOptionLabel={role => role.name}
+      placeholder="None" />
     <Select
-      thin
-      secondary
       label="Base Permissions"
-      bind:value={selectedRole.permissionId}>
-      <option value="">Choose permissions</option>
-      {#each basePermissions as basePerm}
-        <option value={basePerm._id}>{basePerm.name}</option>
-      {/each}
-    </Select>
+      bind:value={selectedRole.permissionId}
+      options={basePermissions}
+      getOptionValue={x => x._id}
+      getOptionLabel={x => x.name}
+      placeholder="Choose permissions" />
   {/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/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">
-  <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 />
+<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
+  <Body s>Specify the minimum access level role for this data.</Body>
   <div class="row">
     <Label extraSmall grey>Level</Label>
     <Label extraSmall grey>Role</Label>
@@ -50,41 +45,12 @@
         getOptionValue={x => x._id} />
     {/each}
   </div>
-
-  <Spacer large />
-
-  <div class="footer">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-  </div>
-</div>
+</ModalContent>
 
 <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>