From a831b7f91e10126dd80cb8a5f7963272afd8e3ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 13:57:33 +0100
Subject: [PATCH 01/14] Add modal option to hide divider, and make title
 rendering optional

---
 packages/bbui/src/Modal/ModalContent.svelte | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index e6d4ab5f0f..5bf8ab599c 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -15,6 +15,7 @@
   export let showCloseIcon = true
   export let onConfirm = undefined
   export let disabled = false
+  export let showDivider = true
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -41,11 +42,17 @@
   aria-modal="true"
 >
   <div class="spectrum-Dialog-grid">
-    <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
-      {title}
-    </h1>
-
-    <Divider size="M" />
+    {#if title}
+      <h1
+        class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
+        class:noDivider={!showDivider}
+      >
+        {title}
+      </h1>
+      {#if showDivider}
+        <Divider size="M" />
+      {/if}
+    {/if}
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot />
@@ -96,6 +103,9 @@
   .spectrum-Dialog-heading {
     font-family: var(--font-sans);
   }
+  .spectrum-Dialog-heading.noDivider {
+    margin-bottom: 12px;
+  }
 
   .spectrum-Dialog-buttonGroup {
     gap: var(--spectrum-global-dimension-static-size-200);

From e711fffc45e08c96b691fc528de092297f47ebf0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 13:58:34 +0100
Subject: [PATCH 02/14] Break out notification component to standalone
 component

---
 .../bbui/src/Notification/Notification.svelte | 20 +++++++++++++
 .../Notification/NotificationDisplay.svelte   | 28 ++++---------------
 packages/bbui/src/index.js                    |  1 +
 3 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 packages/bbui/src/Notification/Notification.svelte

diff --git a/packages/bbui/src/Notification/Notification.svelte b/packages/bbui/src/Notification/Notification.svelte
new file mode 100644
index 0000000000..cebc859bda
--- /dev/null
+++ b/packages/bbui/src/Notification/Notification.svelte
@@ -0,0 +1,20 @@
+<script>
+  export let type = "info"
+  export let icon = "Info"
+  export let message = ""
+</script>
+
+<div class="spectrum-Toast spectrum-Toast--{type}">
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <div class="spectrum-Toast-body">
+    <div class="spectrum-Toast-content">{message || ""}</div>
+  </div>
+</div>
diff --git a/packages/bbui/src/Notification/NotificationDisplay.svelte b/packages/bbui/src/Notification/NotificationDisplay.svelte
index 89e7666cc7..9d96bf7e70 100644
--- a/packages/bbui/src/Notification/NotificationDisplay.svelte
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@@ -2,30 +2,16 @@
   import "@spectrum-css/toast/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { flip } from "svelte/animate"
-  import { fly } from "svelte/transition"
   import { notifications } from "../Stores/notifications"
+  import Notification from "./Notification.svelte"
+  import { fly } from "svelte/transition"
 </script>
 
 <Portal target=".modal-container">
   <div class="notifications">
     {#each $notifications as { type, icon, message, id } (id)}
-      <div
-        animate:flip
-        transition:fly={{ y: -30 }}
-        class="spectrum-Toast spectrum-Toast--{type} notification-offset"
-      >
-        {#if icon}
-          <svg
-            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-icon-18-{icon}" />
-          </svg>
-        {/if}
-        <div class="spectrum-Toast-body">
-          <div class="spectrum-Toast-content">{message}</div>
-        </div>
+      <div animate:flip transition:fly={{ y: -30 }}>
+        <Notification {type} {icon} {message} />
       </div>
     {/each}
   </div>
@@ -34,7 +20,7 @@
 <style>
   .notifications {
     position: fixed;
-    top: 10px;
+    top: 20px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -45,8 +31,6 @@
     justify-content: flex-start;
     align-items: center;
     pointer-events: none;
-  }
-  .notification-offset {
-    margin-bottom: 10px;
+    gap: 10px;
   }
 </style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 4d045e504b..3a491bfb54 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -38,6 +38,7 @@ export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"

From 7723a1ed60e59950893c7cfec277b6a804fdc25f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 13:59:04 +0100
Subject: [PATCH 03/14] Add checkbox to specify navigate action should open in
 a modal insteaf

---
 .../EventsEditor/actions/NavigateTo.svelte       | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index e713ccce4a..931c807ec9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Label } from "@budibase/bbui"
+  import { Label, Checkbox } from "@budibase/bbui"
   import { getBindableProperties } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
@@ -18,19 +18,17 @@
     on:change={value => (parameters.url = value.detail)}
     {bindings}
   />
+  <div />
+  <Checkbox text="Peek screen in modal" bind:value={parameters.peek} />
 </div>
 
 <style>
   .root {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
+    display: grid;
+    align-items: center;
+    gap: var(--spacing-m);
+    grid-template-columns: auto 1fr;
     max-width: 800px;
     margin: 0 auto;
   }
-
-  .root :global(> div) {
-    flex: 1;
-    margin-left: var(--spacing-l);
-  }
 </style>

From 9ad07f3cf7eadfaa4e0ffeec6e57822f2caa3fe4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 13:59:56 +0100
Subject: [PATCH 04/14] Add ability for layout to hide navigation when inside a
 peeked modal

---
 packages/standard-components/src/Layout.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte
index 24c9709895..08e0f290fe 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/packages/standard-components/src/Layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { Heading, Icon } from "@budibase/bbui"
+  import { routeStore } from "../../client/src/store"
 
   const { styleable, linkable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -26,6 +27,14 @@
     Small: "s",
   }
 
+  // Permanently go into peek mode if we ever get the peek flag
+  let isPeeking = false
+  $: {
+    if ($routeStore.queryParams?.peek) {
+      isPeeking = true
+    }
+  }
+
   $: validLinks = links?.filter(link => link.text && link.url) || []
   $: typeClass = navigationClasses[navigation] || "none"
   $: widthClass = widthClasses[width] || "l"
@@ -51,7 +60,7 @@
 
 <div class="layout layout--{typeClass}" use:styleable={$component.styles}>
   {#if typeClass !== "none"}
-    <div class="nav-wrapper" class:sticky>
+    <div class="nav-wrapper" class:sticky class:hidden={isPeeking}>
       <div class="nav nav--{typeClass} size--{widthClass}">
         <div class="nav-header">
           {#if validLinks?.length}
@@ -139,6 +148,9 @@
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
   }
+  .nav-wrapper.hidden {
+    display: none;
+  }
   .layout--top .nav-wrapper.sticky {
     position: sticky;
     top: 0;

From e5418deb89d438f60f0e6230b09209143f0f4b01 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 14:01:01 +0100
Subject: [PATCH 05/14] Add initial work on peeking screens, only show one
 notification at a time, use spectrum notifications

---
 packages/client/src/api/api.js                |  6 +-
 packages/client/src/api/automations.js        |  4 +-
 packages/client/src/api/queries.js            |  6 +-
 packages/client/src/api/rows.js               | 16 ++--
 .../client/src/components/ClientApp.svelte    |  2 +
 .../src/components/NotificationDisplay.svelte | 59 +++++---------
 .../src/components/PeekScreenDisplay.svelte   | 78 +++++++++++++++++++
 packages/client/src/components/Router.svelte  | 14 +++-
 packages/client/src/sdk.js                    |  2 +-
 packages/client/src/store/dataSource.js       | 11 ++-
 packages/client/src/store/index.js            |  1 +
 packages/client/src/store/notification.js     | 56 ++++++-------
 packages/client/src/store/peek.js             | 36 +++++++++
 packages/client/src/store/routes.js           |  8 ++
 packages/client/src/utils/buttonActions.js    | 15 ++--
 .../src/forms/AttachmentField.svelte          |  4 +-
 16 files changed, 221 insertions(+), 97 deletions(-)
 create mode 100644 packages/client/src/components/PeekScreenDisplay.svelte
 create mode 100644 packages/client/src/store/peek.js

diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index b915f14fd1..5449c3f219 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -38,15 +38,15 @@ const makeApiCall = async ({ method, url, body, json = true }) => {
       case 200:
         return response.json()
       case 401:
-        notificationStore.danger("Invalid credentials")
+        notificationStore.actions.error("Invalid credentials")
         return handleError(`Invalid credentials`)
       case 404:
-        notificationStore.danger("Not found")
+        notificationStore.actions.warning("Not found")
         return handleError(`${url}: Not Found`)
       case 400:
         return handleError(`${url}: Bad Request`)
       case 403:
-        notificationStore.danger(
+        notificationStore.actions.error(
           "Your session has expired, or you don't have permission to access that data"
         )
         return handleError(`${url}: Forbidden`)
diff --git a/packages/client/src/api/automations.js b/packages/client/src/api/automations.js
index 4dd5958568..2b989f85ae 100644
--- a/packages/client/src/api/automations.js
+++ b/packages/client/src/api/automations.js
@@ -9,7 +9,7 @@ export const triggerAutomation = async (automationId, fields) => {
     body: { fields },
   })
   res.error
-    ? notificationStore.danger("An error has occurred")
-    : notificationStore.success("Automation triggered")
+    ? notificationStore.actions.error("An error has occurred")
+    : notificationStore.actions.success("Automation triggered")
   return res
 }
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 715841f0fa..a6ef1a763f 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -7,7 +7,7 @@ import API from "./api"
 export const executeQuery = async ({ queryId, parameters }) => {
   const query = await API.get({ url: `/api/queries/${queryId}` })
   if (query?.datasourceId == null) {
-    notificationStore.danger("That query couldn't be found")
+    notificationStore.actions.error("That query couldn't be found")
     return
   }
   const res = await API.post({
@@ -17,9 +17,9 @@ export const executeQuery = async ({ queryId, parameters }) => {
     },
   })
   if (res.error) {
-    notificationStore.danger("An error has occurred")
+    notificationStore.actions.error("An error has occurred")
   } else if (!query.readable) {
-    notificationStore.success("Query executed successfully")
+    notificationStore.actions.success("Query executed successfully")
     dataSourceStore.actions.invalidateDataSource(query.datasourceId)
   }
   return res
diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js
index 14d696351d..21f8ec1f98 100644
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@@ -27,8 +27,8 @@ export const saveRow = async row => {
     body: row,
   })
   res.error
-    ? notificationStore.danger("An error has occurred")
-    : notificationStore.success("Row saved")
+    ? notificationStore.actions.error("An error has occurred")
+    : notificationStore.actions.success("Row saved")
 
   // Refresh related datasources
   dataSourceStore.actions.invalidateDataSource(row.tableId)
@@ -48,8 +48,8 @@ export const updateRow = async row => {
     body: row,
   })
   res.error
-    ? notificationStore.danger("An error has occurred")
-    : notificationStore.success("Row updated")
+    ? notificationStore.actions.error("An error has occurred")
+    : notificationStore.actions.success("Row updated")
 
   // Refresh related datasources
   dataSourceStore.actions.invalidateDataSource(row.tableId)
@@ -72,8 +72,8 @@ export const deleteRow = async ({ tableId, rowId, revId }) => {
     },
   })
   res.error
-    ? notificationStore.danger("An error has occurred")
-    : notificationStore.success("Row deleted")
+    ? notificationStore.actions.error("An error has occurred")
+    : notificationStore.actions.success("Row deleted")
 
   // Refresh related datasources
   dataSourceStore.actions.invalidateDataSource(tableId)
@@ -95,8 +95,8 @@ export const deleteRows = async ({ tableId, rows }) => {
     },
   })
   res.error
-    ? notificationStore.danger("An error has occurred")
-    : notificationStore.success(`${rows.length} row(s) deleted`)
+    ? notificationStore.actions.error("An error has occurred")
+    : notificationStore.actions.success(`${rows.length} row(s) deleted`)
 
   // Refresh related datasources
   dataSourceStore.actions.invalidateDataSource(tableId)
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 44ef49e239..fd1a464b75 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -4,6 +4,7 @@
   import Component from "./Component.svelte"
   import NotificationDisplay from "./NotificationDisplay.svelte"
   import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
+  import PeekScreenDisplay from "./PeekScreenDisplay.svelte"
   import Provider from "./Provider.svelte"
   import SDK from "../sdk"
   import {
@@ -100,6 +101,7 @@
         </div>
         <NotificationDisplay />
         <ConfirmationDisplay />
+        <PeekScreenDisplay />
         <!-- Key block needs to be outside the if statement or it breaks -->
         {#key $builderStore.selectedComponentId}
           {#if $builderStore.inBuilder}
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/NotificationDisplay.svelte
index 1a960c383a..f03fb692fd 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@@ -1,36 +1,34 @@
 <script>
-  import { flip } from "svelte/animate"
+  import { notificationStore } from "../store"
+  import { Notification } from "@budibase/bbui"
   import { fly } from "svelte/transition"
-  import { getContext } from "svelte"
-  const { notifications } = getContext("sdk")
-
-  export let themes = {
-    danger: "#E26D69",
-    success: "#84C991",
-    warning: "#f0ad4e",
-    info: "#5bc0de",
-    default: "#aaaaaa",
-  }
 </script>
 
 <div class="notifications">
-  {#each $notifications as notification (notification.id)}
-    <div
-      animate:flip
-      class="toast"
-      style="background: {themes[notification.type]};"
-      transition:fly={{ y: -30 }}
-    >
-      <div class="content">{notification.message}</div>
-      {#if notification.icon}<i class={notification.icon} />{/if}
-    </div>
-  {/each}
+  {#if $notificationStore}
+    {#key $notificationStore.id}
+      <div
+        in:fly={{
+          duration: 300,
+          y: -20,
+          delay: $notificationStore.delay ? 300 : 0,
+        }}
+        out:fly={{ y: -20, duration: 150 }}
+      >
+        <Notification
+          type={$notificationStore.type}
+          message={$notificationStore.message}
+          icon={$notificationStore.icon}
+        />
+      </div>
+    {/key}
+  {/if}
 </div>
 
 <style>
   .notifications {
     position: fixed;
-    top: 10px;
+    top: 20px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -42,19 +40,4 @@
     align-items: center;
     pointer-events: none;
   }
-
-  .toast {
-    flex: 0 0 auto;
-    margin-bottom: 10px;
-    border-radius: var(--border-radius-s);
-    /* The toasts now support being auto sized, so this static width could be removed */
-    width: 40vw;
-  }
-
-  .content {
-    padding: 10px;
-    display: block;
-    color: white;
-    font-weight: 600;
-  }
 </style>
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
new file mode 100644
index 0000000000..236a228c3b
--- /dev/null
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -0,0 +1,78 @@
+<script>
+  import { peekStore, dataSourceStore, routeStore } from "../store"
+  import { Modal, ModalContent, Button, Divider, Layout } from "@budibase/bbui"
+  import { onDestroy } from "svelte"
+
+  let iframe
+  let fullscreen = false
+
+  const invalidateDataSource = event => {
+    const { dataSourceId } = event.detail
+    dataSourceStore.actions.invalidateDataSource(dataSourceId)
+  }
+
+  const handleCancel = () => {
+    iframe.contentWindow.removeEventListener(
+      "invalidate-datasource",
+      invalidateDataSource
+    )
+    peekStore.actions.hidePeek()
+    fullscreen = false
+  }
+
+  const navigate = () => {
+    if ($peekStore.external) {
+      window.location = $peekStore.href
+    } else {
+      routeStore.actions.navigate($peekStore.url)
+    }
+    peekStore.actions.hidePeek()
+  }
+
+  $: {
+    if (iframe) {
+      iframe.contentWindow.addEventListener(
+        "invalidate-datasource",
+        invalidateDataSource
+      )
+    }
+  }
+
+  onDestroy(() => {
+    if (iframe) {
+      iframe.contentWindow.removeEventListener(
+        "invalidate-datasource",
+        invalidateDataSource
+      )
+    }
+  })
+</script>
+
+{#if $peekStore.showPeek}
+  <Modal fixed on:cancel={handleCancel}>
+    <ModalContent
+      cancelText="Close"
+      showConfirmButton={false}
+      size="XL"
+      title="Screen Peek"
+      showDivider={false}
+    >
+      <iframe title="Peek" bind:this={iframe} src={$peekStore.href} />
+      <div slot="footer">
+        <Button cta on:click={navigate}>Full screen</Button>
+      </div>
+    </ModalContent>
+  </Modal>
+{/if}
+
+<style>
+  iframe {
+    margin: 0 -40px;
+    border: none;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    border-top: 1px solid var(--spectrum-global-color-gray-300);
+    width: calc(100% + 80px);
+    height: 640px;
+    transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease;
+  }
+</style>
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index f3af2e94a4..5632d812b5 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,6 +1,6 @@
 <script>
   import { setContext, getContext } from "svelte"
-  import Router from "svelte-spa-router"
+  import Router, { querystring } from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
 
@@ -16,6 +16,18 @@
     id: $routeStore.routeSessionId,
   }
 
+  // Keep query params up to date
+  $: {
+    let queryParams = {}
+    if ($querystring) {
+      const urlSearchParams = new URLSearchParams($querystring)
+      for (const [key, value] of urlSearchParams) {
+        queryParams[key] = value
+      }
+    }
+    routeStore.actions.setQueryParams(queryParams)
+  }
+
   const getRouterConfig = routes => {
     let config = {}
     routes.forEach(route => {
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 70b5509a83..32b9441849 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -15,7 +15,7 @@ import { ActionTypes } from "./constants"
 export default {
   API,
   authStore,
-  notifications: notificationStore,
+  notificationStore,
   routeStore,
   screenStore,
   builderStore,
diff --git a/packages/client/src/store/dataSource.js b/packages/client/src/store/dataSource.js
index 2645c949a2..6f08604eae 100644
--- a/packages/client/src/store/dataSource.js
+++ b/packages/client/src/store/dataSource.js
@@ -67,12 +67,17 @@ export const createDataSourceStore = () => {
     const relatedInstances = get(store).filter(instance => {
       return instance.dataSourceId === dataSourceId
     })
-    if (relatedInstances?.length) {
-      notificationStore.blockNotifications(1000)
-    }
     relatedInstances?.forEach(instance => {
       instance.refresh()
     })
+
+    // Emit this as a window event, so parent screens which are iframing us in
+    // can also invalidate the same datasource
+    window.dispatchEvent(
+      new CustomEvent("invalidate-datasource", {
+        detail: { dataSourceId },
+      })
+    )
   }
 
   return {
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index 9a6c74e028..43de7bb6da 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -6,6 +6,7 @@ export { screenStore } from "./screens"
 export { builderStore } from "./builder"
 export { dataSourceStore } from "./dataSource"
 export { confirmationStore } from "./confirmation"
+export { peekStore } from "./peek"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js
index 6c40ca275f..bed0adbc49 100644
--- a/packages/client/src/store/notification.js
+++ b/packages/client/src/store/notification.js
@@ -1,56 +1,50 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
+import { generate } from "shortid"
 
 const NOTIFICATION_TIMEOUT = 3000
 
 const createNotificationStore = () => {
-  const timeoutIds = new Set()
-  const _notifications = writable([], () => {
+  let timeout
+  let block = false
+
+  const store = writable(null, () => {
     return () => {
-      // clear all the timers
-      timeoutIds.forEach(timeoutId => {
-        clearTimeout(timeoutId)
-      })
-      _notifications.set([])
+      clearTimeout(timeout)
     }
   })
-  let block = false
 
   const blockNotifications = (timeout = 1000) => {
     block = true
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default") => {
+  const send = (message, type = "info", icon) => {
     if (block) {
       return
     }
-    let _id = id()
-    _notifications.update(state => {
-      return [...state, { id: _id, type, message }]
+    store.set({
+      id: generate(),
+      type,
+      message,
+      icon,
+      delay: get(store) != null,
     })
-    const timeoutId = setTimeout(() => {
-      _notifications.update(state => {
-        return state.filter(({ id }) => id !== _id)
-      })
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      store.set(null)
     }, NOTIFICATION_TIMEOUT)
-    timeoutIds.add(timeoutId)
   }
 
-  const { subscribe } = _notifications
-
   return {
-    subscribe,
-    send,
-    danger: msg => send(msg, "danger"),
-    warning: msg => send(msg, "warning"),
-    info: msg => send(msg, "info"),
-    success: msg => send(msg, "success"),
-    blockNotifications,
+    subscribe: store.subscribe,
+    actions: {
+      info: msg => send(msg, "info", "Info"),
+      success: msg => send(msg, "success", "CheckmarkCircle"),
+      warning: msg => send(msg, "warning", "Alert"),
+      error: msg => send(msg, "error", "Alert"),
+      blockNotifications,
+    },
   }
 }
 
-function id() {
-  return "_" + Math.random().toString(36).substr(2, 9)
-}
-
 export const notificationStore = createNotificationStore()
diff --git a/packages/client/src/store/peek.js b/packages/client/src/store/peek.js
new file mode 100644
index 0000000000..df41f5daff
--- /dev/null
+++ b/packages/client/src/store/peek.js
@@ -0,0 +1,36 @@
+import { writable } from "svelte/store"
+
+const initialState = {
+  showPeek: false,
+  url: null,
+  href: null,
+  external: false,
+}
+
+const createPeekStore = () => {
+  const store = writable(initialState)
+
+  const showPeek = url => {
+    let href = url
+    let external = !url.startsWith("/")
+    if (!external) {
+      href = `${window.location.href.split("#")[0]}#${url}?peek=true`
+    }
+    store.set({
+      showPeek: true,
+      url,
+      href,
+      external,
+    })
+  }
+  const hidePeek = () => {
+    store.set(initialState)
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { showPeek, hidePeek },
+  }
+}
+
+export const peekStore = createPeekStore()
diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js
index d0e848b68e..932ce7f541 100644
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@@ -9,6 +9,7 @@ const createRouteStore = () => {
     activeRoute: null,
     routeSessionId: Math.random(),
     routerLoaded: false,
+    queryParams: {},
   }
   const store = writable(initialState)
 
@@ -41,6 +42,12 @@ const createRouteStore = () => {
       return state
     })
   }
+  const setQueryParams = queryParams => {
+    store.update(state => {
+      state.queryParams = queryParams
+      return state
+    })
+  }
   const setActiveRoute = route => {
     store.update(state => {
       state.activeRoute = state.routes.find(x => x.path === route)
@@ -58,6 +65,7 @@ const createRouteStore = () => {
       fetchRoutes,
       navigate,
       setRouteParams,
+      setQueryParams,
       setActiveRoute,
       setRouterLoaded,
     },
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index ea29180d36..d15aa17366 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -4,6 +4,7 @@ import {
   builderStore,
   confirmationStore,
   authStore,
+  peekStore,
 } from "../store"
 import { saveRow, deleteRow, executeQuery, triggerAutomation } from "../api"
 import { ActionTypes } from "../constants"
@@ -39,13 +40,17 @@ const triggerAutomationHandler = async action => {
 }
 
 const navigationHandler = action => {
-  const { url } = action.parameters
+  const { url, peek } = action.parameters
   if (url) {
-    const external = !url.startsWith("/")
-    if (external) {
-      window.location.href = url
+    if (peek) {
+      peekStore.actions.showPeek(url)
     } else {
-      routeStore.actions.navigate(action.parameters.url)
+      const external = !url.startsWith("/")
+      if (external) {
+        window.location.href = url
+      } else {
+        routeStore.actions.navigate(action.parameters.url)
+      }
     }
   }
 }
diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index fbc36faeca..0b454f9800 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -10,12 +10,12 @@
   let fieldState
   let fieldApi
 
-  const { API, notifications } = getContext("sdk")
+  const { API, notificationStore } = getContext("sdk")
   const formContext = getContext("form")
   const BYTES_IN_MB = 1000000
 
   const handleFileTooLarge = fileSizeLimit => {
-    notifications.warning(
+    notificationStore.actions.warning(
       `Files cannot exceed ${
         fileSizeLimit / BYTES_IN_MB
       } MB. Please try again with smaller files.`

From 1a0d0de406cd29cc691d67574222fe8c6adaeb81 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 14:13:16 +0100
Subject: [PATCH 06/14] Fix modal not shrinking to fit screen size

---
 packages/bbui/src/Modal/Modal.svelte        | 1 +
 packages/bbui/src/Modal/ModalContent.svelte | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index c93467bc75..9382fcfaab 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -122,6 +122,7 @@
     --spectrum-dialog-confirm-border-radius: var(
       --spectrum-global-dimension-size-100
     );
+    max-width: 100%;
   }
   :global(.spectrum--lightest .spectrum-Modal.inline) {
     border: var(--border-light);
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 5bf8ab599c..bba72e6093 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -79,8 +79,8 @@
       </div>
     {/if}
     {#if showCloseIcon}
-      <div class="close-icon" on:click={hide}>
-        <Icon hoverable name="Close" />
+      <div class="close-icon">
+        <Icon hoverable name="Close" on:click={cancel} />
       </div>
     {/if}
   </div>

From 952c27058a7d0b006d0ad53ae8d45528766b157c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 14:13:43 +0100
Subject: [PATCH 07/14] Make full screen button quiet in peek modals

---
 packages/client/src/components/PeekScreenDisplay.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index 236a228c3b..fc998f504a 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -59,7 +59,7 @@
     >
       <iframe title="Peek" bind:this={iframe} src={$peekStore.href} />
       <div slot="footer">
-        <Button cta on:click={navigate}>Full screen</Button>
+        <Button secondary quiet on:click={navigate}>Full screen</Button>
       </div>
     </ModalContent>
   </Modal>

From 8e82a0efd9ae81a78dbb48d7eadc905c389ce68b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 18:16:37 +0100
Subject: [PATCH 08/14] Revert to a cleaner modal with no title or buttons for
 screen peeking

---
 .../NavigationPanel/NewLayoutModal.svelte     |  4 ++--
 .../src/components/PeekScreenDisplay.svelte   | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
index 0ed9014eac..403cce1f74 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@@ -15,6 +15,6 @@
   }
 </script>
 
-<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
-  <Input thin label="Name" bind:value={name} />
+<ModalContent title="Create Layout" confirmText="Create" onConfirm="{save}">
+  <input thin label="Name" bind:value="{name}" />
 </ModalContent>
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index fc998f504a..566121209c 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -1,6 +1,6 @@
 <script>
   import { peekStore, dataSourceStore, routeStore } from "../store"
-  import { Modal, ModalContent, Button, Divider, Layout } from "@budibase/bbui"
+  import { Modal, ModalContent, Button } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 
   let iframe
@@ -51,28 +51,30 @@
 {#if $peekStore.showPeek}
   <Modal fixed on:cancel={handleCancel}>
     <ModalContent
-      cancelText="Close"
+      showCancelButton={false}
       showConfirmButton={false}
       size="XL"
-      title="Screen Peek"
       showDivider={false}
+      showCloseIcon={false}
     >
       <iframe title="Peek" bind:this={iframe} src={$peekStore.href} />
-      <div slot="footer">
-        <Button secondary quiet on:click={navigate}>Full screen</Button>
-      </div>
     </ModalContent>
   </Modal>
 {/if}
 
 <style>
   iframe {
-    margin: 0 -40px;
+    margin: -40px;
     border: none;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    border-top: 1px solid var(--spectrum-global-color-gray-300);
     width: calc(100% + 80px);
     height: 640px;
     transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease;
+    border-radius: var(--spectrum-global-dimension-size-100);
+  }
+
+  @media (max-width: 600px) {
+    iframe {
+      max-height: calc(100vh - 80px);
+    }
   }
 </style>

From def7f7a9498b5dcf5a58ebd4e6b1c957d35a4e1d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 2 Aug 2021 15:12:38 +0100
Subject: [PATCH 09/14] Add action to close peek modal and proxy notifications
 from the iframe

---
 .../actions/CloseScreenPeekModal.svelte       | 17 ++++++
 .../EventsEditor/actions/index.js             |  5 ++
 .../src/components/PeekScreenDisplay.svelte   | 58 +++++++++++--------
 packages/client/src/store/notification.js     | 13 +++++
 packages/client/src/store/routes.js           |  7 ++-
 packages/client/src/utils/buttonActions.js    |  7 +++
 6 files changed, 83 insertions(+), 24 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte
new file mode 100644
index 0000000000..5651590bd2
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { Body } from "@budibase/bbui"
+</script>
+
+<div class="root">
+  <Body size="S">This action doesn't require any additional settings.</Body>
+  <Body size="S">
+    This action won't do anything if there isn't a screen-peek modal open.
+  </Body>
+</div>
+
+<style>
+  .root {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index bfbf97701b..262f9362e4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -6,6 +6,7 @@ import TriggerAutomation from "./TriggerAutomation.svelte"
 import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
+import CloseScreenPeekModal from "./CloseScreenPeekModal.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -47,4 +48,8 @@ export default [
     name: "Clear Form",
     component: ClearForm,
   },
+  {
+    name: "Close Screen-Peek Modal",
+    component: CloseScreenPeekModal,
+  },
 ]
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index 566121209c..7d144d270e 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -1,49 +1,61 @@
 <script>
-  import { peekStore, dataSourceStore, routeStore } from "../store"
+  import { peekStore, dataSourceStore, notificationStore } from "../store"
   import { Modal, ModalContent, Button } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 
   let iframe
-  let fullscreen = false
+  let listenersAttached = false
 
   const invalidateDataSource = event => {
     const { dataSourceId } = event.detail
     dataSourceStore.actions.invalidateDataSource(dataSourceId)
   }
 
+  const proxyNotification = event => {
+    const { message, type, icon } = event.detail
+    notificationStore.actions.send(message, type, icon)
+  }
+
+  const attachListeners = () => {
+    // Mirror datasource invalidation to keep the parent window up to date
+    iframe.contentWindow.addEventListener(
+      "invalidate-datasource",
+      invalidateDataSource
+    )
+    // Listen for a close event to close the screen peek
+    iframe.contentWindow.addEventListener(
+      "close-screen-peek",
+      peekStore.actions.hidePeek
+    )
+    // Proxy notifications back to the parent window instead of iframe
+    iframe.contentWindow.addEventListener("notification", proxyNotification)
+  }
+
   const handleCancel = () => {
+    peekStore.actions.hidePeek()
     iframe.contentWindow.removeEventListener(
       "invalidate-datasource",
       invalidateDataSource
     )
-    peekStore.actions.hidePeek()
-    fullscreen = false
-  }
-
-  const navigate = () => {
-    if ($peekStore.external) {
-      window.location = $peekStore.href
-    } else {
-      routeStore.actions.navigate($peekStore.url)
-    }
-    peekStore.actions.hidePeek()
+    iframe.contentWindow.removeEventListener(
+      "close-screen-peek",
+      peekStore.actions.hidePeek
+    )
+    iframe.contentWindow.removeEventListener("notification", proxyNotification)
   }
 
   $: {
-    if (iframe) {
-      iframe.contentWindow.addEventListener(
-        "invalidate-datasource",
-        invalidateDataSource
-      )
+    if (iframe && !listenersAttached) {
+      attachListeners()
+      listenersAttached = true
+    } else if (!iframe) {
+      listenersAttached = false
     }
   }
 
   onDestroy(() => {
     if (iframe) {
-      iframe.contentWindow.removeEventListener(
-        "invalidate-datasource",
-        invalidateDataSource
-      )
+      handleCancel()
     }
   })
 </script>
@@ -53,7 +65,7 @@
     <ModalContent
       showCancelButton={false}
       showConfirmButton={false}
-      size="XL"
+      size="L"
       showDivider={false}
       showCloseIcon={false}
     >
diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js
index bed0adbc49..e3af9aacd1 100644
--- a/packages/client/src/store/notification.js
+++ b/packages/client/src/store/notification.js
@@ -1,5 +1,6 @@
 import { writable, get } from "svelte/store"
 import { generate } from "shortid"
+import { routeStore } from "./routes"
 
 const NOTIFICATION_TIMEOUT = 3000
 
@@ -22,6 +23,17 @@ const createNotificationStore = () => {
     if (block) {
       return
     }
+
+    // If peeking, pass notifications back to parent window
+    if (get(routeStore).queryParams?.peek) {
+      window.dispatchEvent(
+        new CustomEvent("notification", {
+          detail: { message, type, icon },
+        })
+      )
+      return
+    }
+
     store.set({
       id: generate(),
       type,
@@ -38,6 +50,7 @@ const createNotificationStore = () => {
   return {
     subscribe: store.subscribe,
     actions: {
+      send,
       info: msg => send(msg, "info", "Info"),
       success: msg => send(msg, "success", "CheckmarkCircle"),
       warning: msg => send(msg, "warning", "Alert"),
diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js
index 932ce7f541..e6473fb40c 100644
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@@ -44,7 +44,12 @@ const createRouteStore = () => {
   }
   const setQueryParams = queryParams => {
     store.update(state => {
-      state.queryParams = queryParams
+      state.queryParams = {
+        ...queryParams,
+        // Never unset the peek param - screen peek modals should always be
+        // in a peek state, even if they navigate to a different page
+        peek: queryParams.peek || state.queryParams?.peek,
+      }
       return state
     })
   }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index d15aa17366..03ed5ce2d0 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -99,6 +99,12 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
+const closeScreenPeekModalHandler = () => {
+  // Emit this as a window event, so parent screens which are iframing us in
+  // can close the modal
+  window.dispatchEvent(new Event("close-screen-peek"))
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
@@ -109,6 +115,7 @@ const handlerMap = {
   ["Refresh Datasource"]: refreshDatasourceHandler,
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
+  ["Close Screen-Peek Modal"]: closeScreenPeekModalHandler,
 }
 
 const confirmTextMap = {

From 33431a5edc5a0a4c97abb95632d3c2c27cbcf6dd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 2 Aug 2021 15:50:59 +0100
Subject: [PATCH 10/14] Rename visual actions from 'peek' to just 'open' screen
 in modal

---
 ...{CloseScreenPeekModal.svelte => CloseScreenModal.svelte} | 0
 .../PropertyControls/EventsEditor/actions/NavigateTo.svelte | 2 +-
 .../PropertyControls/EventsEditor/actions/index.js          | 6 +++---
 packages/client/src/components/PeekScreenDisplay.svelte     | 4 ++--
 packages/client/src/utils/buttonActions.js                  | 6 +++---
 5 files changed, 9 insertions(+), 9 deletions(-)
 rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/{CloseScreenPeekModal.svelte => CloseScreenModal.svelte} (100%)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
similarity index 100%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index 931c807ec9..ba4ccdb212 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -19,7 +19,7 @@
     {bindings}
   />
   <div />
-  <Checkbox text="Peek screen in modal" bind:value={parameters.peek} />
+  <Checkbox text="Open screen in modal" bind:value={parameters.peek} />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 262f9362e4..c769a2300f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -6,7 +6,7 @@ import TriggerAutomation from "./TriggerAutomation.svelte"
 import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
-import CloseScreenPeekModal from "./CloseScreenPeekModal.svelte"
+import CloseScreenModal from "./CloseScreenModal.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -49,7 +49,7 @@ export default [
     component: ClearForm,
   },
   {
-    name: "Close Screen-Peek Modal",
-    component: CloseScreenPeekModal,
+    name: "Close Screen Modal",
+    component: CloseScreenModal,
   },
 ]
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index 7d144d270e..2d4a08d2b5 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -24,7 +24,7 @@
     )
     // Listen for a close event to close the screen peek
     iframe.contentWindow.addEventListener(
-      "close-screen-peek",
+      "close-screen-modal",
       peekStore.actions.hidePeek
     )
     // Proxy notifications back to the parent window instead of iframe
@@ -38,7 +38,7 @@
       invalidateDataSource
     )
     iframe.contentWindow.removeEventListener(
-      "close-screen-peek",
+      "close-screen-modal",
       peekStore.actions.hidePeek
     )
     iframe.contentWindow.removeEventListener("notification", proxyNotification)
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 03ed5ce2d0..408b35a705 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -99,10 +99,10 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
-const closeScreenPeekModalHandler = () => {
+const closeScreenModalHandler = () => {
   // Emit this as a window event, so parent screens which are iframing us in
   // can close the modal
-  window.dispatchEvent(new Event("close-screen-peek"))
+  window.dispatchEvent(new Event("close-screen-modal"))
 }
 
 const handlerMap = {
@@ -115,7 +115,7 @@ const handlerMap = {
   ["Refresh Datasource"]: refreshDatasourceHandler,
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
-  ["Close Screen-Peek Modal"]: closeScreenPeekModalHandler,
+  ["Close Screen Modal"]: closeScreenModalHandler,
 }
 
 const confirmTextMap = {

From 2eba603ad83f1736d28745f1709197888aa6f685 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 3 Aug 2021 12:02:20 +0100
Subject: [PATCH 11/14] Darken modal underlay and add actions above screen
 modal to allow entering full screen or closing

---
 packages/bbui/src/Modal/Modal.svelte          |  3 ++
 .../src/components/PeekScreenDisplay.svelte   | 36 +++++++++++++++----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 9382fcfaab..f805dec0ad 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -70,6 +70,7 @@
     >
       <div class="modal-wrapper" on:mousedown|self={cancel}>
         <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+          <slot name="outside" />
           <div
             use:focusFirstInput
             class="spectrum-Modal is-open"
@@ -93,6 +94,7 @@
     z-index: 999;
     overflow: auto;
     overflow-x: hidden;
+    background: rgba(0, 0, 0, 0.75);
   }
 
   .modal-wrapper {
@@ -112,6 +114,7 @@
     justify-content: center;
     align-items: flex-start;
     width: 0;
+    position: relative;
   }
 
   .spectrum-Modal {
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index 2d4a08d2b5..d2c71e2eaa 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -1,6 +1,11 @@
 <script>
-  import { peekStore, dataSourceStore, notificationStore } from "../store"
-  import { Modal, ModalContent, Button } from "@budibase/bbui"
+  import {
+    peekStore,
+    dataSourceStore,
+    notificationStore,
+    routeStore,
+  } from "../store"
+  import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 
   let iframe
@@ -44,6 +49,11 @@
     iframe.contentWindow.removeEventListener("notification", proxyNotification)
   }
 
+  const handleFullscreen = () => {
+    routeStore.actions.navigate($peekStore.url)
+    handleCancel()
+  }
+
   $: {
     if (iframe && !listenersAttached) {
       attachListeners()
@@ -62,6 +72,14 @@
 
 {#if $peekStore.showPeek}
   <Modal fixed on:cancel={handleCancel}>
+    <div class="actions spectrum--darkest" slot="outside">
+      <ActionButton size="S" quiet icon="OpenIn" on:click={handleFullscreen}>
+        Full screen
+      </ActionButton>
+      <ActionButton size="S" quiet icon="Close" on:click={handleCancel}>
+        Close
+      </ActionButton>
+    </div>
     <ModalContent
       showCancelButton={false}
       showConfirmButton={false}
@@ -80,13 +98,19 @@
     border: none;
     width: calc(100% + 80px);
     height: 640px;
+    max-height: calc(100vh - 120px);
     transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease;
     border-radius: var(--spectrum-global-dimension-size-100);
   }
 
-  @media (max-width: 600px) {
-    iframe {
-      max-height: calc(100vh - 80px);
-    }
+  .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    width: 640px;
+    max-width: 100%;
   }
 </style>

From e88e1da2af533b7ed7ae68cff6185beed35cc56a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 3 Aug 2021 12:22:06 +0100
Subject: [PATCH 12/14] Fix going full-screen when opening an external link in
 a modal

---
 packages/client/src/components/PeekScreenDisplay.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index d2c71e2eaa..6d6e8c39c7 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -50,8 +50,12 @@
   }
 
   const handleFullscreen = () => {
-    routeStore.actions.navigate($peekStore.url)
-    handleCancel()
+    if ($peekStore.external) {
+      window.location = $peekStore.href
+    } else {
+      routeStore.actions.navigate($peekStore.url)
+      handleCancel()
+    }
   }
 
   $: {

From 6b2f70ce0582674cbde349b87ffd8d868d8dbb5a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 3 Aug 2021 12:22:16 +0100
Subject: [PATCH 13/14] Fix text of close screen modal action

---
 .../EventsEditor/actions/CloseScreenModal.svelte                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
index 5651590bd2..0afb8dd46e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
@@ -5,7 +5,7 @@
 <div class="root">
   <Body size="S">This action doesn't require any additional settings.</Body>
   <Body size="S">
-    This action won't do anything if there isn't a screen-peek modal open.
+    This action won't do anything if there isn't a screen modal open.
   </Body>
 </div>
 

From b768e2991fe21883ffd3b8141ea2a956e34a3a99 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 3 Aug 2021 12:52:01 +0100
Subject: [PATCH 14/14] Lint

---
 .../components/design/NavigationPanel/NewLayoutModal.svelte   | 4 ++--
 packages/client/src/store/dataSource.js                       | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
index 403cce1f74..0ed9014eac 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@@ -15,6 +15,6 @@
   }
 </script>
 
-<ModalContent title="Create Layout" confirmText="Create" onConfirm="{save}">
-  <input thin label="Name" bind:value="{name}" />
+<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
+  <Input thin label="Name" bind:value={name} />
 </ModalContent>
diff --git a/packages/client/src/store/dataSource.js b/packages/client/src/store/dataSource.js
index 6f08604eae..963548158d 100644
--- a/packages/client/src/store/dataSource.js
+++ b/packages/client/src/store/dataSource.js
@@ -1,5 +1,4 @@
 import { writable, get } from "svelte/store"
-import { notificationStore } from "./notification"
 
 export const createDataSourceStore = () => {
   const store = writable([])