Fix cypress texts and update use of modal

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.get(".modal").within(() => {
-    cy.contains("Save").click()
+      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()

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(".actions input")
-    cy.get("select").select("Plain Text")
+      .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")
   })
 

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.get(".menu-container").within(() => {
-    cy.contains("Save View").click()
+      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.get(".menu-container").within(() => {
-    cy.contains("Save").click()
+      cy.get("input").type(" Updated")
+      cy.contains("Save").click()
+    })
     cy.contains("Test View Updated").should("be.visible")
   })
 

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)
+  // Configure column
-  cy.get("select").select(type)
+  cy.get(".menu-container").within(() => {
-
+    cy.get("input")
-  cy.contains("Save Column")
+      .first()
-
+      .type(columnName)
-  cy.contains("Save").click()
+    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(".modal").within(() => {
-    cy.get(".actions input")
+    for (let i = 0; i < values.length; i++) {
-      .eq(i)
+      cy.get("input")
-      .type(values[i])
+        .eq(i)
-  }
+        .type(values[i])
+    }
 
-  // Save
+    // Save
-  cy.contains("Save").click()
+    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 => {

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}>
+{#if modalVisible}
-  <CreateAutomationModal />
+  <CreateAutomationModal bind:visible={modalVisible} />
-</Modal>
+{/if}
 
 <style>
   section {

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

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}>
+{#if modalVisible}
-  <CreateEditRecordModal />
+  <CreateEditRecordModal bind:visible={modalVisible} />
-</Modal>
+{/if}

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>
+<Modal
-<ErrorsBox {errors} />
+  bind:visible
-{#each modelSchema as [key, meta]}
+  title={creating ? 'Create Row' : 'Edit Row'}
-  <div>
+  confirmText={creating ? 'Create Row' : 'Save Row'}
-    {#if meta.type === 'link'}
+  onConfirm={saveRecord}>
-      <LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} />
+  <ErrorsBox {errors} />
-    {:else}
+  {#each modelSchema as [key, meta]}
-      <RecordFieldControl {meta} bind:value={record[key]} />
+    <div>
-    {/if}
+      {#if meta.type === 'link'}
-  </div>
+        <LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} />
-{/each}
+      {:else}
-<ModalFooter confirmText={creating ? 'Add' : 'Save'} onConfirm={saveRecord} />
+        <RecordFieldControl {meta} bind:value={record[key]} />
+      {/if}
+    </div>
+  {/each}
+</Modal>

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}>
+{#if editModalVisible}
-  <CreateEditRecordModal record={row} />
+  <CreateEditRecordModal bind:visible={editModalVisible} record={row} />
-</Modal>
+{/if}
 
 <style>
   .ri-more-line:hover {

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 CreateTablePopover from "./popovers/CreateTablePopover.svelte"
-  import EditTablePopover from "./EditTable.svelte"
+  import EditTablePopover from "./popovers/EditTablePopover.svelte"
-  import EditViewPopover from "./EditView.svelte"
+  import EditViewPopover from "./popovers/EditViewPopover.svelte"
   import { Heading } from "@budibase/bbui"
   import { Spacer } from "@budibase/bbui"
 

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;

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}>
+<Modal
-  <ModalTitle>{title}</ModalTitle>
+  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>

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>

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>

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

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

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"

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>
+{#if modalVisible}
-  <SettingsModal />
+  <SettingsModal bind:visible={modalVisible} />
-</Modal>
+{/if}
 
 <style>
   span:first-letter {

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">
+<Modal
-  <ModalTitle>Settings</ModalTitle>
+  title="Settings"
-  <Switcher headings={tabs} bind:value>
+  wide
-    <svelte:component this={selectedTab} />
+  bind:visible
-  </Switcher>
+  showConfirmButton={false}
-</div>
+  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);

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
+  <div class="buttons">
-    disabled={value !== 'DELETE' || loading}
+    <Button
-    red
+      primary
-    showCancelButton={false}
+      disabled={value !== 'DELETE' || loading}
-    confirmText="Delete Entire App"
+      red
-    onConfirm={deleteApp} />
+      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>

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">
+<Modal
-  <div class="sidebar">
+  bind:visible
-    {#each steps as { active, done }, i}
+  wide
-      <Indicator
+  padded={false}
-        active={$createAppStore.currentStep === i}
+  showCancelButton={false}
-        done={i < $createAppStore.currentStep}
+  showConfirmButton={false}>
-        step={i + 1} />
+  <div class="container">
-    {/each}
+    <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">
+</Modal>
-    <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>
 
 <style>
   .container {

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">
+<Modal
-
+  bind:visible
-  <div class="header">
+  title="Actions"
-    <Heading small dark>Actions</Heading>
+  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 {
+  a {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-s);
-    padding: var(--spacing-xl);
-    padding-top: var(--spacing-m);
-  }
-
-  .footer > a {
     flex: 1;
     color: var(--grey-5);
     font-size: var(--font-size-s);
     text-decoration: none;
   }
-
+  a:hover {
-  .footer > a:hover {
     color: var(--blue);
   }
 

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:change />
-    on:close={eventsModal.hide} />
+{/if}
-</Modal>
-
-<style>
-
-</style>

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -7,17 +7,15 @@
   import { Button } from "@budibase/bbui"
   import { Spacer } from "@budibase/bbui"
 
-  const newScreen = () => {
+  let modalVisible = false
-    newScreenPicker.show()
-  }
-
-  let newScreenPicker
 </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 {

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 = () => {
+  export let visible
-    dialog.show()
-  }
 
   let dialog
   let layoutComponents
@@ -41,17 +39,12 @@
         routeError = ""
       }
     }
-
+    if (routeError) {
-    if (routeError) return false
+      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">
+<Modal
-  <h2>New Screen</h2>
+  bind:visible
-  <Spacer extraLarge />
+  title="New Screen"
-
+  confirmText="Create Screen"
-  <div data-cy="new-screen-dialog">
+  onConfirm={save}>
-    <div class="bb-margin-xl">
+  <Input label="Name" bind:value={name} />
-      <Input label="Name" bind:value={name} />
+  <Input
-    </div>
+    label="Url"
-
+    error={routeError}
-    <div class="bb-margin-xl">
+    bind:value={route}
-      <Input
+    on:change={routeChanged} />
-        label="Url"
+  <Select label="Layout Component" bind:value={layoutComponent} secondary>
-        error={routeError}
+    {#each layoutComponents as { _component, name }}
-        bind:value={route}
+      <option value={_component}>{name}</option>
-        on:change={routeChanged} />
+    {/each}
-    </div>
+  </Select>
-
-    <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>
-
-<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>

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>

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}>
+{#if modalVisible}
-  <CreateAppModal {hasKey} />
+  <CreateAppModal bind:visible={modalVisible} {hasKey} />
-</Modal>
+{/if}
 
 {#await promise}
   <div class="spinner-container">