Add devtools to app preview and add ability to preview apps as different roles
This commit is contained in:
Andrew Kingston
parent
aa010163a7
commit
1b3317a114
|
|
@ -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",
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@
|
|||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
@ -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()
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@ const createScreenStore = () => {
|
|||
}
|
||||
let children = []
|
||||
findChildrenByType(component, type, children)
|
||||
console.log(children)
|
||||
return children
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue