Fixing issues with the application API, it utilised /api/:appId heavily which is a route that matches nearly everything.

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

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("/")
   }

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()

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: {
+  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",
-            },
-            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",
-    },
-  }
+    })
+    .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
 

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) {

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))
 

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

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

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))
   }
 }