From 19d132c6c24b35a185f5426ee681d0a50eb3c2db Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 12 Jun 2020 20:42:55 +0100 Subject: [PATCH 01/15] removal of appRoot - appId comes in cookie --- packages/builder/cypress/plugins/index.js | 21 +++ .../builder/src/builderStore/store/index.js | 56 ++---- .../builder/src/builderStore/storeUtils.js | 13 ++ .../common/Inputs/InputGroup.svelte | 7 +- .../AppPreview/CurrentItemPreview.svelte | 40 +++-- .../AppPreview/CurrentItemPreview.svelte.orig | 161 ++++++++++++++++++ .../AppPreview/iframeTemplate.js | 1 + .../ComponentPropertiesPanel.svelte | 26 +-- .../components/userInterface/PagesList.svelte | 4 +- .../userInterface/SettingsView.svelte | 40 +++++ .../userInterface/propertyCategories.js | 82 +++++++-- .../userInterface/temporaryPanelStructure.js | 12 ++ packages/client/src/api/index.js | 5 +- packages/client/src/createApp.js | 11 +- packages/client/src/index.js | 9 +- packages/client/src/render/getAppId.js | 5 + packages/client/src/render/screenRouter.js | 16 +- packages/client/src/state/bbComponentApi.js | 14 +- packages/client/src/state/eventHandlers.js | 3 +- packages/client/src/state/stateManager.js | 5 +- packages/client/tests/testAppDef.js | 9 +- .../src/Test/createApp.js | 8 +- packages/server/package.json | 2 +- packages/server/src/api/controllers/auth.js | 12 +- packages/server/src/api/controllers/model.js | 32 +++- packages/server/src/api/controllers/record.js | 11 +- packages/server/src/api/controllers/static.js | 30 +++- packages/server/src/api/index.js | 9 + packages/server/src/api/routes/auth.js | 2 +- packages/server/src/api/routes/index.js | 2 + packages/server/src/api/routes/model.js | 38 +---- packages/server/src/api/routes/record.js | 36 ++++ packages/server/src/api/routes/static.js | 5 +- .../src/api/routes/tests/couchTestUtils.js | 4 + .../server/src/api/routes/tests/model.spec.js | 47 ++++- .../src/api/routes/tests/record.spec.js | 24 +++ .../server/src/utilities/builder/buildPage.js | 6 +- .../src/utilities/builder/index.template.html | 8 +- packages/standard-components/components.json | 7 + .../public/clientAppDefinition.js | 1 - packages/standard-components/src/Embed.svelte | 5 + packages/standard-components/src/Login.svelte | 19 +-- .../standard-components/src/Test/createApp.js | 2 +- packages/standard-components/src/index.js | 1 + 44 files changed, 616 insertions(+), 235 deletions(-) create mode 100644 packages/builder/cypress/plugins/index.js create mode 100644 packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig create mode 100644 packages/client/src/render/getAppId.js create mode 100644 packages/server/src/api/routes/record.js create mode 100644 packages/standard-components/src/Embed.svelte diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js new file mode 100644 index 0000000000..aa9918d215 --- /dev/null +++ b/packages/builder/cypress/plugins/index.js @@ -0,0 +1,21 @@ +/// +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 9f91550bca..1f3ea9c0ef 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -5,7 +5,6 @@ import { writable, get } from "svelte/store" import api from "../api" import { DEFAULT_PAGES_OBJECT } from "../../constants" import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents" -import { rename } from "components/userInterface/pagesParsing/renameScreen" import { createProps, makePropsSafe, @@ -24,6 +23,7 @@ import { saveCurrentPreviewItem as _saveCurrentPreviewItem, saveScreenApi as _saveScreenApi, regenerateCssForCurrentScreen, + renameCurrentScreen, } from "../storeUtils" export const getStore = () => { @@ -52,7 +52,6 @@ export const getStore = () => { store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store) store.saveScreen = saveScreen(store) - store.renameScreen = renameScreen(store) store.deleteScreen = deleteScreen(store) store.setCurrentScreen = setCurrentScreen(store) store.setCurrentPage = setCurrentPage(store) @@ -63,6 +62,7 @@ export const getStore = () => { store.addChildComponent = addChildComponent(store) store.selectComponent = selectComponent(store) store.setComponentProp = setComponentProp(store) + store.setPageOrScreenProp = setPageOrScreenProp(store) store.setComponentStyle = setComponentStyle(store) store.setComponentCode = setComponentCode(store) store.setScreenType = setScreenType(store) @@ -207,46 +207,6 @@ const deleteScreen = store => name => { }) } -const renameScreen = store => (oldname, newname) => { - store.update(s => { - const { screens, pages, error, changedScreens } = rename( - s.pages, - s.screens, - oldname, - newname - ) - - if (error) { - // should really do something with this - return s - } - - s.screens = screens - s.pages = pages - if (s.currentPreviewItem.name === oldname) - s.currentPreviewItem.name = newname - - const saveAllChanged = async () => { - for (let screenName of changedScreens) { - const changedScreen = getExactComponent(screens, screenName) - await api.post(`/_builder/api/${s.appId}/screen`, changedScreen) - } - } - - api - .patch(`/_builder/api/${s.appId}/screen`, { - oldname, - newname, - }) - .then(() => saveAllChanged()) - .then(() => { - _savePage(s) - }) - - return s - }) -} - const savePage = store => async page => { store.update(state => { if (state.currentFrontEndType !== "page" || !state.currentPageName) { @@ -400,6 +360,18 @@ const setComponentProp = store => (name, value) => { }) } +const setPageOrScreenProp = store => (name, value) => { + store.update(state => { + if (name === "name" && state.currentFrontEndType === "screen") { + state = renameCurrentScreen(value, state) + } else { + state.currentPreviewItem[name] = value + _saveCurrentPreviewItem(state) + } + return state + }) +} + const setComponentStyle = store => (type, name, value) => { store.update(state => { if (!state.currentComponentInfo._styles) { diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js index d6aa4d0308..ff951e6b6f 100644 --- a/packages/builder/src/builderStore/storeUtils.js +++ b/packages/builder/src/builderStore/storeUtils.js @@ -45,6 +45,19 @@ export const saveScreenApi = (screen, s) => { .then(() => savePage(s)) } +export const renameCurrentScreen = (newname, state) => { + const oldname = state.currentPreviewItem.name + state.currentPreviewItem.name = newname + api.patch( + `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`, + { + oldname, + newname, + } + ) + return state +} + export const walkProps = (props, action, cancelToken = null) => { cancelToken = cancelToken || { cancelled: false } action(props, () => { diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index e5fed68103..385623ca19 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -19,9 +19,10 @@ onChange(_value) } - $: displayValues = value && suffix - ? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) - : value || [] + $: displayValues = + value && suffix + ? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) + : value || []
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index 53450c2200..f97f91df6b 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -21,7 +21,7 @@ return componentName || "element" } - const screenPlaceholder = { + const screenPlaceholder = { name: "Screen Placeholder", route: "*", props: { @@ -60,9 +60,8 @@ }, } - $: hasComponent = !!$store.currentPreviewItem - + $: { styles = "" // Apply the CSS from the currently selected page and its screens @@ -88,11 +87,10 @@ libraries: $store.libraries, page: $store.pages[$store.currentPageName], screens: [ - $store.currentFrontEndType === "page" - ? screenPlaceholder - : $store.currentPreviewItem, + $store.currentFrontEndType === "page" + ? screenPlaceholder + : $store.currentPreviewItem, ], - appRootPath: "", } $: selectedComponentType = getComponentTypeName($store.currentComponentInfo) @@ -102,20 +100,26 @@ : "" const refreshContent = () => { - iframe.contentWindow.postMessage(JSON.stringify({ - styles, - stylesheetLinks, - selectedComponentType, - selectedComponentId, - frontendDefinition, - })) + iframe.contentWindow.postMessage( + JSON.stringify({ + styles, + stylesheetLinks, + selectedComponentType, + selectedComponentId, + frontendDefinition, + appId: $store.appId, + }) + ) } - $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true }) + $: if (iframe) + iframe.contentWindow.addEventListener("bb-ready", refreshContent, { + once: true, + }) - $: if(iframe && frontendDefinition) { - refreshContent() - } + $: if (iframe && frontendDefinition) { + refreshContent() + }
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig new file mode 100644 index 0000000000..81c3624274 --- /dev/null +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig @@ -0,0 +1,161 @@ + + +
+ {#if hasComponent && $store.currentPreviewItem} +