From 4997df919e6fbb0234f1188ee016ad387e384f6b Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Thu, 19 Nov 2020 16:55:59 +0000 Subject: [PATCH 1/2] Fixing issues with the application API, it utilised /api/:appId heavily which is a route that matches nearly everything. --- .../store/screenTemplates/utils/Screen.js | 5 + .../settings/tabs/DangerZone.svelte | 2 +- .../components/start/CreateAppModal.svelte | 2 +- .../AppPreview/CurrentItemPreview.svelte | 152 ++++++------------ .../src/pages/[application]/_reset.svelte | 2 +- packages/client/tests/testAppDef.js | 2 +- packages/server/src/api/routes/application.js | 8 +- packages/server/src/api/routes/index.js | 8 +- .../src/api/routes/tests/couchTestUtils.js | 2 +- 9 files changed, 64 insertions(+), 119 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js index 951e26aeb6..523296e959 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js @@ -24,6 +24,11 @@ export class Screen extends BaseStructure { } } + normalStyle(styling) { + this._json.props._styles.normal = styling + return this + } + component(name) { this._json.props._component = name return this diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte index ee592ec6b1..8c7f71e7fd 100644 --- a/packages/builder/src/components/settings/tabs/DangerZone.svelte +++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte @@ -9,7 +9,7 @@ async function deleteApp() { loading = true const id = $params.application - await del(`/api/${id}`) + await del(`/api/applications/${id}`) loading = false $goto("/") } diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index c8a894d9d9..85122c3ebe 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -149,7 +149,7 @@ }) // Select Correct Application/DB in prep for creating user - const applicationPkg = await get(`/api/${appJson._id}/appPackage`) + const applicationPkg = await get(`/api/applications/${appJson._id}/appPackage`) const pkg = await applicationPkg.json() if (applicationPkg.ok) { backendUiStore.actions.reset() diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index fd7270cdfa..9902d579ba 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -3,6 +3,8 @@ import { map, join } from "lodash/fp" import iframeTemplate from "./iframeTemplate" import { pipe } from "../../../helpers" + import { Screen } from "../../../builderStore/store/screenTemplates/utils/Screen" + import { Component } from "../../../builderStore/store/screenTemplates/utils/Component" let iframe let styles = "" @@ -21,114 +23,50 @@ return componentName || "element" } - const screenPlaceholder = { - name: "Screen Placeholder", - route: "*", - props: { - _id: "screenslot-placeholder", - _component: "@budibase/standard-components/container", - _styles: { - normal: { - flex: "1 1 auto", - }, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - className: "", - onLoad: [], - type: "div", - _children: [ - { - _id: "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888", - _component: "@budibase/standard-components/container", - _styles: { - normal: { - display: "flex", - "flex-direction": "column", - "align-items": "center", - flex: "1 1 auto", - }, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - className: "", - onLoad: [], - type: "div", - _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - _instanceName: "Container", - _children: [ - { - _id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72", - _component: "@budibase/standard-components/heading", - _styles: { - normal: { - width: "500px", - padding: "8px", - }, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - className: "", - text: "Screen Slot", - type: "h1", - _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - _instanceName: "Heading", - _children: [], - }, - { - _id: "71a3da65-72c6-4c43-8c6a-49871c07b77d", - _component: "@budibase/standard-components/text", - _styles: { - normal: { - "max-width": "", - "text-align": "left", - width: "500px", - padding: "8px", - }, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - text: - "The screens that you create will be displayed inside this box.", - type: "none", - _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - _instanceName: "Text", - }, - { - _id: "8af80374-460d-497b-a5d8-7dd2ec4a7bbc", - _component: "@budibase/standard-components/text", - _styles: { - normal: { - "max-width": "", - "text-align": "left", - width: "500px", - padding: "8px", - }, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - text: - "This box is just a placeholder, to show you the position of screens.", - type: "none", - _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - _instanceName: "Text", - }, - ], - }, - ], - _instanceName: "Content Placeholder", - }, + const headingStyle = { + width: "500px", + padding: "8px", } + const textStyle = { + ...headingStyle, + "max-width": "", + "text-align": "left", + } + + const heading = new Component("@budibase/standard-components/heading") + .normalStyle(headingStyle) + .type("h1") + .text("Screen Slot") + .instanceName("Heading") + const textScreenDisplay = new Component("@budibase/standard-components/text") + .normalStyle(textStyle) + .instanceName("Text") + .type("none") + .text("The screens that you create will be displayed inside this box. This box is just a placeholder, to show you the position of screens.") + const container = new Component("@budibase/standard-components/container") + .normalStyle({ + display: "flex", + "flex-direction": "column", + "align-items": "center", + flex: "1 1 auto", + }) + .type("div") + .instanceName("Container") + .addChild(heading) + .addChild(textScreenDisplay) + const screenPlaceholder = new Screen() + .name("Screen Placeholder") + .route("*") + .component("@budibase/standard-components/container") + .mainType("div") + .instanceName("Content Placeholder") + .normalStyle({ + flex: "1 1 auto", + }) + .addChild(container) + .json() + // TODO: this ID is attached to how the screen slot is rendered, confusing, would be better a type etc + screenPlaceholder.props._id = "screenslot-placeholder" $: hasComponent = !!$store.currentPreviewItem diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index aeead443eb..31aa6943e5 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -13,7 +13,7 @@ let promise = getPackage() async function getPackage() { - const res = await get(`/api/${application}/appPackage`) + const res = await get(`/api/applications/${application}/appPackage`) const pkg = await res.json() if (res.ok) { diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js index c9a5bb1cc0..0c8efa5940 100644 --- a/packages/client/tests/testAppDef.js +++ b/packages/client/tests/testAppDef.js @@ -51,7 +51,7 @@ const addWindowGlobals = (window, page, screens) => { } export const makePage = props => ({ props }) -export const makeScreen = (route, props) => ({ props, route }) +export const makeScreen = (route, props) => ({ props, routing: { route, accessLevelId: "" } }) export const timeout = ms => new Promise(resolve => setTimeout(resolve, ms)) diff --git a/packages/server/src/api/routes/application.js b/packages/server/src/api/routes/application.js index 3ee5da058c..34d44cfaef 100644 --- a/packages/server/src/api/routes/application.js +++ b/packages/server/src/api/routes/application.js @@ -6,15 +6,15 @@ const { BUILDER } = require("../../utilities/security/permissions") const router = Router() router - .get("/api/:appId/definition", controller.fetchAppDefinition) + .get("/api/applications/:appId/definition", controller.fetchAppDefinition) .get("/api/applications", authorized(BUILDER), controller.fetch) .get( - "/api/:appId/appPackage", + "/api/applications/:appId/appPackage", authorized(BUILDER), controller.fetchAppPackage ) - .put("/api/:appId", authorized(BUILDER), controller.update) + .put("/api/applications/:appId", authorized(BUILDER), controller.update) .post("/api/applications", authorized(BUILDER), controller.create) - .delete("/api/:appId", authorized(BUILDER), controller.delete) + .delete("/api/applications/:appId", authorized(BUILDER), controller.delete) module.exports = router diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js index 44f2d08509..840f968eb3 100644 --- a/packages/server/src/api/routes/index.js +++ b/packages/server/src/api/routes/index.js @@ -23,17 +23,19 @@ exports.mainRoutes = [ screenRoutes, userRoutes, applicationRoutes, - rowRoutes, - tableRoutes, + automationRoutes, viewRoutes, componentRoutes, - automationRoutes, accesslevelRoutes, apiKeysRoutes, templatesRoutes, analyticsRoutes, webhookRoutes, routingRoutes, + // these need to be handled last as they still use /api/:tableId + // this could be breaking as koa may recognise other routes as this + tableRoutes, + rowRoutes, ] exports.authRoutes = authRoutes diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js index 85f4c44a62..cc62776bb1 100644 --- a/packages/server/src/api/routes/tests/couchTestUtils.js +++ b/packages/server/src/api/routes/tests/couchTestUtils.js @@ -109,7 +109,7 @@ exports.clearApplications = async request => { .set(exports.defaultHeaders()) for (let app of res.body) { const appId = app._id - await request.delete(`/api/${appId}`).set(exports.defaultHeaders(appId)) + await request.delete(`/api/applications/${appId}`).set(exports.defaultHeaders(appId)) } } From 961a921a09b81c7aba00177b7abfffb2f9ac3d76 Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Thu, 19 Nov 2020 16:56:23 +0000 Subject: [PATCH 2/2] linting. --- packages/builder/src/components/start/CreateAppModal.svelte | 4 +++- .../userInterface/AppPreview/CurrentItemPreview.svelte | 4 +++- packages/client/tests/testAppDef.js | 5 ++++- packages/server/src/api/routes/tests/couchTestUtils.js | 4 +++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index 85122c3ebe..049b21c995 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -149,7 +149,9 @@ }) // Select Correct Application/DB in prep for creating user - const applicationPkg = await get(`/api/applications/${appJson._id}/appPackage`) + const applicationPkg = await get( + `/api/applications/${appJson._id}/appPackage` + ) const pkg = await applicationPkg.json() if (applicationPkg.ok) { backendUiStore.actions.reset() diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index 9902d579ba..b3ec41b2a2 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -42,7 +42,9 @@ .normalStyle(textStyle) .instanceName("Text") .type("none") - .text("The screens that you create will be displayed inside this box. This box is just a placeholder, to show you the position of screens.") + .text( + "The screens that you create will be displayed inside this box. This box is just a placeholder, to show you the position of screens." + ) const container = new Component("@budibase/standard-components/container") .normalStyle({ display: "flex", diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js index 0c8efa5940..76ed5bdf3d 100644 --- a/packages/client/tests/testAppDef.js +++ b/packages/client/tests/testAppDef.js @@ -51,7 +51,10 @@ const addWindowGlobals = (window, page, screens) => { } export const makePage = props => ({ props }) -export const makeScreen = (route, props) => ({ props, routing: { route, accessLevelId: "" } }) +export const makeScreen = (route, props) => ({ + props, + routing: { route, accessLevelId: "" }, +}) export const timeout = ms => new Promise(resolve => setTimeout(resolve, ms)) diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js index cc62776bb1..ee12c1c6d8 100644 --- a/packages/server/src/api/routes/tests/couchTestUtils.js +++ b/packages/server/src/api/routes/tests/couchTestUtils.js @@ -109,7 +109,9 @@ exports.clearApplications = async request => { .set(exports.defaultHeaders()) for (let app of res.body) { const appId = app._id - await request.delete(`/api/applications/${appId}`).set(exports.defaultHeaders(appId)) + await request + .delete(`/api/applications/${appId}`) + .set(exports.defaultHeaders(appId)) } }