From 1b3317a114ffc54cfa0d29f0dc2294d627c365db Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 26 Nov 2021 13:25:02 +0000
Subject: [PATCH] Add devtools to app preview and add ability to preview apps
 as different roles

---
 packages/auth/src/constants.js                |  1 +
 packages/bbui/src/Layout/Layout.svelte        |  8 ++
 packages/bbui/src/Tabs/Tabs.svelte            |  2 +-
 packages/client/src/api/api.js                |  5 +-
 .../client/src/components/ClientApp.svelte    | 75 +++++++++++-----
 .../client/src/components/Component.svelte    | 30 +++++--
 .../client/src/components/app/Layout.svelte   |  1 +
 .../src/components/app/forms/FormStep.svelte  |  4 +-
 .../src/components/devtools/DevTools.svelte   | 57 ++++++++++++
 .../devtools/DevToolsComponentTab.svelte      | 87 +++++++++++++++++++
 .../components/devtools/DevToolsHeader.svelte | 72 +++++++++++++++
 .../components/devtools/DevToolsStat.svelte   | 23 +++++
 .../devtools/DevToolsStatsTab.svelte          | 24 +++++
 .../src/components/preview/SettingsBar.svelte |  8 +-
 .../components/preview/SettingsButton.svelte  |  4 +-
 .../preview/SettingsColorPicker.svelte        |  4 +-
 .../components/preview/SettingsPicker.svelte  |  4 +-
 packages/client/src/stores/app.js             | 10 ++-
 packages/client/src/stores/auth.js            | 12 ++-
 packages/client/src/stores/builder.js         | 55 ++++--------
 packages/client/src/stores/components.js      | 65 ++++++++++++++
 packages/client/src/stores/devTools.js        | 47 ++++++++++
 packages/client/src/stores/index.js           |  2 +
 packages/client/src/stores/screens.js         |  1 -
 .../static/templates/BudibaseApp.svelte       |  3 +
 packages/server/src/middleware/currentapp.js  | 15 ++++
 26 files changed, 530 insertions(+), 89 deletions(-)
 create mode 100644 packages/client/src/components/devtools/DevTools.svelte
 create mode 100644 packages/client/src/components/devtools/DevToolsComponentTab.svelte
 create mode 100644 packages/client/src/components/devtools/DevToolsHeader.svelte
 create mode 100644 packages/client/src/components/devtools/DevToolsStat.svelte
 create mode 100644 packages/client/src/components/devtools/DevToolsStatsTab.svelte
 create mode 100644 packages/client/src/stores/components.js
 create mode 100644 packages/client/src/stores/devTools.js

diff --git a/packages/auth/src/constants.js b/packages/auth/src/constants.js
index 9892275bec..c7a0c20a41 100644
--- a/packages/auth/src/constants.js
+++ b/packages/auth/src/constants.js
@@ -15,6 +15,7 @@ exports.Headers = {
   API_VER: "x-budibase-api-version",
   APP_ID: "x-budibase-app-id",
   TYPE: "x-budibase-type",
+  PREVIEW_ROLE: "x-budibase-role",
   TENANT_ID: "x-budibase-tenant-id",
 }
 
diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
index af60675582..bd564ff40e 100644
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -36,6 +36,10 @@
     padding-left: var(--spacing-l);
     padding-right: var(--spacing-l);
   }
+  .paddingX-XL {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
   .paddingY-S {
     padding-top: var(--spacing-s);
     padding-bottom: var(--spacing-s);
@@ -48,6 +52,10 @@
     padding-top: var(--spacing-l);
     padding-bottom: var(--spacing-l);
   }
+  .paddingY-XL {
+    padding-top: var(--spacing-xl);
+    padding-bottom: var(--spacing-xl);
+  }
   .gap-XXS {
     grid-gap: var(--spacing-xs);
   }
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 2a4017e605..5fdaf0e434 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -88,7 +88,7 @@
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
     position: relative;
-    border-bottom: var(--border-light);
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
   }
   .spectrum-Tabs-content {
     margin-top: var(--spectrum-global-dimension-static-size-150);
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index 2476030eb0..45af9e302b 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -1,5 +1,6 @@
-import { notificationStore } from "stores"
+import { notificationStore, devToolsStore } from "stores"
 import { ApiVersion } from "constants"
+import { get } from "svelte/store"
 
 /**
  * API cache for cached request responses.
@@ -21,12 +22,14 @@ const makeApiCall = async ({ method, url, body, json = true }) => {
   try {
     const requestBody = json ? JSON.stringify(body) : body
     const inBuilder = window["##BUDIBASE_IN_BUILDER##"]
+    const role = get(devToolsStore).role
     const headers = {
       Accept: "application/json",
       "x-budibase-app-id": window["##BUDIBASE_APP_ID##"],
       "x-budibase-api-version": ApiVersion,
       ...(json && { "Content-Type": "application/json" }),
       ...(!inBuilder && { "x-budibase-type": "client" }),
+      ...(role && { "x-budibase-role": role }),
     }
     const response = await fetch(url, {
       method,
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 98dec9667b..ee15cfa9c7 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -12,6 +12,8 @@
     routeStore,
     builderStore,
     themeStore,
+    appStore,
+    devToolsStore,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
   import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
@@ -26,6 +28,8 @@
   import DNDHandler from "components/preview/DNDHandler.svelte"
   import ErrorSVG from "builder/assets/error.svg"
   import KeyboardManager from "components/preview/KeyboardManager.svelte"
+  import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
+  import DevTools from "components/devtools/DevTools.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -64,10 +68,12 @@
         // The user is not logged in, redirect them to login
         const returnUrl = `${window.location.pathname}${window.location.hash}`
         const encodedUrl = encodeURIComponent(returnUrl)
-        window.location = `/builder/auth/login?returnUrl=${encodedUrl}`
+        // window.location = `/builder/auth/login?returnUrl=${encodedUrl}`
       }
     }
   }
+
+  $: isDevPreview = $appStore.isDevApp && !$builderStore.inBuilder
 </script>
 
 {#if dataLoaded}
@@ -106,29 +112,39 @@
             >
               <!-- Actual app -->
               <div id="app-root">
-                <CustomThemeWrapper>
-                  {#key $screenStore.activeLayout._id}
-                    <Component
-                      isLayout
-                      instance={$screenStore.activeLayout.props}
-                    />
-                  {/key}
+                {#if isDevPreview}
+                  <DevToolsHeader />
+                {/if}
 
-                  <!--
-                    Flatpickr needs to be inside the theme wrapper.
-                    It also needs its own container because otherwise it hijacks
-                    key events on the whole page. It is painful to work with.
-                  -->
-                  <div id="flatpickr-root" />
+                <div id="app-body">
+                  <CustomThemeWrapper>
+                    {#key $screenStore.activeLayout._id}
+                      <Component
+                        isLayout
+                        instance={$screenStore.activeLayout.props}
+                      />
+                    {/key}
 
-                  <!-- Modal container to ensure they sit on top -->
-                  <div class="modal-container" />
+                    <!--
+                      Flatpickr needs to be inside the theme wrapper.
+                      It also needs its own container because otherwise it hijacks
+                      key events on the whole page. It is painful to work with.
+                    -->
+                    <div id="flatpickr-root" />
 
-                  <!-- Layers on top of app -->
-                  <NotificationDisplay />
-                  <ConfirmationDisplay />
-                  <PeekScreenDisplay />
-                </CustomThemeWrapper>
+                    <!-- Modal container to ensure they sit on top -->
+                    <div class="modal-container" />
+
+                    <!-- Layers on top of app -->
+                    <NotificationDisplay />
+                    <ConfirmationDisplay />
+                    <PeekScreenDisplay />
+                  </CustomThemeWrapper>
+
+                  {#if $devToolsStore.visible}
+                    <DevTools />
+                  {/if}
+                </div>
               </div>
 
               <!-- Selection indicators should be bounded by device -->
@@ -136,9 +152,11 @@
                 We don't want to key these by componentID as they control their own
                 re-mounting to avoid flashes.
               -->
-              {#if $builderStore.inBuilder}
-                <SelectionIndicator />
+              <SelectionIndicator />
+              {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
                 <HoverIndicator />
+              {/if}
+              {#if $builderStore.inBuilder}
                 <DNDHandler />
               {/if}
             </div>
@@ -176,6 +194,17 @@
     overflow: hidden;
     height: 100%;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  #app-body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
   .error {
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index d8cdbd3f53..e8ea08cf85 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -3,12 +3,12 @@
 </script>
 
 <script>
-  import { getContext, setContext } from "svelte"
-  import { writable } from "svelte/store"
+  import { getContext, setContext, onMount, onDestroy } from "svelte"
+  import { get, writable } from "svelte/store"
   import * as AppComponents from "components/app"
   import Router from "./Router.svelte"
   import { enrichProps, propsAreSame } from "utils/componentProps"
-  import { builderStore } from "stores"
+  import { builderStore, devToolsStore, componentStore } from "stores"
   import { hashString } from "utils/helpers"
   import Manifest from "manifest.json"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
@@ -54,8 +54,8 @@
   const insideScreenslot = !!getContext("screenslot")
 
   // Create component context
-  const componentStore = writable({})
-  setContext("component", componentStore)
+  const store = writable({})
+  setContext("component", store)
 
   // Extract component instance info
   $: constructor = getComponentConstructor(instance._component)
@@ -69,7 +69,7 @@
   // leading to the selected component
   $: selected =
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
-  $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
+  $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
   $: inDragPath = inSelectedPath && $builderStore.editMode
 
   // Derive definition properties which can all be optional, so need to be
@@ -80,10 +80,12 @@
 
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
-  $: interactive =
+  $: builderInteractive =
     $builderStore.inBuilder &&
     ($builderStore.previewType === "layout" || insideScreenslot) &&
     !isBlock
+  $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
+  $: interactive = builderInteractive || devToolsInteractive
   $: editing = editable && selected && $builderStore.editMode
   $: draggable = !inDragPath && interactive && !isLayout && !isScreen
   $: droppable = interactive && !isLayout && !isScreen
@@ -112,7 +114,7 @@
   $: renderKey = getRenderKey(id, editing)
 
   // Update component context
-  $: componentStore.set({
+  $: store.set({
     id,
     children: children.length,
     styles: {
@@ -282,6 +284,18 @@
   const getRenderKey = (id, editing) => {
     return hashString(`${id}-${editing}`)
   }
+
+  onMount(() => {
+    componentStore.actions.registerInstance(id, {
+      getSettings: () => cachedSettings,
+      getRawSettings: () => rawSettings,
+      getDataContext: () => get(context),
+    })
+  })
+
+  onDestroy(() => {
+    componentStore.actions.unregisterInstance(id)
+  })
 </script>
 
 {#key renderKey}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 87e5ac3b5b..44beb6d1c2 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -154,6 +154,7 @@
     justify-content: flex-start;
     align-items: stretch;
     height: 100%;
+    flex: 1 1 auto;
     overflow: auto;
     overflow-x: hidden;
     position: relative;
diff --git a/packages/client/src/components/app/forms/FormStep.svelte b/packages/client/src/components/app/forms/FormStep.svelte
index 58300287a8..4441f515ee 100644
--- a/packages/client/src/components/app/forms/FormStep.svelte
+++ b/packages/client/src/components/app/forms/FormStep.svelte
@@ -5,7 +5,7 @@
 
   export let step = 1
 
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable, builderStore, componentStore } = getContext("sdk")
   const component = getContext("component")
   const formContext = getContext("form")
 
@@ -22,7 +22,7 @@
     if (
       formContext &&
       $builderStore.inBuilder &&
-      $builderStore.selectedComponentPath?.includes($component.id)
+      $componentStore.selectedComponentPath?.includes($component.id)
     ) {
       formContext.formApi.setStep(step)
     }
diff --git a/packages/client/src/components/devtools/DevTools.svelte b/packages/client/src/components/devtools/DevTools.svelte
new file mode 100644
index 0000000000..e8d9c1cb44
--- /dev/null
+++ b/packages/client/src/components/devtools/DevTools.svelte
@@ -0,0 +1,57 @@
+<script>
+  import { getContext } from "svelte"
+  import { Layout, Heading, Tabs, Tab, Icon } from "@budibase/bbui"
+  import DevToolsStatsTab from "./DevToolsStatsTab.svelte"
+  import DevToolsComponentTab from "./DevToolsComponentTab.svelte"
+  import { devToolsStore } from "../../stores"
+
+  const context = getContext("context")
+</script>
+
+<div class="devtools" class:mobile={$context.device.mobile}>
+  <Layout noPadding gap="XS">
+    <div class="header">
+      <Heading size="XS">Budibase DevTools</Heading>
+      <Icon
+        hoverable
+        name="Close"
+        on:click={() => devToolsStore.actions.setVisible(false)}
+      />
+    </div>
+    <Tabs selected="Application">
+      <Tab title="Application">
+        <div class="tab-content">
+          <DevToolsStatsTab />
+        </div>
+      </Tab>
+      <Tab title="Components">
+        <div class="tab-content">
+          <DevToolsComponentTab />
+        </div>
+      </Tab>
+    </Tabs>
+  </Layout>
+</div>
+
+<style>
+  .devtools {
+    background: var(--spectrum-alias-background-color-secondary);
+    flex: 0 0 320px;
+    border-left: 1px solid var(--spectrum-global-color-gray-300);
+  }
+  .devtools.mobile {
+    display: none;
+  }
+
+  .header {
+    padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tab-content {
+    padding: 0 var(--spacing-xl);
+  }
+</style>
diff --git a/packages/client/src/components/devtools/DevToolsComponentTab.svelte b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
new file mode 100644
index 0000000000..f90af754aa
--- /dev/null
+++ b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
@@ -0,0 +1,87 @@
+<script>
+  import {
+    Body,
+    Layout,
+    Heading,
+    Button,
+    TextArea,
+    Divider,
+  } from "@budibase/bbui"
+  import { builderStore, devToolsStore, componentStore } from "stores"
+  import DevToolsStat from "./DevToolsStat.svelte"
+
+  $: selectedInstance = $componentStore.selectedComponentInstance
+
+  $: {
+    if (!selectedInstance) {
+      builderStore.actions.selectComponent(null)
+    }
+  }
+</script>
+
+{#if !$builderStore.selectedComponentId}
+  <Layout noPadding gap="S">
+    <Heading size="XS">Please choose a component</Heading>
+    <Body size="S">
+      Press the button below to enable component selection, then click a
+      component in your app to view what context values are available.
+    </Body>
+    <div>
+      <Button
+        cta
+        on:click={() => devToolsStore.actions.setAllowSelection(true)}
+      >
+        Choose component
+      </Button>
+    </div>
+  </Layout>
+{:else}
+  <Layout noPadding>
+    <Layout noPadding gap="XS">
+      <DevToolsStat
+        label="Component"
+        value={$componentStore.selectedComponent?._instanceName}
+      />
+      <DevToolsStat
+        label="Type"
+        value={$componentStore.selectedComponentDefinition?.name}
+      />
+      <DevToolsStat label="ID" value={$componentStore.selectedComponent?._id} />
+    </Layout>
+    <div>
+      <Button
+        cta
+        on:click={() => devToolsStore.actions.setAllowSelection(true)}
+      >
+        Change component
+      </Button>
+    </div>
+    <div class="data">
+      <Layout noPadding gap="XS">
+        <TextArea
+          readonly
+          label="Data context"
+          value={JSON.stringify(selectedInstance?.getDataContext(), null, 2)}
+        />
+        <TextArea
+          readonly
+          label="Raw settings"
+          value={JSON.stringify(selectedInstance?.getRawSettings(), null, 2)}
+        />
+        <TextArea
+          readonly
+          label="Enriched settings"
+          value={JSON.stringify(selectedInstance?.getSettings(), null, 2)}
+        />
+      </Layout>
+    </div>
+  </Layout>
+{/if}
+
+<style>
+  .data :global(.spectrum-Textfield-input) {
+    min-height: 200px !important;
+    white-space: pre;
+    font-size: var(--font-size-s);
+  }
+</style>
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
new file mode 100644
index 0000000000..2fc9800029
--- /dev/null
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -0,0 +1,72 @@
+<script>
+  import { Heading, Button, Select } from "@budibase/bbui"
+  import { devToolsStore } from "../../stores"
+  import { getContext } from "svelte"
+
+  const context = getContext("context")
+
+  $: previewOptions = [
+    {
+      label: "View as yourself",
+      value: "self",
+    },
+    {
+      label: "View as public user",
+      value: "PUBLIC",
+    },
+    {
+      label: "View as basic user",
+      value: "BASIC",
+    },
+    {
+      label: "View as power user",
+      value: "POWER",
+    },
+    {
+      label: "View as admin user",
+      value: "ADMIN",
+    },
+  ]
+</script>
+
+<div class="dev-preview-header" class:mobile={$context.device.mobile}>
+  <Heading size="XS">Application Preview</Heading>
+  <Select
+    quiet
+    options={previewOptions}
+    value={$devToolsStore.role || "self"}
+    placeholder={null}
+    autoWidth
+    on:change={e => devToolsStore.actions.changeRole(e.detail)}
+  />
+  {#if !$context.device.mobile}
+    <Button
+      quiet
+      overBackground
+      icon="Code"
+      on:click={() => devToolsStore.actions.setVisible(true)}
+    >
+      Open DevTools
+    </Button>
+  {/if}
+</div>
+
+<style>
+  .dev-preview-header {
+    height: 50px;
+    display: grid;
+    align-items: center;
+    background-color: var(--spectrum-global-color-blue-400);
+    padding: 0 var(--spacing-xl);
+    grid-template-columns: 1fr auto auto;
+    grid-gap: var(--spacing-xl);
+  }
+  .dev-preview-header.mobile {
+    flex: 0 0 50px;
+    grid-template-columns: 1fr auto;
+  }
+  .dev-preview-header
+    :global(.spectrum-Heading, .spectrum-Picker-menuIcon, .spectrum-Picker-label) {
+    color: white !important;
+  }
+</style>
diff --git a/packages/client/src/components/devtools/DevToolsStat.svelte b/packages/client/src/components/devtools/DevToolsStat.svelte
new file mode 100644
index 0000000000..8b16225808
--- /dev/null
+++ b/packages/client/src/components/devtools/DevToolsStat.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let label
+  export let value
+</script>
+
+<div class="stat">
+  <div class="stat-label">{label}</div>
+  <div class="stat-value">{value}</div>
+</div>
+
+<style>
+  .stat {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .stat-label {
+    font-size: var(--font-size-xs);
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+  }
+</style>
diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
new file mode 100644
index 0000000000..468cc35322
--- /dev/null
+++ b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { Layout } from "@budibase/bbui"
+  import { authStore, appStore, screenStore } from "stores"
+  import DevToolsStat from "./DevToolsStat.svelte"
+</script>
+
+<Layout noPadding gap="XS">
+  <DevToolsStat label="App" value={$appStore.application?.name} />
+  <DevToolsStat label="Tenant" value={$appStore.application?.tenantId} />
+  <DevToolsStat label="Version" value={$appStore.application?.version} />
+  <DevToolsStat
+    label="Client load time"
+    value={`${$appStore.clientLoadTime} ms`}
+  />
+  <DevToolsStat label="App layouts" value={$screenStore.layouts?.length || 0} />
+  <DevToolsStat label="Active layout" value={$screenStore.activeLayout?.name} />
+  <DevToolsStat label="App screens" value={$screenStore.screens?.length || 0} />
+  <DevToolsStat
+    label="Active screen"
+    value={$screenStore.activeScreen?.routing.route}
+  />
+  <DevToolsStat label="User" value={$authStore.email} />
+  <DevToolsStat label="Role" value={$authStore.roleId} />
+</Layout>
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index a4e3ca4d72..0c95195d47 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -3,7 +3,7 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
   import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 28
@@ -15,7 +15,7 @@
   let self
   let measured = false
 
-  $: definition = $builderStore.selectedComponentDefinition
+  $: definition = $componentStore.selectedComponentDefinition
   $: showBar = definition?.showSettingsBar && !$builderStore.isDragging
   $: settings = getBarSettings(definition)
 
@@ -149,9 +149,7 @@
     <SettingsButton
       icon="Delete"
       on:click={() => {
-        builderStore.actions.deleteComponent(
-          $builderStore.selectedComponent._id
-        )
+        builderStore.actions.deleteComponent($builderStore.selectedComponentId)
       }}
     />
   </div>
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 1490b2c9b7..6f7d95f5ae 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop
@@ -11,7 +11,7 @@
   export let bool = false
 
   const dispatch = createEventDispatcher()
-  $: currentValue = $builderStore.selectedComponent?.[prop]
+  $: currentValue = $componentStore.selectedComponent?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
 
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index 68061e0163..b078d048d2 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -1,10 +1,10 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
 
   export let prop
 
-  $: currentValue = $builderStore.selectedComponent?.[prop]
+  $: currentValue = $componentStore.selectedComponent?.[prop]
 </script>
 
 <div>
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 8d7129b812..8b83729fde 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -1,12 +1,12 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
 
   export let prop
   export let options
   export let label
 
-  $: currentValue = $builderStore.selectedComponent?.[prop]
+  $: currentValue = $componentStore.selectedComponent?.[prop]
 </script>
 
 <div>
diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js
index 0cabaec4ab..b2dcfca26d 100644
--- a/packages/client/src/stores/app.js
+++ b/packages/client/src/stores/app.js
@@ -1,8 +1,14 @@
 import * as API from "../api"
 import { get, writable } from "svelte/store"
 
+const initialState = {
+  appId: null,
+  isDevApp: false,
+  clientLoadTime: Date.now() - window.INIT_TIME,
+}
+
 const createAppStore = () => {
-  const store = writable({})
+  const store = writable(initialState)
 
   // Fetches the app definition including screens, layouts and theme
   const fetchAppDefinition = async () => {
@@ -12,8 +18,10 @@ const createAppStore = () => {
     }
     const appDefinition = await API.fetchAppPackage(appId)
     store.set({
+      ...initialState,
       ...appDefinition,
       appId: appDefinition?.application?.appId,
+      isDevApp: appId.startsWith("app_dev"),
     })
   }
 
diff --git a/packages/client/src/stores/auth.js b/packages/client/src/stores/auth.js
index 1fa4ae17b0..2395b51534 100644
--- a/packages/client/src/stores/auth.js
+++ b/packages/client/src/stores/auth.js
@@ -1,5 +1,7 @@
 import * as API from "../api"
 import { writable } from "svelte/store"
+import { devToolsStore } from "./devTools"
+import { get } from "svelte/store"
 
 const createAuthStore = () => {
   const store = writable(null)
@@ -7,12 +9,16 @@ const createAuthStore = () => {
   // Fetches the user object if someone is logged in and has reloaded the page
   const fetchUser = async () => {
     const user = await API.fetchSelf()
-    store.set(user)
+    store.set({
+      ...user,
+      roleId: get(devToolsStore).role || user.roleId,
+    })
   }
 
   const logOut = async () => {
-    window.document.cookie = `budibase:auth=; budibase:currentapp=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
-    window.location = "/builder/auth/login"
+    console.log("LOG OUT")
+    // window.document.cookie = `budibase:auth=; budibase:currentapp=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
+    // window.location = "/builder/auth/login"
   }
 
   return {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 35fb3edae2..a02888b5b7 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -1,7 +1,6 @@
-import { writable, derived, get } from "svelte/store"
-import Manifest from "manifest.json"
-import { findComponentById, findComponentPathById } from "../utils/components"
+import { writable, get } from "svelte/store"
 import { pingEndUser } from "../api"
+import { devToolsStore } from "./devTools"
 
 const dispatchEvent = (type, data = {}) => {
   window.parent.postMessage({ type, data })
@@ -22,38 +21,19 @@ const createBuilderStore = () => {
     previewDevice: "desktop",
     isDragging: false,
   }
-  const writableStore = writable(initialState)
-  const derivedStore = derived(writableStore, $state => {
-    // Avoid any of this logic if we aren't in the builder preview
-    if (!$state.inBuilder) {
-      return $state
-    }
-
-    // Derive the selected component instance and definition
-    const { layout, screen, previewType, selectedComponentId } = $state
-    const asset = previewType === "layout" ? layout : screen
-    const component = findComponentById(asset?.props, selectedComponentId)
-    const prefix = "@budibase/standard-components/"
-    const type = component?._component?.replace(prefix, "")
-    const definition = type ? Manifest[type] : null
-
-    // Derive the selected component path
-    const path = findComponentPathById(asset.props, selectedComponentId) || []
-
-    return {
-      ...$state,
-      selectedComponent: component,
-      selectedComponentDefinition: definition,
-      selectedComponentPath: path?.map(component => component._id),
-    }
-  })
+  const store = writable(initialState)
 
   const actions = {
     selectComponent: id => {
-      if (id === get(writableStore).selectedComponentId) {
+      if (id === get(store).selectedComponentId) {
         return
       }
-      writableStore.update(state => ({ ...state, editMode: false }))
+      store.update(state => ({
+        ...state,
+        editMode: false,
+        selectedComponentId: id,
+      }))
+      devToolsStore.actions.setAllowSelection(false)
       dispatchEvent("select-component", { id })
     },
     updateProp: (prop, value) => {
@@ -69,7 +49,7 @@ const createBuilderStore = () => {
       pingEndUser()
     },
     setSelectedPath: path => {
-      writableStore.update(state => ({ ...state, selectedPath: path }))
+      store.update(state => ({ ...state, selectedPath: path }))
     },
     moveComponent: (componentId, destinationComponentId, mode) => {
       dispatchEvent("move-component", {
@@ -79,22 +59,21 @@ const createBuilderStore = () => {
       })
     },
     setDragging: dragging => {
-      if (dragging === get(writableStore).isDragging) {
+      if (dragging === get(store).isDragging) {
         return
       }
-      writableStore.update(state => ({ ...state, isDragging: dragging }))
+      store.update(state => ({ ...state, isDragging: dragging }))
     },
     setEditMode: enabled => {
-      if (enabled === get(writableStore).editMode) {
+      if (enabled === get(store).editMode) {
         return
       }
-      writableStore.update(state => ({ ...state, editMode: enabled }))
+      store.update(state => ({ ...state, editMode: enabled }))
     },
   }
   return {
-    ...writableStore,
-    set: state => writableStore.set({ ...initialState, ...state }),
-    subscribe: derivedStore.subscribe,
+    ...store,
+    set: state => store.set({ ...initialState, ...state }),
     actions,
   }
 }
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
new file mode 100644
index 0000000000..af7aa5f0cb
--- /dev/null
+++ b/packages/client/src/stores/components.js
@@ -0,0 +1,65 @@
+import { get, writable, derived } from "svelte/store"
+import Manifest from "manifest.json"
+import { findComponentById, findComponentPathById } from "../utils/components"
+import { devToolsStore } from "./devTools"
+import { screenStore } from "./screens"
+import { builderStore } from "./builder"
+
+const createComponentStore = () => {
+  const store = writable({})
+
+  const derivedStore = derived(
+    [builderStore, devToolsStore, screenStore],
+    ([$builderState, $devToolsState, $screenState]) => {
+      // Avoid any of this logic if we aren't in the builder preview
+      if (!$builderState.inBuilder && !$devToolsState.visible) {
+        return {}
+      }
+
+      // Derive the selected component instance and definition
+      let asset
+      const { layout, screen, previewType, selectedComponentId } = $builderState
+      if ($builderState.inBuilder) {
+        asset = previewType === "layout" ? layout : screen
+      } else {
+        asset = $screenState.activeScreen
+      }
+      const component = findComponentById(asset?.props, selectedComponentId)
+      const prefix = "@budibase/standard-components/"
+      const type = component?._component?.replace(prefix, "")
+      const definition = type ? Manifest[type] : null
+
+      // Derive the selected component path
+      const path =
+        findComponentPathById(asset?.props, selectedComponentId) || []
+
+      return {
+        selectedComponentInstance: get(store)[selectedComponentId],
+        selectedComponent: component,
+        selectedComponentDefinition: definition,
+        selectedComponentPath: path?.map(component => component._id),
+      }
+    }
+  )
+
+  const registerInstance = (id, instance) => {
+    store.update(state => ({
+      ...state,
+      [id]: instance,
+    }))
+  }
+
+  const unregisterInstance = id => {
+    store.update(state => {
+      delete state[id]
+      return state
+    })
+  }
+
+  return {
+    ...derivedStore,
+    actions: { registerInstance, unregisterInstance },
+  }
+}
+
+export const componentStore = createComponentStore()
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
new file mode 100644
index 0000000000..74d8c406da
--- /dev/null
+++ b/packages/client/src/stores/devTools.js
@@ -0,0 +1,47 @@
+import { get } from "svelte/store"
+import { localStorageStore } from "builder/src/builderStore/store/localStorage"
+import { appStore } from "./app"
+import { initialise } from "./initialise"
+import { authStore } from "./auth"
+
+const initialState = {
+  visible: false,
+  allowSelection: false,
+  role: null,
+}
+
+const createDevToolStore = () => {
+  const localStorageKey = `${get(appStore).appId}.devTools`
+  const store = localStorageStore(localStorageKey, initialState)
+
+  const setVisible = visible => {
+    store.update(state => ({
+      ...state,
+      visible: visible,
+    }))
+  }
+
+  const setAllowSelection = allowSelection => {
+    store.update(state => ({
+      ...state,
+      allowSelection,
+    }))
+  }
+
+  const changeRole = async role => {
+    store.update(state => ({
+      ...state,
+      role: role === "self" ? null : role,
+    }))
+    // location.reload()
+    await authStore.actions.fetchUser()
+    await initialise()
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { setVisible, setAllowSelection, changeRole },
+  }
+}
+
+export const devToolsStore = createDevToolStore()
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index 02c848120c..487d25ffbf 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -9,6 +9,8 @@ export { confirmationStore } from "./confirmation"
 export { peekStore } from "./peek"
 export { stateStore } from "./state"
 export { themeStore } from "./theme"
+export { devToolsStore } from "./devTools"
+export { componentStore } from "./components"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 702f662f8a..9635f2b5a0 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -66,7 +66,6 @@ const createScreenStore = () => {
       }
       let children = []
       findChildrenByType(component, type, children)
-      console.log(children)
       return children
     },
   }
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 761e953ff7..35379ba6d8 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -78,6 +78,9 @@
       app.
     </h2>
   </div>
+  <script type="application/javascript">
+    window.INIT_TIME = Date.now()
+  </script>
   <script type="application/javascript" src={clientLibPath}>
   </script>
   <script type="application/javascript">
diff --git a/packages/server/src/middleware/currentapp.js b/packages/server/src/middleware/currentapp.js
index 5682a860b9..264c897280 100644
--- a/packages/server/src/middleware/currentapp.js
+++ b/packages/server/src/middleware/currentapp.js
@@ -10,6 +10,7 @@ const { getCachedSelf } = require("../utilities/global")
 const CouchDB = require("../db")
 const env = require("../environment")
 const { isWebhookEndpoint } = require("./utils")
+const { Headers } = require("@budibase/auth/constants")
 
 module.exports = async (ctx, next) => {
   // try to get the appID from the request
@@ -64,6 +65,20 @@ module.exports = async (ctx, next) => {
     return next()
   }
 
+  // Allow builders to specify their role via a header
+  const isBuilder = ctx.user && ctx.user.builder && ctx.user.builder.global
+  const isDevApp = appId && isDevAppID(appId)
+  const roleHeader = ctx.request.headers[Headers.PREVIEW_ROLE]
+  if (isBuilder && isDevApp && roleHeader) {
+    // Ensure the role is valid ensuring a definition exists
+    try {
+      await getRole(appId, roleHeader)
+      roleId = roleHeader
+    } catch (error) {
+      // Swallow error and do nothing
+    }
+  }
+
   let noCookieSet = false
   // if the user not in the right tenant then make sure they have no permissions
   // need to judge this only based on the request app ID,