Merge branch 'feature/backend-routing' of github.com:Budibase/budibase into routing-ui

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -1,8 +1,12 @@
 import sanitizeUrl from "./utils/sanitizeUrl"
-import { rowListUrl } from "./rowListScreen"
 import { Component } from "./utils/Component"
 import { Screen } from "./utils/Screen"
-import { linkComponent } from "./utils/commonComponents"
+import {
+  makeBreadcrumbContainer,
+  makeMainContainer,
+  makeTitleContainer,
+  makeSaveButton,
+} from "./utils/commonComponents"
 
 export default function(tables) {
   return tables.map(table => {
@@ -17,133 +21,26 @@ export default function(tables) {
 export const newRowUrl = table => sanitizeUrl(`/${table.name}/new`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
-function breadcrumbContainer(table) {
+function generateTitleContainer(table) {
-  const link = linkComponent(table.name).instanceName("Back Link")
+  return makeTitleContainer("New Row").addChild(makeSaveButton(table))
-
-  const arrowText = new Component("@budibase/standard-components/text")
-    .type("none")
-    .normalStyle({
-      "margin-right": "4px",
-      "margin-left": "4px",
-    })
-    .text(">")
-    .instanceName("Arrow")
-
-  const newText = new Component("@budibase/standard-components/text")
-    .type("none")
-    .normalStyle({
-      color: "#000000",
-    })
-    .text("New")
-    .instanceName("Identifier")
-
-  return new Component("@budibase/standard-components/container")
-    .type("div")
-    .normalStyle({
-      "font-size": "14px",
-      color: "#757575",
-    })
-    .instanceName("Breadcrumbs")
-    .addChild(link)
-    .addChild(arrowText)
-    .addChild(newText)
-}
-
-function titleContainer(table) {
-  const heading = new Component("@budibase/standard-components/heading")
-    .normalStyle({
-      margin: "0px",
-      "margin-bottom": "0px",
-      "margin-right": "0px",
-      "margin-top": "0px",
-      "margin-left": "0px",
-      flex: "1 1 auto",
-    })
-    .type("h3")
-    .instanceName("Title")
-    .text("New Row")
-
-  const button = new Component("@budibase/standard-components/button")
-    .normalStyle({
-      background: "#000000",
-      "border-width": "0",
-      "border-style": "None",
-      color: "#fff",
-      "font-family": "Inter",
-      "font-weight": "500",
-      "font-size": "14px",
-      "margin-left": "16px",
-    })
-    .hoverStyle({
-      background: "#4285f4",
-    })
-    .text("Save")
-    .customProps({
-      className: "",
-      disabled: false,
-      onClick: [
-        {
-          parameters: {
-            contextPath: "data",
-            tableId: table._id,
-          },
-          "##eventHandlerType": "Save Row",
-        },
-        {
-          parameters: {
-            url: rowListUrl(table),
-          },
-          "##eventHandlerType": "Navigate To",
-        },
-      ],
-    })
-    .instanceName("Save Button")
-
-  return new Component("@budibase/standard-components/container")
-    .type("div")
-    .normalStyle({
-      display: "flex",
-      "flex-direction": "row",
-      "justify-content": "space-between",
-      "align-items": "center",
-      "margin-top": "32px",
-      "margin-bottom": "32px",
-    })
-    .instanceName("Title Container")
-    .addChild(heading)
-    .addChild(button)
 }
 
 const createScreen = table => {
-  const dataform = new Component("@budibase/standard-components/dataformwide")
+  const dataform = new Component(
-    .instanceName("Form")
+    "@budibase/standard-components/dataformwide"
+  ).instanceName("Form")
 
-  const mainContainer = new Component("@budibase/standard-components/container")
+  const container = makeMainContainer()
-    .type("div")
+    .addChild(makeBreadcrumbContainer(table.name, "New"))
-    .normalStyle({
+    .addChild(generateTitleContainer(table))
-      width: "700px",
-      padding: "0px",
-      background: "white",
-      "border-radius": "0.5rem",
-      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-      margin: "auto",
-      "margin-top": "20px",
-      "padding-top": "48px",
-      "padding-bottom": "48px",
-      "padding-right": "48px",
-      "padding-left": "48px",
-      "margin-bottom": "20px",
-    })
-    .instanceName("Container")
-    .addChild(breadcrumbContainer(table))
-    .addChild(titleContainer(table))
     .addChild(dataform)
 
-  return new Screen().component("@budibase/standard-components/newrow")
+  return new Screen()
-    .addChild(mainContainer)
+    .component("@budibase/standard-components/newrow")
     .table(table._id)
     .route(newRowUrl(table))
     .instanceName(`${table.name} - New`)
     .name("")
+    .addChild(container)
     .json()
 }

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -1,5 +1,13 @@
 import sanitizeUrl from "./utils/sanitizeUrl"
 import { rowListUrl } from "./rowListScreen"
+import { Screen } from "./utils/Screen"
+import { Component } from "./utils/Component"
+import {
+  makeMainContainer,
+  makeBreadcrumbContainer,
+  makeTitleContainer,
+  makeSaveButton,
+} from "./utils/commonComponents"
 
 export default function(tables) {
   return tables.map(table => {
@@ -17,291 +25,78 @@ export default function(tables) {
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
-const createScreen = (table, heading) => ({
+function generateTitleContainer(table, title) {
-  props: {
+  // have to override style for this, its missing margin
-    _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
+  const saveButton = makeSaveButton(table).normalStyle({
-    _component: "@budibase/standard-components/rowdetail",
+    background: "#000000",
-    _styles: {
+    "border-width": "0",
-      normal: {},
+    "border-style": "None",
-      hover: {},
+    color: "#fff",
-      active: {},
+    "font-family": "Inter",
-      selected: {},
+    "font-weight": "500",
-    },
+    "font-size": "14px",
-    table: table._id,
+  })
-    _children: [
+
-      {
+  const deleteButton = new Component("@budibase/standard-components/button")
-        _id: "ccad6cc135c7947a7ba9c631f655d6e0f",
+    .normalStyle({
-        _component: "@budibase/standard-components/container",
+      background: "transparent",
-        _styles: {
+      "border-width": "0",
-          normal: {
+      "border-style": "None",
-            width: "700px",
+      color: "#9e9e9e",
-            padding: "0px",
+      "font-family": "Inter",
-            background: "white",
+      "font-weight": "500",
-            "border-radius": "0.5rem",
+      "font-size": "14px",
-            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      "margin-right": "8px",
-            margin: "auto",
+      "margin-left": "16px",
-            "margin-top": "20px",
+    })
-            "padding-top": "48px",
+    .hoverStyle({
-            "padding-bottom": "48px",
+      background: "transparent",
-            "padding-right": "48px",
+      color: "#4285f4",
-            "padding-left": "48px",
+    })
-            "margin-bottom": "20px",
+    .text("Delete")
+    .customProps({
+      className: "",
+      disabled: false,
+      onClick: [
+        {
+          parameters: {
+            rowId: "{{ data._id }}",
+            revId: "{{ data._rev }}",
+            tableId: table._id,
           },
-          hover: {},
+          "##eventHandlerType": "Delete Row",
-          active: {},
-          selected: {},
         },
-        _code: "",
+        {
-        className: "",
+          parameters: {
-        onLoad: [],
+            url: rowListUrl(table),
-        type: "div",
-        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-        _instanceName: "Container",
-        _children: [
-          {
-            _id: "c6e91622ba7984f468f70bf4bf5120246",
-            _component: "@budibase/standard-components/container",
-            _styles: {
-              normal: {
-                "font-size": "14px",
-                color: "#757575",
-              },
-              hover: {},
-              active: {},
-              selected: {},
-            },
-            _code: "",
-            className: "",
-            onLoad: [],
-            type: "div",
-            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-            _instanceName: "Breadcrumbs",
-            _children: [
-              {
-                _id: "caa33353c252c4931b2a51b48a559a7fc",
-                _component: "@budibase/standard-components/link",
-                _styles: {
-                  normal: {
-                    color: "#757575",
-                    "text-transform": "capitalize",
-                  },
-                  hover: {
-                    color: "#4285f4",
-                  },
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                url: `/${table.name.toLowerCase()}`,
-                openInNewTab: false,
-                text: table.name,
-                color: "",
-                hoverColor: "",
-                underline: false,
-                fontSize: "",
-                fontFamily: "initial",
-                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-                _instanceName: "Back Link",
-                _children: [],
-              },
-              {
-                _id: "c6e218170201040e7a74e2c8304fe1860",
-                _component: "@budibase/standard-components/text",
-                _styles: {
-                  normal: {
-                    "margin-right": "4px",
-                    "margin-left": "4px",
-                  },
-                  hover: {},
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                text: ">",
-                type: "none",
-                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-                _instanceName: "Arrow",
-                _children: [],
-              },
-              {
-                _id: "c799da1fa3a84442e947cc9199518f64c",
-                _component: "@budibase/standard-components/text",
-                _styles: {
-                  normal: {
-                    color: "#000000",
-                    "text-transform": "capitalize",
-                  },
-                  hover: {},
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                text: heading || "Edit",
-                type: "none",
-                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-                _instanceName: "Identifier",
-                _children: [],
-              },
-            ],
           },
-          {
+          "##eventHandlerType": "Navigate To",
-            _id: "cbd1637cd1e274287a3c28ef0bf235d08",
+        },
-            _component: "@budibase/standard-components/container",
+      ],
-            _styles: {
+    })
-              normal: {
+    .instanceName("Delete Button")
-                display: "flex",
+
-                "flex-direction": "row",
+  return makeTitleContainer(title)
-                "justify-content": "space-between",
+    .addChild(deleteButton)
-                "align-items": "center",
+    .addChild(saveButton)
-                "margin-top": "32px",
+}
-                "margin-bottom": "32px",
+
-              },
+const createScreen = (table, heading) => {
-              hover: {},
+  const dataform = new Component(
-              active: {},
+    "@budibase/standard-components/dataformwide"
-              selected: {},
+  ).instanceName("Form")
-            },
+
-            _code: "",
+  const container = makeMainContainer()
-            className: "",
+    .addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
-            onLoad: [],
+    .addChild(generateTitleContainer(table, heading || "Edit Row"))
-            type: "div",
+    .addChild(dataform)
-            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+
-            _instanceName: "Title Container",
+  return new Screen()
-            _children: [
+    .component("@budibase/standard-components/rowdetail")
-              {
+    .table(table._id)
-                _id: "c98d3675d04114558bbf28661c5ccfb8e",
+    .instanceName(`${table.name} - Detail`)
-                _component: "@budibase/standard-components/heading",
+    .route(rowDetailUrl(table))
-                _styles: {
+    .name("")
-                  normal: {
+    .addChild(container)
-                    margin: "0px",
+    .json()
-                    "margin-bottom": "0px",
+}
-                    "margin-right": "0px",
-                    "margin-top": "0px",
-                    "margin-left": "0px",
-                    flex: "1 1 auto",
-                    "text-transform": "capitalize",
-                  },
-                  hover: {},
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                className: "",
-                text: heading || "Edit Row",
-                type: "h3",
-                _instanceName: "Title",
-                _children: [],
-              },
-              {
-                _id: "c0a162cfb7d1c4bcfa8d24c290ccd1fd6",
-                _component: "@budibase/standard-components/button",
-                _styles: {
-                  normal: {
-                    background: "transparent",
-                    "border-width": "0",
-                    "border-style": "None",
-                    color: "#9e9e9e",
-                    "font-family": "Inter",
-                    "font-weight": "500",
-                    "font-size": "14px",
-                    "margin-right": "8px",
-                    "margin-left": "16px",
-                  },
-                  hover: {
-                    background: "transparent",
-                    color: "#4285f4",
-                  },
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                text: "Delete",
-                className: "",
-                disabled: false,
-                onClick: [
-                  {
-                    parameters: {
-                      rowId: "{{ data._id }}",
-                      revId: "{{ data._rev }}",
-                      tableId: table._id,
-                    },
-                    "##eventHandlerType": "Delete Row",
-                  },
-                  {
-                    parameters: {
-                      url: rowListUrl(table),
-                    },
-                    "##eventHandlerType": "Navigate To",
-                  },
-                ],
-                _instanceName: "Delete Button",
-                _children: [],
-              },
-              {
-                _id: "cae402bd3c6a44618a8341bf7ab9ab086",
-                _component: "@budibase/standard-components/button",
-                _styles: {
-                  normal: {
-                    background: "#000000",
-                    "border-width": "0",
-                    "border-style": "None",
-                    color: "#fff",
-                    "font-family": "Inter",
-                    "font-weight": "500",
-                    "font-size": "14px",
-                  },
-                  hover: {
-                    background: "#4285f4",
-                  },
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                text: "Save",
-                className: "",
-                disabled: false,
-                onClick: [
-                  {
-                    parameters: {
-                      contextPath: "data",
-                      tableId: table._id,
-                    },
-                    "##eventHandlerType": "Save Row",
-                  },
-                  {
-                    parameters: {
-                      url: rowListUrl(table),
-                    },
-                    "##eventHandlerType": "Navigate To",
-                  },
-                ],
-                _instanceName: "Save Button",
-                _children: [],
-              },
-            ],
-          },
-          {
-            _id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
-            _component: "@budibase/standard-components/dataformwide",
-            _styles: {
-              normal: {},
-              hover: {},
-              active: {},
-              selected: {},
-            },
-            _code: "",
-            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-            _instanceName: "Form",
-            _children: [],
-          },
-        ],
-      },
-    ],
-    _instanceName: `${table.name} - Detail`,
-    _code: "",
-  },
-  routing: {
-    route: rowDetailUrl(table),
-    accessLevelId: "",
-  },
-  name: "",
-})

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -1,5 +1,7 @@
 import sanitizeUrl from "./utils/sanitizeUrl"
 import { newRowUrl } from "./newRowScreen"
+import { Screen } from "./utils/Screen"
+import { Component } from "./utils/Component"
 
 export default function(tables) {
   return tables.map(table => {
@@ -14,162 +16,103 @@ export default function(tables) {
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
 export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
 
-const createScreen = table => ({
+function generateTitleContainer(table) {
-  props: {
+  const newButton = new Component("@budibase/standard-components/button")
-    _id: "c7365379815e4457dbe703a886c2da43b",
+    .normalStyle({
-    _component: "@budibase/standard-components/container",
+      background: "#000000",
-    _styles: {
+      "border-width": "0",
-      normal: {},
+      "border-style": "None",
-      hover: {},
+      color: "#fff",
-      active: {},
+      "font-family": "Inter",
-      selected: {},
+      "font-weight": "500",
-    },
+      "font-size": "14px",
-    type: "div",
+    })
-    _children: [
+    .hoverStyle({
-      {
+      background: "#4285f4",
-        _id: "cf51241fc063d4d87be032dd509fe0244",
+    })
-        _component: "@budibase/standard-components/container",
+    .text("Create New")
-        _styles: {
+    .customProps({
-          normal: {
+      className: "",
-            background: "white",
+      disabled: false,
-            "border-radius": "0.5rem",
+      onClick: [
-            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        {
-            margin: "auto",
+          parameters: {
-            "margin-top": "20px",
+            url: newRowUrl(table),
-            "border-width": "2px",
-            "border-color": "rgba(0, 0, 0, 0.1)",
-            "border-style": "None",
-            "padding-top": "48px",
-            "padding-bottom": "48px",
-            "padding-right": "48px",
-            "padding-left": "48px",
-            "margin-bottom": "20px",
           },
-          hover: {},
+          "##eventHandlerType": "Navigate To",
-          active: {},
-          selected: {},
         },
-        _code: "",
+      ],
-        className: "",
+    })
-        onLoad: [],
+    .instanceName("New Button")
-        type: "div",
+
-        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+  const heading = new Component("@budibase/standard-components/heading")
-        _instanceName: "Container",
+    .normalStyle({
-        _children: [
+      margin: "0px",
-          {
+      flex: "1 1 auto",
-            _id: "c73294c301fd145aabe9bbbbd96a150ac",
+      "text-transform": "capitalize",
-            _component: "@budibase/standard-components/container",
+    })
-            _styles: {
+    .type("h3")
-              normal: {
+    .instanceName("Title")
-                display: "flex",
+    .text(table.name)
-                "flex-direction": "row",
+
-                "justify-content": "space-between",
+  return new Component("@budibase/standard-components/container")
-                "align-items": "center",
+    .type("div")
-                "margin-bottom": "32px",
+    .normalStyle({
-              },
+      display: "flex",
-              hover: {},
+      "flex-direction": "row",
-              active: {},
+      "justify-content": "space-between",
-              selected: {},
+      "align-items": "center",
-            },
+      "margin-bottom": "32px",
-            _code: "",
+    })
-            className: "",
+    .instanceName("Title Container")
-            onLoad: [],
+    .addChild(heading)
-            type: "div",
+    .addChild(newButton)
-            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+}
-            _instanceName: "Title Container",
+
-            _children: [
+const createScreen = table => {
-              {
+  const datagrid = new Component("@budibase/standard-components/datagrid")
-                _id: "c2b77901df95a4d1ca7204c58300bc94b",
+    .customProps({
-                _component: "@budibase/standard-components/heading",
+      datasource: {
-                _styles: {
+        label: table.name,
-                  normal: {
+        name: `all_${table._id}`,
-                    margin: "0px",
+        tableId: table._id,
-                    flex: "1 1 auto",
+        type: "table",
-                    "text-transform": "capitalize",
-                  },
-                  hover: {},
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                className: "",
-                text: table.name,
-                type: "h3",
-                _instanceName: "Title",
-                _children: [],
-              },
-              {
-                _id: "c12a82d77baf24ca9922ea0af7cd4f723",
-                _component: "@budibase/standard-components/button",
-                _styles: {
-                  normal: {
-                    background: "#000000",
-                    "border-width": "0",
-                    "border-style": "None",
-                    color: "#fff",
-                    "font-family": "Inter",
-                    "font-weight": "500",
-                    "font-size": "14px",
-                  },
-                  hover: {
-                    background: "#4285f4",
-                  },
-                  active: {},
-                  selected: {},
-                },
-                _code: "",
-                text: "Create New",
-                className: "",
-                disabled: false,
-                onClick: [
-                  {
-                    parameters: {
-                      url: newRowUrl(table),
-                    },
-                    "##eventHandlerType": "Navigate To",
-                  },
-                ],
-                _instanceName: "New Button",
-                _children: [],
-              },
-            ],
-          },
-          {
-            _id: "ca686a2ed89c943e6bafb63fa66a3ead3",
-            _component: "@budibase/standard-components/datagrid",
-            _styles: {
-              normal: {},
-              hover: {},
-              active: {},
-              selected: {},
-            },
-            _code: "",
-            datasource: {
-              label: table.name,
-              name: `all_${table._id}`,
-              tableId: table._id,
-              type: "table",
-            },
-            editable: false,
-            theme: "alpine",
-            height: "540",
-            pagination: true,
-            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
-            _instanceName: "Grid",
-            _children: [],
-            detailUrl: `${table.name.toLowerCase()}/:id`,
-          },
-        ],
       },
-    ],
+      editable: false,
-    _instanceName: `${table.name} - List`,
+      theme: "alpine",
-    _code: "",
+      height: "540",
-    className: "",
+      pagination: true,
-    onLoad: [],
+      detailUrl: `${table.name.toLowerCase()}/:id`,
-  },
+    })
-  routing: {
+    .instanceName("Grid")
-    route: rowListUrl(table),
+
-    accessLevelId: "",
+  const mainContainer = new Component("@budibase/standard-components/container")
-  },
+    .normalStyle({
-  name: "",
+      background: "white",
-})
+      "border-radius": "0.5rem",
+      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      margin: "auto",
+      "margin-top": "20px",
+      "border-width": "2px",
+      "border-color": "rgba(0, 0, 0, 0.1)",
+      "border-style": "None",
+      "padding-top": "48px",
+      "padding-bottom": "48px",
+      "padding-right": "48px",
+      "padding-left": "48px",
+      "margin-bottom": "20px",
+    })
+    .type("div")
+    .instanceName("Container")
+    .addChild(generateTitleContainer(table))
+    .addChild(datagrid)
+
+  return new Screen()
+    .component("@budibase/standard-components/container")
+    .mainType("div")
+    .route(rowListUrl(table))
+    .instanceName(`${table.name} - List`)
+    .name("")
+    .addChild(mainContainer)
+    .json()
+}

packages/builder/src/builderStore/store/screenTemplates/utils/BaseStructure.js

@@ -4,8 +4,7 @@ export class BaseStructure {
   constructor(isScreen) {
     this._isScreen = isScreen
     this._children = []
-    this._json = {
+    this._json = {}
-    }
   }
 
   addChild(child) {

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -1,6 +1,7 @@
 import { Component } from "./Component"
+import { rowListUrl } from "../rowListScreen"
 
-export function linkComponent(tableName) {
+export function makeLinkComponent(tableName) {
   return new Component("@budibase/standard-components/link")
     .normalStyle({
       color: "#757575",
@@ -19,4 +20,126 @@ export function linkComponent(tableName) {
       fontSize: "",
       fontFamily: "initial",
     })
-}
+}
+
+export function makeMainContainer() {
+  return new Component("@budibase/standard-components/container")
+    .type("div")
+    .normalStyle({
+      width: "700px",
+      padding: "0px",
+      background: "white",
+      "border-radius": "0.5rem",
+      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      margin: "auto",
+      "margin-top": "20px",
+      "padding-top": "48px",
+      "padding-bottom": "48px",
+      "padding-right": "48px",
+      "padding-left": "48px",
+      "margin-bottom": "20px",
+    })
+    .instanceName("Container")
+}
+
+export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
+  const link = makeLinkComponent(tableName).instanceName("Back Link")
+
+  const arrowText = new Component("@budibase/standard-components/text")
+    .type("none")
+    .normalStyle({
+      "margin-right": "4px",
+      "margin-left": "4px",
+    })
+    .text(">")
+    .instanceName("Arrow")
+
+  const textStyling = {
+    color: "#000000",
+  }
+  if (capitalise) {
+    textStyling["text-transform"] = "capitalize"
+  }
+  const identifierText = new Component("@budibase/standard-components/text")
+    .type("none")
+    .normalStyle(textStyling)
+    .text(text)
+    .instanceName("Identifier")
+
+  return new Component("@budibase/standard-components/container")
+    .type("div")
+    .normalStyle({
+      "font-size": "14px",
+      color: "#757575",
+    })
+    .instanceName("Breadcrumbs")
+    .addChild(link)
+    .addChild(arrowText)
+    .addChild(identifierText)
+}
+
+export function makeSaveButton(table) {
+  return new Component("@budibase/standard-components/button")
+    .normalStyle({
+      background: "#000000",
+      "border-width": "0",
+      "border-style": "None",
+      color: "#fff",
+      "font-family": "Inter",
+      "font-weight": "500",
+      "font-size": "14px",
+      "margin-left": "16px",
+    })
+    .hoverStyle({
+      background: "#4285f4",
+    })
+    .text("Save")
+    .customProps({
+      className: "",
+      disabled: false,
+      onClick: [
+        {
+          parameters: {
+            contextPath: "data",
+            tableId: table._id,
+          },
+          "##eventHandlerType": "Save Row",
+        },
+        {
+          parameters: {
+            url: rowListUrl(table),
+          },
+          "##eventHandlerType": "Navigate To",
+        },
+      ],
+    })
+    .instanceName("Save Button")
+}
+
+export function makeTitleContainer(title) {
+  const heading = new Component("@budibase/standard-components/heading")
+    .normalStyle({
+      margin: "0px",
+      "margin-bottom": "0px",
+      "margin-right": "0px",
+      "margin-top": "0px",
+      "margin-left": "0px",
+      flex: "1 1 auto",
+    })
+    .type("h3")
+    .instanceName("Title")
+    .text(title)
+
+  return new Component("@budibase/standard-components/container")
+    .type("div")
+    .normalStyle({
+      display: "flex",
+      "flex-direction": "row",
+      "justify-content": "space-between",
+      "align-items": "center",
+      "margin-top": "32px",
+      "margin-bottom": "32px",
+    })
+    .instanceName("Title Container")
+    .addChild(heading)
+}

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -62,7 +62,10 @@
     const listScreen = screens.find(screen =>
       screen.props._instanceName.endsWith("List")
     )
-    await store.actions.components.links.save(listScreen.routing.route, table.name)
+    await store.actions.components.links.save(
+      listScreen.routing.route,
+      table.name
+    )
 
     // Navigate to new table
     $goto(`./table/${table._id}`)

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -25,7 +25,9 @@
     <DataList on:change bind:value={parameter.value}>
       <option value="" />
       {#each $allScreens as screen}
-        <option value={screen.routing.route}>{screen.props._instanceName}</option>
+        <option value={screen.routing.route}>
+          {screen.props._instanceName}
+        </option>
       {/each}
     </DataList>
   {:else}

packages/client/src/render/screenRouter.js

@@ -43,7 +43,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
     return sanitize(url)
   }
 
-  const routes = screens.map(s => makeRootedPath(s.route))
+  const routes = screens.map(s => makeRootedPath(s.routing?.route))
   let fallback = routes.findIndex(([p]) => p === makeRootedPath("*"))
   if (fallback < 0) fallback = 0
 

packages/server/src/api/controllers/routing.js

@@ -2,8 +2,38 @@ const { getRoutingInfo } = require("../../utilities/routing")
 const { AccessController } = require("../../utilities/security/accessLevels")
 
 async function getRoutingStructure(appId) {
-  let baseRouting = await getRoutingInfo(appId)
+  const screenRoutes = await getRoutingInfo(appId)
-  return baseRouting
+  const routing = {}
+  for (let screenRoute of screenRoutes) {
+    const fullpath = screenRoute.routing.route
+    // replace the first value with the home route
+    const subpaths = ["/"].concat(fullpath.split("/").splice(1))
+    // special case for when it is simply the home route "/", this creates a weird scenario
+    if (subpaths[1] === "") {
+      subpaths.splice(1, 1)
+    }
+    const accessLevel = screenRoute.routing.accessLevelId
+    // iterate through the tree initially to flesh out all the required subpaths
+    let currentPath = routing,
+      nextSubpath = routing
+    for (let subpath of subpaths) {
+      if (!nextSubpath[subpath]) {
+        nextSubpath[subpath] = {
+          subpaths: {},
+        }
+      }
+      currentPath = nextSubpath ? nextSubpath : currentPath[subpath]
+      nextSubpath = currentPath[subpath].subpaths
+    }
+    const correctPath = currentPath[subpaths[subpaths.length - 1]]
+    if (!correctPath.screens) {
+      correctPath.screens = {}
+    }
+    correctPath.screens[accessLevel] = screenRoute.id
+    correctPath.fullpath = fullpath
+  }
+
+  return { routes: routing }
 }
 
 exports.fetch = async ctx => {
@@ -14,4 +44,5 @@ exports.clientFetch = async ctx => {
   const routing = getRoutingStructure(ctx.appId)
   // use the access controller to pick which access level is applicable to this user
   const accessController = new AccessController(ctx.appId)
+  // TODO: iterate through the routes and pick which the user can access
 }

packages/server/src/api/index.js

@@ -4,7 +4,7 @@ const compress = require("koa-compress")
 const zlib = require("zlib")
 const { budibaseAppsDir } = require("../utilities/budibaseDir")
 const { isDev } = require("../utilities")
-const {mainRoutes, authRoutes, staticRoutes} = require("./routes")
+const { mainRoutes, authRoutes, staticRoutes } = require("./routes")
 
 const router = new Router()
 const env = require("../environment")

packages/server/src/utilities/security/accessLevels.js

@@ -18,7 +18,7 @@ function AccessLevel(id, name, inherits = null) {
 
 exports.BUILTIN_LEVELS = {
   ADMIN: new AccessLevel(BUILTIN_IDS.ADMIN, "Admin", BUILTIN_IDS.POWER),
-  POWER: new AccessLevel(BUILTIN_IDS.POWER, "Admin", BUILTIN_IDS.BASIC),
+  POWER: new AccessLevel(BUILTIN_IDS.POWER, "Power", BUILTIN_IDS.BASIC),
   BASIC: new AccessLevel(BUILTIN_IDS.BASIC, "Basic", BUILTIN_IDS.ANON),
   ANON: new AccessLevel(BUILTIN_IDS.ANON, "Anonymous"),
   BUILDER: new AccessLevel(BUILTIN_IDS.BUILDER, "Builder"),