From 29c5e6c243c31b86c682ef1af57ac40bd9ba57fc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 26 Nov 2021 13:25:02 +0000 Subject: [PATCH 01/48] Add devtools to app preview and add ability to preview apps as different roles --- packages/auth/src/constants.js | 1 + packages/bbui/src/Layout/Layout.svelte | 8 ++ packages/bbui/src/Tabs/Tabs.svelte | 2 +- packages/client/src/api/api.js | 5 +- .../client/src/components/ClientApp.svelte | 75 +++++++++++----- .../client/src/components/Component.svelte | 30 +++++-- .../client/src/components/app/Layout.svelte | 1 + .../src/components/app/forms/FormStep.svelte | 4 +- .../src/components/devtools/DevTools.svelte | 57 ++++++++++++ .../devtools/DevToolsComponentTab.svelte | 87 +++++++++++++++++++ .../components/devtools/DevToolsHeader.svelte | 72 +++++++++++++++ .../components/devtools/DevToolsStat.svelte | 23 +++++ .../devtools/DevToolsStatsTab.svelte | 24 +++++ .../src/components/preview/SettingsBar.svelte | 8 +- .../components/preview/SettingsButton.svelte | 4 +- .../preview/SettingsColorPicker.svelte | 4 +- .../components/preview/SettingsPicker.svelte | 4 +- packages/client/src/stores/app.js | 10 ++- packages/client/src/stores/auth.js | 12 ++- packages/client/src/stores/builder.js | 55 ++++-------- packages/client/src/stores/components.js | 65 ++++++++++++++ packages/client/src/stores/devTools.js | 47 ++++++++++ packages/client/src/stores/index.js | 2 + packages/client/src/stores/screens.js | 1 - .../static/templates/BudibaseApp.svelte | 3 + packages/server/src/middleware/currentapp.js | 15 ++++ 26 files changed, 530 insertions(+), 89 deletions(-) create mode 100644 packages/client/src/components/devtools/DevTools.svelte create mode 100644 packages/client/src/components/devtools/DevToolsComponentTab.svelte create mode 100644 packages/client/src/components/devtools/DevToolsHeader.svelte create mode 100644 packages/client/src/components/devtools/DevToolsStat.svelte create mode 100644 packages/client/src/components/devtools/DevToolsStatsTab.svelte create mode 100644 packages/client/src/stores/components.js create mode 100644 packages/client/src/stores/devTools.js diff --git a/packages/auth/src/constants.js b/packages/auth/src/constants.js index 9892275bec..c7a0c20a41 100644 --- a/packages/auth/src/constants.js +++ b/packages/auth/src/constants.js @@ -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", } diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte index af60675582..bd564ff40e 100644 --- a/packages/bbui/src/Layout/Layout.svelte +++ b/packages/bbui/src/Layout/Layout.svelte @@ -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); } diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte index 2a4017e605..5fdaf0e434 100644 --- a/packages/bbui/src/Tabs/Tabs.svelte +++ b/packages/bbui/src/Tabs/Tabs.svelte @@ -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); diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js index 2476030eb0..45af9e302b 100644 --- a/packages/client/src/api/api.js +++ b/packages/client/src/api/api.js @@ -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, diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 98dec9667b..ee15cfa9c7 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -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 {#if dataLoaded} @@ -106,29 +112,39 @@ >
- - {#key $screenStore.activeLayout._id} - - {/key} + {#if isDevPreview} + + {/if} - -
+
+ + {#key $screenStore.activeLayout._id} + + {/key} - - @@ -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 { diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index d8cdbd3f53..e8ea08cf85 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -3,12 +3,12 @@ {#key renderKey} diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 87e5ac3b5b..44beb6d1c2 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -154,6 +154,7 @@ justify-content: flex-start; align-items: stretch; height: 100%; + flex: 1 1 auto; overflow: auto; overflow-x: hidden; position: relative; diff --git a/packages/client/src/components/app/forms/FormStep.svelte b/packages/client/src/components/app/forms/FormStep.svelte index 58300287a8..4441f515ee 100644 --- a/packages/client/src/components/app/forms/FormStep.svelte +++ b/packages/client/src/components/app/forms/FormStep.svelte @@ -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) } diff --git a/packages/client/src/components/devtools/DevTools.svelte b/packages/client/src/components/devtools/DevTools.svelte new file mode 100644 index 0000000000..e8d9c1cb44 --- /dev/null +++ b/packages/client/src/components/devtools/DevTools.svelte @@ -0,0 +1,57 @@ + + +
+ +
+ Budibase DevTools + devToolsStore.actions.setVisible(false)} + /> +
+ + +
+ +
+
+ +
+ +
+
+
+
+
+ + diff --git a/packages/client/src/components/devtools/DevToolsComponentTab.svelte b/packages/client/src/components/devtools/DevToolsComponentTab.svelte new file mode 100644 index 0000000000..f90af754aa --- /dev/null +++ b/packages/client/src/components/devtools/DevToolsComponentTab.svelte @@ -0,0 +1,87 @@ + + +{#if !$builderStore.selectedComponentId} + + Please choose a component + + Press the button below to enable component selection, then click a + component in your app to view what context values are available. + +
+ +
+
+{:else} + + + + + + +
+ +
+
+ +