ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
Andrew Kingston 4 years ago
parent
13c3390da5
commit
eeb0a9fc64
2 changed files with 66 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      packages/client/src/components/ClientApp.svelte
  2. 5
      packages/client/src/stores/devTools.js

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
>
<Body size="S">Ask your administrator to grant you access</Body>
</Layout>
</div>
</div>
{:else if $screenStore.activeLayout}
<StateBindingsProvider>
<RowSelectionProvider>
<!-- Settings bar can be rendered outside of device preview -->
<!-- Key block needs to be outside the if statement or it breaks -->
{#key $builderStore.selectedComponentId}
{#if $builderStore.inBuilder}
<SettingsBar />
{/if}
{/key}
<!-- Clip boundary for selection indicators --> <!-- Clip boundary for selection indicators -->
<div <div
id="clip-root" id="clip-root"
class:preview={$builderStore.inBuilder} class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"} class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"} class:mobile-preview={$builderStore.previewDevice === "mobile"}
> >
<!-- Actual app --> <!-- Actual app -->
<div id="app-root"> <div id="app-root">
{#if showDevTools} {#if showDevTools}
<DevToolsHeader /> <DevToolsHeader />
{/if} {/if}
<div id="app-body"> <div id="app-body">
{#if permissionError}
<div class="error">
<Layout justifyItems="center" gap="S">
{@html ErrorSVG}
<Heading size="L">
You don't have permission to use this app
</Heading>
<Body size="S">
Ask your administrator to grant you access
</Body>
</Layout>
</div>
{: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 => ({

Write Preview
Loading…
Cancel
Save