Fix cypress texts and update use of modal

2020-10-05 11:13:09 +01:00 · 2020-10-05 11:13:09 +01:00 · 70b70252ec
parent 82476e2ae9
commit 70b70252ec
28 changed files with 378 additions and 386 deletions
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@ -15,8 +15,12 @@ context("Create a automation", () => {

    cy.contains("automate").click()
    cy.contains("Create New Automation").click()
-    cy.get("input").type("Add Record")
-    cy.contains("Save").click()
+    cy.get(".modal").within(() => {
+      cy.get("input").type("Add Record")
+      cy.get(".buttons")
+        .contains("Create")
+        .click()
+    })

    // Add trigger
    cy.get("[data-cy=add-automation-component]").click()
@ -28,7 +32,7 @@ context("Create a automation", () => {
    })

    // Create action
-    cy.get("[data-cy=SAVE_RECORD]").click()
+    cy.get("[data-cy=CREATE_RECORD]").click()
    cy.get("[data-cy=automation-block-setup]").within(() => {
      cy.get("select")
        .first()
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@ -12,7 +12,7 @@ context("Create a Table", () => {
  })

  it("adds a new column to the table", () => {
-    cy.addColumn("dog", "name", "Plain Text")
+    cy.addColumn("dog", "name", "Text")
    cy.contains("name").should("be.visible")
  })

@ -24,16 +24,18 @@ context("Create a Table", () => {
  it("updates a column on the table", () => {
    cy.contains("name").click()
    cy.get("[data-cy='edit-column-header']").click()
-    cy.get("[placeholder=Name]").type("updated")
-    cy.get("select").select("Plain Text")
+    cy.get(".actions input")
+      .first()
+      .type("updated")
+    cy.get("select").select("Text")
    cy.contains("Save Column").click()
-    cy.contains("nameupdated").should("have.text", "nameupdated ")
+    cy.contains("nameupdated").should("have.text", "nameupdated")
  })

  it("edits a record", () => {
    cy.get("tbody .ri-more-line").click()
    cy.get("[data-cy=edit-row]").click()
-    cy.get(".actions input").type("Updated")
+    cy.get(".modal input").type("Updated")
    cy.contains("Save").click()
    cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
  })
@ -48,6 +50,7 @@ context("Create a Table", () => {
  it("deletes a column", () => {
    cy.contains("name").click()
    cy.get("[data-cy='delete-column-header']").click()
+    cy.contains("Delete Column").click()
    cy.contains("nameupdated").should("not.exist")
  })

--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@ -3,7 +3,7 @@ context("Create a View", () => {
    cy.visit("localhost:4001/_builder")
    cy.createApp("View App", "View App Description")
    cy.createTable("data")
-    cy.addColumn("data", "group", "Plain Text")
+    cy.addColumn("data", "group", "Text")
    cy.addColumn("data", "age", "Number")
    cy.addColumn("data", "rating", "Number")

@ -18,10 +18,12 @@ context("Create a View", () => {

  it("creates a view", () => {
    cy.contains("Create New View").click()
-    cy.get("[placeholder='View Name']").type("Test View")
-    cy.contains("Save View").click()
+    cy.get(".menu-container").within(() => {
+      cy.get("input").type("Test View")
+      cy.contains("Save View").click()
+    })
    cy.get(".title").contains("Test View")
-    cy.get("thead th").should($headers => {
+    cy.get("thead th div").should($headers => {
      expect($headers).to.have.length(3)
      const headers = $headers.map((i, header) => Cypress.$(header).text())
      expect(headers.get()).to.deep.eq(["group", "age", "rating"])
@ -39,7 +41,7 @@ context("Create a View", () => {
      .find("select")
      .eq(1)
      .select("More Than")
-    cy.get("input[placeholder='age']").type(18)
+    cy.get("input").type(18)
    cy.contains("Save").click()
    cy.get("tbody tr").should($values => {
      expect($values).to.have.length(5)
@ -57,7 +59,7 @@ context("Create a View", () => {
      .eq(1)
      .select("age")
    cy.contains("Save").click()
-    cy.get("thead th").should($headers => {
+    cy.get("thead th div").should($headers => {
      expect($headers).to.have.length(7)
      const headers = $headers.map((i, header) => Cypress.$(header).text())
      expect(headers.get()).to.deep.eq([
@ -113,8 +115,10 @@ context("Create a View", () => {
      .find(".ri-more-line")
      .click()
    cy.contains("Edit").click()
-    cy.get("[placeholder='View Name']").type(" Updated")
-    cy.contains("Save").click()
+    cy.get(".menu-container").within(() => {
+      cy.get("input").type(" Updated")
+      cy.contains("Save").click()
+    })
    cy.contains("Test View Updated").should("be.visible")
  })

--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -59,14 +59,16 @@ Cypress.Commands.add("createApp", name => {

 Cypress.Commands.add("createTestTableWithData", () => {
  cy.createTable("dog")
-  cy.addColumn("dog", "name", "Plain Text")
+  cy.addColumn("dog", "name", "Text")
  cy.addColumn("dog", "age", "Number")
 })

 Cypress.Commands.add("createTable", tableName => {
  // Enter model name
  cy.contains("Create New Table").click()
-  cy.get("[placeholder='Table Name']").type(tableName)
+  cy.get(".menu-container")
+    .get("input")
+    .type(tableName)

  cy.contains("Save").click()
  cy.contains(tableName).should("be.visible")
@ -77,25 +79,31 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
  cy.contains(tableName).click()
  cy.contains("Create New Column").click()

-  cy.get("[placeholder=Name]").type(columnName)
-  cy.get("select").select(type)
-
-  cy.contains("Save Column")
-
-  cy.contains("Save").click()
+  // Configure column
+  cy.get(".menu-container").within(() => {
+    cy.get("input")
+      .first()
+      .type(columnName)
+    cy.get("select").select(type)
+    cy.contains("Save").click()
+  })
 })

 Cypress.Commands.add("addRecord", values => {
  cy.contains("Create New Row").click()

-  for (let i = 0; i < values.length; i++) {
-    cy.get(".actions input")
-      .eq(i)
-      .type(values[i])
-  }
+  cy.get(".modal").within(() => {
+    for (let i = 0; i < values.length; i++) {
+      cy.get("input")
+        .eq(i)
+        .type(values[i])
+    }

-  // Save
-  cy.contains("Save").click()
+    // Save
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
+  })
 })

 Cypress.Commands.add("createUser", (username, password, accessLevel) => {
@ -114,7 +122,9 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => {
    .select(accessLevel)

  // Save
-  cy.get(".create-button > button").click()
+  cy.get(".inputs")
+    .contains("Create")
+    .click()
 })

 Cypress.Commands.add("addHeadlineComponent", text => {
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
@ -5,7 +5,7 @@
  import { Button } from "@budibase/bbui"
  import { Modal } from "components/common/Modal"

-  let modal
+  let modalVisible = false

  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id

@ -15,7 +15,7 @@
 </script>

 <section>
-  <Button primary wide on:click={() => modal.show()}>
+  <Button primary wide on:click={() => (modalVisible = true)}>
    Create New Automation
  </Button>
  <ul>
@ -30,9 +30,9 @@
    {/each}
  </ul>
 </section>
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
+{#if modalVisible}
+  <CreateAutomationModal bind:visible={modalVisible} />
+{/if}

 <style>
  section {
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
@ -3,7 +3,9 @@
  import { notifier } from "builderStore/store/notifications"
  import { Input } from "@budibase/bbui"
  import analytics from "analytics"
-  import { ModalTitle, ModalFooter } from "components/common/Modal"
+  import { Modal } from "components/common/Modal"
+
+  export let visible

  let name

@ -27,19 +29,22 @@
  }
 </script>

-<ModalTitle>Create Automation</ModalTitle>
-<Input bind:value={name} label="Name" />
-<ModalFooter
+<Modal
+  bind:visible
+  title="Create Automation"
  confirmText="Create"
  onConfirm={createAutomation}
  disabled={!valid}>
-  <a
-    target="_blank"
-    href="https://docs.budibase.com/automate/introduction-to-automate">
-    <i class="ri-information-line" />
-    <span>Learn about automations</span>
-  </a>
-</ModalFooter>
+  <Input bind:value={name} label="Name" />
+  <slot name="footer">
+    <a
+      target="_blank"
+      href="https://docs.budibase.com/automate/introduction-to-automate">
+      <i class="ri-information-line" />
+      <span>Learn about automations</span>
+    </a>
+  </slot>
+</Modal>

 <style>
  a {
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@ -3,15 +3,15 @@
  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
  import { Modal } from "components/common/Modal"

-  let modal
+  let modalVisible
 </script>

 <div>
-  <Button text small on:click={modal.show}>
+  <Button text small on:click={() => (modalVisible = true)}>
    <Icon name="addrow" />
    Create New Row
  </Button>
 </div>
-<Modal bind:this={modal}>
-  <CreateEditRecordModal />
-</Modal>
+{#if modalVisible}
+  <CreateEditRecordModal bind:visible={modalVisible} />
+{/if}
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
@ -4,11 +4,11 @@
  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 { Modal } from "components/common/Modal"
  import ErrorsBox from "components/common/ErrorsBox.svelte"

  export let record = {}
-  export let visible = false
+  export let visible

  let modal
  let errors = []
@ -36,15 +36,19 @@
  }
 </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} />
+<Modal
+  bind:visible
+  title={creating ? 'Create Row' : 'Edit Row'}
+  confirmText={creating ? 'Create Row' : 'Save Row'}
+  onConfirm={saveRecord}>
+  <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}
+</Modal>
--- a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
@ -12,11 +12,11 @@
  let anchor
  let dropdown
  let confirmDeleteDialog
-  let modal
+  let editModalVisible

  function showModal() {
    dropdown.hide()
-    modal.show()
+    editModalVisible = true
  }

  function showDelete() {
@ -52,9 +52,9 @@
  okText="Delete Row"
  onOk={deleteRow}
  title="Confirm Delete" />
-<Modal bind:this={modal}>
-  <CreateEditRecordModal record={row} />
-</Modal>
+{#if editModalVisible}
+  <CreateEditRecordModal bind:visible={editModalVisible} record={row} />
+{/if}

 <style>
  .ri-more-line:hover {
--- a/packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
@ -2,9 +2,9 @@
  import { goto } from "@sveltech/routify"
  import { backendUiStore } from "builderStore"
  import ListItem from "./ListItem.svelte"
-  import CreateTablePopover from "./CreateTable.svelte"
-  import EditTablePopover from "./EditTable.svelte"
-  import EditViewPopover from "./EditView.svelte"
+  import CreateTablePopover from "./popovers/CreateTablePopover.svelte"
+  import EditTablePopover from "./popovers/EditTablePopover.svelte"
+  import EditViewPopover from "./popovers/EditViewPopover.svelte"
  import { Heading } from "@budibase/bbui"
  import { Spacer } from "@budibase/bbui"

--- a/packages/builder/src/components/backend/ModelNavigator/popovers/CreateTablePopover.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/popovers/CreateTablePopover.svelte
@ -2,11 +2,9 @@
  import { goto } from "@sveltech/routify"
  import { backendUiStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { Popover, Button, Icon, Input, Select } from "@budibase/bbui"
  import analytics from "analytics"

-  export let table
-
  let anchor
  let dropdown
  let name
@ -32,7 +30,7 @@
 <div bind:this={anchor}>
  <Button primary wide on:click={dropdown.show}>Create New Table</Button>
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
+<Popover bind:this={dropdown} {anchor} align="left">
  <div class="actions">
    <h5>Create Table</h5>
    <Input
@ -45,11 +43,10 @@
      <Button primary on:click={saveTable}>Save</Button>
    </footer>
  </div>
-</DropdownMenu>
+</Popover>

 <style>
  .actions {
-    padding: var(--spacing-xl);
    display: grid;
    grid-gap: var(--spacing-xl);
    min-width: 400px;
--- a/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte
--- a/packages/builder/src/components/backend/ModelNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/popovers/EditViewPopover.svelte
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalTitle, ModalFooter } from "components/common/Modal"
+  import { Modal } from "components/common/Modal"

  export let title = ""
  export let body = ""
@ -8,20 +8,26 @@
  export let onOk = () => {}
  export let onCancel = () => {}

-  let modal
+  let visible = false

  export const show = () => {
-    modal.show()
+    visible = true
  }
  export const hide = () => {
-    modal.hide()
+    visible = false
  }
 </script>

-<Modal id={title} bind:this={modal} on:hide={onCancel}>
-  <ModalTitle>{title}</ModalTitle>
+<Modal
+  id={title}
+  bind:visible
+  on:hide={onCancel}
+  {title}
+  confirmText={okText}
+  {cancelText}
+  onConfirm={onOk}
+  red>
  <div class="body">{body}</div>
-  <ModalFooter confirmText={okText} {cancelText} onConfirm={onOk} red />
 </Modal>

 <style>
--- a/packages/builder/src/components/common/Modal/Modal.svelte
+++ b/packages/builder/src/components/common/Modal/Modal.svelte
@ -12,15 +12,23 @@
  import { createEventDispatcher, setContext } from "svelte"
  import { fade, fly } from "svelte/transition"
  import Portal from "svelte-portal"
+  import { Button } from "@budibase/bbui"
  import { ContextKey } from "./context"
  const dispatch = createEventDispatcher()

  export let wide = false
  export let padded = true
+  export let title = undefined
+  export let cancelText = "Cancel"
+  export let confirmText = "Confirm"
+  export let showCancelButton = true
+  export let showConfirmButton = true
+  export let onConfirm = () => {}
+  export let visible = false

-  let visible
+  let loading = false

-  export function show() {
+  function show() {
    if (visible) {
      return
    }
@ -28,7 +36,7 @@
    dispatch("show")
  }

-  export function hide() {
+  function hide() {
    if (!visible) {
      return
    }
@ -36,6 +44,14 @@
    dispatch("hide")
  }

+  async function confirm() {
+    loading = true
+    if (!onConfirm || (await onConfirm()) !== false) {
+      hide()
+    }
+    loading = false
+  }
+
  setContext(ContextKey, { show, hide })
 </script>

@ -50,8 +66,37 @@
        on:click|self={hide}
        transition:fly={{ y: 50 }}>
        <div class="content-wrapper" on:click|self={hide}>
-          <div class="content" class:wide class:padded>
+          <div class="modal" class:wide class:padded>
+            {#if title}
+              <header>
+                <h5>{title}</h5>
+                <div class="header-content">
+                  <slot name="header" />
+                </div>
+              </header>
+            {/if}
            <slot />
+            {#if showCancelButton || showConfirmButton}
+              <footer>
+                <div class="footer-content">
+                  <slot name="footer" />
+                </div>
+                <div class="buttons">
+                  {#if showCancelButton}
+                    <Button secondary on:click={hide}>{cancelText}</Button>
+                  {/if}
+                  {#if showConfirmButton}
+                    <Button
+                      primary
+                      {...$$restProps}
+                      disabled={$$restProps.disabled || loading}
+                      on:click={confirm}>
+                      {confirmText}
+                    </Button>
+                  {/if}
+                </div>
+              </footer>
+            {/if}
            <i class="ri-close-line" on:click={hide} />
          </div>
        </div>
@ -61,10 +106,6 @@
 {/if}

 <style>
-  .portal-wrapper {
-    display: none;
-  }
-
  .overlay {
    position: fixed;
    left: 0;
@ -98,7 +139,7 @@
    width: 0;
  }

-  .content {
+  .modal {
    background-color: white;
    display: flex;
    flex-direction: column;
@ -111,13 +152,32 @@
    border-radius: var(--border-radius-m);
    gap: var(--spacing-xl);
  }
-  .content.wide {
+  .modal.wide {
    flex: 0 0 600px;
  }
-  .content.padded {
+  .modal.padded {
    padding: var(--spacing-xl);
  }

+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 40px;
+  }
+  header h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .header-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
  i {
    position: absolute;
    top: var(--spacing-xl);
@ -129,4 +189,27 @@
    color: var(--grey-6);
    cursor: pointer;
  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  .footer-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>
--- a/packages/builder/src/components/common/Modal/ModalFooter.svelte
+++ b/packages/builder/src/components/common/Modal/ModalFooter.svelte
@ -1,63 +0,0 @@
-<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)
-  let loading = false
-
-  function hide() {
-    modalContext.hide()
-  }
-
-  async function confirm() {
-    loading = true
-    if (!onConfirm || (await onConfirm()) !== false) {
-      hide()
-    }
-    loading = false
-  }
-</script>
-
-<footer>
-  <div class="content">
-    <slot />
-  </div>
-  <div class="buttons">
-    {#if showCancelButton}
-      <Button secondary on:click={hide}>{cancelText}</Button>
-    {/if}
-    {#if showConfirmButton}
-      <Button
-        primary
-        {...$$restProps}
-        disabled={$$props.disabled || loading}
-        on:click={confirm}>
-        {confirmText}
-      </Button>
-    {/if}
-  </div>
-</footer>
-
-<style>
-  footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-</style>
--- a/packages/builder/src/components/common/Modal/ModalTitle.svelte
+++ b/packages/builder/src/components/common/Modal/ModalTitle.svelte
@ -1,10 +0,0 @@
-<h5>
-  <slot />
-</h5>
-
-<style>
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-</style>
--- a/packages/builder/src/components/common/Modal/index.js
+++ b/packages/builder/src/components/common/Modal/index.js
@ -1,5 +1,3 @@
 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"
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@ -3,15 +3,15 @@
  import { SettingsIcon } from "components/common/Icons/"
  import { Modal } from "components/common/Modal"

-  let modal
+  let modalVisible
 </script>

-<span class="topnavitemright settings" on:click={modal.show}>
+<span class="topnavitemright settings" on:click={() => (modalVisible = true)}>
  <SettingsIcon />
 </span>
-<Modal bind:this={modal} wide>
-  <SettingsModal />
-</Modal>
+{#if modalVisible}
+  <SettingsModal bind:visible={modalVisible} />
+{/if}

 <style>
  span:first-letter {
--- a/packages/builder/src/components/settings/SettingsModal.svelte
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@ -1,7 +1,7 @@
 <script>
  import { General, Users, DangerZone, APIKeys } from "./tabs"
  import { Switcher } from "@budibase/bbui"
-  import { ModalTitle } from "components/common/Modal"
+  import { Modal } from "components/common/Modal"

  const tabs = [
    {
@ -26,25 +26,27 @@
    },
  ]

+  export let visible
+
  let value = "GENERAL"

  $: selectedTab = tabs.find(tab => tab.key === value).component
-
-  function hide() {}
 </script>

-<div class="container">
-  <ModalTitle>Settings</ModalTitle>
-  <Switcher headings={tabs} bind:value>
-    <svelte:component this={selectedTab} />
-  </Switcher>
-</div>
+<Modal
+  title="Settings"
+  wide
+  bind:visible
+  showConfirmButton={false}
+  showCancelButton={false}>
+  <div class="container">
+    <Switcher headings={tabs} bind:value>
+      <svelte:component this={selectedTab} />
+    </Switcher>
+  </div>
+</Modal>

 <style>
-  .container {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
  .container :global(section > header) {
    /* Fix margin defined in BBUI as L rather than XL */
    margin-bottom: var(--spacing-xl);
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@ -2,7 +2,6 @@
  import { params, goto } from "@sveltech/routify"
  import { Input, TextArea, Button, Body } from "@budibase/bbui"
  import { del } from "builderStore/api"
-  import { ModalFooter } from "components/common/Modal"

  let value = ""
  let loading = false
@ -29,12 +28,15 @@
    thin
    disabled={loading}
    placeholder="" />
-  <ModalFooter
-    disabled={value !== 'DELETE' || loading}
-    red
-    showCancelButton={false}
-    confirmText="Delete Entire App"
-    onConfirm={deleteApp} />
+  <div class="buttons">
+    <Button
+      primary
+      disabled={value !== 'DELETE' || loading}
+      red
+      on:click={deleteApp}>
+      Delete Entire App
+    </Button>
+  </div>
 </div>

 <style>
@ -46,4 +48,11 @@
    line-height: 1.2;
    margin: 0;
  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
 </style>
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -1,6 +1,6 @@
 <script>
  import { writable } from "svelte/store"
-
+  import { Modal } from "components/common/Modal"
  import { store, automationStore, backendUiStore } from "builderStore"
  import { string, object } from "yup"
  import api, { get } from "builderStore/api"
@ -18,6 +18,7 @@
  //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
  const createAppStore = writable({ currentStep: 0, values: {} })

+  export let visible
  export let hasKey

  let isApiKeyValid
@ -197,60 +198,67 @@
  }
 </script>

-<div class="container">
-  <div class="sidebar">
-    {#each steps as { active, done }, i}
-      <Indicator
-        active={$createAppStore.currentStep === i}
-        done={i < $createAppStore.currentStep}
-        step={i + 1} />
-    {/each}
+<Modal
+  bind:visible
+  wide
+  padded={false}
+  showCancelButton={false}
+  showConfirmButton={false}>
+  <div class="container">
+    <div class="sidebar">
+      {#each steps as { active, done }, i}
+        <Indicator
+          active={$createAppStore.currentStep === i}
+          done={i < $createAppStore.currentStep}
+          step={i + 1} />
+      {/each}
+    </div>
+    <div class="body">
+      <div class="heading">
+        <h3 class="header">Get Started with Budibase</h3>
+      </div>
+      <div class="step">
+        <Form bind:values={$createAppStore.values}>
+          {#each steps as step, i (i)}
+            <div class:hidden={$createAppStore.currentStep !== i}>
+              <svelte:component
+                this={step.component}
+                {validationErrors}
+                options={step.options}
+                name={step.name} />
+            </div>
+          {/each}
+        </Form>
+      </div>
+      <div class="footer">
+        {#if $createAppStore.currentStep > 0}
+          <Button medium secondary on:click={back}>Back</Button>
+        {/if}
+        {#if $createAppStore.currentStep < steps.length - 1}
+          <Button medium blue on:click={next} disabled={!currentStepIsValid}>
+            Next
+          </Button>
+        {/if}
+        {#if $createAppStore.currentStep === steps.length - 1}
+          <Button
+            medium
+            blue
+            on:click={signUp}
+            disabled={!fullFormIsValid || submitting}>
+            {submitting ? 'Loading...' : 'Submit'}
+          </Button>
+        {/if}
+      </div>
+    </div>
+    <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
+    {#if submitting}
+      <div in:fade class="spinner-container">
+        <Spinner />
+        <span class="spinner-text">Creating your app...</span>
+      </div>
+    {/if}
  </div>
-  <div class="body">
-    <div class="heading">
-      <h3 class="header">Get Started with Budibase</h3>
-    </div>
-    <div class="step">
-      <Form bind:values={$createAppStore.values}>
-        {#each steps as step, i (i)}
-          <div class:hidden={$createAppStore.currentStep !== i}>
-            <svelte:component
-              this={step.component}
-              {validationErrors}
-              options={step.options}
-              name={step.name} />
-          </div>
-        {/each}
-      </Form>
-    </div>
-    <div class="footer">
-      {#if $createAppStore.currentStep > 0}
-        <Button medium secondary on:click={back}>Back</Button>
-      {/if}
-      {#if $createAppStore.currentStep < steps.length - 1}
-        <Button medium blue on:click={next} disabled={!currentStepIsValid}>
-          Next
-        </Button>
-      {/if}
-      {#if $createAppStore.currentStep === steps.length - 1}
-        <Button
-          medium
-          blue
-          on:click={signUp}
-          disabled={!fullFormIsValid || submitting}>
-          {submitting ? 'Loading...' : 'Submit'}
-        </Button>
-      {/if}
-    </div>
-  </div>
-  <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
-  {#if submitting}
-    <div in:fade class="spinner-container">
-      <Spinner />
-      <span class="spinner-text">Creating your app...</span>
-    </div>
-  {/if}
-</div>
+</Modal>

 <style>
  .container {
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@ -12,10 +12,12 @@
  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
  import actionTypes from "./actions"
  import { createEventDispatcher } from "svelte"
+  import { Modal } from "components/common/Modal"

  const dispatch = createEventDispatcher()

  export let event
+  export let visible

  let addActionButton
  let addActionDropdown
@ -29,12 +31,6 @@
    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
      .component

-  const closeModal = () => {
-    dispatch("close")
-    draftEventHandler = { parameters: [] }
-    actions = []
-  }
-
  const updateEventHandler = (updatedHandler, index) => {
    actions[index] = updatedHandler
  }
@ -61,20 +57,22 @@

  const saveEventData = () => {
    dispatch("change", actions)
-    closeModal()
  }
 </script>

-<div class="root">
-
-  <div class="header">
-    <Heading small dark>Actions</Heading>
+<Modal
+  bind:visible
+  title="Actions"
+  wide
+  confirmText="Save"
+  onConfirm={saveEventData}>
+  <div slot="header">
    <div bind:this={addActionButton}>
      <TextButton text small blue on:click={addActionDropdown.show}>
-        Add Action
        <div style="height: 20px; width: 20px;">
          <AddIcon />
        </div>
+        Add Action
      </TextButton>
    </div>
    <DropdownMenu
@ -120,30 +118,12 @@
    {/if}
  </div>

-  <div class="footer">
+  <div slot="footer">
    <a href="https://docs.budibase.com">Learn more about Actions</a>
-    <Button secondary on:click={closeModal}>Cancel</Button>
-    <Button primary on:click={saveEventData}>Save</Button>
  </div>
-</div>
+</Modal>

 <style>
-  .root {
-    max-height: 50vh;
-    width: 700px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-xl);
-    padding-bottom: 0;
-  }
-
  .action-header {
    display: flex;
    flex-direction: row;
@ -200,22 +180,13 @@
    flex-direction: row;
  }

-  .footer {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-s);
-    padding: var(--spacing-xl);
-    padding-top: var(--spacing-m);
-  }
-
-  .footer > a {
+  a {
    flex: 1;
    color: var(--grey-5);
    font-size: var(--font-size-s);
    text-decoration: none;
  }
-
-  .footer > a:hover {
+  a:hover {
    color: var(--blue);
  }

--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@ -7,19 +7,17 @@
  export let value
  export let name

-  let eventsModal
+  let modalVisible = false
 </script>

-<Button secondary small on:click={eventsModal.show}>Define Actions</Button>
+<Button secondary small on:click={() => (modalVisible = true)}>
+  Define Actions
+</Button>

-<Modal bind:this={eventsModal} maxWidth="100vw" hideCloseButton padding="0">
+{#if modalVisible}
  <EventEditorModal
+    bind:visible={modalVisible}
    event={value}
    eventType={name}
-    on:change
-    on:close={eventsModal.hide} />
-</Modal>
-
-<style>
-
-</style>
+    on:change />
+{/if}
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@ -7,17 +7,15 @@
  import { Button } from "@budibase/bbui"
  import { Spacer } from "@budibase/bbui"

-  const newScreen = () => {
-    newScreenPicker.show()
-  }
-
-  let newScreenPicker
+  let modalVisible = false
 </script>

 <PagesList />

 <Spacer medium />
-<Button primary wide on:click={newScreen}>Create New Screen</Button>
+<Button primary wide on:click={() => (modalVisible = true)}>
+  Create New Screen
+</Button>
 <Spacer medium />
 <PageLayout layout={$store.pages[$store.currentPageName]} />

@ -25,7 +23,9 @@
  <ComponentsHierarchy screens={$store.screens} />
 </div>

-<NewScreen bind:this={newScreenPicker} />
+{#if modalVisible}
+  <NewScreen bind:visible={modalVisible} />
+{/if}

 <style>
  .newscreen {
--- a/packages/builder/src/components/userInterface/NewScreen.svelte
+++ b/packages/builder/src/components/userInterface/NewScreen.svelte
@ -3,14 +3,12 @@
  import { pipe } from "components/common/core"
  import { isRootComponent } from "./pagesParsing/searchComponents"
  import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select, Modal, Button, Spacer } from "@budibase/bbui"
-
+  import { Input, Select, Button, Spacer } from "@budibase/bbui"
+  import { Modal } from "components/common/Modal"
  import { find, filter, some, map, includes } from "lodash/fp"
  import { assign } from "lodash"

-  export const show = () => {
-    dialog.show()
-  }
+  export let visible

  let dialog
  let layoutComponents
@ -41,17 +39,12 @@
        routeError = ""
      }
    }
-
-    if (routeError) return false
-
+    if (routeError) {
+      return false
+    }
    store.createScreen(name, route, layoutComponent._component)
    name = ""
    route = ""
-    dialog.hide()
-  }
-
-  const cancel = () => {
-    dialog.hide()
  }

  const routeNameExists = route => {
@ -67,51 +60,20 @@
  }
 </script>

-<Modal bind:this={dialog} minWidth="500px">
-  <h2>New Screen</h2>
-  <Spacer extraLarge />
-
-  <div data-cy="new-screen-dialog">
-    <div class="bb-margin-xl">
-      <Input label="Name" bind:value={name} />
-    </div>
-
-    <div class="bb-margin-xl">
-      <Input
-        label="Url"
-        error={routeError}
-        bind:value={route}
-        on:change={routeChanged} />
-    </div>
-
-    <div class="bb-margin-xl">
-      <label>Layout Component</label>
-      <Select bind:value={layoutComponent} secondary>
-        {#each layoutComponents as { _component, name }}
-          <option value={_component}>{name}</option>
-        {/each}
-      </Select>
-    </div>
-  </div>
-
-  <Spacer extraLarge />
-
-  <div data-cy="create-screen-footer" class="modal-footer">
-    <Button secondary medium on:click={cancel}>Cancel</Button>
-    <Button blue medium on:click={save}>Create Screen</Button>
-  </div>
+<Modal
+  bind:visible
+  title="New Screen"
+  confirmText="Create Screen"
+  onConfirm={save}>
+  <Input label="Name" bind:value={name} />
+  <Input
+    label="Url"
+    error={routeError}
+    bind:value={route}
+    on:change={routeChanged} />
+  <Select label="Layout Component" bind:value={layoutComponent} secondary>
+    {#each layoutComponents as { _component, name }}
+      <option value={_component}>{name}</option>
+    {/each}
+  </Select>
 </Modal>
-
-<style>
-  h2 {
-    font-size: var(--font-size-xl);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 600;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@ -15,12 +15,9 @@
  let newScreenPicker
  let confirmDeleteDialog
  let componentToDelete = ""
-
-  const newScreen = () => {
-    newScreenPicker.show()
-  }
-
  let settingsView
+  let modalVisible = false
+
  const settings = () => {
    settingsView.show()
  }
@ -52,7 +49,7 @@
          Screens
        </span>
        <div>
-          <button on:click={newScreen}>
+          <button on:click={() => (modalVisible = true)}>
            <AddIcon />
          </button>
        </div>
@ -76,7 +73,9 @@

 </div>

-<NewScreen bind:this={newScreenPicker} />
+{#if modalVisible}
+  <NewScreen bind:visible={modalVisible} />
+{/if}
 <SettingsView bind:this={settingsView} />

 <style>
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -13,7 +13,7 @@

  let promise = getApps()
  let hasKey
-  let modal
+  let modalVisible = false

  async function getApps() {
    const res = await get("/api/applications")
@ -40,7 +40,7 @@
    }

    if (!keys.budibase) {
-      modal.show()
+      modalVisible = true
    }
  }

@ -49,7 +49,9 @@

 <div class="header">
  <Heading medium black>Welcome to the Budibase Beta</Heading>
-  <Button primary black on:click={modal.show}>Create New Web App</Button>
+  <Button primary black on:click={() => (modalVisible = true)}>
+    Create New Web App
+  </Button>
 </div>

 <div class="banner">
@ -59,9 +61,9 @@
  </div>
 </div>

-<Modal bind:this={modal} wide padded={false}>
-  <CreateAppModal {hasKey} />
-</Modal>
+{#if modalVisible}
+  <CreateAppModal bind:visible={modalVisible} {hasKey} />
+{/if}

 {#await promise}
  <div class="spinner-container">