Add new modal to backend and fix backend file structure

packages/builder/src/components/backend/DataTable/ModelDataTable.svelte

@@ -1,8 +1,8 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import RowPopover from "./popovers/Row.svelte"
+  import CreateRowButton from "./buttons/CreateRowButton.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
+  import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
-  import ViewPopover from "./popovers/View.svelte"
+  import CreateViewButton from "./buttons/CreateViewButton.svelte"
   import * as api from "./api"
   import Table from "./Table.svelte"
 
@@ -22,9 +22,9 @@
 </script>
 
 <Table {title} {schema} {data} allowEditing={true}>
-  <ColumnPopover />
+  <CreateColumnButton />
   {#if Object.keys(schema).length > 0}
-    <RowPopover />
+    <CreateRowButton />
-    <ViewPopover />
+    <CreateViewButton />
   {/if}
 </Table>

packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
-  import { capitalise } from "../../../../helpers"
+  import { capitalise } from "../../../helpers"
 
   export let meta
   export let value = meta.type === "boolean" ? false : ""

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -9,13 +9,13 @@
   import ActionButton from "components/common/ActionButton.svelte"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
-  import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
+  import CreateEditRecordModal from "./modals/CreateEditRecordModal.svelte"
-  import RowPopover from "./popovers/Row.svelte"
+  import RowPopover from "./buttons/CreateRowButton.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
+  import ColumnPopover from "./buttons/CreateColumnButton.svelte"
-  import ViewPopover from "./popovers/View.svelte"
+  import ViewPopover from "./buttons/CreateViewButton.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
+  import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
-  import EditRowPopover from "./popovers/EditRow.svelte"
+  import EditRowPopover from "./popovers/RowPopover.svelte"
-  import CalculationPopover from "./popovers/Calculate.svelte"
+  import CalculationPopover from "./buttons/CalculateButton.svelte"
 
   const ITEMS_PER_PAGE = 10
 
@@ -33,7 +33,7 @@
     sorted && sorted.length
       ? sorted.slice(
           currentPage * ITEMS_PER_PAGE,
-      currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE,
+          currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
         )
       : []
   $: modelId = data?.length ? data[0].modelId : null
@@ -42,7 +42,9 @@
     if (!record?.[fieldName]?.length) {
       return
     }
-    $goto(`/${$params.application}/backend/model/${modelId}/relationship/${record._id}/${fieldName}`)
+    $goto(
+      `/${$params.application}/backend/model/${modelId}/relationship/${record._id}/${fieldName}`
+    )
   }
 </script>
 

packages/builder/src/components/backend/DataTable/ViewDataTable.svelte

@@ -1,9 +1,9 @@
 <script>
   import api from "builderStore/api"
   import Table from "./Table.svelte"
-  import CalculationPopover from "./popovers/Calculate.svelte"
+  import CalculateButton from "./buttons/CalculateButton.svelte"
-  import GroupByPopover from "./popovers/GroupBy.svelte"
+  import GroupByButton from "./buttons/GroupByButton.svelte"
-  import FilterPopover from "./popovers/Filter.svelte"
+  import FilterButton from "./buttons/FilterButton.svelte"
 
   export let view = {}
 
@@ -34,9 +34,9 @@
 </script>
 
 <Table title={decodeURI(name)} schema={view.schema} {data}>
-  <FilterPopover {view} />
+  <FilterButton {view} />
-  <CalculationPopover {view} />
+  <CalculateButton {view} />
   {#if view.calculation}
-    <GroupByPopover {view} />
+    <GroupByButton {view} />
   {/if}
 </Table>

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

@@ -0,0 +1,19 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import CalculatePopover from "../popovers/CalculatePopover.svelte"
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={dropdown.show} active={!!view.field}>
+    <Icon name="calculate" />
+    Calculate
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <CalculatePopover {view} onClosed={dropdown.hide} />
+</Popover>

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

@@ -1,14 +1,6 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
-  import {
+  import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
-    DropdownMenu,
-    TextButton as Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-  import CreateEditColumn from "./CreateEditColumn.svelte"
 
   let anchor
   let dropdown
@@ -23,7 +15,7 @@
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   <h5>Create Column</h5>
-  <CreateEditColumn onClosed={dropdown.hide} />
+  <CreateEditColumnPopover onClosed={dropdown.hide} />
 </DropdownMenu>
 
 <style>

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

@@ -0,0 +1,17 @@
+<script>
+  import { TextButton as Button, Icon } from "@budibase/bbui"
+  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
+  import { Modal } from "components/common/Modal"
+
+  let modal
+</script>
+
+<div>
+  <Button text small on:click={modal.show}>
+    <Icon name="addrow" />
+    Create New Row
+  </Button>
+</div>
+<Modal bind:this={modal}>
+  <CreateEditRecordModal />
+</Modal>

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

@@ -0,0 +1,17 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={dropdown.show}>
+    <Icon name="view" />
+    Create New View
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <CreateViewPopover onClosed={dropdown.hide} />
+</Popover>

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

@@ -0,0 +1,23 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import FilterPopover from "../popovers/FilterPopover.svelte"
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton
+    text
+    small
+    on:click={dropdown.show}
+    active={view.filters && view.filters.length}>
+    <Icon name="filter" />
+    Filter
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <FilterPopover {view} onClosed={dropdown.hide} />
+</Popover>

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

@@ -0,0 +1,19 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import GroupByPopover from "../popovers/GroupByPopover.svelte"
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
+    <Icon name="group" />
+    Group By
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <GroupByPopover {view} onClosed={dropdown.hide} />
+</Popover>

packages/builder/src/components/backend/DataTable/index.js

@@ -1 +0,0 @@
-export { default } from "./ModelDataTable.svelte"

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

@@ -0,0 +1,50 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
+  import RecordFieldControl from "../RecordFieldControl.svelte"
+  import * as api from "../api"
+  import { ModalTitle, ModalFooter } from "components/common/Modal"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+
+  export let record = {}
+  export let visible = false
+
+  let modal
+  let errors = []
+
+  $: creating = record?._id == null
+  $: model = record.modelId
+    ? $backendUiStore.models.find(model => model._id === record?.modelId)
+    : $backendUiStore.selectedModel
+  $: modelSchema = Object.entries(model?.schema ?? {})
+
+  async function saveRecord() {
+    const recordResponse = await api.saveRecord(
+      { ...record, modelId: model._id },
+      model._id
+    )
+    if (recordResponse.errors) {
+      errors = Object.keys(recordResponse.errors)
+        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
+        .flat()
+      // Prevent modal closing if there were errors
+      return false
+    }
+    notifier.success("Record saved successfully.")
+    backendUiStore.actions.records.save(recordResponse)
+  }
+</script>
+
+<ModalTitle>{creating ? 'Create Row' : 'Edit Row'}</ModalTitle>
+<ErrorsBox {errors} />
+{#each modelSchema as [key, meta]}
+  <div>
+    {#if meta.type === 'link'}
+      <LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} />
+    {:else}
+      <RecordFieldControl {meta} bind:value={record[key]} />
+    {/if}
+  </div>
+{/each}
+<ModalFooter confirmText={creating ? 'Add' : 'Save'} onConfirm={saveRecord} />

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

@@ -1,102 +0,0 @@
-<script>
-  import {
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "./CreateEditRecord.svelte"
-
-  const CALCULATIONS = [
-    {
-      name: "Statistics",
-      key: "stats",
-    },
-  ]
-
-  export let view = {}
-
-  let anchor
-  let dropdown
-
-  $: viewModel = $backendUiStore.models.find(
-    ({ _id }) => _id === $backendUiStore.selectedView.modelId
-  )
-  $: fields =
-    viewModel &&
-    Object.keys(viewModel.schema).filter(
-      field => viewModel.schema[field].type === "number"
-    )
-
-  function saveView() {
-    backendUiStore.actions.views.save(view)
-    notifier.success(`View ${view.name} saved.`)
-    dropdown.hide()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show} active={!!view.field}>
-    <Icon name="calculate" />
-    Calculate
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <div class="actions">
-    <h5>Calculate</h5>
-    <div class="input-group-row">
-      <p>The</p>
-      <Select secondary thin bind:value={view.calculation}>
-        <option value="">Choose an option</option>
-        {#each CALCULATIONS as calculation}
-          <option value={calculation.key}>{calculation.name}</option>
-        {/each}
-      </Select>
-      <p>of</p>
-      <Select secondary thin bind:value={view.field}>
-        <option value="">Choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
-    </div>
-    <div class="footer">
-      <Button secondary on:click={dropdown.hide}>Cancel</Button>
-      <Button primary on:click={saveView}>Save</Button>
-    </div>
-  </div>
-</Popover>
-
-<style>
-  .actions {
-    display: grid;
-    grid-gap: 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: 30px 1fr 20px 1fr;
-    gap: var(--spacing-s);
-    align-items: center;
-  }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
-</style>

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

@@ -0,0 +1,84 @@
+<script>
+  import { Button, Input, Select } from "@budibase/bbui"
+  import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+
+  const CALCULATIONS = [
+    {
+      name: "Statistics",
+      key: "stats",
+    },
+  ]
+
+  export let view = {}
+  export let onClosed
+
+  $: viewModel = $backendUiStore.models.find(
+    ({ _id }) => _id === $backendUiStore.selectedView.modelId
+  )
+  $: fields =
+    viewModel &&
+    Object.keys(viewModel.schema).filter(
+      field => viewModel.schema[field].type === "number"
+    )
+
+  function saveView() {
+    backendUiStore.actions.views.save(view)
+    notifier.success(`View ${view.name} saved.`)
+    onClosed()
+  }
+</script>
+
+<div class="actions">
+  <h5>Calculate</h5>
+  <div class="input-group-row">
+    <p>The</p>
+    <Select secondary thin bind:value={view.calculation}>
+      <option value="">Choose an option</option>
+      {#each CALCULATIONS as calculation}
+        <option value={calculation.key}>{calculation.name}</option>
+      {/each}
+    </Select>
+    <p>of</p>
+    <Select secondary thin bind:value={view.field}>
+      <option value="">Choose an option</option>
+      {#each fields as field}
+        <option value={field}>{field}</option>
+      {/each}
+    </Select>
+  </div>
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+    <Button primary on:click={saveView}>Save</Button>
+  </div>
+</div>
+
+<style>
+  .actions {
+    display: grid;
+    grid-gap: 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: 30px 1fr 20px 1fr;
+    gap: var(--spacing-s);
+    align-items: center;
+  }
+
+  p {
+    margin: 0;
+    font-size: var(--font-size-xs);
+  }
+</style>

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

@@ -2,7 +2,7 @@
   import { backendUiStore } from "builderStore"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import CreateEditColumnModal from "./CreateEditColumn.svelte"
+  import CreateEditColumnPopover from "./CreateEditColumnPopover.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { notifier } from "../../../../builderStore/store/notifications"
 
@@ -26,6 +26,11 @@
     editing = false
   }
 
+  function showDelete() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
   function deleteColumn() {
     if (field.name === $backendUiStore.selectedModel.primaryDisplay) {
       notifier.danger("You cannot delete the primary display column")
@@ -52,7 +57,7 @@
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   {#if editing}
     <h5>Edit Column</h5>
-    <CreateEditColumnModal onClosed={hideEditor} {field} />
+    <CreateEditColumnPopover onClosed={hideEditor} {field} />
   {:else}
     <ul>
       {#if type !== 'link'}
@@ -61,9 +66,7 @@
           Edit
         </li>
       {/if}
-      <li
+      <li data-cy="delete-column-header" on:click={showDelete}>
-        data-cy="delete-column-header"
-        on:click={() => confirmDeleteDialog.show()}>
         <Icon name="delete" />
         Delete
       </li>

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

@@ -1,81 +0,0 @@
-<script>
-  import { onMount, tick } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { compose, map, get, flatten } from "lodash/fp"
-  import { Input, TextArea, Button } from "@budibase/bbui"
-  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
-  import RecordFieldControl from "./RecordFieldControl.svelte"
-  import * as api from "../api"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-
-  export let record = {}
-  export let onClosed
-
-  let errors = []
-  $: model = record.modelId
-    ? $backendUiStore.models.find(model => model._id === record?.modelId)
-    : $backendUiStore.selectedModel
-  $: modelSchema = Object.entries(model?.schema ?? {})
-
-  async function saveRecord() {
-    const recordResponse = await api.saveRecord(
-      {
-        ...record,
-        modelId: model._id,
-      },
-      model._id
-    )
-    if (recordResponse.errors) {
-      errors = Object.keys(recordResponse.errors)
-        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
-        .flat()
-      return
-    }
-
-    onClosed()
-    notifier.success("Record saved successfully.")
-    backendUiStore.actions.records.save(recordResponse)
-  }
-</script>
-
-<div class="actions">
-  <ErrorsBox {errors} />
-  <form on:submit|preventDefault>
-    {#each modelSchema as [key, meta]}
-      <div>
-        {#if meta.type === 'link'}
-          <LinkedRecordSelector
-            bind:linkedRecords={record[key]}
-            schema={meta} />
-        {:else}
-          <RecordFieldControl {meta} bind:value={record[key]} />
-        {/if}
-      </div>
-    {/each}
-  </form>
-  <footer>
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveRecord}>Save</Button>
-  </footer>
-</div>
-
-<style>
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  form {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>

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

@@ -1,19 +1,10 @@
 <script>
-  import {
+  import { Button, Input, Select } from "@budibase/bbui"
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "./CreateEditRecord.svelte"
 
-  let anchor
+  export let onClosed
-  let dropdown
 
   let name
   let field
@@ -36,27 +27,19 @@
       field,
     })
     notifier.success(`View ${name} created`)
-    dropdown.hide()
+    onClosed()
     $goto(`../../../view/${name}`)
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="view" />
-    Create New View
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
 <div class="actions">
   <h5>Create View</h5>
   <Input label="View Name" thin bind:value={name} />
   <div class="footer">
-      <Button secondary on:click={dropdown.hide}>Cancel</Button>
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveView}>Save View</Button>
   </div>
 </div>
-</Popover>
 
 <style>
   h5 {

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

@@ -1,15 +1,7 @@
 <script>
-  import {
+  import { Button, Input, Select } from "@budibase/bbui"
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "./CreateEditRecord.svelte"
 
   const CONDITIONS = [
     {
@@ -50,9 +42,7 @@
   ]
 
   export let view = {}
-
+  export let onClosed
-  let anchor
-  let dropdown
 
   $: viewModel = $backendUiStore.models.find(
     ({ _id }) => _id === $backendUiStore.selectedView.modelId
@@ -62,7 +52,7 @@
   function saveView() {
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
-    dropdown.hide()
+    onClosed()
   }
 
   function removeFilter(idx) {
@@ -84,17 +74,6 @@
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton
-    text
-    small
-    on:click={dropdown.show}
-    active={view.filters && view.filters.length}>
-    <Icon name="filter" />
-    Filter
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
 <div class="actions">
   <h5>Filter</h5>
   {#if view.filters.length}
@@ -139,12 +118,11 @@
   <div class="footer">
     <Button text on:click={addFilter}>Add Filter</Button>
     <div class="buttons">
-        <Button secondary on:click={dropdown.hide}>Cancel</Button>
+      <Button secondary on:click={onClosed}>Cancel</Button>
       <Button primary on:click={saveView}>Save</Button>
     </div>
   </div>
 </div>
-</Popover>
 
 <style>
   .actions {

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

@@ -1,91 +0,0 @@
-<script>
-  import {
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "./CreateEditRecord.svelte"
-
-  const CALCULATIONS = [
-    {
-      name: "Statistics",
-      key: "stats",
-    },
-  ]
-
-  export let view = {}
-
-  let anchor
-  let dropdown
-
-  $: viewModel = $backendUiStore.models.find(
-    ({ _id }) => _id === $backendUiStore.selectedView.modelId
-  )
-  $: fields = viewModel && Object.keys(viewModel.schema)
-
-  function saveView() {
-    backendUiStore.actions.views.save(view)
-    notifier.success(`View ${view.name} saved.`)
-    dropdown.hide()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
-    <Icon name="group" />
-    Group
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <div class="actions">
-    <h5>Group</h5>
-    <div class="input-group-row">
-      <p>By</p>
-      <Select secondary thin bind:value={view.groupBy}>
-        <option value="">Choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
-    </div>
-    <div class="footer">
-      <Button secondary on:click={dropdown.hide}>Cancel</Button>
-      <Button primary on:click={saveView}>Save</Button>
-    </div>
-  </div>
-</Popover>
-
-<style>
-  .actions {
-    display: grid;
-    grid-gap: 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>

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

@@ -0,0 +1,66 @@
+<script>
+  import { Button, Input, Select } from "@budibase/bbui"
+  import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+
+  export let view = {}
+  export let onClosed
+
+  $: viewModel = $backendUiStore.models.find(
+    ({ _id }) => _id === $backendUiStore.selectedView.modelId
+  )
+  $: fields = viewModel && Object.keys(viewModel.schema)
+
+  function saveView() {
+    backendUiStore.actions.views.save(view)
+    notifier.success(`View ${view.name} saved.`)
+    onClosed()
+  }
+</script>
+
+<div class="actions">
+  <h5>Group</h5>
+  <div class="input-group-row">
+    <p>By</p>
+    <Select secondary thin bind:value={view.groupBy}>
+      <option value="">Choose an option</option>
+      {#each fields as field}
+        <option value={field}>{field}</option>
+      {/each}
+    </Select>
+  </div>
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+    <Button primary on:click={saveView}>Save</Button>
+  </div>
+</div>
+
+<style>
+  .actions {
+    display: grid;
+    grid-gap: 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>

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

@@ -1,27 +0,0 @@
-<script>
-  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
-  import CreateEditRecord from "./CreateEditRecord.svelte"
-  import { Modal } from "components/common/Modal"
-
-  let anchor
-  let dropdown
-</script>
-
-<div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
-    <Icon name="addrow" />
-    Create New Row
-  </Button>
-</div>
-<Modal bind:this={dropdown}>
-  <h5>Add New Row</h5>
-  <CreateEditRecord onClosed={dropdown.hide} />
-</Modal>
-
-<style>
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-</style>

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

@@ -1,41 +1,33 @@
 <script>
-  import { getContext } from "svelte"
   import { backendUiStore } from "builderStore"
-  import {
+  import { DropdownMenu, Icon } from "@budibase/bbui"
-    DropdownMenu,
+  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
-    Button,
-    Icon,
-    Input,
-    Select,
-    Heading,
-  } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-  import CreateEditRecordModal from "./CreateEditRecord.svelte"
   import * as api from "../api"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { Modal } from "components/common/Modal"
 
   export let row
 
   let anchor
   let dropdown
-  let editing
   let confirmDeleteDialog
+  let modal
 
-  function showEditor() {
+  function showModal() {
-    editing = true
+    dropdown.hide()
+    modal.show()
   }
 
-  function hideEditor() {
+  function showDelete() {
     dropdown.hide()
-    editing = false
+    confirmDeleteDialog.show()
   }
 
   async function deleteRow() {
     await api.deleteRecord(row)
     notifier.success("Record deleted")
     backendUiStore.actions.records.delete(row)
-    hideEditor()
   }
 </script>
 
@@ -43,21 +35,16 @@
   <i class="ri-more-line" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
-  {#if editing}
-    <h5>Edit Row</h5>
-    <CreateEditRecordModal onClosed={hideEditor} record={row} />
-  {:else}
   <ul>
-      <li data-cy="edit-row" on:click={showEditor}>
+    <li data-cy="edit-row" on:click={showModal}>
       <Icon name="edit" />
       <span>Edit</span>
     </li>
-      <li data-cy="delete-row" on:click={() => confirmDeleteDialog.show()}>
+    <li data-cy="delete-row" on:click={showDelete}>
       <Icon name="delete" />
       <span>Delete</span>
     </li>
   </ul>
-  {/if}
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -65,6 +52,9 @@
   okText="Delete Row"
   onOk={deleteRow}
   title="Confirm Delete" />
+<Modal bind:this={modal}>
+  <CreateEditRecordModal record={row} />
+</Modal>
 
 <style>
   .ri-more-line:hover {

packages/builder/src/components/backend/ModelNavigator/EditTable.svelte

@@ -24,6 +24,11 @@
     editing = false
   }
 
+  function showModal() {
+    hideEditor()
+    confirmDeleteDialog.show()
+  }
+
   async function deleteTable() {
     await backendUiStore.actions.models.delete(table)
     notifier.success("Table deleted")
@@ -66,7 +71,7 @@
         <Icon name="edit" />
         Edit
       </li>
-      <li data-cy="delete-table" on:click={() => confirmDeleteDialog.show()}>
+      <li data-cy="delete-table" on:click={showModal}>
         <Icon name="delete" />
         Delete
       </li>
@@ -78,7 +83,6 @@
   body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete Table"
   onOk={deleteTable}
-  onCancel={hideEditor}
   title="Confirm Delete" />
 
 <style>

packages/builder/src/components/backend/ModelNavigator/EditView.svelte

@@ -24,6 +24,11 @@
     editing = false
   }
 
+  function showDelete() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
   async function save() {
     await backendUiStore.actions.views.save({
       originalName,
@@ -61,7 +66,7 @@
         <Icon name="edit" />
         Edit
       </li>
-      <li data-cy="delete-view" on:click={() => confirmDeleteDialog.show()}>
+      <li data-cy="delete-view" on:click={showDelete}>
         <Icon name="delete" />
         Delete
       </li>

packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte

@@ -1,19 +1,13 @@
 <script>
-  import { getContext } from "svelte"
-  import { slide } from "svelte/transition"
-  import { Switcher } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
   import ListItem from "./ListItem.svelte"
-  import { Button } from "@budibase/bbui"
   import CreateTablePopover from "./CreateTable.svelte"
   import EditTablePopover from "./EditTable.svelte"
   import EditViewPopover from "./EditView.svelte"
   import { Heading } from "@budibase/bbui"
   import { Spacer } from "@budibase/bbui"
 
-  const { open, close } = getContext("simple-modal")
-
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -1,64 +1,31 @@
 <script>
-  import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
+  import { Modal, ModalTitle, ModalFooter } from "components/common/Modal"
 
   export let title = ""
-  export let body = ""
+  export let body
-  export let okText = "OK"
+  export let okText
-  export let cancelText = "Cancel"
+  export let cancelText
-  export let onOk = () => {}
+  export let onOk
-  export let onCancel = () => {}
+  export let onCancel
+
+  let modal
 
   export const show = () => {
-    theModal.show()
+    modal.show()
   }
-
   export const hide = () => {
-    theModal.hide()
+    modal.hide()
-  }
-
-  let theModal
-
-  const cancel = () => {
-    hide()
-    onCancel()
-  }
-
-  const ok = () => {
-    const result = onOk()
-    // allow caller to return false, to cancel the "ok"
-    if (result === false) return
-    hide()
   }
 </script>
 
-<Modal id={title} bind:this={theModal}>
+<Modal id={title} bind:this={modal} on:hide={onCancel}>
-  <h2>{title}</h2>
+  <ModalTitle>{title}</ModalTitle>
-  <Spacer extraLarge />
+  <div class="body">{body}</div>
-  <div class="content">
+  <ModalFooter confirmText={okText} {cancelText} onConfirm={onOk} red />
-    <slot class="rows">{body}</slot>
-  </div>
-  <Spacer extraLarge />
-  <div class="modal-footer">
-    <Button red wide on:click={ok}>{okText}</Button>
-    <Button secondary wide on:click={cancel}>{cancelText}</Button>
-  </div>
 </Modal>
 
 <style>
-  h2 {
+  .body {
-    font-size: var(--font-size-xl);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 600;
-  }
-
-  .modal-footer {
-    display: grid;
-    grid-gap: var(--spacing-s);
-  }
-
-  .content {
-    white-space: normal;
     font-size: var(--font-size-s);
   }
 </style>

packages/builder/src/components/common/LinkedRecordSelector.svelte

@@ -20,7 +20,6 @@
     const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
     const response = await api.get(FETCH_RECORDS_URL)
     const result = await response.json()
-    console.log(result)
     return result
   }
 

packages/builder/src/components/common/Modal/Modal.svelte

@@ -1,17 +1,23 @@
 <script>
-  import { createEventDispatcher } from "svelte"
+  /**
+   * Confirmation is handled as a callback rather than an event to allow
+   * handling the result - meaning a parent can prevent the modal closing.
+   *
+   * A show/hide API is exposed as part of the modal and also via context for
+   * children inside the modal.
+   * "show" and "hide" events are emitted as visibility changes.
+   *
+   * Modals are rendered at the top of the DOM tree.
+   */
+  import { createEventDispatcher, setContext } from "svelte"
   import { fade, fly } from "svelte/transition"
   import { portal } from "./portal"
+  import { ContextKey } from "./context"
   const dispatch = createEventDispatcher()
 
-  export let visible = false
+  let visible
-  export let cancelText = "Cancel"
-  export let confirmText = "Confirm"
-  export let showCancelButton = true
-  export let showConfirmButton = true
 
   export function show() {
-    console.log("show")
     if (visible) {
       return
     }
@@ -26,6 +32,8 @@
     visible = false
     dispatch("hide")
   }
+
+  setContext(ContextKey, { show, hide })
 </script>
 
 {#if visible}
@@ -66,7 +74,6 @@
     justify-content: center;
     align-items: center;
     background-color: rgba(0, 0, 0, 0.25);
-    z-index: 999;
   }
 
   .scroll-wrapper {
@@ -98,5 +105,7 @@
     flex: 0 0 400px;
     margin: 2rem 0;
     border-radius: var(--border-radius-m);
+    gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 </style>

packages/builder/src/components/common/Modal/ModalContainer.svelte

@@ -5,5 +5,6 @@
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 999;
   }
 </style>

packages/builder/src/components/common/Modal/ModalFooter.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { getContext } from "svelte"
+  import { Button } from "@budibase/bbui"
+  import { ContextKey } from "./context"
+
+  export let cancelText = "Cancel"
+  export let confirmText = "Confirm"
+  export let showCancelButton = true
+  export let showConfirmButton = true
+  export let onConfirm
+
+  const modalContext = getContext(ContextKey)
+
+  function hide() {
+    modalContext.hide()
+  }
+
+  async function confirm() {
+    if (!onConfirm || (await onConfirm()) !== false) {
+      hide()
+    }
+  }
+</script>
+
+{#if showCancelButton || showConfirmButton}
+  <footer>
+    {#if showCancelButton}
+      <Button secondary on:click={hide}>{cancelText}</Button>
+    {/if}
+    {#if showConfirmButton}
+      <Button primary {...$$restProps} on:click={confirm}>{confirmText}</Button>
+    {/if}
+  </footer>
+{/if}
+
+<style>
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/common/Modal/ModalTitle.svelte

@@ -0,0 +1,10 @@
+<h5>
+  <slot />
+</h5>
+
+<style>
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+</style>

packages/builder/src/components/common/Modal/context.js

@@ -0,0 +1 @@
+export const ContextKey = "budibase-modal"

packages/builder/src/components/common/Modal/index.js

@@ -1,2 +1,5 @@
 export { default as Modal } from "./Modal.svelte"
 export { default as ModalContainer } from "./ModalContainer.svelte"
+export { default as ModalTitle } from "./ModalTitle.svelte"
+export { default as ModalFooter } from "./ModalFooter.svelte"
+export { ContextKey } from "./context"

packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -1,13 +1,6 @@
 <script>
-  import { getContext } from "svelte"
+  import ModelDataTable from "components/backend/DataTable/ModelDataTable.svelte"
-  import { Button } from "@budibase/bbui"
-  import ModelDataTable from "components/backend/DataTable"
   import { backendUiStore } from "builderStore"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/backend/DataTable/api"
-  import CreateEditRecordModal from "components/backend/DataTable/popovers/CreateEditRecord.svelte"
-
-  const { open, close } = getContext("simple-modal")
 
   $: selectedModel = $backendUiStore.selectedModel
 </script>

packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte

@@ -1,13 +1,6 @@
 <script>
-  import { getContext } from "svelte"
-  import { Button } from "@budibase/bbui"
   import ViewDataTable from "components/backend/DataTable/ViewDataTable"
   import { backendUiStore } from "builderStore"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/backend/DataTable/api"
-  import CreateEditRecord from "components/backend/DataTable/popovers/CreateEditRecord.svelte"
-
-  const { open, close } = getContext("simple-modal")
 
   $: selectedView = $backendUiStore.selectedView
 </script>