Move modal to BBUI and update usages

packages/builder/src/App.svelte

@@ -4,7 +4,6 @@
   import { routes } from "../routify/routes"
   import { initialise } from "builderStore"
   import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
-  import { ModalContainer } from "components/common/Modal"
 
   onMount(async () => {
     await initialise()
@@ -15,4 +14,3 @@
 
 <NotificationDisplay />
 <Router {routes} />
-<ModalContainer />

packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte

@@ -2,10 +2,9 @@
   import { onMount } from "svelte"
   import { automationStore } from "builderStore"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Button } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
-  import { Modal } from "components/common/Modal"
 
-  let modalVisible = false
+  let modal
 
   $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
 
@@ -15,9 +14,7 @@
 </script>
 
 <section>
-  <Button primary wide on:click={() => (modalVisible = true)}>
+  <Button primary wide on:click={modal.show}>Create New Automation</Button>
-    Create New Automation
-  </Button>
   <ul>
     {#each $automationStore.automations as automation}
       <li
@@ -30,9 +27,9 @@
     {/each}
   </ul>
 </section>
-{#if modalVisible}
+<Modal bind:this={modal}>
-  <CreateAutomationModal bind:visible={modalVisible} />
+  <CreateAutomationModal />
-{/if}
+</Modal>
 
 <style>
   section {

packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte

@@ -1,11 +1,8 @@
 <script>
   import { store, backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Input } from "@budibase/bbui"
+  import { Input, ModalContent } from "@budibase/bbui"
   import analytics from "analytics"
-  import { Modal } from "components/common/Modal"
-
-  export let visible
 
   let name
 
@@ -29,8 +26,7 @@
   }
 </script>
 
-<Modal
+<ModalContent
-  bind:visible
   title="Create Automation"
   confirmText="Create"
   onConfirm={createAutomation}
@@ -44,7 +40,7 @@
       <span>Learn about automations</span>
     </a>
   </div>
-</Modal>
+</ModalContent>
 
 <style>
   a {

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

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

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

@@ -3,13 +3,11 @@
   import { notifier } from "builderStore/store/notifications"
   import RecordFieldControl from "../RecordFieldControl.svelte"
   import * as api from "../api"
-  import { Modal } from "components/common/Modal"
+  import { ModalContent } from "@budibase/bbui"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
 
   export let record = {}
-  export let visible
 
-  let modal
   let errors = []
 
   $: creating = record?._id == null
@@ -35,8 +33,7 @@
   }
 </script>
 
-<Modal
+<ModalContent
-  bind:visible
   title={creating ? 'Create Row' : 'Edit Row'}
   confirmText={creating ? 'Create Row' : 'Save Row'}
   onConfirm={saveRecord}>
@@ -46,4 +43,4 @@
       <RecordFieldControl {meta} bind:value={record[key]} />
     </div>
   {/each}
-</Modal>
+</ModalContent>

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

@@ -1,22 +1,21 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon } from "@budibase/bbui"
+  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
   import CreateEditRecordModal from "../modals/CreateEditRecordModal.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 confirmDeleteDialog
-  let editModalVisible
+  let modal
 
   function showModal() {
     dropdown.hide()
-    editModalVisible = true
+    modal.show()
   }
 
   function showDelete() {
@@ -52,9 +51,9 @@
   okText="Delete Row"
   onOk={deleteRow}
   title="Confirm Delete" />
-{#if editModalVisible}
+<Modal bind:this={modal}>
-  <CreateEditRecordModal bind:visible={editModalVisible} record={row} />
+  <CreateEditRecordModal record={row} />
-{/if}
+</Modal>
 
 <style>
   .ri-more-line:hover {

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

@@ -2,25 +2,21 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Button, Input, Label } from "@budibase/bbui"
+  import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
-  import { Modal } from "components/common/Modal"
 
-  let visible = false
+  let modal
   let name
   let dataImport
-  let loading = false
 
   function resetState() {
     name = ""
     dataImport = undefined
-    loading = false
   }
 
   async function saveTable() {
-    loading = true
     const model = await backendUiStore.actions.models.save({
       name,
       schema: dataImport.schema || {},
@@ -29,28 +25,24 @@
     notifier.success(`Table ${name} created successfully.`)
     $goto(`./model/${model._id}`)
     analytics.captureEvent("Table Created", { name })
-    visible = false
-    resetState()
-  }
-
-  function onClosed() {
-    visible = false
-    resetState()
   }
 </script>
 
-<Button primary wide on:click={() => (visible = true)}>Create New Table</Button>
+<Button primary wide on:click={modal.show}>Create New Table</Button>
-<Modal
+<Modal bind:this={modal} on:hide={resetState}>
-  bind:visible
+  <ModalContent
-  {loading}
     title="Create Table"
-  on:hide={onClosed}
     confirmText="Create"
     onConfirm={saveTable}
     disabled={!name || (dataImport && !dataImport.valid)}>
-  <Input data-cy="table-name-input" thin label="Table Name" bind:value={name} />
+    <Input
+      data-cy="table-name-input"
+      thin
+      label="Table Name"
+      bind:value={name} />
     <div>
       <Label grey extraSmall>Create Table from CSV (Optional)</Label>
       <TableDataImport bind:dataImport />
     </div>
+  </ModalContent>
 </Modal>

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

@@ -1,33 +1,27 @@
 <script>
-  import { Modal } from "components/common/Modal"
+  import { Modal, ModalContent } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
   export let okText = "Confirm"
   export let cancelText = "Cancel"
-  export let onOk = () => {}
+  export let onOk = undefined
-  export let onCancel = () => {}
+  export let onCancel = undefined
 
-  let visible = false
+  let modal
 
   export const show = () => {
-    visible = true
+    modal.show()
   }
   export const hide = () => {
-    visible = false
+    modal.hide()
   }
 </script>
 
-<Modal
+<Modal bind:this={modal} on:hide={onCancel}>
-  id={title}
+  <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-  bind:visible
-  on:hide={onCancel}
-  {title}
-  confirmText={okText}
-  {cancelText}
-  onConfirm={onOk}
-  red>
     <div class="body">{body}</div>
+  </ModalContent>
 </Modal>
 
 <style>

packages/builder/src/components/settings/Link.svelte

@@ -1,17 +1,17 @@
 <script>
   import SettingsModal from "./SettingsModal.svelte"
   import { SettingsIcon } from "components/common/Icons/"
-  import { Modal } from "components/common/Modal"
+  import { Modal } from "@budibase/bbui"
 
-  let modalVisible
+  let modal
 </script>
 
-<span class="topnavitemright settings" on:click={() => (modalVisible = true)}>
+<span class="topnavitemright settings" on:click={modal.show}>
   <SettingsIcon />
 </span>
-{#if modalVisible}
+<Modal bind:this={modal} width="600px">
-  <SettingsModal bind:visible={modalVisible} />
+  <SettingsModal />
-{/if}
+</Modal>
 
 <style>
   span:first-letter {

packages/builder/src/components/settings/SettingsModal.svelte

@@ -1,7 +1,6 @@
 <script>
   import { General, Users, DangerZone, APIKeys } from "./tabs"
-  import { Switcher } from "@budibase/bbui"
+  import { Switcher, ModalContent } from "@budibase/bbui"
-  import { Modal } from "components/common/Modal"
 
   const tabs = [
     {
@@ -26,17 +25,13 @@
     },
   ]
 
-  export let visible
-
   let value = "GENERAL"
 
   $: selectedTab = tabs.find(tab => tab.key === value).component
 </script>
 
-<Modal
+<ModalContent
   title="Settings"
-  wide
-  bind:visible
   showConfirmButton={false}
   showCancelButton={false}>
   <div class="container">
@@ -44,7 +39,7 @@
       <svelte:component this={selectedTab} />
     </Switcher>
   </div>
-</Modal>
+</ModalContent>
 
 <style>
   .container :global(section > header) {

packages/builder/src/components/start/CreateAppModal.svelte

@@ -1,6 +1,5 @@
 <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,7 +17,6 @@
   //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
   export let template
 
@@ -201,13 +199,7 @@
   }
 </script>
 
-<Modal
+<div class="container">
-  bind:visible
-  wide
-  padded={false}
-  showCancelButton={false}
-  showConfirmButton={false}>
-  <div class="container">
   <div class="sidebar">
     {#each steps as { active, done }, i}
       <Indicator
@@ -261,8 +253,7 @@
       <span class="spinner-text">Creating your app...</span>
     </div>
   {/if}
-  </div>
+</div>
-</Modal>
 
 <style>
   .container {

packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

@@ -3,21 +3,18 @@
   import {
     TextButton,
     Button,
-    Heading,
     Body,
-    Spacer,
     DropdownMenu,
+    ModalContent,
   } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   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
@@ -60,12 +57,7 @@
   }
 </script>
 
-<Modal
+<ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>
-  bind:visible
-  title="Actions"
-  wide
-  confirmText="Save"
-  onConfirm={saveEventData}>
   <div slot="header">
     <div bind:this={addActionButton}>
       <TextButton text small blue on:click={addActionDropdown.show}>
@@ -121,7 +113,7 @@
   <div slot="footer">
     <a href="https://docs.budibase.com">Learn more about Actions</a>
   </div>
-</Modal>
+</ModalContent>
 
 <style>
   .action-header {

packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte

@@ -1,23 +1,17 @@
 <script>
   import { Button, Modal } from "@budibase/bbui"
   import EventEditorModal from "./EventEditorModal.svelte"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
   export let value
   export let name
 
-  let modalVisible = false
+  let modal
 </script>
 
-<Button secondary small on:click={() => (modalVisible = true)}>
+<Button secondary small on:click={modal.show}>Define Actions</Button>
-  Define Actions
-</Button>
 
-{#if modalVisible}
+<Modal bind:this={modal}>
-  <EventEditorModal
+  <EventEditorModal event={value} eventType={name} on:change />
-    bind:visible={modalVisible}
+</Modal>
-    event={value}
-    eventType={name}
-    on:change />
-{/if}

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

@@ -1,7 +1,7 @@
 <script>
   import { keys, map, includes, filter } from "lodash/fp"
   import EventEditorModal from "./EventEditorModal.svelte"
-  import { Modal } from "components/common/Modal"
+  import { Modal } from "@budibase/bbui"
 
   export const EVENT_TYPE = "event"
   export let component
@@ -47,11 +47,8 @@
   </form>
 </div>
 
-<Modal bind:this={modal}>
+<Modal bind:this={modal} width="600px">
-  <EventEditorModal
+  <EventEditorModal eventOptions={events} event={selectedEvent} />
-    eventOptions={events}
-    event={selectedEvent}
-    on:hide={() => (selectedEvent = null)} />
 </Modal>
 
 <style>

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

@@ -1,21 +1,18 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
+  import { store } from "builderStore"
   import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
-  import NewScreen from "components/userInterface/NewScreen.svelte"
+  import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button } from "@budibase/bbui"
+  import { Button, Spacer, Modal } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
 
-  let modalVisible = false
+  let modal
 </script>
 
 <PagesList />
 
 <Spacer medium />
-<Button primary wide on:click={() => (modalVisible = true)}>
+<Button primary wide on:click={modal.show}>Create New Screen</Button>
-  Create New Screen
-</Button>
 <Spacer medium />
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
@@ -23,38 +20,6 @@
   <ComponentsHierarchy screens={$store.screens} />
 </div>
 
-{#if modalVisible}
+<Modal bind:this={modal}>
-  <NewScreen bind:visible={modalVisible} />
+  <NewScreenModal />
-{/if}
+</Modal>
-
-<style>
-  .newscreen {
-    cursor: pointer;
-    border: 1px solid var(--purple);
-    border-radius: 5px;
-    width: 100%;
-    height: 36px;
-    padding: 8px 16px;
-    margin: 20px 0px 12px 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--purple);
-    color: var(--white);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 3ms;
-    outline: none;
-  }
-
-  .newscreen:hover {
-    background: var(--purple-light);
-    color: var(--purple);
-  }
-
-  .icon {
-    color: var(--ink);
-    font-size: 16px;
-    margin-right: 4px;
-  }
-</style>

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

@@ -1,11 +1,7 @@
 <script>
   import { store } from "builderStore"
-  import { pipe } from "components/common/core"
+  import { Input, Select, ModalContent } from "@budibase/bbui"
-  import { isRootComponent } from "./pagesParsing/searchComponents"
+  import { find, filter, some } from "lodash/fp"
-  import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select, Button, Spacer, ModalContent } from "@budibase/bbui"
-  import { find, filter, some, map, includes } from "lodash/fp"
-  import { assign } from "lodash"
 
   let dialog
   let layoutComponents

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

@@ -4,19 +4,20 @@
   import PageLayout from "./PageLayout.svelte"
   import PagesList from "./PagesList.svelte"
   import { store } from "builderStore"
-  import NewScreen from "./NewScreen.svelte"
+  import NewScreenModal from "./NewScreenModal.svelte"
-  import CurrentItemPreview from "./CurrentItemPreview.svelte"
+  import CurrentItemPreview from "./AppPreview/CurrentItemPreview.svelte"
   import SettingsView from "./SettingsView.svelte"
   import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
   import { AddIcon } from "components/common/Icons"
+  import { Modal } from "@budibase/bbui"
 
   let newScreenPicker
   let confirmDeleteDialog
   let componentToDelete = ""
   let settingsView
-  let modalVisible = false
+  let modal
 
   const settings = () => {
     settingsView.show()
@@ -26,30 +27,24 @@
 </script>
 
 <div class="root">
-
   <div class="ui-nav">
-
     <div class="pages-list-container">
       <div class="nav-header">
         <span class="navigator-title">Navigator</span>
-
         <span class="components-nav-page">Pages</span>
       </div>
-
       <div class="nav-items-container">
         <PagesList />
       </div>
     </div>
-
     <PageLayout layout={$store.pages[$store.currentPageName]} />
-
     <div class="components-list-container">
       <div class="nav-group-header">
         <span class="components-nav-header" style="margin-top: 0;">
           Screens
         </span>
         <div>
-          <button on:click={() => (modalVisible = true)}>
+          <button on:click={modal.show}>
             <AddIcon />
           </button>
         </div>
@@ -58,24 +53,21 @@
         <ComponentsHierarchy screens={$store.screens} />
       </div>
     </div>
-
   </div>
-
   <div class="preview-pane">
     <CurrentItemPreview />
   </div>
-
   {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
     <div class="components-pane">
       <ComponentsPaneSwitcher />
     </div>
   {/if}
-
 </div>
 
-{#if modalVisible}
+<Modal bind:this={modal}>
-  <NewScreen bind:visible={modalVisible} />
+  <NewScreenModal />
-{/if}
+</Modal>
+
 <SettingsView bind:this={settingsView} />
 
 <style>

packages/builder/src/pages/index.svelte

@@ -7,15 +7,14 @@
   import { get } from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading } from "@budibase/bbui"
+  import { Button, Heading, Modal } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
-  import { Modal } from "components/common/Modal"
 
   let promise = getApps()
   let hasKey
   let template
-  let modalVisible = false
+  let modal
 
   async function getApps() {
     const res = await get("/api/applications")
@@ -42,13 +41,13 @@
     }
 
     if (!keys.budibase) {
-      modalVisible = true
+      modal.show()
     }
   }
 
   function selectTemplate(newTemplate) {
     template = newTemplate
-    modalVisible = true
+    modal.show()
   }
 
   checkIfKeysAndApps()
@@ -57,9 +56,7 @@
 <div class="container">
   <div class="header">
     <Heading medium black>Welcome to the Budibase Beta</Heading>
-    <Button primary purple on:click={() => (modalVisible = true)}>
+    <Button primary purple on:click={modal.show}>Create New Web App</Button>
-      Create New Web App
-    </Button>
   </div>
 
   <div class="banner">
@@ -72,12 +69,12 @@
   <TemplateList onSelect={selectTemplate} />
 
   <AppList />
-
-  {#if modalVisible}
-    <CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
-  {/if}
 </div>
 
+<Modal bind:this={modal} padding={false} width="600px">
+  <CreateAppModal {hasKey} {template} />
+</Modal>
+
 <style>
   .container {
     display: grid;