From b3e23562f024782b2b446badd0966ed8e3ed0e13 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 8 Jun 2023 15:12:50 +0100
Subject: [PATCH] Update in builder preview to be a full screen overlay rather
 than opening in a new tab

---
 .../src/builderStore/store/frontend.js        |  1 +
 .../src/components/deploy/AppActions.svelte   |  5 +-
 .../_components/PreviewOverlay.svelte         | 69 +++++++++++++++++++
 .../builder/app/[application]/_layout.svelte  | 11 ++-
 packages/client/src/api/api.js                | 10 +--
 .../client/src/components/ClientApp.svelte    |  6 +-
 .../components/devtools/DevToolsHeader.svelte | 47 +++++++++----
 packages/client/src/index.js                  |  6 --
 .../client/src/stores/derived/currentRole.js  |  7 +-
 .../src/stores/derived/devToolsEnabled.js     | 10 +++
 packages/client/src/stores/derived/index.js   |  1 +
 packages/client/src/stores/devTools.js        | 10 +--
 12 files changed, 141 insertions(+), 42 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
 create mode 100644 packages/client/src/stores/derived/devToolsEnabled.js

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 7f83b2b464..d0414b5733 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -74,6 +74,7 @@ const INITIAL_FRONTEND_STATE = {
   propertyFocus: null,
   builderSidePanel: false,
   hasLock: true,
+  showPreview: false,
 
   // URL params
   selectedScreenId: null,
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 9813237317..a85eb5a154 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -62,7 +62,10 @@
   }
 
   const previewApp = () => {
-    window.open(`/${application}`)
+    store.update(state => ({
+      ...state,
+      showPreview: true,
+    }))
   }
 
   const viewApp = () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
new file mode 100644
index 0000000000..1715b54ba0
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
@@ -0,0 +1,69 @@
+<script>
+  import { onMount } from "svelte"
+  import { fade, fly } from "svelte/transition"
+  import { store, selectedScreen } from "builderStore"
+
+  $: route = $selectedScreen?.routing.route || "/"
+  $: src = `/${$store.appId}#${route}`
+
+  const close = () => {
+    store.update(state => ({
+      ...state,
+      showPreview: false,
+    }))
+  }
+
+  onMount(() => {
+    window.closePreview = () => {
+      store.update(state => ({
+        ...state,
+        showPreview: false,
+      }))
+    }
+  })
+</script>
+
+<div
+  class="preview-overlay"
+  transition:fade={{ duration: 260 }}
+  on:click|self={close}
+>
+  <div
+    class="container spectrum {$store.theme}"
+    transition:fly={{ duration: 260, y: 130 }}
+  >
+    <iframe {src} />
+  </div>
+</div>
+
+<style>
+  .preview-overlay {
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 999;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: stretch;
+    padding: 48px;
+  }
+  .container {
+    flex: 1 1 auto;
+    background: var(--spectrum-global-color-gray-75);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.5);
+  }
+  iframe {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border: none;
+    outline: none;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index f13aa3dab6..a13236c4f5 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -24,6 +24,7 @@
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
   import UserAvatars from "./_components/UserAvatars.svelte"
   import { TOUR_KEYS, TOURS } from "components/portal/onboarding/tours.js"
+  import PreviewOverlay from "./_components/PreviewOverlay.svelte"
 
   export let application
 
@@ -140,7 +141,7 @@
   <BuilderSidePanel />
 {/if}
 
-<div class="root">
+<div class="root" class:blur={$store.showPreview}>
   <div class="top-nav">
     {#if $store.initialised}
       <div class="topleftnav">
@@ -230,6 +231,10 @@
   {/await}
 </div>
 
+{#if $store.showPreview}
+  <PreviewOverlay />
+{/if}
+
 <svelte:window on:keydown={handleKeyDown} />
 <Modal bind:this={commandPaletteModal}>
   <CommandPalette />
@@ -248,6 +253,10 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    transition: filter 130ms ease-out;
+  }
+  .root.blur {
+    filter: blur(8px);
   }
 
   .top-nav {
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index 8d29d37bd6..b4a137f85d 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -1,7 +1,6 @@
 import { createAPIClient } from "@budibase/frontend-core"
-import { notificationStore } from "../stores/notification.js"
 import { authStore } from "../stores/auth.js"
-import { devToolsStore } from "../stores/devTools.js"
+import { notificationStore, devToolsEnabled, devToolsStore } from "../stores/"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({
@@ -25,9 +24,10 @@ export const API = createAPIClient({
     }
 
     // Add role header
-    const devToolsState = get(devToolsStore)
-    if (devToolsState.enabled && devToolsState.role) {
-      headers["x-budibase-role"] = devToolsState.role
+    const $devToolsStore = get(devToolsStore)
+    const $devToolsEnabled = get(devToolsEnabled)
+    if ($devToolsEnabled && $devToolsStore.role) {
+      headers["x-budibase-role"] = $devToolsStore.role
     }
   },
 
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index ce8722bb9b..51e0f4f550 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -17,6 +17,7 @@
     appStore,
     devToolsStore,
     environmentStore,
+    devToolsEnabled,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
   import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
@@ -47,10 +48,7 @@
   let permissionError = false
 
   // Determine if we should show devtools or not
-  $: showDevTools =
-    !$builderStore.inBuilder &&
-    $devToolsStore.enabled &&
-    !$routeStore.queryParams?.peek
+  $: showDevTools = $devToolsEnabled && !$routeStore.queryParams?.peek
 
   // Handle no matching route
   $: {
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index 4dfaae610f..fe02283841 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Heading, Button, Select } from "@budibase/bbui"
+  import { Heading, Button, Select, ActionButton } from "@budibase/bbui"
   import { devToolsStore } from "../../stores"
   import { getContext } from "svelte"
 
@@ -30,7 +30,7 @@
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
-  <Heading size="XS">Budibase App Preview</Heading>
+  <Heading size="XS">Preview</Heading>
   <Select
     quiet
     options={previewOptions}
@@ -40,36 +40,57 @@
     on:change={e => devToolsStore.actions.changeRole(e.detail)}
   />
   {#if !$context.device.mobile}
-    <Button
+    <ActionButton
       quiet
-      overBackground
       icon="Code"
       on:click={() => devToolsStore.actions.setVisible(!$devToolsStore.visible)}
     >
       {$devToolsStore.visible ? "Close" : "Open"} DevTools
-    </Button>
+    </ActionButton>
   {/if}
+  <ActionButton
+    quiet
+    icon="Close"
+    on:click={() => window.parent.closePreview?.()}
+  >
+    Exit preview
+  </ActionButton>
 </div>
 
 <style>
   .dev-preview-header {
-    flex: 0 0 50px;
-    height: 50px;
+    flex: 0 0 60px;
     display: grid;
     align-items: center;
-    background-color: var(--spectrum-global-color-blue-400);
+    background-color: black;
     padding: 0 var(--spacing-xl);
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: 1fr auto auto auto;
     grid-gap: var(--spacing-xl);
   }
   .dev-preview-header.mobile {
-    flex: 0 0 50px;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr auto auto;
   }
   .dev-preview-header :global(.spectrum-Heading),
   .dev-preview-header :global(.spectrum-Picker-menuIcon),
-  .dev-preview-header :global(.spectrum-Picker-label) {
-    color: white !important;
+  .dev-preview-header :global(.spectrum-Icon),
+  .dev-preview-header :global(.spectrum-Picker-label),
+  .dev-preview-header :global(.spectrum-ActionButton) {
+    font-weight: 600;
+    color: white;
+  }
+  .dev-preview-header :global(.spectrum-Picker) {
+    padding-left: 8px;
+    padding-right: 8px;
+    transition: background 130ms ease-out;
+    border-radius: 4px;
+  }
+  .dev-preview-header :global(.spectrum-ActionButton:hover),
+  .dev-preview-header :global(.spectrum-Picker:hover),
+  .dev-preview-header :global(.spectrum-Picker.is-open) {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .dev-preview-header :global(.spectrum-ActionButton:active) {
+    background: rgba(255, 255, 255, 0.2);
   }
   @media print {
     .dev-preview-header {
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 951c55270b..ef4e6dcefb 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -2,7 +2,6 @@ import ClientApp from "./components/ClientApp.svelte"
 import {
   builderStore,
   appStore,
-  devToolsStore,
   blockStore,
   componentStore,
   environmentStore,
@@ -51,11 +50,6 @@ const loadBudibase = async () => {
     await environmentStore.actions.fetchEnvironment()
   }
 
-  // Enable dev tools or not. We need to be using a dev app and not inside
-  // the builder preview to enable them.
-  const enableDevTools = !get(builderStore).inBuilder && get(appStore).isDevApp
-  devToolsStore.actions.setEnabled(enableDevTools)
-
   // Register handler for runtime events from the builder
   window.handleBuilderRuntimeEvent = (type, data) => {
     if (!window["##BUDIBASE_IN_BUILDER##"]) {
diff --git a/packages/client/src/stores/derived/currentRole.js b/packages/client/src/stores/derived/currentRole.js
index a56b26050c..8bb4c5a25d 100644
--- a/packages/client/src/stores/derived/currentRole.js
+++ b/packages/client/src/stores/derived/currentRole.js
@@ -2,13 +2,14 @@ import { derived } from "svelte/store"
 import { Constants } from "@budibase/frontend-core"
 import { devToolsStore } from "../devTools.js"
 import { authStore } from "../auth.js"
+import { devToolsEnabled } from "./devToolsEnabled.js"
 
 // Derive the current role of the logged-in user
 export const currentRole = derived(
-  [devToolsStore, authStore],
-  ([$devToolsStore, $authStore]) => {
+  [devToolsEnabled, devToolsStore, authStore],
+  ([$devToolsEnabled, $devToolsStore, $authStore]) => {
     return (
-      ($devToolsStore.enabled && $devToolsStore.role) ||
+      ($devToolsEnabled && $devToolsStore.role) ||
       $authStore?.roleId ||
       Constants.Roles.PUBLIC
     )
diff --git a/packages/client/src/stores/derived/devToolsEnabled.js b/packages/client/src/stores/derived/devToolsEnabled.js
new file mode 100644
index 0000000000..525f70e49b
--- /dev/null
+++ b/packages/client/src/stores/derived/devToolsEnabled.js
@@ -0,0 +1,10 @@
+import { derived } from "svelte/store"
+import { appStore } from "../app.js"
+import { builderStore } from "../builder.js"
+
+export const devToolsEnabled = derived(
+  [appStore, builderStore],
+  ([$appStore, $builderStore]) => {
+    return !$builderStore.inBuilder && $appStore.isDevApp
+  }
+)
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
index 4f6a6ab91d..d9a7743be6 100644
--- a/packages/client/src/stores/derived/index.js
+++ b/packages/client/src/stores/derived/index.js
@@ -3,3 +3,4 @@
 // separately we can keep our actual stores lean and performant.
 export { currentRole } from "./currentRole.js"
 export { dndComponentPath } from "./dndComponentPath.js"
+export { devToolsEnabled } from "./devToolsEnabled.js"
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
index 4abfe33b7b..32f3c8e617 100644
--- a/packages/client/src/stores/devTools.js
+++ b/packages/client/src/stores/devTools.js
@@ -4,7 +4,6 @@ import { authStore } from "./auth"
 import { API } from "../api"
 
 const initialState = {
-  enabled: false,
   visible: false,
   allowSelection: false,
   role: null,
@@ -13,13 +12,6 @@ const initialState = {
 const createDevToolStore = () => {
   const store = createLocalStorageStore("bb-devtools", initialState)
 
-  const setEnabled = enabled => {
-    store.update(state => ({
-      ...state,
-      enabled,
-    }))
-  }
-
   const setVisible = visible => {
     store.update(state => ({
       ...state,
@@ -46,7 +38,7 @@ const createDevToolStore = () => {
 
   return {
     subscribe: store.subscribe,
-    actions: { setEnabled, setVisible, setAllowSelection, changeRole },
+    actions: { setVisible, setAllowSelection, changeRole },
   }
 }