From 10258e1df8eaf3af4367f7c2a939a046133b9ae0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 9 Jun 2022 15:03:43 +0100 Subject: [PATCH] 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 | 6 +++--- packages/client/src/components/ClientApp.svelte | 11 ++++------- packages/client/src/index.js | 10 ++++++++-- packages/client/src/stores/app.js | 15 ++++++++++----- packages/client/src/stores/devTools.js | 13 ++++++++++--- packages/client/src/stores/index.js | 5 ++--- 6 files changed, 37 insertions(+), 23 deletions(-) diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js index c3cc679220..fdd83bd963 100644 --- a/packages/client/src/api/api.js +++ b/packages/client/src/api/api.js @@ -23,9 +23,9 @@ export const API = createAPIClient({ } // Add role header - const role = get(devToolsStore).role - if (role) { - headers["x-budibase-role"] = role + const devToolsState = get(devToolsStore) + if (devToolsState.enabled && devToolsState.role) { + headers["x-budibase-role"] = devToolsState.role } }, diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index cce8de11d4..e9a66229dd 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -42,10 +42,7 @@ let permissionError = false // Determine if we should show devtools or not - $: isDevPreview = - $appStore.isDevApp && - !$builderStore.inBuilder && - !$routeStore.queryParams?.peek + $: showDevTools = $devToolsStore.enabled && !$routeStore.queryParams?.peek // Handle no matching route $: { @@ -125,7 +122,7 @@ {#if permissionError}
- {#if isDevPreview} + {#if showDevTools} {/if}
@@ -158,7 +155,7 @@ >
- {#if isDevPreview} + {#if showDevTools} {/if} @@ -187,7 +184,7 @@ - {#if isDevPreview} + {#if showDevTools} {/if}
diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 10062cb2da..d00277c157 100644 --- a/packages/client/src/index.js +++ b/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) { diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js index 2c2ead66c4..f3fd271639 100644 --- a/packages/client/src/stores/app.js +++ b/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, - actions: { setAppID, fetchAppDefinition }, + subscribe: derivedStore.subscribe, + actions: { setAppId, fetchAppDefinition }, } } diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js index 6d631080ab..3db46af608 100644 --- a/packages/client/src/stores/devTools.js +++ b/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 }, } } diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js index df51aa7868..e28fbaee42 100644 --- a/packages/client/src/stores/index.js +++ b/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 -// dev tools +// Derive the current role of the logged-in user export const currentRole = derived( [devToolsStore, authStore], ([$devToolsStore, $authStore]) => { - return $devToolsStore.role || $authStore?.roleId + return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId } )