CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-18 18:28:33 +12:00
Code Issues Projects Releases Wiki Activity

Show devtools even in client app error states, to fix being locked out when changing to a public preview

Browse source
This commit is contained in:
Andrew Kingston 2022-06-09 15:55:59 +01:00
parent 12961806ff
commit c6dbd52c88
2 changed files with 66 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
packages/client/src/components/ClientApp.svelte
View file

@ -120,46 +120,55 @@
> >
<DeviceBindingsProvider> <DeviceBindingsProvider>
<UserBindingsProvider> <UserBindingsProvider>
{#if permissionError} <StateBindingsProvider>
<div class="error-wrapper"> <RowSelectionProvider>
{#if showDevTools} <!-- Settings bar can be rendered outside of device preview -->
<DevToolsHeader /> <!-- Key block needs to be outside the if statement or it breaks -->
{/if} {#key $builderStore.selectedComponentId}
<div class="error"> {#if $builderStore.inBuilder}
<Layout justifyItems="center" gap="S"> <SettingsBar />
{@html ErrorSVG} {/if}
<Heading size="L" {/key}
>You don't have permission to use this app</Heading
> <!-- Clip boundary for selection indicators -->
<Body size="S">Ask your administrator to grant you access</Body> <div
</Layout> id="clip-root"
</div> class:preview={$builderStore.inBuilder}
</div> class:tablet-preview={$builderStore.previewDevice === "tablet"}
{:else if $screenStore.activeLayout} class:mobile-preview={$builderStore.previewDevice === "mobile"}
<StateBindingsProvider> >
<RowSelectionProvider> <!-- Actual app -->
<!-- Settings bar can be rendered outside of device preview --> <div id="app-root">
<!-- Key block needs to be outside the if statement or it breaks --> {#if showDevTools}
{#key $builderStore.selectedComponentId} <DevToolsHeader />
{#if $builderStore.inBuilder}
<SettingsBar />
{/if} {/if}
{/key}
<!-- Clip boundary for selection indicators --> <div id="app-body">
<div {#if permissionError}
id="clip-root" <div class="error">
class:preview={$builderStore.inBuilder} <Layout justifyItems="center" gap="S">
class:tablet-preview={$builderStore.previewDevice === "tablet"} {@html ErrorSVG}
class:mobile-preview={$builderStore.previewDevice === "mobile"} <Heading size="L">
> You don't have permission to use this app
<!-- Actual app --> </Heading>
<div id="app-root"> <Body size="S">
{#if showDevTools} Ask your administrator to grant you access
<DevToolsHeader /> </Body>
{/if} </Layout>
</div>
<div id="app-body"> {:else if !$screenStore.activeLayout}
<div class="error">
<Layout justifyItems="center" gap="S">
{@html ErrorSVG}
<Heading size="L">
Something went wrong rendering your app
</Heading>
<Body size="S">
Get in touch with support if this issue persists
</Body>
</Layout>
</div>
{:else}
<CustomThemeWrapper> <CustomThemeWrapper>
{#key $screenStore.activeLayout._id} {#key $screenStore.activeLayout._id}
<Component <Component
@ -183,27 +192,27 @@
<ConfirmationDisplay /> <ConfirmationDisplay />
<PeekScreenDisplay /> <PeekScreenDisplay />
</CustomThemeWrapper> </CustomThemeWrapper>
{/if}
{#if showDevTools} {#if showDevTools}
<DevTools /> <DevTools />
{/if} {/if}
</div>
</div> </div>
<!-- Preview and dev tools utilities -->
{#if $appStore.isDevApp}
<SelectionIndicator />
{/if}
{#if $builderStore.inBuilder || $devToolsStore.allowSelection}
<HoverIndicator />
{/if}
{#if $builderStore.inBuilder}
<DNDHandler />
{/if}
</div> </div>
</RowSelectionProvider>
</StateBindingsProvider> <!-- Preview and dev tools utilities -->
{/if} {#if $appStore.isDevApp}
<SelectionIndicator />
{/if}
{#if $builderStore.inBuilder || $devToolsStore.allowSelection}
<HoverIndicator />
{/if}
{#if $builderStore.inBuilder}
<DNDHandler />
{/if}
</div>
</RowSelectionProvider>
</StateBindingsProvider>
</UserBindingsProvider> </UserBindingsProvider>
</DeviceBindingsProvider> </DeviceBindingsProvider>
</div> </div>
@ -253,10 +262,6 @@
overflow: hidden; overflow: hidden;
} }
.error-wrapper {
width: 100%;
height: 100%;
}
.error { .error {
width: 100%; width: 100%;
height: 100%; height: 100%;

5
packages/client/src/stores/devTools.js
View file

@ -1,6 +1,4 @@
import { get } from "svelte/store"
import { createLocalStorageStore } from "@budibase/frontend-core" import { createLocalStorageStore } from "@budibase/frontend-core"
import { appStore } from "./app"
import { initialise } from "./initialise" import { initialise } from "./initialise"
import { authStore } from "./auth" import { authStore } from "./auth"
import { API } from "../api" import { API } from "../api"
@ -13,8 +11,7 @@ const initialState = {
} }
const createDevToolStore = () => { const createDevToolStore = () => {
const localStorageKey = `${get(appStore).appId}.devTools` const store = createLocalStorageStore("bb-devtools", initialState)
const store = createLocalStorageStore(localStorageKey, initialState)
const setEnabled = enabled => { const setEnabled = enabled => {
store.update(state => ({ store.update(state => ({