Improve logic around dev tools roles and its usages. Ensure dev tools roles are never used in builder preview

packages/client/src/api/api.js

@@ -23,9 +23,9 @@ export const API = createAPIClient({
     }
 
     // Add role header
-    const role = get(devToolsStore).role
+    const devToolsState = get(devToolsStore)
-    if (role) {
+    if (devToolsState.enabled && devToolsState.role) {
-      headers["x-budibase-role"] = role
+      headers["x-budibase-role"] = devToolsState.role
     }
   },
 

packages/client/src/components/ClientApp.svelte

@@ -42,10 +42,7 @@
   let permissionError = false
 
   // Determine if we should show devtools or not
-  $: isDevPreview =
+  $: showDevTools = $devToolsStore.enabled && !$routeStore.queryParams?.peek
-    $appStore.isDevApp &&
-    !$builderStore.inBuilder &&
-    !$routeStore.queryParams?.peek
 
   // Handle no matching route
   $: {
@@ -125,7 +122,7 @@
       <UserBindingsProvider>
         {#if permissionError}
           <div class="error-wrapper">
-            {#if isDevPreview}
+            {#if showDevTools}
               <DevToolsHeader />
             {/if}
             <div class="error">
@@ -158,7 +155,7 @@
               >
                 <!-- Actual app -->
                 <div id="app-root">
-                  {#if isDevPreview}
+                  {#if showDevTools}
                     <DevToolsHeader />
                   {/if}
 
@@ -187,7 +184,7 @@
                       <PeekScreenDisplay />
                     </CustomThemeWrapper>
 
-                    {#if isDevPreview}
+                    {#if showDevTools}
                       <DevTools />
                     {/if}
                   </div>

packages/client/src/index.js

@@ -1,6 +1,7 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore, appStore } from "./stores"
+import { builderStore, appStore, devToolsStore } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
+import { get } from "svelte/store"
 
 // Initialise spectrum icons
 loadSpectrumIcons()
@@ -23,7 +24,12 @@ const loadBudibase = () => {
 
   // Set app ID - this window flag is set by both the preview and the real
   // server rendered app HTML
-  appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"])
+  appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
+
+  // 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)
 
   // Create app if one hasn't been created yet
   if (!app) {

packages/client/src/stores/app.js

@@ -1,5 +1,5 @@
 import { API } from "api"
-import { get, writable } from "svelte/store"
+import { get, writable, derived } from "svelte/store"
 
 const initialState = {
   appId: null,
@@ -9,6 +9,12 @@ const initialState = {
 
 const createAppStore = () => {
   const store = writable(initialState)
+  const derivedStore = derived(store, $store => {
+    return {
+      ...$store,
+      isDevApp: $store.appId?.startsWith("app_dev"),
+    }
+  })
 
   // Fetches the app definition including screens, layouts and theme
   const fetchAppDefinition = async () => {
@@ -22,7 +28,6 @@ const createAppStore = () => {
         ...initialState,
         ...appDefinition,
         appId: appDefinition?.application?.appId,
-        isDevApp: appId.startsWith("app_dev"),
       })
     } catch (error) {
       store.set(initialState)
@@ -30,7 +35,7 @@ const createAppStore = () => {
   }
 
   // Sets the initial app ID
-  const setAppID = id => {
+  const setAppId = id => {
     store.update(state => {
       if (state) {
         state.appId = id
@@ -42,8 +47,8 @@ const createAppStore = () => {
   }
 
   return {
-    subscribe: store.subscribe,
+    subscribe: derivedStore.subscribe,
-    actions: { setAppID, fetchAppDefinition },
+    actions: { setAppId, fetchAppDefinition },
   }
 }
 

packages/client/src/stores/devTools.js

@@ -5,6 +5,7 @@ import { initialise } from "./initialise"
 import { authStore } from "./auth"
 
 const initialState = {
+  enabled: false,
   visible: false,
   allowSelection: false,
   role: null,
@@ -14,10 +15,17 @@ const createDevToolStore = () => {
   const localStorageKey = `${get(appStore).appId}.devTools`
   const store = createLocalStorageStore(localStorageKey, initialState)
 
+  const setEnabled = enabled => {
+    store.update(state => ({
+      ...state,
+      enabled,
+    }))
+  }
+
   const setVisible = visible => {
     store.update(state => ({
       ...state,
-      visible: visible,
+      visible,
     }))
   }
 
@@ -33,14 +41,13 @@ const createDevToolStore = () => {
       ...state,
       role: role === "self" ? null : role,
     }))
-    // location.reload()
     await authStore.actions.fetchUser()
     await initialise()
   }
 
   return {
     subscribe: store.subscribe,
-    actions: { setVisible, setAllowSelection, changeRole },
+    actions: { setEnabled, setVisible, setAllowSelection, changeRole },
   }
 }
 

packages/client/src/stores/index.js

@@ -24,11 +24,10 @@ export { createContextStore } from "./context"
 // Initialises an app by loading screens and routes
 export { initialise } from "./initialise"
 
-// Derive the current role of the logged-in user, which may be overridden by
+// Derive the current role of the logged-in user
-// dev tools
 export const currentRole = derived(
   [devToolsStore, authStore],
   ([$devToolsStore, $authStore]) => {
-    return $devToolsStore.role || $authStore?.roleId
+    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
   }
 )