merge

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.16",
+  "version": "0.0.24",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/bootstrap-components/package.json

@@ -12,7 +12,7 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.16",
+    "@budibase/client": "^0.0.24",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",
@@ -30,7 +30,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.16",
+  "version": "0.0.24",
   "license": "MIT",
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }

packages/builder/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@budibase/builder",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "license": "AGPL-3.0",
+  "private": true,
   "scripts": {
     "build": "rollup -c",
     "start": "rollup -c -w",
@@ -34,7 +35,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/client": "^0.0.16",
+    "@budibase/client": "^0.0.24",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
     "date-fns": "^1.29.0",

packages/builder/rollup.config.js

@@ -16,7 +16,9 @@ const _builderProxy = proxy("/_builder", {
   pathRewrite: { "^/_builder": "" },
 })
 
-const apiProxy = proxy(["/_builder/api/**", "/_builder/**/componentlibrary"], {
+const apiProxy = proxy(
+  ["/_builder/assets/**", "/_builder/api/**", "/_builder/**/componentlibrary"],
+  {
     target,
     logLevel: "debug",
     changeOrigin: true,
@@ -26,7 +28,8 @@ const apiProxy = proxy(["/_builder/api/**", "/_builder/**/componentlibrary"], {
         proxyReq.setHeader("origin", target)
       }
     },
-})
+  }
+)
 
 const production = !process.env.ROLLUP_WATCH
 

packages/builder/src/PackageRoot.svelte

@@ -10,7 +10,7 @@
 
   <div class="top-nav">
     <button class="home-logo">
-      <img src="/assets/budibase-logo-only.png" />
+      <img src="/_builder/assets/budibase-logo-only.png" />
     </button>
     <!-- <IconButton icon="home"
                     color="var(--slate)"
@@ -56,7 +56,6 @@
     height: 48px;
     background: white;
     padding: 0px 15px 0 1.8rem;
-    width: 100%;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #ddd;

packages/builder/src/accessLevels/AccessLevelView.svelte

@@ -24,12 +24,18 @@
     ((!p2.nodeKey && !p1.nodeKey) || p2.nodeKey === p1.nodeKey)
 
   const hasPermission = hasPerm =>
-    some(p => matchPermissions(p, hasPerm))(clonedLevel.permissions)
+    clonedLevel.permissions.some(permission =>
+      matchPermissions(permission, hasPerm)
+    )
 
-  $: permissionMatrix = map(p => ({
+  $: permissionMatrix = allPermissions.map(permission => ({
-    permission: p,
+    permission,
-    hasPermission: hasPermission(p),
+    hasPermission: hasPermission(permission),
-  }))(allPermissions)
+  }))
+
+  $: allPermissionsSelected = permissionMatrix.every(
+    permission => permission.hasPermission
+  )
 
   const getPermissionName = perm =>
     perm.nodeKey ? `${perm.type} - ${perm.nodeKey}` : perm.type
@@ -37,7 +43,7 @@
   const save = () => {
     const newLevels = isNew
       ? [...allLevels, clonedLevel]
-      : [...filter(l => l.name !== level.name)(allLevels), clonedLevel]
+      : [...allLevels.filter(l => l.name !== level.name), clonedLevel]
 
     errors = validateAccessLevels(hierarchy, actions, newLevels)
 
@@ -56,6 +62,7 @@
         clonedLevel.permissions
       )
     }
+    allPermissions = allPermissions
   }
 </script>
 
@@ -68,6 +75,15 @@
     <Textbox label="Access Level Name" bind:text={clonedLevel.name} />
 
     <h4 class="budibase__title--4">Permissions</h4>
+
+    <Checkbox
+      label={'Select All'}
+      checked={allPermissionsSelected}
+      on:change={ev => {
+        permissionMatrix.forEach(permission =>
+          permissionChanged(permission.permission)(ev)
+        )
+      }} />
     {#each permissionMatrix as permission}
       <div class="permission-container">
         <Checkbox
@@ -92,6 +108,7 @@
 
 <style>
   .permission-container {
+    margin-top: 10px;
     margin-bottom: 10px;
   }
 </style>

packages/builder/src/builderStore/store.js

@@ -112,6 +112,7 @@ export const getStore = () => {
   store.moveDownComponent = moveDownComponent(store)
   store.copyComponent = copyComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
+  store.setMetadataProp = setMetadataProp(store)
   return store
 }
 
@@ -273,13 +274,13 @@ const saveCurrentNode = store => () => {
     const cloned = cloneDeep(s.currentNode)
     templateApi(s.hierarchy).constructNode(parentNode, cloned)
 
-    const newIndexOfchild = child => {
+    const newIndexOfChild = child => {
       if (child === cloned) return index
       const currentIndex = parentNode.children.indexOf(child)
       return currentIndex >= index ? currentIndex + 1 : currentIndex
     }
 
-    parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfchild)])
+    parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfChild)])
 
     if (!existingNode && s.currentNode.type === "record") {
       const defaultIndex = templateApi(s.hierarchy).getNewIndexTemplate(
@@ -517,6 +518,7 @@ const setCurrentScreen = store => screenName => {
     screen._css = generate_screen_css([screen.props])
     s.currentPreviewItem = screen
     s.currentFrontEndType = "screen"
+    s.currentView = "detail"
 
     s.currentComponentInfo = makePropsSafe(
       getContainerComponent(s.components),
@@ -764,6 +766,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       ? _savePage(state)
       : _saveScreenApi(state.currentPreviewItem, state)
 
+    state.currentView = "component"
     state.currentComponentInfo = newComponent.props
 
     return state
@@ -794,6 +797,7 @@ const selectComponent = store => component => {
       ? component
       : state.components.find(c => c.name === component._component)
     state.currentComponentInfo = makePropsSafe(componentDef, component)
+    state.currentView = "component"
     return state
   })
 }
@@ -952,6 +956,13 @@ const walkProps = (props, action, cancelToken = null) => {
   }
 }
 
+const setMetadataProp = store => (name, prop) => {
+  store.update(s => {
+    s.currentPreviewItem[name] = prop
+    return s
+  })
+}
+
 const _saveCurrentPreviewItem = s =>
   s.currentFrontEndType === "page"
     ? _savePage(s)

packages/builder/src/common/Select.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="select-container">
-  <select on:change {value}>
+  <select on:change bind:value>
     <slot />
   </select>
   <span class="arrow">
@@ -23,6 +23,7 @@
   }
 
   select {
+    height: 35px;
     display: block;
     font-family: sans-serif;
     font-weight: 500;
@@ -37,7 +38,6 @@
     appearance: none;
     background: #fff;
     border: 1px solid #ccc;
-    height: 35px;
   }
 
   .arrow {

packages/builder/src/database/ActionsHeader.svelte

@@ -19,9 +19,11 @@
 </script>
 
 <div class="root" style="left: {left}">
-
   <ButtonGroup>
-    <ActionButton color="secondary" grouped on:click={store.saveCurrentNode}>
+    <ActionButton
+      color="secondary"
+      grouped
+      on:click={store.saveCurrentNode}>
       {#if $store.currentNodeIsNew}Create{:else}Update{/if}
     </ActionButton>
 

packages/builder/src/main.js

@@ -6,8 +6,8 @@ import "/assets/roboto-v20-latin-ext_latin-400"
 import "/assets/roboto-v20-latin-ext_latin-500"
 import "/assets/roboto-v20-latin-ext_latin-700"
 import "/assets/roboto-v20-latin-ext_latin-900"
-import "/assets/budibase-logo.png"
+import "/_builder/assets/budibase-logo.png"
-import "/assets/budibase-logo-only.png"
+import "/_builder/assets/budibase-logo-only.png"
 import "uikit/dist/css/uikit.min.css"
 import "uikit/dist/js/uikit.min.js"
 import "codemirror/lib/codemirror.css"

packages/builder/src/nav/HierarchyRow.svelte

@@ -9,10 +9,11 @@
   let navActive = ""
   $: icon = type === "index" ? "list" : "file"
 
-  store.subscribe(s => {
+  store.subscribe(state => {
-    if (s.currentNode)
+    if (state.currentNode) {
       navActive =
-        s.activeNav === "database" && node.nodeId === s.currentNode.nodeId
+        state.activeNav === "database" && node.nodeId === state.currentNode.nodeId
+    }
   })
 </script>
 

packages/builder/src/userInterface/CodeEditor.svelte

@@ -1,7 +1,7 @@
 <script>
   import { store } from "../builderStore/store"
   import UIkit from "uikit"
-  import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import CodeMirror from "codemirror"
   import "codemirror/mode/javascript/javascript.js"
@@ -74,11 +74,13 @@
       </div>
     </div>
 
-    <ButtonGroup style="float: right;">
+    <div class="uk-modal-footer">
-      <Button color="primary" grouped on:click={save}>Save</Button>
+      <ButtonGroup>
-      <Button color="tertiary" grouped on:click={cancel}>Close</Button>
+        <ActionButton primary on:click={save}>Save</ActionButton>
+        <ActionButton alert on:click={cancel}>Close</ActionButton>
       </ButtonGroup>
     </div>
+  </div>
 </div>
 
 <style>

packages/builder/src/userInterface/ComponentPropertiesPanel.svelte

@@ -1,5 +1,6 @@
 <script>
   import PropsView from "./PropsView.svelte"
+  import StateBindingControl from "./StateBindingControl.svelte"
   import { store } from "../builderStore"
   import IconButton from "../common/IconButton.svelte"
   import {
@@ -18,12 +19,23 @@
 
   $: component = $store.currentComponentInfo
   $: originalName = component.name
-  $: name = component.name
+  $: name =
+    $store.currentView === "detail"
+      ? $store.currentPreviewItem.name
+      : component._component
   $: description = component.description
   $: components = $store.components
-
+  $: screen_props =
+    $store.currentFrontEndType === "page"
+      ? getProps($store.currentPreviewItem, ["name", "favicon"])
+      : getProps($store.currentPreviewItem, ["name", "description", "route"])
+  $: console.log(screen_props)
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
+
+  function getProps(obj, keys) {
+    return keys.map((k, i) => [k, obj[k], obj.props._id + i])
+  }
 </script>
 
 <div class="root">
@@ -64,11 +76,23 @@
       </li>
     {/if}
   </ul>
-  {$store.currentFrontEndType}
   <div class="component-props-container">
 
     {#if current_view === 'props'}
+      {#if $store.currentView === 'detail'}
+        {#each screen_props as [k, v, id] (id)}
+          <div class="detail-prop" for={k}>
+            <label>{k}:</label>
+            <input
+              id={k}
+              value={v}
+              on:input={({ target }) => store.setMetadataProp(k, target.value)} />
+          </div>
+        {/each}
         <PropsView {component} {components} {onPropChanged} />
+      {:else}
+        <PropsView {component} {components} {onPropChanged} />
+      {/if}
     {:else if current_view === 'layout'}
       <LayoutEditor {onStyleChanged} {component} />
     {:else if current_view === 'events'}
@@ -85,6 +109,41 @@
 </div>
 
 <style>
+  .detail-prop {
+    height: 40px;
+    margin-bottom: 15px;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 70px 1fr;
+    grid-gap: 10px;
+  }
+
+  .detail-prop label {
+    word-wrap: break-word;
+    font-size: 12px;
+    font-weight: 700;
+    color: #163057;
+    opacity: 0.6;
+    padding-top: 12px;
+    margin-bottom: 0;
+  }
+
+  input {
+    height: 30px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+    opacity: 0.5;
+  }
+
+  input:focus {
+    outline: 0;
+    background-color: #fff;
+    color: #666;
+    border-color: #1e87f0;
+  }
+
   .root {
     height: 100%;
     display: flex;

packages/builder/src/userInterface/ComponentSelectionList.svelte

@@ -35,13 +35,16 @@
   $: templatesByComponent = groupBy(t => t.component)($store.templates)
   $: hierarchy = $store.hierarchy
   $: libraryModules = $store.libraries
-  $: standaloneTemplates = pipe(templatesByComponent, [
+  $: standaloneTemplates = pipe(
+    templatesByComponent,
+    [
       values,
       flatten,
       filter(t => !$store.components.some(c => c.name === t.component)),
       map(t => ({ name: splitName(t.component).componentName, template: t })),
       uniqBy(t => t.name),
-  ])
+    ]
+  )
 
   const addRootComponent = (component, allComponents) => {
     const { libName } = splitName(component.name)
@@ -122,7 +125,7 @@
   </Select>
 
   <div class="library-container">
-    <ul>
+    <!-- <ul>
       <li>
         <button
           class:selected={current_view === 'text'}
@@ -144,7 +147,7 @@
           <ImageIcon />
         </button>
       </li>
-    </ul>
+    </ul> -->
 
     {#if componentLibrary}
       {#each generate_components_list(componentLibrary.components) as component}
@@ -221,9 +224,10 @@
   }
 
   .library-container {
-    padding: 0 0 10px 10px;
+    padding: 0 0 10px 0;
     flex: 1 1 auto;
     min-height: 0px;
+    margin-top: 20px;
   }
 
   .component-container {
@@ -237,7 +241,7 @@
     cursor: pointer;
     border: 1px solid #ebebeb;
     border-radius: 2px;
-    margin: 10px 0;
+    margin: 5px 0;
     height: 40px;
     box-sizing: border-box;
     color: #163057;
@@ -300,7 +304,7 @@
     border-radius: 5px;
   }
 
-  li button {
+  /* li button {
     width: 100%;
     height: 100%;
     background: none;
@@ -309,12 +313,12 @@
     padding: 12px;
     outline: none;
     cursor: pointer;
-  }
+  } */
 
-  .selected {
+  /* .selected {
     color: var(--button-text);
     background: var(--background-button) !important;
-  }
+  } */
 
   .open {
     color: rgba(0, 85, 255, 1);

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -21,18 +21,18 @@
   {#if $store.currentFrontEndType === 'page' || $store.screens.length}
     <div class="switcher">
 
-      <button
-        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab(PROPERTIES_TAB)}>
-        Properties
-      </button>
-
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}
         on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
         Components
       </button>
 
+      <button
+        class:selected={selected === PROPERTIES_TAB}
+        on:click={() => selectTab(PROPERTIES_TAB)}>
+        Properties
+      </button>
+
     </div>
 
     <div class="panel">
@@ -45,8 +45,6 @@
       {/if}
 
     </div>
-  {:else}
-    <p>Please create a new screen</p>
   {/if}
 
 </div>
@@ -56,13 +54,14 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 2rem 1.5rem 2rem 1.5rem;
+    padding: 2rem 0;
   }
 
   .switcher {
     display: flex;
     justify-content: space-between;
     margin-bottom: 25px;
+    padding: 0 1.5rem;
   }
 
   .switcher > button {
@@ -86,5 +85,6 @@
     flex: 1 1 auto;
     height: 0px;
     overflow-y: auto;
+    padding: 0 1.5rem 1.5rem 1.5rem;
   }
 </style>

packages/builder/src/userInterface/NewScreen.svelte

@@ -3,6 +3,7 @@
   import PropsView from "./PropsView.svelte"
   import Textbox from "../common/Textbox.svelte"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import { pipe } from "../common/core"
   import UIkit from "uikit"
@@ -122,8 +123,8 @@
       </div>
 
       <ButtonGroup style="float: right;">
-        <Button color="primary" grouped on:click={save}>Create Screen</Button>
+        <ActionButton primary on:click={save}>Create Screen</ActionButton>
-        <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
+        <ActionButton alert on:click={cancel}>Cancel</ActionButton>
       </ButtonGroup>
     </div>
   </div>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -119,9 +119,11 @@
   .ui-nav {
     grid-column: 1;
     background-color: var(--secondary5);
-    height: 100%;
+    height: calc(100vh - 49px);
-    padding: 0 1.5rem 0rem 0;
+    padding: 0;
-    overflow-y: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .preview-pane {
@@ -209,4 +211,9 @@
     margin-top: 1.5rem;
     width: calc(100% + 1.5rem);
   }
+
+  .components-list-container {
+    overflow: auto;
+    padding: 0 30px 0 0;
+  }
 </style>

packages/cli/.npmignore

@@ -0,0 +1,3 @@
+*
+!bin/*
+!src/**/*

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "budibase",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "description": "Budibase CLI",
   "repository": "https://github.com/Budibase/Budibase",
   "homepage": "https://budibase.com",
@@ -20,8 +20,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/datastores": "^0.0.16",
+    "@budibase/datastores": "^0.0.24",
-    "@budibase/server": "^0.0.16",
+    "@budibase/server": "^0.0.24",
     "@inquirer/password": "^0.0.6-alpha.0",
     "chalk": "^2.4.2",
     "fs-extra": "^8.1.0",

packages/cli/src/commands/init/index.js

@@ -15,7 +15,7 @@ module.exports = {
       type: "string",
       describe: "config template file to use - optional, defaults to config.js",
       alias: "c",
-      default: "config.dev.js",
+      default: "dev",
       choices: ["dev", "contributors"],
     })
     yargs.positional("username", {
@@ -26,7 +26,7 @@ module.exports = {
     })
     yargs.positional("password", {
       type: "string",
-      describe: "passord for admin interface",
+      describe: "password for admin interface",
       alias: "p",
       default: "",
     })

packages/cli/src/commands/new/appPackageTemplate/package.json

@@ -8,7 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@budibase/standard-components": "^0.0.3",
+    "@budibase/standard-components": "0.x",
-    "@budibase/materialdesign-components": "^0.0.16"
+    "@budibase/materialdesign-components": "0.x"
   }
 }

packages/client/.npmignore

@@ -0,0 +1,2 @@
+*
+!dist/*

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",

packages/client/src/render/attachChildren.js

@@ -24,6 +24,8 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
     childNode.destroy()
   }
 
+  if (!htmlElement) return
+
   if (hydrate) {
     while (htmlElement.firstChild) {
       htmlElement.removeChild(htmlElement.firstChild)

packages/client/src/state/bbComponentApi.js

@@ -13,10 +13,14 @@ export const bbFactory = ({
   uiFunctions,
   onScreenSlotRendered,
 }) => {
-  const relativeUrl = url =>
+  const relativeUrl = url => {
-    frontendDefinition.appRootPath
+    if (!frontendDefinition.appRootPath) return url
-      ? frontendDefinition.appRootPath + "/" + trimSlash(url)
+    if (url.startsWith("http:") 
-      : url
+        || url.startsWith("https:") 
+        || url.startsWith("./")) return url
+
+    return frontendDefinition.appRootPath + "/" + trimSlash(url)
+  }
 
   const apiCall = method => (url, body) =>
     fetch(relativeUrl(url), {

packages/core/.npmignore

@@ -0,0 +1,2 @@
+*
+!dist/*

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/core",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "description": "core javascript library for budibase",
   "main": "dist/budibase-core.umd.js",
   "module": "dist/budibase-core.esm.js",

packages/datastores/.npmignore

@@ -0,0 +1,5 @@
+*
+!datastores/*
+!index.js
+!config.js
+!config.template.js

packages/datastores/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/datastores",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "description": "implementations of all the datastores... azureblob, local etc",
   "main": "index.js",
   "scripts": {
@@ -27,7 +27,7 @@
     "@babel/core": "^7.1.2",
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
-    "@budibase/core": "^0.0.16",
+    "@budibase/core": "^0.0.24",
     "es6-promisify": "^6.0.1",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.13",

packages/materialdesign-components/.npmignore

@@ -0,0 +1,3 @@
+*
+!dist/*
+!components.json

packages/materialdesign-components/dist/generators.js

@@ -1 +0,0 @@
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuZXJhdG9ycy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

packages/materialdesign-components/package.json

@@ -12,9 +12,16 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.16",
+    "@budibase/client": "^0.0.24",
-    "@budibase/standard-components": "^0.0.16",
+    "@budibase/standard-components": "^0.0.24",
     "@material/button": "^4.0.0",
+    "@material/checkbox": "^4.0.0",
+    "@material/data-table": "4.0.0",
+    "@material/form-field": "^4.0.0",
+    "@material/list": "4.0.0",
+    "@material/menu": "4.0.0",
+    "@material/radio": "^4.0.0",
+    "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
     "fs-extra": "^8.1.0",
@@ -37,16 +44,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.16",
+  "version": "0.0.24",
   "license": "MIT",
-  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
+  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-  "dependencies": {
-    "@material/checkbox": "^4.0.0",
-    "@material/data-table": "4.0.0",
-    "@material/form-field": "^4.0.0",
-    "@material/list": "4.0.0",
-    "@material/menu": "4.0.0",
-    "@material/radio": "^4.0.0",
-    "@material/textfield": "^4.0.0"
-  }
 }

packages/materialdesign-components/rollup.config.js

@@ -1,6 +1,7 @@
 import svelte from "rollup-plugin-svelte"
 import postcss from "rollup-plugin-postcss"
 import resolve from "rollup-plugin-node-resolve"
+import commonjs from "rollup-plugin-commonjs"
 
 const postcssOptions = () => ({
   extensions: [".scss", ".sass"],
@@ -16,6 +17,10 @@ const postcssOptions = () => ({
   ],
 })
 
+const coreExternal = [
+  "shortid",
+]
+
 export default {
   input: "src/index.js",
   output: [
@@ -30,7 +35,18 @@ export default {
     svelte({
       hydratable: true,
     }),
-    resolve(),
+    resolve({
+      preferBuiltins: true,
+      browser: true,
+      dedupe: importee => {
+        return coreExternal.includes(importee)
+      },
+    }),
+    commonjs({
+      namedExports: {
+        shortid: ["generate"],
+      },
+    }),
     postcss(postcssOptions()),
   ],
 }

packages/materialdesign-components/src/Checkbox/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import Formfield from "../Common/Formfield.svelte"
   import { fieldStore } from "../Common/FormfieldStore.js"
   import ClassBuilder from "../ClassBuilder.js"
@@ -7,6 +7,8 @@
 
   export let onClick = item => {}
 
+  export let _bb
+
   export let id = ""
   export let label = ""
   export let disabled = false
@@ -16,15 +18,16 @@
 
   let instance = null
   let checkbox = null
-
+  let context = _bb.getContext("BBMD:input:context")
-  let context = getContext("BBMD:input:context")
 
   onMount(() => {
     if (!!checkbox) {
       instance = new MDCCheckbox(checkbox)
       instance.indeterminate = indeterminate
       if (context !== "list-item") {
-        let fieldStore = getContext("BBMD:field-element")
+        //TODO: Fix this connected to Formfield context issue
+        let fieldStore = _bb.getContext("BBMD:field-element")
+        if(fieldStore)
           fieldStore.setInput(instance)
       }
     }
@@ -41,6 +44,14 @@
   let props = { modifiers, extras }
 
   const blockClass = cb.build({ props })
+
+  function changed(e) {
+    const val = e.target.checked
+    checked = val
+    if (_bb.isBound(_bb.props.checked)) {
+      _bb.setStateFromBinding(_bb.props.checked, val)
+    }
+  }
 </script>
 
 <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
@@ -54,7 +65,8 @@
         {id}
         {disabled}
         {checked}
-        on:click={onClick} />
+        on:click={onClick}
+        on:change={changed} />
       <div class={cb.elem`background`}>
         <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
           <path
@@ -75,6 +87,7 @@
       {id}
       {disabled}
       {checked}
+      on:change={changed}
       on:click={onClick} />
     <div class={cb.elem`background`}>
       <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">

packages/materialdesign-components/src/Common/Formfield.svelte

@@ -3,13 +3,14 @@
   import ClassBuilder from "../ClassBuilder.js"
   import { fieldStore } from "./FormfieldStore.js"
   import { MDCFormField } from "@material/form-field"
-  import { onMount, onDestroy, setContext } from "svelte"
+  import { onMount, onDestroy } from "svelte"
 
   const cb = new ClassBuilder("form-field")
 
   let store
   const unsubscribe = fieldStore.subscribe(s => (store = s))
 
+  export let _bb
   export let id = ""
   export let label = ""
   export let alignEnd = false
@@ -23,7 +24,8 @@
 
   onMount(() => {
     if (!!formField) fieldStore.set(new MDCFormField(formField))
-    setContext("BBMD:field-element", fieldStore)
+    //TODO: Fix this, _bb is coming back undefined
+    // _bb.setContext("BBMD:field-element", fieldStore)
   })
 
   onDestroy(unsubscribe)

packages/materialdesign-components/src/Common/ItemStore.js

@@ -0,0 +1,54 @@
+import { writable } from "svelte/store";
+
+function createItemsStore(componentOnSelect) {
+    const { subscribe, set, update } = writable([]);
+
+    function addItem(item) {
+        update(items => {
+            return [...items, item]                  
+        })
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function addSingleItem(item) {
+        set([item])
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function removeItem(itemId) {
+        update(items => {
+            let index = getItemIdx(items, itemId)
+            items.splice(index, 1);
+            return items;
+        })
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function clearItems() {
+        set([]);
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function getItemIdx(items, itemId) {
+        return items.findIndex(i => i._id === itemId);
+    }
+
+    return {
+        subscribe,
+        addItem,
+        addSingleItem,
+        removeItem,
+        clearItems,
+        getItemIdx
+    }
+}
+
+export default createItemsStore

packages/materialdesign-components/src/List/List.svelte

@@ -1,10 +1,13 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { onMount, getContext, setContext } from "svelte"
   import { MDCList } from "@material/list"
+  import createItemsStore from "../Common/ItemStore.js"
   import { MDCRipple } from "@material/ripple"
   import ListItem from "./ListItem.svelte"
   import ClassBuilder from "../ClassBuilder.js"
 
+  let selectedItems
+
   export let _bb
   const cb = new ClassBuilder("list", ["one-line"])
 
@@ -13,15 +16,24 @@
 
   export let onSelect = selectedItems => {}
 
-  export let variant = "one-line"
-  //items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n]
-  export let items = []
   export let singleSelection = false
-
+  export let variant = "two-line"
   export let inputElement = null
 
+  let selectedItemsStore
+
   let role = "listbox"
 
+  function createOrAcceptItemStore() {
+    let store = _bb.getContext("BBMD:list:selectItemStore")
+    if (!!store) {
+      selectedItemsStore = store
+    } else {
+      selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+      _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+    }
+  }
+
   onMount(() => {
     createOrAcceptItemStore()
 
@@ -32,11 +44,14 @@
         singleSelection,
       })
     }
+
     if (!!list) {
+      if (!inputElement) {
         instance = new MDCList(list)
         instance.singleSelection = singleSelection
         instance.listElements.map(element => new MDCRipple(element))
       }
+    }
 
     let context = getContext("BBMD:list:context")
     if (context === "menu") {
@@ -49,28 +64,6 @@
     }
   })
 
-  function handleSelectedItem(item) {
-    if (!item.disabled) {
-      if (singleSelection || inputElement === "radiobutton") {
-        items.forEach(i => {
-          if (i.selected) i.selected = false
-        })
-      }
-
-      let idx = items.indexOf(item)
-      if (!!item.selected) {
-        items[idx].selected = !item.selected
-      } else {
-        items[idx].selected = true
-      }
-      onSelect(items.filter(item => item.selected))
-    }
-  }
-
-  $: useDoubleLine =
-    variant == "two-line" &&
-    items.every(i => typeof i.text == "object" && "primary" in i.text)
-
   $: list && _bb.attachChildren(list)
 
   $: modifiers = { variant }

packages/materialdesign-components/src/List/ListItem.svelte

@@ -3,15 +3,23 @@
   import { Radiobutton } from "../Radiobutton"
   import { Checkbox } from "../Checkbox"
   import ClassBuilder from "../ClassBuilder.js"
+  import { generate } from "shortid"
 
   const cb = new ClassBuilder("list-item")
 
   export let onClick = item => {}
 
+  let _id
+  let listProps = null
+
+  let selectedItems
+
+  export let _bb
+
+  export let value = null
   export let text = ""
   export let secondaryText = ""
-  export let variant = "two-line"
+
-  export let inputElement = null
   export let leadingIcon = ""
   export let trailingIcon = ""
   export let selected = false
@@ -20,32 +28,63 @@
   let role = "option"
 
   onMount(() => {
-    let context = getContext("BBMD:list:context")
+    _id = generate()
+
+    selectedItems = _bb.getContext("BBMD:list:selectItemStore")
+
+    listProps = _bb.getContext("BBMD:list:props")
+
+    let context = _bb.getContext("BBMD:list:context")
     if (context === "menu") {
       role = "menuitem"
     }
   })
 
-  $: if (!!inputElement) {
+  function handleClick() {
-    setContext("BBMD:input:context", "list-item")
+    let item = {
+      _id,
+      value,
+      text,
+      secondaryText,
+      selected,
+      disabled,
+    }
+    if (!disabled) {
+      if (
+        listProps.singleSelection ||
+        listProps.inputElement === "radiobutton"
+      ) {
+        selectedItems.addSingleItem(item)
+      } else {
+        let idx = selectedItems.getItemIdx($selectedItems, _id)
+        if (idx > -1) {
+          selectedItems.removeItem(_id)
+        } else {
+          selectedItems.addItem(item)
+        }
+      }
+    }
   }
 
+  $: if (listProps && !!listProps.inputElement) {
+    _bb.setContext("BBMD:input:context", "list-item")
+  }
+
+  $: isSelected =
+    $selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1
+
   $: modifiers = {
-    selected,
+    selected: isSelected && (!listProps || !listProps.inputElement),
     disabled,
   }
   $: props = { modifiers }
   $: listItemClass = cb.build({ props })
 
-  $: useTwoLine = variant === "two-line" && !!secondaryText
+  $: useTwoLine =
+    listProps && listProps.variant === "two-line" && !!secondaryText
 </script>
 
-<li
+<li class={listItemClass} role="option" tabindex="0" on:click={handleClick}>
-  class={listItemClass}
-  role="option"
-  aria-selected={selected}
-  tabindex="0"
-  on:click={onClick}>
   {#if leadingIcon}
     <span class="mdc-list-item__graphic material-icons" aria-hidden="true">
       {leadingIcon}
@@ -58,11 +97,11 @@
     {:else}{text}{/if}
   </span>
 
-  {#if inputElement}
+  {#if listProps}
-    {#if inputElement === 'radiobutton'}
+    {#if listProps.inputElement === 'radiobutton'}
-      <Radiobutton checked={selected} {disabled} />
+      <Radiobutton checked={isSelected} {disabled} {_bb} />
-    {:else if inputElement === 'checkbox'}
+    {:else if listProps.inputElement === 'checkbox'}
-      <Checkbox checked={selected} {disabled} />
+      <Checkbox checked={isSelected} {disabled} {_bb} />
     {/if}
   {:else if trailingIcon}
     <!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient -->

packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte

@@ -1,10 +1,11 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import Formfield from "../Common/Formfield.svelte"
   import ClassBuilder from "../ClassBuilder.js"
   import { MDCRadio } from "@material/radio"
 
   export let onClick = item => {}
+  export let _bb
 
   export let id = ""
   export let label = ""
@@ -16,13 +17,13 @@
   let instance = null
   let radiobtn = null
 
-  let context = getContext("BBMD:input:context")
+  let context = _bb.getContext("BBMD:input:context")
 
   onMount(() => {
     if (!!radiobtn) {
       instance = new MDCRadio(radiobtn)
       if (context !== "list-item") {
-        let fieldStore = getContext("BBMD:field-element")
+        let fieldStore = _bb.getContext("BBMD:field-element")
         fieldStore.setInput(instance)
       }
     }

packages/materialdesign-components/src/Templates/indexDatatable.js

@@ -33,6 +33,15 @@ const tableProps = (index, indexSchema) => ({
       ],
     },
   ],
+  onLoad: [
+    {
+      "##eventHandlerType": "List Records",
+      parameters: {
+        indexKey: "/all_contacts",
+        statePath: "all_contacts",
+      },
+    },
+  ],
 })
 
 const columnHeaders = indexSchema =>

packages/materialdesign-components/src/Templates/recordForm.js

@@ -12,7 +12,7 @@ const outerContainer = record => ({
     {
       "##eventHandlerType": "Get New Record",
       parameters: {
-        collectionKey: record.collectionKey,
+        collectionKey: record.collectionNodeKey(),
         childRecordType: record.name,
         statePath: record.name,
       },
@@ -32,6 +32,10 @@ const heading = record => ({
 
 const field = (record, f) => {
   if (f.type === "bool") return checkbox(record, f)
+  if (f.type === "string" 
+      && f.typeOptions 
+      && f.typeOptions.values 
+      && f.typeOptions.values.length > 0) return select(record, f) 
   return textField(record, f)
 }
 
@@ -54,6 +58,16 @@ const checkbox = (record, f) => ({
   checked: fieldValueBinding(record, f),
 })
 
+const select = (record, f) => ({
+  _component: "@budibase/standard-components/select",
+  value: fieldValueBinding(record, f),
+  _children: f.typeOptions.values.map(val => ({
+    _component: "@budibase/standard-components/option",
+    value: val,
+    text: val
+  }))
+})
+
 const fieldValueBinding = (record, f) => `state.${record.name}.${f.name}`
 
 const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -33,10 +33,6 @@
             Button,
             BodyBoundToStore,
             Textfield,
-            Checkbox,
-            Checkboxgroup,
-            Radiobutton,
-            Radiobuttongroup,
             Icon,
             Datatable,
             CustomersIndexTable,

packages/materialdesign-components/src/Test/props.js

@@ -117,12 +117,13 @@ export const props = {
   CustomersIndexTable: indexDatatable(templateOptions)[0].props,
   List: {
     _component: "@budibase/materialdesign-components/List",
+    variant: "two-line",
+    singleSelection: false,
+    onSelect: selected => console.log(selected),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        variant: "two-line",
-        singleSelection: true,
         text: "Curry",
         secondaryText: "Chicken or Beef",
         value: 0,
@@ -131,8 +132,6 @@ export const props = {
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        variant: "two-line",
-        singleSelection: true,
         text: "Pastie",
         secondaryText: "Bap with Mayo",
         value: 1,
@@ -141,16 +140,11 @@ export const props = {
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        variant: "two-line",
-        singleSelection: true,
         text: "Fish",
         secondaryText: "Salmon or Cod",
         value: 2,
       },
-    ],
+    ]
-    variant: "two-line",
-    singleSelection: true,
-    onSelect: selected => console.log(selected),
   },
   Menu: {
     _component: "@budibase/materialdesign-components/Menu",

packages/server/.npmignore

@@ -0,0 +1,8 @@
+myapps/
+config.js
+public/
+.vscode/
+node_modules/
+runtime_apps/
+tests/
+appPackages/testApp*

packages/server/appPackages/_master/.gitignore

@@ -1,78 +1 @@
-builder/*
+dist/
-.data/
-.temp/
-packages/server/runtime_apps/
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless

packages/server/appPackages/_master/components/Login Screen.json

@@ -1,14 +0,0 @@
-{
-  "name": "Login Screen",
-  "description": "",
-  "inherits": "@budibase/standard-components/login",
-  "props": {
-    "logo": "_shared/budibase-logo.png"
-  },
-  "tags": [
-    "login",
-    "credentials",
-    "password",
-    "logon"
-  ]
-}

packages/server/appPackages/_master/components/Main View Switcher.json

@@ -1,228 +0,0 @@
-{
-  "name": "Main View Switcher",
-  "description": "",
-  "inherits": "@budibase/standard-components/nav",
-  "props": {
-    "items": [
-      {
-        "_component": "#items#array_element",
-        "title": "Apps List",
-        "component": {
-          "_component": "apps/Apps List",
-          "direction": "horizontal",
-          "children": [
-            {
-              "_component": "#children#array_element",
-              "control": {
-                "_component": "apps/Create App List Item",
-                "text": "Create New",
-                "component": {
-                  "_component": ""
-                },
-                "containerClass": "",
-                "background": "",
-                "border": "1px solid black",
-                "borderRadius": "2px",
-                "font": "",
-                "color": "",
-                "padding": "10px",
-                "margin": "20px",
-                "hoverColor": "",
-                "hoverBackground": "gainsboro",
-                "height": "100px",
-                "width": "100px",
-                "onClick": [
-                  {
-                    "##eventHandlerType": "Get New Record",
-                    "parameters": {
-                      "collectionKey": "/applications",
-                      "childRecordType": "application",
-                      "statePath": "currentApplication"
-                    }
-                  }
-                ]
-              }
-            }
-          ],
-          "width": "auto",
-          "height": "auto",
-          "containerClass": "",
-          "itemContainerClass": "",
-          "data": {
-            "##bbstate": "allApplications",
-            "##bbsource": "store"
-          },
-          "dataItemComponent": {
-            "_component": "apps/Application List Item",
-            "text": "",
-            "component": {
-              "_component": "@budibase/standard-components/stackpanel",
-              "children": [
-                {
-                  "_component": "#children#array_element",
-                  "control": {
-                    "_component": "@budibase/standard-components/text",
-                    "value": "",
-                    "containerClass": "",
-                    "font": "",
-                    "color": "",
-                    "textAlign": "inline",
-                    "verticalAlign": "inline",
-                    "display": "inline"
-                  }
-                }
-              ],
-              "width": "auto",
-              "height": "auto",
-              "containerClass": "",
-              "itemContainerClass": "",
-              "data": {
-                "##bbstate": ""
-              },
-              "dataItemComponent": {
-                "_component": ""
-              },
-              "onLoad": []
-            },
-            "containerClass": "",
-            "background": "",
-            "border": "1px solid dimgray",
-            "borderRadius": "2px",
-            "font": "",
-            "color": "black",
-            "padding": "10px",
-            "margin": "20px",
-            "hoverColor": "",
-            "hoverBackground": "",
-            "height": "",
-            "width": "",
-            "onClick": [
-              {
-                "##eventHandlerType": "Load Record",
-                "parameters": {
-                  "recordKey": {
-                    "##bbstate": "key",
-                    "##bbsource": "context"
-                  },
-                  "statePath": "currentApp"
-                }
-              }
-            ],
-            "display": "inline"
-          },
-          "onLoad": [
-            {
-              "##eventHandlerType": "List Records",
-              "parameters": {
-                "indexKey": "/all_applications",
-                "statePath": "allApplications"
-              }
-            }
-          ],
-          "component": {
-            "_component": "@budibase/standard-components/stackpanel",
-            "direction": "horizontal",
-            "children": [
-              {
-                "_component": "#children#array_element",
-                "control": {
-                  "_component": "@budibase/standard-components/text",
-                  "value": "",
-                  "containerClass": "",
-                  "font": "",
-                  "color": "",
-                  "textAlign": "inline",
-                  "verticalAlign": "inline",
-                  "display": "inline"
-                }
-              }
-            ],
-            "width": "auto",
-            "height": "auto",
-            "containerClass": "",
-            "itemContainerClass": "",
-            "data": {
-              "##bbstate": "allApplications",
-              "##bbsource": "store"
-            },
-            "dataItemComponent": {
-              "_component": "apps/Application List Item",
-              "text": {
-                "##bbstate": "name",
-                "##bbstatefallback": "My App Name",
-                "##bbsource": "context"
-              },
-              "component": {
-                "_component": "@budibase/standard-components/stackpanel",
-                "direction": "horizontal",
-                "children": [
-                  {
-                    "_component": "#children#array_element",
-                    "control": {
-                      "_component": "@budibase/standard-components/text",
-                      "value": "",
-                      "containerClass": "",
-                      "font": "",
-                      "color": "",
-                      "textAlign": "inline",
-                      "verticalAlign": "inline",
-                      "display": "inline"
-                    }
-                  }
-                ],
-                "width": "auto",
-                "height": "auto",
-                "containerClass": "",
-                "itemContainerClass": "",
-                "data": {
-                  "##bbstate": "allApplications",
-                  "##bbsource": "store"
-                },
-                "dataItemComponent": {
-                  "_component": ""
-                },
-                "onLoad": []
-              },
-              "containerClass": "",
-              "background": "",
-              "border": "1px solid dimgray",
-              "borderRadius": "2px",
-              "font": "",
-              "color": "black",
-              "padding": "10px",
-              "margin": "20px",
-              "hoverColor": "",
-              "hoverBackground": "",
-              "height": "",
-              "width": "",
-              "onClick": [
-                {
-                  "##eventHandlerType": "Load Record",
-                  "parameters": {
-                    "recordKey": {
-                      "##bbstate": "key",
-                      "##bbsource": "context"
-                    },
-                    "statePath": "currentApplication"
-                  }
-                }
-              ],
-              "display": ""
-            },
-            "onLoad": []
-          }
-        }
-      }
-    ],
-    "selectedItem": {
-      "##bbstate": "currentView",
-      "##bbstatefallback": "Apps List",
-      "##bbsource": "store"
-    }
-  },
-  "tags": [
-    "nav",
-    "navigation",
-    "sidebar"
-  ]
-}

packages/server/appPackages/_master/components/apps/App Form.json

@@ -1,25 +0,0 @@
-{
-  "name": "apps/App Form",
-  "description": "",
-  "inherits": "@budibase/standard-components/form",
-  "props": {
-    "formControls": [
-      {
-        "_component": "#formControls#array_element",
-        "label": "Name",
-        "control": {
-          "_component": "@budibase/standard-components/textbox",
-          "value": {
-            "##bbstate": "currentApplication.name",
-            "##bbsource": "store"
-          },
-          "hideValue": false,
-          "className": "default"
-        }
-      }
-    ]
-  },
-  "tags": [
-    "form"
-  ]
-}

packages/server/appPackages/_master/components/apps/Application List Item.json

@@ -1,65 +0,0 @@
-{
-  "name": "apps/Application List Item",
-  "description": "",
-  "inherits": "@budibase/standard-components/panel",
-  "props": {
-    "border": "1px solid dimgray",
-    "borderRadius": "2px",
-    "color": "black",
-    "padding": "10px",
-    "margin": "20px",
-    "onClick": [
-      {
-        "##eventHandlerType": "Load Record",
-        "parameters": {
-          "recordKey": {
-            "##bbstate": "key",
-            "##bbsource": "context"
-          },
-          "statePath": "currentApplication"
-        }
-      }
-    ],
-    "component": {
-      "_component": "@budibase/standard-components/stackpanel",
-      "direction": "horizontal",
-      "children": [
-        {
-          "_component": "#children#array_element",
-          "control": {
-            "_component": "@budibase/standard-components/text",
-            "value": "",
-            "containerClass": "",
-            "font": "",
-            "color": "",
-            "textAlign": "inline",
-            "verticalAlign": "inline",
-            "display": "inline"
-          }
-        }
-      ],
-      "width": "auto",
-      "height": "auto",
-      "containerClass": "",
-      "itemContainerClass": "",
-      "data": {
-        "##bbstate": "allApplications",
-        "##bbsource": "store"
-      },
-      "dataItemComponent": {
-        "_component": ""
-      },
-      "onLoad": []
-    },
-    "display": "",
-    "text": {
-      "##bbstate": "name",
-      "##bbstatefallback": "My App Name",
-      "##bbsource": "context"
-    }
-  },
-  "tags": [
-    "div",
-    "container"
-  ]
-}

packages/server/appPackages/_master/components/apps/Apps List.json

@@ -1,210 +0,0 @@
-{
-  "name": "Main App Screen",
-  "description": "",
-  "inherits": "@budibase/standard-components/stackpanel",
-  "props": {
-    "children": [
-      {
-        "_component": "#children#array_element",
-        "control": {
-          "_component": "apps/Create App List Item",
-          "text": "Create New",
-          "component": {
-            "_component": ""
-          },
-          "containerClass": "",
-          "background": "",
-          "border": "1px solid black",
-          "borderRadius": "2px",
-          "font": "",
-          "color": "",
-          "padding": "10px",
-          "margin": "20px",
-          "hoverColor": "",
-          "hoverBackground": "gainsboro",
-          "height": "100px",
-          "width": "100px",
-          "onClick": [
-            {
-              "##eventHandlerType": "Get New Record",
-              "parameters": {
-                "collectionKey": "/applications",
-                "childRecordType": "application",
-                "statePath": "currentApplication"
-              }
-            }
-          ]
-        }
-      }
-    ],
-    "onLoad": [
-      {
-        "##eventHandlerType": "List Records",
-        "parameters": {
-          "indexKey": "/all_applications",
-          "statePath": "allApplications"
-        }
-      }
-    ],
-    "data": {
-      "##bbstate": "allApplications",
-      "##bbsource": "store"
-    },
-    "dataItemComponent": {
-      "_component": "apps/Application List Item",
-      "text": "",
-      "component": {
-        "_component": "@budibase/standard-components/stackpanel",
-        "children": [
-          {
-            "_component": "#children#array_element",
-            "control": {
-              "_component": "@budibase/standard-components/text",
-              "value": "",
-              "containerClass": "",
-              "font": "",
-              "color": "",
-              "textAlign": "inline",
-              "verticalAlign": "inline",
-              "display": "inline"
-            }
-          }
-        ],
-        "width": "auto",
-        "height": "auto",
-        "containerClass": "",
-        "itemContainerClass": "",
-        "data": {
-          "##bbstate": ""
-        },
-        "dataItemComponent": {
-          "_component": ""
-        },
-        "onLoad": []
-      },
-      "containerClass": "",
-      "background": "",
-      "border": "1px solid dimgray",
-      "borderRadius": "2px",
-      "font": "",
-      "color": "black",
-      "padding": "10px",
-      "margin": "20px",
-      "hoverColor": "",
-      "hoverBackground": "",
-      "height": "",
-      "width": "",
-      "onClick": [
-        {
-          "##eventHandlerType": "Load Record",
-          "parameters": {
-            "recordKey": {
-              "##bbstate": "key",
-              "##bbsource": "context"
-            },
-            "statePath": "currentApp"
-          }
-        }
-      ],
-      "display": "inline"
-    },
-    "component": {
-      "_component": "@budibase/standard-components/stackpanel",
-      "direction": "horizontal",
-      "children": [
-        {
-          "_component": "#children#array_element",
-          "control": {
-            "_component": "@budibase/standard-components/text",
-            "value": "",
-            "containerClass": "",
-            "font": "",
-            "color": "",
-            "textAlign": "inline",
-            "verticalAlign": "inline",
-            "display": "inline"
-          }
-        }
-      ],
-      "width": "auto",
-      "height": "auto",
-      "containerClass": "",
-      "itemContainerClass": "",
-      "data": {
-        "##bbstate": "allApplications",
-        "##bbsource": "store"
-      },
-      "dataItemComponent": {
-        "_component": "apps/Application List Item",
-        "text": {
-          "##bbstate": "name",
-          "##bbstatefallback": "My App Name",
-          "##bbsource": "context"
-        },
-        "component": {
-          "_component": "@budibase/standard-components/stackpanel",
-          "direction": "horizontal",
-          "children": [
-            {
-              "_component": "#children#array_element",
-              "control": {
-                "_component": "@budibase/standard-components/text",
-                "value": "",
-                "containerClass": "",
-                "font": "",
-                "color": "",
-                "textAlign": "inline",
-                "verticalAlign": "inline",
-                "display": "inline"
-              }
-            }
-          ],
-          "width": "auto",
-          "height": "auto",
-          "containerClass": "",
-          "itemContainerClass": "",
-          "data": {
-            "##bbstate": "allApplications",
-            "##bbsource": "store"
-          },
-          "dataItemComponent": {
-            "_component": ""
-          },
-          "onLoad": []
-        },
-        "containerClass": "",
-        "background": "",
-        "border": "1px solid dimgray",
-        "borderRadius": "2px",
-        "font": "",
-        "color": "black",
-        "padding": "10px",
-        "margin": "20px",
-        "hoverColor": "",
-        "hoverBackground": "",
-        "height": "",
-        "width": "",
-        "onClick": [
-          {
-            "##eventHandlerType": "Load Record",
-            "parameters": {
-              "recordKey": {
-                "##bbstate": "key",
-                "##bbsource": "context"
-              },
-              "statePath": "currentApplication"
-            }
-          }
-        ],
-        "display": ""
-      },
-      "onLoad": []
-    }
-  },
-  "tags": [
-    "div",
-    "container",
-    "layout",
-    "panel"
-  ]
-}

packages/server/appPackages/_master/components/apps/Create App List Item.json

@@ -1,30 +0,0 @@
-{
-  "name": "apps/Create App List Item",
-  "description": "",
-  "inherits": "@budibase/standard-components/panel",
-  "props": {
-    "text": "Create New",
-    "padding": "10px",
-    "hoverColor": "",
-    "margin": "20px",
-    "border": "1px solid black",
-    "borderRadius": "2px",
-    "hoverBackground": "gainsboro",
-    "height": "100px",
-    "width": "100px",
-    "onClick": [
-      {
-        "##eventHandlerType": "Get New Record",
-        "parameters": {
-          "collectionKey": "/applications",
-          "childRecordType": "application",
-          "statePath": "currentApplication"
-        }
-      }
-    ]
-  },
-  "tags": [
-    "div",
-    "container"
-  ]
-}

packages/server/appPackages/_master/components/apps/Edit App .json

@@ -1,37 +0,0 @@
-{
-  "name": "apps/Edit App ",
-  "description": "",
-  "inherits": "@budibase/standard-components/stackpanel",
-  "props": {
-    "children": [
-      {
-        "_component": "#children#array_element",
-        "control": {
-          "_component": "apps/App Form",
-          "containerClass": "",
-          "formControls": [
-            {
-              "_component": "#formControls#array_element",
-              "label": "Name",
-              "control": {
-                "_component": "@budibase/standard-components/textbox",
-                "value": {
-                  "##bbstate": "currentApplication.name",
-                  "##bbsource": "store"
-                },
-                "hideValue": false,
-                "className": "default"
-              }
-            }
-          ]
-        }
-      }
-    ]
-  },
-  "tags": [
-    "div",
-    "container",
-    "layout",
-    "panel"
-  ]
-}

packages/server/appPackages/_master/package-lock.json

@@ -0,0 +1,247 @@
+{
+  "name": "masterui",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@budibase/materialdesign-components": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@budibase/materialdesign-components/-/materialdesign-components-0.0.16.tgz",
+      "integrity": "sha512-4nXZ2UXJNgZwcbl3ZvE+vLWbwpId6Xg0QIO1bsh8Kh9aRE2oX2oWwr/+f6PT4AcCeM+oU144maXPgK2a8k1e7Q==",
+      "requires": {
+        "@material/checkbox": "^4.0.0",
+        "@material/data-table": "4.0.0",
+        "@material/form-field": "^4.0.0",
+        "@material/radio": "^4.0.0",
+        "@material/textfield": "^4.0.0"
+      }
+    },
+    "@budibase/standard-components": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@budibase/standard-components/-/standard-components-0.0.16.tgz",
+      "integrity": "sha512-QSbnuAfBa1+lWgBZiY2WbD8NUh3/WAuh6HWmFlcKCrVblPFH/3nz3fGuWKRFbvz8uZvWaai6pC3Es4NiefUViw=="
+    },
+    "@material/animation": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-4.0.0.tgz",
+      "integrity": "sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/base": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/base/-/base-4.0.0.tgz",
+      "integrity": "sha512-vHm7fkqXzjdfxifXvlmaZColoIfKuWmO+1rvdzDORTWP+A8Dq70cgKd2I1SBqxzDGjOasMzHbQI6f9MISQf2vQ==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/checkbox": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-4.0.0.tgz",
+      "integrity": "sha512-2ONHncYAmyIQewvedKDJGeiMvLjmX7wBH5Lx0OBYSwa9nuwjXGWEQR8tNOHIZzevV+nPyGexl6HyvgZ2QNUVZg==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/density": "^4.0.0",
+        "@material/dom": "^4.0.0",
+        "@material/feature-targeting": "^4.0.0",
+        "@material/ripple": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "@material/touch-target": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/data-table": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-4.0.0.tgz",
+      "integrity": "sha512-tCjdynaqPATCIi8YWOCo9ie8tyHlxlIpyfMuRx3dVD90P8aIdNEc74LoeAQc2TuOwKZJJqG8WYkA2p6uUNaz2Q==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/checkbox": "^4.0.0",
+        "@material/density": "^4.0.0",
+        "@material/dom": "^4.0.0",
+        "@material/elevation": "^4.0.0",
+        "@material/feature-targeting": "^4.0.0",
+        "@material/ripple": "^4.0.0",
+        "@material/rtl": "^4.0.0",
+        "@material/shape": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "@material/typography": "^4.0.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "@material/density": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/density/-/density-4.0.0.tgz",
+      "integrity": "sha512-PuOCPCXlWjimTq+OuCS8biAb1JE9aXCZwT1dRG9REAIAK7bN8KeeTzkeJp6jTj+ggZjWphwKF0lKeX6Gv+e/lw=="
+    },
+    "@material/dom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-4.0.0.tgz",
+      "integrity": "sha512-GRCJT9+PGWqygZwGf1XLTrbmzP35YWG7+T0hpfhoIJO8VDiMTeyfvhJXFuA2wh9pD0noEjte0lmbdBlykrbWZw==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/elevation": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-4.0.0.tgz",
+      "integrity": "sha512-wKffoZcqkwAMWYbfGJJ95RDeOFz/IMvF7ye4VamjUwLb1iPiKxUZKUcd40XpuEvsn794HSIEWfGDsRq7BxJAMQ==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/feature-targeting": "^4.0.0",
+        "@material/theme": "^4.0.0"
+      }
+    },
+    "@material/feature-targeting": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-4.0.0.tgz",
+      "integrity": "sha512-0gk+f151vqmEdWkrQ9ocPlQRU9aUtSGsVBhletqIbsthLUsZIz9qk25FHjV1wHd/bGHknd9NH+T8ENprv3KLFg=="
+    },
+    "@material/floating-label": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0.tgz",
+      "integrity": "sha512-ovuZKhH7U+YmZk8kXftYCdEaU9InJdkBsPe4TP+dg4HiO1lWmd7ZxVsMo6iTl4yaFofkBPj3VDkbE1fLnHxKPA==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/rtl": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "@material/typography": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/form-field": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0.tgz",
+      "integrity": "sha512-M5+c7mitD4NIH+3kU2+uX1mUJJJPNYSUN3bAmhjbMxMISY9jkrbv9k5T9jlWRaIqvO6qJ1aDFOQASV8CsWstYQ==",
+      "requires": {
+        "@material/base": "^4.0.0",
+        "@material/feature-targeting": "^4.0.0",
+        "@material/ripple": "^4.0.0",
+        "@material/rtl": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "@material/typography": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/line-ripple": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0.tgz",
+      "integrity": "sha512-+vrgKlb2gUBIKxlzVKLn/tX76qJ0Z19RkH2i7mh4IdH8KxeEai8NQQYWqeOOKtyp8JbH0ObGyqJCwPo2VbHDmw==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/notched-outline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-4.0.0.tgz",
+      "integrity": "sha512-9WNG7dZS83nu72kmoknA3XyvZQIxx8QBjEB2Q2KGyRp4Q8zrzWxfcvTYgiOsYgvz013JnTqaqe4g0wjl6v789g==",
+      "requires": {
+        "@material/base": "^4.0.0",
+        "@material/floating-label": "^4.0.0",
+        "@material/rtl": "^4.0.0",
+        "@material/shape": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/radio": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/radio/-/radio-4.0.0.tgz",
+      "integrity": "sha512-3+TkORjxHwhI1SdiBWG3uvfx87LNBFlLMqLJISQsEUegUWGChNnp1DnkZIUqAJ1lXBHZsCjJFUrxKWE4RZ5hVA==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/density": "^4.0.0",
+        "@material/dom": "^4.0.0",
+        "@material/feature-targeting": "^4.0.0",
+        "@material/ripple": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "@material/touch-target": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/ripple": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-4.0.0.tgz",
+      "integrity": "sha512-9BLIOvyCP5sM+fQpLlcJZWyrHguusJq8E5A1pxg0wQwputOyaPBM7recHhYkJmVjzRpTcPgf1PkvkpN6DKGcNg==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/dom": "^4.0.0",
+        "@material/feature-targeting": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/rtl": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-4.0.0.tgz",
+      "integrity": "sha512-AP8zByVDEWAJVJoxByVccUbH+BX24IeG7ol+L6Qd8JjzPpz1fzPVJ4BeDNaF0a6sXtHsRmj2zN5dsx/BGC3IHg=="
+    },
+    "@material/shape": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-4.0.0.tgz",
+      "integrity": "sha512-wmr05YBrEL462QPiJ+t9xh5RqxzylXYo/8DVZnb/1WA9GZ6m38UK/8Awtip1cZAN34pzD/9p5AydyywlQVoI+g==",
+      "requires": {
+        "@material/feature-targeting": "^4.0.0"
+      }
+    },
+    "@material/textfield": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-4.0.0.tgz",
+      "integrity": "sha512-1Xg+nriTqFB8+5k8sGkR8LBeD3dRgNuhvwyU8XrUeAs5l/HMfn4CWgbEyZTaJ2EEtFPxnKGedAYqCEwXngwGWg==",
+      "requires": {
+        "@material/animation": "^4.0.0",
+        "@material/base": "^4.0.0",
+        "@material/density": "^4.0.0",
+        "@material/dom": "^4.0.0",
+        "@material/floating-label": "^4.0.0",
+        "@material/line-ripple": "^4.0.0",
+        "@material/notched-outline": "^4.0.0",
+        "@material/ripple": "^4.0.0",
+        "@material/rtl": "^4.0.0",
+        "@material/shape": "^4.0.0",
+        "@material/theme": "^4.0.0",
+        "@material/typography": "^4.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/theme": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-4.0.0.tgz",
+      "integrity": "sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==",
+      "requires": {
+        "@material/feature-targeting": "^4.0.0"
+      }
+    },
+    "@material/touch-target": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-4.0.0.tgz",
+      "integrity": "sha512-TM8xK1WwTZtP4vYQ7E7aZLdGKyP1GuG5Ilb0qlytX/gmC8Di/kRn6muDSZyeCCUcMXYth5Et0ceWtpNrcAQHMQ==",
+      "requires": {
+        "@material/feature-targeting": "^4.0.0"
+      }
+    },
+    "@material/typography": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-4.0.0.tgz",
+      "integrity": "sha512-lUG4yjG9fl1ryNX4OVnOmi+EjhiV4WsWcYt4yzffHrFg1RfKuCAV59j7TtmlMfZIkNDwqK5jvk3oOpTRDFpL8Q==",
+      "requires": {
+        "@material/feature-targeting": "^4.0.0"
+      }
+    },
+    "tslib": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.0.tgz",
+      "integrity": "sha512-BmndXUtiTn/VDDrJzQE7Mm22Ix3PxgLltW9bSNLoeCY31gnG2OPx0QqJnuc9oMIKioYrz487i6K9o4Pdn0j+Kg=="
+    }
+  }
+}

packages/server/appPackages/_master/package.json

@@ -1,15 +1,14 @@
 {
-  "name": "budibase-master",
+  "name": "masterui",
   "version": "1.0.0",
   "description": "",
-  "main": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
-  "license": "GPL-3.0",
+  "license": "ISC",
   "dependencies": {
-    "@budibase/client": "file:../../../client",
+    "@budibase/standard-components": "^0.0.19",
-    "@budibase/standard-components": "file:../../../standard-components"
+    "@budibase/materialdesign-components": "^0.0.19"
   }
 }

packages/server/appPackages/_master/pages.json

@@ -1,18 +0,0 @@
-{
-  "main": {
-    "index": {
-      "title": "Budibase"
-    },
-    "appBody": "apps/Apps List"
-  },
-  "unauthenticated": {
-    "index": {
-      "title": "Budibase - Login"
-    },
-    "appBody": "Login Screen"
-  },
-  "componentLibraries": [
-    "@budibase/standard-components"
-  ],
-  "stylesheets": []
-}

packages/server/appPackages/_master/pages/main/page.json

@@ -0,0 +1,199 @@
+{
+  "componentLibraries": [
+    "@budibase/standard-components",
+    "@budibase/materialdesign-components"
+  ],
+  "title": "Test App",
+  "favicon": "./_shared/favicon.png",
+  "stylesheets": [],
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_children": [
+      {
+        "_component": "@budibase/standard-components/container",
+        "_styles": {
+          "position": {
+            "column": [
+              "",
+              ""
+            ],
+            "row": [
+              "",
+              ""
+            ],
+            "margin": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "padding": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "height": [
+              "45px"
+            ],
+            "width": [
+              ""
+            ],
+            "zindex": [
+              ""
+            ]
+          },
+          "layout": {
+            "templaterows": [
+              ""
+            ],
+            "templatecolumns": [
+              ""
+            ]
+          }
+        },
+        "_id": "87243e59-d4f3-48fb-b601-ce659c99ab92",
+        "_code": "",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "backgroundColor": "",
+        "color": "",
+        "borderWidth": "0px 0px 1px 0px",
+        "borderColor": "#ddd",
+        "borderStyle": "solid",
+        "_children": [
+          {
+            "_component": "@budibase/standard-components/image",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_id": "972b8b5a-4dff-4afc-87c4-ee0530973e8d",
+            "_code": "",
+            "url": "/_shared/logo.png",
+            "className": "",
+            "description": "",
+            "height": "40px",
+            "width": "",
+            "_children": []
+          },
+          {
+            "_component": "@budibase/standard-components/text",
+            "_styles": {
+              "position": {
+                "column": [
+                  "",
+                  ""
+                ],
+                "row": [
+                  "",
+                  ""
+                ],
+                "margin": [
+                  "",
+                  "",
+                  "auto",
+                  "15px"
+                ],
+                "padding": [
+                  "",
+                  "",
+                  "auto",
+                  ""
+                ],
+                "height": [
+                  ""
+                ],
+                "width": [
+                  ""
+                ],
+                "zindex": [
+                  ""
+                ]
+              },
+              "layout": {
+                "templaterows": [
+                  ""
+                ],
+                "templatecolumns": [
+                  ""
+                ]
+              }
+            },
+            "_id": "fb6ad867-df0f-47c2-8dc4-3bcc20d4b1ca",
+            "_code": "",
+            "text": "Budibase Admin",
+            "font": "1.5em Verdana",
+            "color": "rgb(23, 49, 87)",
+            "textAlign": "inline",
+            "verticalAlign": "inline",
+            "formattingTag": "<em> - emphasized"
+          }
+        ]
+      },
+      {
+        "_component": "##builtin/screenslot",
+        "_styles": {
+          "position": {
+            "column": [
+              "",
+              ""
+            ],
+            "row": [
+              "",
+              ""
+            ],
+            "margin": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "padding": [
+              "10px",
+              "10px",
+              "10px",
+              "20px"
+            ],
+            "height": [
+              ""
+            ],
+            "width": [
+              ""
+            ],
+            "zindex": [
+              ""
+            ]
+          },
+          "layout": {
+            "templaterows": [
+              ""
+            ],
+            "templatecolumns": [
+              ""
+            ]
+          }
+        },
+        "_id": "a76adeb7-ba09-4671-807e-0a52784143f4",
+        "_code": "",
+        "_children": []
+      }
+    ],
+    "_id": 0,
+    "type": "div",
+    "_styles": {
+      "layout": {},
+      "position": {}
+    },
+    "_code": "",
+    "className": "",
+    "onLoad": [],
+    "backgroundColor": "",
+    "color": "",
+    "borderWidth": "",
+    "borderColor": "",
+    "borderStyle": "none"
+  },
+  "uiFunctions": ""
+}

packages/server/appPackages/_master/pages/main/screens/Apps List.json

@@ -0,0 +1,131 @@
+{
+  "name": "Apps List",
+  "description": "",
+  "url": "",
+  "uiFunctions": "",
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_styles": {
+      "position": {},
+      "layout": {}
+    },
+    "_id": "dc9992bb-fd7a-4f9e-ae49-d36073bf5047",
+    "_code": "",
+    "className": "",
+    "onLoad": [
+      {
+        "##eventHandlerType": "List Records",
+        "parameters": {
+          "indexKey": "/all_applications",
+          "statePath": "all_applications"
+        }
+      }
+    ],
+    "type": "div",
+    "backgroundColor": "",
+    "color": "",
+    "borderWidth": "",
+    "borderColor": "",
+    "borderStyle": "none",
+    "_children": [
+      {
+        "_component": "@budibase/materialdesign-components/H4",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "_id": "3a36045a-a9e5-43fc-8e54-0ba69eab2270",
+        "_code": "",
+        "text": "Applications",
+        "_children": []
+      },
+      {
+        "_component": "@budibase/standard-components/container",
+        "_styles": {
+          "position": {
+            "column": [
+              "",
+              ""
+            ],
+            "row": [
+              "",
+              ""
+            ],
+            "margin": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "padding": [
+              "10px",
+              "10px",
+              "10px",
+              "10px"
+            ],
+            "height": [
+              ""
+            ],
+            "width": [
+              ""
+            ],
+            "zindex": [
+              ""
+            ]
+          },
+          "layout": {
+            "templaterows": [
+              ""
+            ],
+            "templatecolumns": [
+              ""
+            ]
+          }
+        },
+        "_id": "8036b218-133e-4403-920d-19b79425bc8a",
+        "_code": "if (!state.all_applications) return\n\nfor (let application of state.all_applications) {\n  const newcontext = {\n    screenUrl: `/application/${application.id}`,\n    application\n  }\n  render(newcontext)\n}",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "backgroundColor": "",
+        "color": "",
+        "borderWidth": "",
+        "borderColor": "",
+        "borderStyle": "none",
+        "_children": [
+          {
+            "_component": "@budibase/materialdesign-components/Body2",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_id": "2b8521fd-329f-49e1-80e5-0bea3e4e6513",
+            "_code": "",
+            "text": "context.application.name",
+            "_children": []
+          },
+          {
+            "_component": "@budibase/materialdesign-components/Button",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_id": "9bd8e4d7-3f65-4490-8178-31d39a47aad1",
+            "_code": "",
+            "onClick": [],
+            "variant": "text",
+            "colour": "primary",
+            "size": "medium",
+            "href": "context.screenUrl",
+            "icon": "",
+            "trailingIcon": false,
+            "fullwidth": false,
+            "text": "Manage",
+            "disabled": false
+          }
+        ]
+      }
+    ]
+  },
+  "route": "*"
+}

packages/server/appPackages/_master/pages/main/screens/Manage App.json

@@ -0,0 +1,292 @@
+{
+  "name": "Manage App",
+  "description": "",
+  "url": "",
+  "uiFunctions": "",
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_styles": {
+      "position": {},
+      "layout": {}
+    },
+    "_id": "981e9bcc-a672-4c98-b78d-1b107a380fee",
+    "_code": "const routeId = route && route.id ? route.id : \"(no route)\"\n\nconst newcontext = {\n  instancesKey: `/applications/${routeId}/allinstances`,\n  newInstanceUrl: `/application/${routeId}/newinstance`,\n}\n\nrender(newcontext)",
+    "className": "",
+    "onLoad": [
+      {
+        "##eventHandlerType": "List Records",
+        "parameters": {
+          "indexKey": "context.instancesKey",
+          "statePath": "instances"
+        }
+      }
+    ],
+    "type": "div",
+    "backgroundColor": "",
+    "color": "",
+    "borderWidth": "",
+    "borderColor": "",
+    "borderStyle": "none",
+    "_children": [
+      {
+        "_component": "@budibase/materialdesign-components/H3",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "_id": "eb288d6b-d5e6-4b13-92c9-31953114cae4",
+        "_code": "",
+        "text": "Application Instances",
+        "_children": []
+      },
+      {
+        "_component": "@budibase/materialdesign-components/Button",
+        "_styles": {
+          "position": {
+            "row": [
+              "",
+              ""
+            ],
+            "column": [
+              "",
+              ""
+            ],
+            "padding": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "margin": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "width": [
+              ""
+            ],
+            "height": [
+              ""
+            ],
+            "zindex": [
+              ""
+            ]
+          },
+          "layout": {
+            "templatecolumns": [
+              ""
+            ],
+            "templaterows": [
+              ""
+            ]
+          }
+        },
+        "_id": "a4e41226-8dcb-4667-b70d-5a1853800ef8",
+        "_code": "",
+        "onClick": [],
+        "variant": "text",
+        "colour": "primary",
+        "size": "medium",
+        "href": "context.newInstanceUrl",
+        "icon": "",
+        "trailingIcon": false,
+        "fullwidth": false,
+        "text": "Create New instance",
+        "disabled": false
+      },
+      {
+        "_component": "@budibase/standard-components/container",
+        "_styles": {
+          "position": {
+            "column": [
+              "",
+              ""
+            ],
+            "row": [
+              "",
+              ""
+            ],
+            "margin": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "padding": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "height": [
+              "20px"
+            ],
+            "width": [
+              ""
+            ],
+            "zindex": [
+              ""
+            ]
+          },
+          "layout": {
+            "templaterows": [
+              ""
+            ],
+            "templatecolumns": [
+              ""
+            ]
+          }
+        },
+        "_id": "fcdaab55-ad2a-40a3-9602-91e32da00e69",
+        "_code": "",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "backgroundColor": "",
+        "color": "",
+        "borderWidth": "",
+        "borderColor": "",
+        "borderStyle": "none",
+        "_children": []
+      },
+      {
+        "_component": "@budibase/materialdesign-components/Datatable",
+        "_children": [
+          {
+            "_component": "@budibase/materialdesign-components/DatatableHead",
+            "_children": [
+              {
+                "_component": "@budibase/materialdesign-components/DatatableRow",
+                "isHeader": true,
+                "_children": [
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "isHeader": true,
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "active",
+                        "_id": "43b17a4a-3ed8-46f4-bb89-d8c20bd45387"
+                      }
+                    ],
+                    "_id": "825b4b47-1bba-4a58-ab02-25b81e02bb2a"
+                  },
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "isHeader": true,
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "datastoreconfig",
+                        "_id": "3d8e10ed-fc3a-463f-8d46-eba6a07d7ae8"
+                      }
+                    ],
+                    "_id": "e34bfd4b-5cc8-4680-869e-b0c1e799212d"
+                  },
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "isHeader": true,
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "name",
+                        "_id": "d62a01b9-e954-4962-a92b-a1f669c1ad0a"
+                      }
+                    ],
+                    "_id": "a81b5a57-9670-47c8-96d1-20b1458997ad"
+                  },
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "isHeader": true,
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "version",
+                        "_id": "5d6f4b14-ed98-440e-9adf-412625e9fb50"
+                      }
+                    ],
+                    "_id": "8e99113d-b570-4aa1-ac63-5cf1e9a1973b"
+                  }
+                ],
+                "_id": "155b0085-54da-4915-821b-0d6362aa9e2e"
+              }
+            ],
+            "_id": "40db1d3e-df70-4024-b767-17b296ae2688"
+          },
+          {
+            "_component": "@budibase/materialdesign-components/DatatableBody",
+            "_children": [
+              {
+                "_code": "\nif (!state.allinstances) return\n\nfor (let allinstances_item of state.allinstances) \n  render( { allinstances_item } )",
+                "_component": "@budibase/materialdesign-components/DatatableRow",
+                "_children": [
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "context.allinstances_item.active",
+                        "_id": "5601c20e-9f10-41ec-8221-16fc670ea1e4"
+                      }
+                    ],
+                    "_id": "f3195be2-76d4-4ecb-9327-0e12cff92b36"
+                  },
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "context.allinstances_item.datastoreconfig",
+                        "_id": "8300947e-53cf-4e9f-9209-a9b7fa74284e"
+                      }
+                    ],
+                    "_id": "6c49969d-faf2-439c-93d9-616aca161ed2"
+                  },
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "context.allinstances_item.name",
+                        "_id": "9ba84672-52ab-4602-ab33-311bd34b4004"
+                      }
+                    ],
+                    "_id": "3d699892-5ad8-4463-a8d7-fc2a61644be9"
+                  },
+                  {
+                    "_component": "@budibase/materialdesign-components/DatatableCell",
+                    "_children": [
+                      {
+                        "_component": "@budibase/standard-components/text",
+                        "type": "none",
+                        "text": "context.allinstances_item.version",
+                        "_id": "9337bc93-93ea-4757-87ac-97ac7b69c575"
+                      }
+                    ],
+                    "_id": "e0dfb4dc-45c4-4db4-84a0-7afa5ebb82e3"
+                  }
+                ],
+                "_id": "91e964ee-a78e-468a-b80f-cad992702f87",
+                "_styles": {
+                  "position": {},
+                  "layout": {}
+                }
+              }
+            ],
+            "_id": "4b353e07-30f3-4f8f-9224-40845b9f5b4f"
+          }
+        ],
+        "_id": "19a6a5ee-1a69-471e-97f4-fbd1df65aaac"
+      }
+    ]
+  },
+  "route": "/application/:id"
+}

packages/server/appPackages/_master/pages/main/screens/New App.json

@@ -0,0 +1,410 @@
+{
+  "name": "New App",
+  "description": "",
+  "url": "",
+  "uiFunctions": "",
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_styles": {
+      "position": {},
+      "layout": {}
+    },
+    "_id": "03e2505d-5544-49c0-b964-22cdbd8e4065",
+    "_code": "",
+    "className": "",
+    "onLoad": [],
+    "type": "div",
+    "backgroundColor": "",
+    "color": "",
+    "borderWidth": "",
+    "borderColor": "",
+    "borderStyle": "none",
+    "_children": [
+      {
+        "_component": "@budibase/standard-components/container",
+        "_code": "",
+        "type": "div",
+        "onLoad": [
+          {
+            "##eventHandlerType": "Get New Record",
+            "parameters": {
+              "collectionKey": "/applications",
+              "childRecordType": "application",
+              "statePath": "application"
+            }
+          }
+        ],
+        "_children": [
+          {
+            "_component": "@budibase/standard-components/container",
+            "borderWidth": "1px 0px 0px 0px",
+            "borderColor": "lightgray",
+            "borderStyle": "solid",
+            "_styles": {
+              "position": {
+                "column": [
+                  "",
+                  ""
+                ],
+                "row": [
+                  "",
+                  ""
+                ],
+                "margin": [
+                  "",
+                  "",
+                  "",
+                  ""
+                ],
+                "padding": [
+                  "30px",
+                  "",
+                  "",
+                  ""
+                ],
+                "height": [
+                  ""
+                ],
+                "width": [
+                  ""
+                ],
+                "zindex": [
+                  ""
+                ]
+              },
+              "layout": {
+                "templaterows": [
+                  ""
+                ],
+                "templatecolumns": [
+                  ""
+                ]
+              }
+            },
+            "_children": [
+              {
+                "_component": "@budibase/materialdesign-components/Button",
+                "_styles": {
+                  "position": {
+                    "row": [
+                      "",
+                      ""
+                    ],
+                    "column": [
+                      "",
+                      ""
+                    ],
+                    "padding": [
+                      "",
+                      "",
+                      "",
+                      ""
+                    ],
+                    "margin": [
+                      "",
+                      "",
+                      "",
+                      "10px"
+                    ],
+                    "width": [
+                      ""
+                    ],
+                    "height": [
+                      ""
+                    ],
+                    "zindex": [
+                      ""
+                    ]
+                  },
+                  "layout": {
+                    "templatecolumns": [
+                      ""
+                    ],
+                    "templaterows": [
+                      ""
+                    ]
+                  }
+                },
+                "onClick": [
+                  {
+                    "##eventHandlerType": "Navigate To",
+                    "parameters": {
+                      "url": "/applications"
+                    }
+                  }
+                ],
+                "colour": "secondary",
+                "text": "Cancel",
+                "_id": "c24bc4f7-77b3-49ba-b104-43e15d23b130",
+                "_code": "",
+                "variant": "text",
+                "size": "medium",
+                "href": "",
+                "icon": "",
+                "trailingIcon": false,
+                "fullwidth": false,
+                "disabled": false
+              },
+              {
+                "_component": "@budibase/materialdesign-components/Button",
+                "onClick": [
+                  {
+                    "##eventHandlerType": "Save Record",
+                    "parameters": {
+                      "statePath": "application"
+                    }
+                  },
+                  {
+                    "##eventHandlerType": "Navigate To",
+                    "parameters": {
+                      "url": "/applications"
+                    }
+                  }
+                ],
+                "variant": "raised",
+                "colour": "primary",
+                "size": "medium",
+                "text": "Save Application",
+                "_id": "35aac80a-f968-4927-ae80-6d158254f401",
+                "_styles": {
+                  "position": {},
+                  "layout": {}
+                },
+                "_code": "",
+                "href": "",
+                "icon": "",
+                "trailingIcon": false,
+                "fullwidth": false,
+                "disabled": false
+              }
+            ],
+            "_id": "5838e5ea-e6bb-4188-8d98-390faa986ba9",
+            "_code": "",
+            "className": "",
+            "onLoad": [],
+            "type": "div",
+            "backgroundColor": "",
+            "color": ""
+          },
+          {
+            "_component": "@budibase/materialdesign-components/H3",
+            "text": "Application",
+            "_id": "08aa6332-4b0d-43e5-b498-4849b78b54e5",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_code": "",
+            "_children": []
+          },
+          {
+            "_component": "@budibase/materialdesign-components/H3",
+            "text": "Application",
+            "_id": "711f6c0e-4fd4-4401-a929-99ce7d634e50",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_code": "",
+            "_children": []
+          },
+          {
+            "_component": "@budibase/materialdesign-components/Textfield",
+            "label": "Name",
+            "variant": "filled",
+            "disabled": false,
+            "fullwidth": false,
+            "colour": "primary",
+            "maxLength": 500,
+            "placeholder": "Name",
+            "value": "state.application.name",
+            "_id": "89226755-6c92-4c4b-ad3d-0437f542790a",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_code": "",
+            "onChange": [],
+            "size": "medium",
+            "type": "text",
+            "required": false,
+            "minLength": 0,
+            "helperText": "",
+            "errorText": "",
+            "icon": "",
+            "trailingIcon": false,
+            "textarea": false,
+            "rows": 0,
+            "cols": 0,
+            "validation": false,
+            "persistent": false,
+            "_children": []
+          },
+          {
+            "_component": "@budibase/standard-components/container",
+            "borderWidth": "1px 0px 0px 0px",
+            "borderColor": "lightgray",
+            "borderStyle": "solid",
+            "_styles": {
+              "position": {
+                "column": [
+                  "",
+                  ""
+                ],
+                "row": [
+                  "",
+                  ""
+                ],
+                "margin": [
+                  "",
+                  "",
+                  "",
+                  ""
+                ],
+                "padding": [
+                  "30px",
+                  "",
+                  "",
+                  ""
+                ],
+                "height": [
+                  ""
+                ],
+                "width": [
+                  ""
+                ],
+                "zindex": [
+                  ""
+                ]
+              },
+              "layout": {
+                "templaterows": [
+                  ""
+                ],
+                "templatecolumns": [
+                  ""
+                ]
+              }
+            },
+            "_children": [
+              {
+                "_component": "@budibase/materialdesign-components/Button",
+                "_styles": {
+                  "position": {
+                    "row": [
+                      "",
+                      ""
+                    ],
+                    "column": [
+                      "",
+                      ""
+                    ],
+                    "padding": [
+                      "",
+                      "",
+                      "",
+                      ""
+                    ],
+                    "margin": [
+                      "",
+                      "",
+                      "",
+                      "10px"
+                    ],
+                    "width": [
+                      ""
+                    ],
+                    "height": [
+                      ""
+                    ],
+                    "zindex": [
+                      ""
+                    ]
+                  },
+                  "layout": {
+                    "templatecolumns": [
+                      ""
+                    ],
+                    "templaterows": [
+                      ""
+                    ]
+                  }
+                },
+                "onClick": [
+                  {
+                    "##eventHandlerType": "Navigate To",
+                    "parameters": {
+                      "url": "/applications"
+                    }
+                  }
+                ],
+                "colour": "secondary",
+                "text": "Cancel",
+                "_id": "bb55c61d-6636-4034-b563-b204af17aef0",
+                "_code": "",
+                "variant": "text",
+                "size": "medium",
+                "href": "",
+                "icon": "",
+                "trailingIcon": false,
+                "fullwidth": false,
+                "disabled": false
+              },
+              {
+                "_component": "@budibase/materialdesign-components/Button",
+                "onClick": [
+                  {
+                    "##eventHandlerType": "Save Record",
+                    "parameters": {
+                      "statePath": "application"
+                    }
+                  },
+                  {
+                    "##eventHandlerType": "Navigate To",
+                    "parameters": {
+                      "url": "/applications"
+                    }
+                  }
+                ],
+                "variant": "raised",
+                "colour": "primary",
+                "size": "medium",
+                "text": "Save Application",
+                "_id": "bbc67f2c-f304-4159-bd98-8fcce8fc4295",
+                "_styles": {
+                  "position": {},
+                  "layout": {}
+                },
+                "_code": "",
+                "href": "",
+                "icon": "",
+                "trailingIcon": false,
+                "fullwidth": false,
+                "disabled": false
+              }
+            ],
+            "_id": "38ae0429-67b7-4d79-b5e2-78bec984754e",
+            "_code": "",
+            "className": "",
+            "onLoad": [],
+            "type": "div",
+            "backgroundColor": "",
+            "color": ""
+          }
+        ],
+        "_id": "f1fbe91b-00d9-4bd7-a524-e03ed0f080c8",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "className": "",
+        "backgroundColor": "",
+        "color": "",
+        "borderWidth": "",
+        "borderColor": "",
+        "borderStyle": "none"
+      }
+    ]
+  },
+  "route": "/createapp"
+}

packages/server/appPackages/_master/pages/main/screens/New Instance.json

@@ -0,0 +1,227 @@
+{
+  "name": "New Instance",
+  "description": "",
+  "url": "",
+  "uiFunctions": "",
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_styles": {
+      "position": {},
+      "layout": {}
+    },
+    "_id": "68a36c10-4c45-47fe-a435-3e05ff5ff91a",
+    "_code": "const routeId = route && route.id ? route.id : \"(no route id)\"\n\nrender({\n  instanceCollectionKey: `/applications/${routeId}/instances`,\n  applicationUrl: `/application/${routeId}`, \n  usersCollectionKey: `/applications/${routeId}/users`\n})",
+    "className": "",
+    "onLoad": [
+      {
+        "##eventHandlerType": "Get New Record",
+        "parameters": {
+          "collectionKey": "context.instanceCollectionKey",
+          "childRecordType": "instance",
+          "statePath": "instance"
+        }
+      },
+      {
+        "##eventHandlerType": "Get New Record",
+        "parameters": {
+          "collectionKey": "context.usersCollectionKey",
+          "childRecordType": "user",
+          "statePath": "user"
+        }
+      }
+    ],
+    "type": "div",
+    "backgroundColor": "",
+    "color": "",
+    "borderWidth": "",
+    "borderColor": "",
+    "borderStyle": "none",
+    "_children": [
+      {
+        "_component": "@budibase/materialdesign-components/H4",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "_id": "6f7c34e3-9f26-4710-bd92-123577bb7bf1",
+        "_code": "",
+        "text": "Create New Instance",
+        "_children": []
+      },
+      {
+        "_component": "@budibase/materialdesign-components/Textfield",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "_id": "f81c06f3-1dbc-47f8-ac3e-d62f24f5b421",
+        "_code": "",
+        "onChange": [],
+        "value": "state.instance.name",
+        "label": "Instance Name",
+        "variant": "standard",
+        "disabled": false,
+        "fullwidth": false,
+        "colour": "primary",
+        "size": "medium",
+        "type": "text",
+        "required": false,
+        "minLength": 0,
+        "maxLength": 0,
+        "helperText": "",
+        "errorText": "",
+        "placeholder": "",
+        "icon": "",
+        "trailingIcon": false,
+        "textarea": false,
+        "rows": 0,
+        "cols": 0,
+        "validation": false,
+        "persistent": false,
+        "_children": []
+      },
+      {
+        "_component": "@budibase/materialdesign-components/Textfield",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "_id": "02450f9e-b84b-4edb-ad3d-b241f75ee042",
+        "_code": "",
+        "onChange": [],
+        "value": "state.user.name",
+        "label": "Initial User Name",
+        "variant": "standard",
+        "disabled": false,
+        "fullwidth": false,
+        "colour": "primary",
+        "size": "medium",
+        "type": "text",
+        "required": false,
+        "minLength": 0,
+        "maxLength": 0,
+        "helperText": "",
+        "errorText": "",
+        "placeholder": "",
+        "icon": "",
+        "trailingIcon": false,
+        "textarea": false,
+        "rows": 0,
+        "cols": 0,
+        "validation": false,
+        "persistent": false,
+        "_children": []
+      },
+      {
+        "_component": "@budibase/standard-components/container",
+        "_styles": {
+          "position": {
+            "column": [
+              "",
+              ""
+            ],
+            "row": [
+              "",
+              ""
+            ],
+            "margin": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "padding": [
+              "",
+              "",
+              "",
+              ""
+            ],
+            "height": [
+              ""
+            ],
+            "width": [
+              ""
+            ],
+            "zindex": [
+              ""
+            ]
+          },
+          "layout": {
+            "templaterows": [
+              ""
+            ],
+            "templatecolumns": [
+              "auto auto"
+            ]
+          }
+        },
+        "_id": "8269245d-45c2-40b8-bd69-a1db904a9f54",
+        "_code": "",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "backgroundColor": "",
+        "color": "",
+        "borderWidth": "",
+        "borderColor": "",
+        "borderStyle": "none",
+        "_children": [
+          {
+            "_component": "@budibase/materialdesign-components/Button",
+            "_styles": {
+              "position": {},
+              "layout": {}
+            },
+            "_id": "4978fe3d-7b44-4d5d-bb02-fe001c3a11b2",
+            "_code": "",
+            "onClick": [
+              {
+                "##eventHandlerType": "Set State",
+                "parameters": {
+                  "path": "instance.active",
+                  "value": "true"
+                }
+              },
+              {
+                "##eventHandlerType": "Save Record",
+                "parameters": {
+                  "statePath": "instance"
+                }
+              },
+              {
+                "##eventHandlerType": "Set State",
+                "parameters": {
+                  "path": "user.active",
+                  "value": "true"
+                }
+              },
+              {
+                "##eventHandlerType": "Set State",
+                "parameters": {
+                  "path": "user.instance.key",
+                  "value": "state.instance.key"
+                }
+              },
+              {
+                "##eventHandlerType": "Save Record",
+                "parameters": {
+                  "statePath": "user"
+                }
+              }
+            ],
+            "variant": "text",
+            "colour": "primary",
+            "size": "medium",
+            "href": "",
+            "icon": "",
+            "trailingIcon": false,
+            "fullwidth": false,
+            "text": "Create Instance",
+            "disabled": false
+          }
+        ]
+      }
+    ]
+  },
+  "route": "/application/:id/newinstance"
+}

packages/server/appPackages/_master/pages/unauthenticated/page.json

@@ -0,0 +1,83 @@
+{
+  "componentLibraries": [
+    "@budibase/standard-components",
+    "@budibase/materialdesign-components"
+  ],
+  "title": "Test App",
+  "favicon": "./_shared/favicon.png",
+  "stylesheets": [],
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_children": [
+      {
+        "_component": "@budibase/standard-components/login",
+        "_styles": {
+          "position": {},
+          "layout": {}
+        },
+        "_id": "a345ca0f-126b-466c-91df-8ff6b0d9c710",
+        "_code": "",
+        "logo": "",
+        "loginRedirect": "",
+        "usernameLabel": "Username",
+        "passwordLabel": "Password",
+        "loginButtonLabel": "Login",
+        "buttonClass": "",
+        "inputClass": "",
+        "_children": []
+      }
+    ],
+    "_id": 1,
+    "type": "div",
+    "_styles": {
+      "layout": {
+        "templatecolumns": [
+          ""
+        ],
+        "templaterows": [
+          ""
+        ]
+      },
+      "position": {
+        "row": [
+          "",
+          ""
+        ],
+        "column": [
+          "",
+          ""
+        ],
+        "padding": [
+          "",
+          "",
+          "",
+          ""
+        ],
+        "margin": [
+          "",
+          "",
+          "",
+          ""
+        ],
+        "width": [
+          ""
+        ],
+        "height": [
+          ""
+        ],
+        "zindex": [
+          ""
+        ]
+      }
+    },
+    "_code": "",
+    "className": "",
+    "onLoad": [],
+    "backgroundColor": "",
+    "color": "",
+    "borderWidth": "",
+    "borderColor": "",
+    "borderStyle": "none"
+  },
+  "uiFunctions": ""
+}

packages/server/appPackages/_master/public/main/clientAppDefinition.js

@@ -1,665 +0,0 @@
-window["##BUDIBASE_APPDEFINITION##"] = {
-  hierarchy: {
-    name: "root",
-    type: "root",
-    children: [
-      {
-        name: "application",
-        type: "record",
-        fields: [
-          {
-            name: "name",
-            type: "string",
-            typeOptions: {
-              maxLength: 500,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "Name",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "domain",
-            type: "string",
-            typeOptions: {
-              maxLength: 500,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "domain",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "application_resolve_strategy",
-            type: "string",
-            typeOptions: {
-              maxLength: 100,
-              values: ["domain", "path"],
-              allowDeclaredValuesOnly: true,
-            },
-            label: "Resolve Application By",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "defaultVersion",
-            type: "reference",
-            typeOptions: {
-              indexNodeKey: "/applications/1-{id}/all_versions",
-              reverseIndexNodeKeys: [
-                "/applications/1-{id}/versions/3-{id}/isdefault",
-              ],
-              displayValue: "name",
-            },
-            label: "Default Version",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-        ],
-        children: [
-          {
-            name: "user",
-            type: "record",
-            fields: [
-              {
-                name: "name",
-                type: "string",
-                typeOptions: {
-                  maxLength: 200,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Name (unique)",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "active",
-                type: "bool",
-                typeOptions: { allowNulls: false },
-                label: "Is Active",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "createdByMaster",
-                type: "bool",
-                typeOptions: { allowNulls: false },
-                label: "Created by Master",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instance",
-                type: "reference",
-                typeOptions: {
-                  indexNodeKey: "/applications/1-{id}/allinstances",
-                  reverseIndexNodeKeys: [
-                    "/applications/1-{id}/instances/2-{id}/users_on_this_instance",
-                  ],
-                  displayValue: "name",
-                },
-                label: "Instance",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 8,
-            indexes: [],
-            allidsShardFactor: "64",
-            collectionName: "users",
-            isSingle: false,
-          },
-          {
-            name: "instance",
-            type: "record",
-            fields: [
-              {
-                name: "name",
-                type: "string",
-                typeOptions: {
-                  maxLength: 1000,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Name",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "active",
-                type: "bool",
-                typeOptions: { allowNulls: false },
-                label: "Is Active",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "version",
-                type: "reference",
-                typeOptions: {
-                  indexNodeKey: "/applications/1-{id}/all_versions",
-                  reverseIndexNodeKeys: [
-                    "/applications/1-{id}/versions/3-{id}/instances_on_this_version",
-                  ],
-                  displayValue: "name",
-                },
-                label: "Version",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "datastoreconfig",
-                type: "string",
-                typeOptions: {
-                  maxLength: 1000,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Datastore Config",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 2,
-            indexes: [
-              {
-                name: "users_on_this_instance",
-                type: "index",
-                map: "return {...record};",
-                filter: "",
-                indexType: "reference",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 15,
-              },
-            ],
-            allidsShardFactor: 1,
-            collectionName: "instances",
-            isSingle: false,
-          },
-          {
-            name: "version",
-            type: "record",
-            fields: [
-              {
-                name: "name",
-                type: "string",
-                typeOptions: {
-                  maxLength: 200,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Name",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "defaultAccessLevel",
-                type: "string",
-                typeOptions: {
-                  maxLength: 200,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Default Access Level",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 3,
-            indexes: [
-              {
-                name: "instances_for_this_version",
-                type: "index",
-                map: "return {name:record.name};",
-                filter: "",
-                indexType: "ancestor",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 9,
-              },
-              {
-                name: "instances_on_this_version",
-                type: "index",
-                map: "return {...record};",
-                filter: "",
-                indexType: "reference",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 10,
-              },
-              {
-                name: "isdefault",
-                type: "index",
-                map: "return {};",
-                filter: "",
-                indexType: "reference",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 28,
-              },
-            ],
-            allidsShardFactor: 1,
-            collectionName: "versions",
-            isSingle: false,
-          },
-          {
-            name: "session",
-            type: "record",
-            fields: [
-              {
-                name: "created",
-                type: "number",
-                typeOptions: {
-                  minValue: 0,
-                  maxValue: 99999999999999,
-                  decimalPlaces: 0,
-                },
-                label: "Created",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "user_json",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "User Json",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instanceDatastoreConfig",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Instance Datastore Config",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instanceKey",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Instance Key",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instanceVersion",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Instance Version",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "username",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "User",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 16,
-            indexes: [],
-            allidsShardFactor: 1,
-            collectionName: "sessions",
-            isSingle: false,
-          },
-        ],
-        validationRules: [],
-        nodeId: 1,
-        indexes: [
-          {
-            name: "allinstances",
-            type: "index",
-            map: "return {...record};",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [2],
-            nodeId: 23,
-          },
-          {
-            name: "sessions_by_user",
-            type: "index",
-            map: "return {username:record.username};",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "return record.username.substring(0,2)",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [16],
-            nodeId: 24,
-          },
-          {
-            name: "user_name_lookup",
-            type: "index",
-            map:
-              "return ({name:record.name, instanceKey:record.instance.key ? record.instance.key : '', instanceDatastoreConfig:record.instance.datastoreconfig ? record.instance.datastoreconfig : 'nothing'});",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "return record.name.substring(0,2)",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [8],
-            nodeId: 25,
-          },
-          {
-            name: "all_versions",
-            type: "index",
-            map: "return {...record};",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [3],
-            nodeId: 26,
-          },
-        ],
-        allidsShardFactor: 64,
-        collectionName: "applications",
-        isSingle: false,
-      },
-      {
-        name: "mastersession",
-        type: "record",
-        fields: [
-          {
-            name: "user_json",
-            type: "string",
-            typeOptions: {
-              maxLength: 10000,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "User Json",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "username",
-            type: "string",
-            typeOptions: {
-              maxLength: null,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "User",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-        ],
-        children: [],
-        validationRules: [],
-        nodeId: 17,
-        indexes: [],
-        allidsShardFactor: 64,
-        collectionName: "sessions",
-        isSingle: false,
-      },
-    ],
-    pathMaps: [],
-    indexes: [
-      {
-        name: "all_applications",
-        type: "index",
-        map: "return {...record};",
-        filter: "",
-        indexType: "ancestor",
-        getShardName: "",
-        getSortKey: "record.id",
-        aggregateGroups: [],
-        allowedRecordNodeIds: [1],
-        nodeId: 22,
-      },
-      {
-        name: "mastersessions_by_user",
-        type: "index",
-        map: "return {username:record.username};",
-        filter: "",
-        indexType: "ancestor",
-        getShardName: "return record.username.substring(0,2)",
-        getSortKey: "record.id",
-        aggregateGroups: [],
-        allowedRecordNodeIds: [17],
-        nodeId: 27,
-      },
-    ],
-    nodeId: 0,
-  },
-  componentLibraries: [
-    {
-      importPath:
-        "/lib/node_modules/@budibase/standard-components/dist/index.js",
-      libName: "@budibase/standard-components",
-    },
-  ],
-  appRootPath: "/_master",
-  props: {
-    _component: "@budibase/standard-components/stackpanel",
-    direction: "horizontal",
-    children: [
-      {
-        _component: "children#array_element#",
-        control: {
-          _component: "@budibase/standard-components/panel",
-          text: "Create New",
-          component: { _component: "" },
-          containerClass: "",
-          background: "",
-          border: "1px solid black",
-          borderRadius: "2px",
-          font: "",
-          color: "",
-          padding: "10px",
-          margin: "20px",
-          hoverColor: "",
-          hoverBackground: "gainsboro",
-          height: "100px",
-          width: "100px",
-          onClick: [
-            {
-              "##eventHandlerType": "Get New Record",
-              parameters: {
-                collectionKey: "/applications",
-                childRecordType: "application",
-                statePath: "currentApplication",
-              },
-            },
-          ],
-          display: "inline",
-        },
-      },
-    ],
-    width: "auto",
-    height: "auto",
-    containerClass: "",
-    itemContainerClass: "",
-    data: { "##bbstate": "allApplications", "##bbsource": "store" },
-    dataItemComponent: {
-      _component: "@budibase/standard-components/panel",
-      text: "",
-      component: {
-        _component: "@budibase/standard-components/stackpanel",
-        direction: "horizontal",
-        children: [
-          {
-            _component: "children#array_element#",
-            control: {
-              _component: "@budibase/standard-components/text",
-              value: "",
-              containerClass: "",
-              font: "",
-              color: "",
-              textAlign: "inline",
-              verticalAlign: "inline",
-              display: "inline",
-            },
-          },
-        ],
-        width: "auto",
-        height: "auto",
-        containerClass: "",
-        itemContainerClass: "",
-        data: { "##bbstate": "" },
-        dataItemComponent: { _component: "" },
-        onLoad: [],
-      },
-      containerClass: "",
-      background: "",
-      border: "1px solid dimgray",
-      borderRadius: "2px",
-      font: "",
-      color: "black",
-      padding: "10px",
-      margin: "20px",
-      hoverColor: "",
-      hoverBackground: "",
-      height: "",
-      width: "",
-      onClick: [
-        {
-          "##eventHandlerType": "Load Record",
-          parameters: {
-            recordKey: { "##bbstate": "key", "##bbsource": "context" },
-            statePath: "currentApp",
-          },
-        },
-      ],
-      display: "inline",
-    },
-    onLoad: [
-      {
-        "##eventHandlerType": "List Records",
-        parameters: {
-          indexKey: "/all_applications",
-          statePath: "allApplications",
-        },
-      },
-    ],
-    component: {
-      _component: "@budibase/standard-components/stackpanel",
-      direction: "horizontal",
-      children: [
-        {
-          _component: "#children#array_element",
-          control: {
-            _component: "@budibase/standard-components/text",
-            value: "",
-            containerClass: "",
-            font: "",
-            color: "",
-            textAlign: "inline",
-            verticalAlign: "inline",
-            display: "inline",
-          },
-        },
-      ],
-      width: "auto",
-      height: "auto",
-      containerClass: "",
-      itemContainerClass: "",
-      data: { "##bbstate": "allApplications", "##bbsource": "store" },
-      dataItemComponent: {
-        _component: "apps/Application List Item",
-        text: {
-          "##bbstate": "name",
-          "##bbstatefallback": "My App Name",
-          "##bbsource": "context",
-        },
-        component: {
-          _component: "@budibase/standard-components/stackpanel",
-          direction: "horizontal",
-          children: [
-            {
-              _component: "#children#array_element",
-              control: {
-                _component: "@budibase/standard-components/text",
-                value: "",
-                containerClass: "",
-                font: "",
-                color: "",
-                textAlign: "inline",
-                verticalAlign: "inline",
-                display: "inline",
-              },
-            },
-          ],
-          width: "auto",
-          height: "auto",
-          containerClass: "",
-          itemContainerClass: "",
-          data: { "##bbstate": "allApplications", "##bbsource": "store" },
-          dataItemComponent: { _component: "" },
-          onLoad: [],
-        },
-        containerClass: "",
-        background: "",
-        border: "1px solid dimgray",
-        borderRadius: "2px",
-        font: "",
-        color: "black",
-        padding: "10px",
-        margin: "20px",
-        hoverColor: "",
-        hoverBackground: "",
-        height: "",
-        width: "",
-        onClick: [
-          {
-            "##eventHandlerType": "Load Record",
-            parameters: {
-              recordKey: { "##bbstate": "key", "##bbsource": "context" },
-              statePath: "currentApplication",
-            },
-          },
-        ],
-        display: "",
-      },
-      onLoad: [],
-    },
-  },
-}

packages/server/appPackages/_master/public/main/index.html

@@ -4,17 +4,35 @@
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
 
-	<title>Budibase</title>
+	<title>Test App</title>
-    <link rel='icon' type='image/png' href='/_master//_shared/favicon.png'>
+    <link rel='icon' type='image/png' href='/_master/./_shared/favicon.png'>
     
     <style>
         html, body {
             height: 100%;
             width: 100%;
+            margin: 0px;
+            padding: 0px;
         }
     </style>
 
     
+
+    
+    <link rel='stylesheet' href='/_master/css/4ced8b29af217917f92d6d8fdf8fe057.css'>
+    
+    <link rel='stylesheet' href='/_master/css/c07d11d550e54bf0cdd2aef50222e0a7.css'>
+    
+    <link rel='stylesheet' href='/_master/css/27ad4d23d18c2480bb25afb79561a264.css'>
+    
+    <link rel='stylesheet' href='/_master/css/beda1ecf5d846a6fdc1773da594b8304.css'>
+    
+
+    
+    <link rel='stylesheet' href='/_master/css/6e6849b44a1b03b12ba15d1fc9c30671.css'>
+    
+
+
     <script src='/_master/clientFrontendDefinition.js'></script>
     <script src='/_master/clientBackendDefinition.js'></script>
     <script src='/_master/budibase-client.js'></script>

packages/server/appPackages/_master/public/unauthenticated/clientAppDefinition.js

@@ -1,491 +0,0 @@
-window["##BUDIBASE_APPDEFINITION##"] = {
-  hierarchy: {
-    name: "root",
-    type: "root",
-    children: [
-      {
-        name: "application",
-        type: "record",
-        fields: [
-          {
-            name: "name",
-            type: "string",
-            typeOptions: {
-              maxLength: 500,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "Name",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "domain",
-            type: "string",
-            typeOptions: {
-              maxLength: 500,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "domain",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "application_resolve_strategy",
-            type: "string",
-            typeOptions: {
-              maxLength: 100,
-              values: ["domain", "path"],
-              allowDeclaredValuesOnly: true,
-            },
-            label: "Resolve Application By",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "defaultVersion",
-            type: "reference",
-            typeOptions: {
-              indexNodeKey: "/applications/1-{id}/all_versions",
-              reverseIndexNodeKeys: [
-                "/applications/1-{id}/versions/3-{id}/isdefault",
-              ],
-              displayValue: "name",
-            },
-            label: "Default Version",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-        ],
-        children: [
-          {
-            name: "user",
-            type: "record",
-            fields: [
-              {
-                name: "name",
-                type: "string",
-                typeOptions: {
-                  maxLength: 200,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Name (unique)",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "active",
-                type: "bool",
-                typeOptions: { allowNulls: false },
-                label: "Is Active",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "createdByMaster",
-                type: "bool",
-                typeOptions: { allowNulls: false },
-                label: "Created by Master",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instance",
-                type: "reference",
-                typeOptions: {
-                  indexNodeKey: "/applications/1-{id}/allinstances",
-                  reverseIndexNodeKeys: [
-                    "/applications/1-{id}/instances/2-{id}/users_on_this_instance",
-                  ],
-                  displayValue: "name",
-                },
-                label: "Instance",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 8,
-            indexes: [],
-            allidsShardFactor: "64",
-            collectionName: "users",
-            isSingle: false,
-          },
-          {
-            name: "instance",
-            type: "record",
-            fields: [
-              {
-                name: "name",
-                type: "string",
-                typeOptions: {
-                  maxLength: 1000,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Name",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "active",
-                type: "bool",
-                typeOptions: { allowNulls: false },
-                label: "Is Active",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "version",
-                type: "reference",
-                typeOptions: {
-                  indexNodeKey: "/applications/1-{id}/all_versions",
-                  reverseIndexNodeKeys: [
-                    "/applications/1-{id}/versions/3-{id}/instances_on_this_version",
-                  ],
-                  displayValue: "name",
-                },
-                label: "Version",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "datastoreconfig",
-                type: "string",
-                typeOptions: {
-                  maxLength: 1000,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Datastore Config",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 2,
-            indexes: [
-              {
-                name: "users_on_this_instance",
-                type: "index",
-                map: "return {...record};",
-                filter: "",
-                indexType: "reference",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 15,
-              },
-            ],
-            allidsShardFactor: 1,
-            collectionName: "instances",
-            isSingle: false,
-          },
-          {
-            name: "version",
-            type: "record",
-            fields: [
-              {
-                name: "name",
-                type: "string",
-                typeOptions: {
-                  maxLength: 200,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Name",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "defaultAccessLevel",
-                type: "string",
-                typeOptions: {
-                  maxLength: 200,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Default Access Level",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 3,
-            indexes: [
-              {
-                name: "instances_for_this_version",
-                type: "index",
-                map: "return {name:record.name};",
-                filter: "",
-                indexType: "ancestor",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 9,
-              },
-              {
-                name: "instances_on_this_version",
-                type: "index",
-                map: "return {...record};",
-                filter: "",
-                indexType: "reference",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 10,
-              },
-              {
-                name: "isdefault",
-                type: "index",
-                map: "return {};",
-                filter: "",
-                indexType: "reference",
-                getShardName: "",
-                getSortKey: "record.id",
-                aggregateGroups: [],
-                allowedRecordNodeIds: [],
-                nodeId: 28,
-              },
-            ],
-            allidsShardFactor: 1,
-            collectionName: "versions",
-            isSingle: false,
-          },
-          {
-            name: "session",
-            type: "record",
-            fields: [
-              {
-                name: "created",
-                type: "number",
-                typeOptions: {
-                  minValue: 0,
-                  maxValue: 99999999999999,
-                  decimalPlaces: 0,
-                },
-                label: "Created",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "user_json",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "User Json",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instanceDatastoreConfig",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Instance Datastore Config",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instanceKey",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Instance Key",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "instanceVersion",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "Instance Version",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-              {
-                name: "username",
-                type: "string",
-                typeOptions: {
-                  maxLength: null,
-                  values: null,
-                  allowDeclaredValuesOnly: false,
-                },
-                label: "User",
-                getInitialValue: "default",
-                getUndefinedValue: "default",
-              },
-            ],
-            children: [],
-            validationRules: [],
-            nodeId: 16,
-            indexes: [],
-            allidsShardFactor: 1,
-            collectionName: "sessions",
-            isSingle: false,
-          },
-        ],
-        validationRules: [],
-        nodeId: 1,
-        indexes: [
-          {
-            name: "allinstances",
-            type: "index",
-            map: "return {...record};",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [2],
-            nodeId: 23,
-          },
-          {
-            name: "sessions_by_user",
-            type: "index",
-            map: "return {username:record.username};",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "return record.username.substring(0,2)",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [16],
-            nodeId: 24,
-          },
-          {
-            name: "user_name_lookup",
-            type: "index",
-            map:
-              "return ({name:record.name, instanceKey:record.instance.key ? record.instance.key : '', instanceDatastoreConfig:record.instance.datastoreconfig ? record.instance.datastoreconfig : 'nothing'});",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "return record.name.substring(0,2)",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [8],
-            nodeId: 25,
-          },
-          {
-            name: "all_versions",
-            type: "index",
-            map: "return {...record};",
-            filter: "",
-            indexType: "ancestor",
-            getShardName: "",
-            getSortKey: "record.id",
-            aggregateGroups: [],
-            allowedRecordNodeIds: [3],
-            nodeId: 26,
-          },
-        ],
-        allidsShardFactor: 64,
-        collectionName: "applications",
-        isSingle: false,
-      },
-      {
-        name: "mastersession",
-        type: "record",
-        fields: [
-          {
-            name: "user_json",
-            type: "string",
-            typeOptions: {
-              maxLength: 10000,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "User Json",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-          {
-            name: "username",
-            type: "string",
-            typeOptions: {
-              maxLength: null,
-              values: null,
-              allowDeclaredValuesOnly: false,
-            },
-            label: "User",
-            getInitialValue: "default",
-            getUndefinedValue: "default",
-          },
-        ],
-        children: [],
-        validationRules: [],
-        nodeId: 17,
-        indexes: [],
-        allidsShardFactor: 64,
-        collectionName: "sessions",
-        isSingle: false,
-      },
-    ],
-    pathMaps: [],
-    indexes: [
-      {
-        name: "all_applications",
-        type: "index",
-        map: "return {...record};",
-        filter: "",
-        indexType: "ancestor",
-        getShardName: "",
-        getSortKey: "record.id",
-        aggregateGroups: [],
-        allowedRecordNodeIds: [1],
-        nodeId: 22,
-      },
-      {
-        name: "mastersessions_by_user",
-        type: "index",
-        map: "return {username:record.username};",
-        filter: "",
-        indexType: "ancestor",
-        getShardName: "return record.username.substring(0,2)",
-        getSortKey: "record.id",
-        aggregateGroups: [],
-        allowedRecordNodeIds: [17],
-        nodeId: 27,
-      },
-    ],
-    nodeId: 0,
-  },
-  componentLibraries: [
-    {
-      importPath:
-        "/lib/node_modules/@budibase/standard-components/dist/index.js",
-      libName: "@budibase/standard-components",
-    },
-  ],
-  appRootPath: "/_master",
-  props: {
-    _component: "@budibase/standard-components/login",
-    logo: "_shared/budibase-logo.png",
-    loginRedirect: "",
-    usernameLabel: "Username",
-    passwordLabel: "Password",
-    loginButtonLabel: "Login",
-    buttonClass: "",
-    inputClass: "",
-  },
-}

packages/server/appPackages/_master/public/unauthenticated/index.html

@@ -4,17 +4,27 @@
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
 
-	<title>Budibase - Login</title>
+	<title>Test App</title>
-    <link rel='icon' type='image/png' href='/_master//_shared/favicon.png'>
+    <link rel='icon' type='image/png' href='/_master/./_shared/favicon.png'>
     
     <style>
         html, body {
             height: 100%;
             width: 100%;
+            margin: 0px;
+            padding: 0px;
         }
     </style>
 
     
+
+    
+
+    
+    <link rel='stylesheet' href='/_master/css/718591ba76129222eded13a89cd9cd18.css'>
+    
+
+
     <script src='/_master/clientFrontendDefinition.js'></script>
     <script src='/_master/clientBackendDefinition.js'></script>
     <script src='/_master/budibase-client.js'></script>

packages/server/appPackages/_master/yarn.lock

@@ -2,46 +2,12 @@
 # yarn lockfile v1
 
 
-"@budibase/client@file:../../../client":
+"@budibase/materialdesign-components@^0.0.19":
-  version "0.0.3"
+  version "0.0.19"
-  dependencies:
+  resolved "https://registry.yarnpkg.com/@budibase/materialdesign-components/-/materialdesign-components-0.0.19.tgz#640330fb2deb37ca655ef77cc71a0bec34d96bcd"
-    "@nx-js/compiler-util" "^2.0.0"
+  integrity sha512-JasPnberm/In/OBYlRstwtKoh7khj/y8pDEK6naK26s8a9Ty7pV5ANgdvlpaXOutg75D9HAdvzGBzqf0qATp/w==
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
 
-"@budibase/standard-components@file:../../../standard-components":
+"@budibase/standard-components@^0.0.19":
-  version "0.0.5"
+  version "0.0.19"
-
+  resolved "https://registry.yarnpkg.com/@budibase/standard-components/-/standard-components-0.0.19.tgz#9a4c7fd74b8ef1011ecd8b8cec56b84d81a7fb57"
-"@nx-js/compiler-util@^2.0.0":
+  integrity sha512-lMsCsmYw5EBCxt3YzgBN0Ab4fwFs/Wd4kp5hE/+c9ghhbFOUBK1QW9cBEAMVkAhDF0wCiiXhVLLTEByeqtkfVA==
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
-
-lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-lunr@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.6.tgz#f278beee7ffd56ad86e6e478ce02ab2b98c78dd5"
-  integrity sha512-swStvEyDqQ85MGpABCMBclZcLI/pBIlu8FFDtmX197+oEgKloJ67QnB+Tidh0340HmLMs39c4GrkPY3cmkXp6Q==
-
-nanoid@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.1.tgz#524fd4acd45c126e0c87cd43ab5ee8346e695df9"
-  integrity sha512-0YbJdaL4JFoejIOoawgLcYValFGJ2iyUuVDIWL3g8Es87SSOWFbWdRUMV3VMSiyPs3SQ3QxCIxFX00q5DLkMCw==
-
-shortid@^2.2.8:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
-  dependencies:
-    nanoid "^2.1.0"
-
-svelte@^3.9.2:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.12.1.tgz#ddfacd43272ac3255907c682b74ee7d3d8b06b0c"
-  integrity sha512-t29WJNjHIqfrdMcVXqIyRfgLEaNz7MihKXTpb8qHlbzvf0WyOOIhIlwIGvl6ahJ9+9CLJwz0sjhFNAmPgo8BHg==

packages/server/middleware/routers.js

@@ -302,30 +302,27 @@ module.exports = (config, app) => {
       ctx.body = await ctx.instance.authApi.getAccessLevels()
       ctx.response.status = StatusCodes.OK
     })
-    .get("/:appname/api/listRecords/:indexkey", async ctx => {
+    .get("/:appname/api/listRecords/*", async ctx => {
-      ctx.body = await ctx.instance.indexApi.listItems(ctx.params.indexkey)
+      const indexkey = getRecordKey(ctx.params.appname, ctx.request.path)
+      ctx.body = await ctx.instance.indexApi.listItems(indexkey)
       ctx.response.status = StatusCodes.OK
     })
-    .post("/:appname/api/listRecords/:indexkey", async ctx => {
+    .post("/:appname/api/listRecords/*", async ctx => {
-      ctx.body = await ctx.instance.indexApi.listItems(
+      const indexkey = getRecordKey(ctx.params.appname, ctx.request.path)
-        ctx.request.body.indexKey,
+      ctx.body = await ctx.instance.indexApi.listItems(indexkey, {
-        {
         rangeStartParams: ctx.request.body.rangeStartParams,
         rangeEndParams: ctx.request.body.rangeEndParams,
         searchPhrase: ctx.request.body.searchPhrase,
-        }
+      })
-      )
       ctx.response.status = StatusCodes.OK
     })
-    .post("/:appname/api/aggregates/:indexkey", async ctx => {
+    .post("/:appname/api/aggregates/*", async ctx => {
-      ctx.body = await ctx.instance.indexApi.aggregates(
+      const indexkey = getRecordKey(ctx.params.appname, ctx.request.path)
-        ctx.request.body.indexKey,
+      ctx.body = await ctx.instance.indexApi.aggregates(indexkey, {
-        {
         rangeStartParams: ctx.request.body.rangeStartParams,
         rangeEndParams: ctx.request.body.rangeEndParams,
         searchPhrase: ctx.request.body.searchPhrase,
-        }
+      })
-      )
       ctx.response.status = StatusCodes.OK
     })
     .post("/:appname/api/files/*", async ctx => {
@@ -394,6 +391,8 @@ module.exports = (config, app) => {
       .replace(`/${appname}/api/files/`, "")
       .replace(`/${appname}/api/lookup_field/`, "")
       .replace(`/${appname}/api/record/`, "")
+      .replace(`/${appname}/api/listRecords/`, "")
+      .replace(`/${appname}/api/aggregates/`, "")
 
   return router
 }

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "description": "Budibase Web Server",
   "main": "index.js",
   "scripts": {
@@ -16,8 +16,8 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.0.16",
+    "@budibase/client": "^0.0.24",
-    "@budibase/core": "^0.0.16",
+    "@budibase/core": "^0.0.24",
     "@koa/router": "^8.0.0",
     "fs-extra": "^8.1.0",
     "koa": "^2.7.0",

packages/server/utilities/createAppPackage.js

@@ -30,7 +30,10 @@ module.exports.appsFolder = config => appPackageFolder(config, "")
 
 module.exports.masterAppPackage = context => {
   const { config } = context
-  const standardPackage = createAppPackage(context, "../appPackages/_master")
+  const standardPackage = createAppPackage(
+    context,
+    `${__dirname}/../appPackages/_master`
+  )
 
   const customizeMaster =
     config && config.customizeMaster ? config.customizeMaster : a => a

packages/standard-components/.npmignore

@@ -0,0 +1,3 @@
+*
+!dist/*
+!components.json

packages/standard-components/package.json

@@ -12,7 +12,7 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.16",
+    "@budibase/client": "^0.0.24",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "2.4.3",
     "fs-extra": "^8.1.0",
@@ -32,7 +32,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.16",
+  "version": "0.0.24",
   "license": "MIT",
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }