merge

.gitignore

@@ -38,7 +38,7 @@ bower_components
 build/Release
 
 # Dependency directories
-node_modules/
+/node_modules/
 jspm_packages/
 
 # TypeScript v1 declaration files

packages/builder/.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-node_modules
+/node_modules/
 node_modules_win
 package-lock.json
 yarn.lock

packages/builder/package.json

@@ -5,10 +5,11 @@
   "private": true,
   "scripts": {
     "build": "rollup -c",
-    "start": "rollup -c -w",
+    "start": "routify -c rollup",
     "test": "jest",
     "test:watch": "jest --watchAll",
-    "dev:builder": "rollup -c -w"
+    "dev:builder": "routify -c rollup",
+    "rollup": "rollup -c -w"
   },
   "jest": {
     "globals": {
@@ -19,7 +20,9 @@
     "testURL": "http://jest-breaks-if-this-does-not-exist",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
+      "\\.(css|less|sass|scss)$": "identity-obj-proxy",
+      "components(.*)$": "<rootDir>/src/components$1",
+      "builderStore(.*)$": "<rootDir>/src/builderStore$1"
     },
     "moduleFileExtensions": [
       "js"
@@ -54,6 +57,8 @@
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/runtime": "^7.5.5",
+    "@rollup/plugin-alias": "^3.0.1",
+    "@sveltech/routify": "1.5.0-beta.16",
     "babel-jest": "^24.8.0",
     "browser-sync": "^2.26.7",
     "http-proxy-middleware": "^0.19.1",

packages/builder/rollup.config.js

@@ -1,3 +1,4 @@
+import alias from "@rollup/plugin-alias"
 import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
 import commonjs from "rollup-plugin-commonjs"
@@ -11,6 +12,8 @@ import browsersync from "rollup-plugin-browsersync"
 import proxy from "http-proxy-middleware"
 import replace from "rollup-plugin-replace"
 
+import path from "path"
+
 const target = "http://localhost:4001"
 const _builderProxy = proxy("/_builder", {
   target: "http://localhost:3000",
@@ -142,6 +145,11 @@ const coreExternal = [
   "@nx-js/compiler-util",
 ]
 
+const customResolver = resolve({
+  extensions: [".mjs", ".js", ".jsx", ".json", ".sass", ".scss", ".svelte"]
+})
+const projectRootDir = path.resolve(__dirname)
+
 export default {
   input: "src/main.js",
   output: {
@@ -151,6 +159,13 @@ export default {
     file: `${outputpath}/bundle.js`,
   },
   plugins: [
+    alias({
+      entries: [
+        { find: "components", replacement: path.resolve(projectRootDir, 'src/components') },
+        { find: "builderStore", replacement: path.resolve(projectRootDir, 'src/builderStore') }
+      ],
+      customResolver
+    }),
     copy({
       targets: [
         { src: "src/index.html", dest: outputpath },
@@ -216,10 +231,10 @@ export default {
     // browser on changes when not in production
     !production && livereload(outputpath),
     !production &&
-      browsersync({
+    browsersync({
-        server: outputpath,
+      server: outputpath,
-        middleware: [apiProxy, _builderProxy],
+      middleware: [apiProxy, _builderProxy],
-      }),
+    }),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
@@ -229,3 +244,20 @@ export default {
     clearScreen: false,
   },
 }
+
+function serve() {
+  let started = false
+
+  return {
+    writeBundle() {
+      if (!started) {
+        started = true
+
+        require("child_process").spawn("npm", ["run", "start"], {
+          stdio: ["ignore", "inherit", "inherit"],
+          shell: true,
+        })
+      }
+    },
+  }
+}

packages/builder/src/App.svelte

@@ -2,13 +2,13 @@
   import NoPackage from "./NoPackage.svelte"
   import PackageRoot from "./PackageRoot.svelte"
   import Settings from "./Settings.svelte"
-  import { store, initialise } from "./builderStore"
+  import { store, initialise } from "builderStore"
   import { onMount } from "svelte"
-  import IconButton from "./common/IconButton.svelte"
+  import IconButton from "components/common/IconButton.svelte"
-  import Spinner from "./common/Spinner.svelte"
+  import Spinner from "components/common/Spinner.svelte"
   import AppNotification, {
     showAppNotification,
-  } from "./common/AppNotification.svelte"
+  } from "components/common/AppNotification.svelte"
 
   let init = initialise()
 

packages/builder/src/BackendRoot.svelte

@@ -1,13 +1,13 @@
 <script>
-  import BackendNav from "./nav/BackendNav.svelte"
+  import BackendNav from "components/nav/BackendNav.svelte"
-  import SchemaManagementDrawer from "./nav/SchemaManagementDrawer.svelte"
+  import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
-  import Database from "./database/DatabaseRoot.svelte"
+  import Database from "components/database/DatabaseRoot.svelte"
-  import UserInterface from "./userInterface/UserInterfaceRoot.svelte"
+  import UserInterface from "components/userInterface/UserInterfaceRoot.svelte"
-  import ActionsAndTriggers from "./actionsAndTriggers/ActionsAndTriggersRoot.svelte"
+  import ActionsAndTriggers from "components/actionsAndTriggers/ActionsAndTriggersRoot.svelte"
-  import AccessLevels from "./accessLevels/AccessLevelsRoot.svelte"
+  import AccessLevels from "components/accessLevels/AccessLevelsRoot.svelte"
-  import ComingSoon from "./common/ComingSoon.svelte"
+  import ComingSoon from "components/common/ComingSoon.svelte"
 
-  import { store, backendUiStore } from "./builderStore"
+  import { store, backendUiStore } from "builderStore"
 </script>
 
 <div class="root">
@@ -37,13 +37,13 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 80px 60px;
+    margin: 40px 40px;
   }
 
   .nav {
     overflow: auto;
     flex: 0 1 auto;
-    width: 300px;
+    width: 275px;
     height: 100%;
   }
 </style>

packages/builder/src/NoPackage.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Button from "./common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import { store } from "./builderStore"
+  import { store } from "builderStore"
 
   let errors = []
 </script>

packages/builder/src/PackageRoot.svelte

@@ -1,10 +1,10 @@
 <script>
-  import IconButton from "./common/IconButton.svelte"
+  import IconButton from "components/common/IconButton.svelte"
-  import { store } from "./builderStore"
+  import { store } from "builderStore"
-  import UserInterfaceRoot from "./userInterface/UserInterfaceRoot.svelte"
+  import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte"
   import BackendRoot from "./BackendRoot.svelte"
   import { fade } from "svelte/transition"
-  import { SettingsIcon, PreviewIcon } from "./common/Icons/"
+  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
 
   const TABS = {
     BACKEND: "backend",

packages/builder/src/Settings.svelte

@@ -1,7 +1,7 @@
 <script>
-  import IconButton from "./common/IconButton.svelte"
+  import IconButton from "components/common/IconButton.svelte"
-  import { store } from "./builderStore"
+  import { store } from "builderStore"
-  import UserInterfaceRoot from "./userInterface/UserInterfaceRoot.svelte"
+  import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte"
   import { fade } from "svelte/transition"
 </script>
 

packages/builder/src/budibase.css

@@ -62,9 +62,9 @@
     margin: 5px 20px 5px 0px;
     border-radius: 0 5px 5px 0;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     font-weight: 500;
-    font-size: 0.8em;
+    font-size: 12px;
 }
 
 .budibase__nav-item.selected {

packages/builder/src/builderStore/createPackage.js

@@ -1,4 +1,4 @@
-import { createNewHierarchy } from "../common/core"
+import { createNewHierarchy } from "components/common/core"
 
 export const createPackage = (packageInfo, store) => {
   packageInfo.createNewPackage("")

packages/builder/src/builderStore/generate_css.js

@@ -1,5 +1,5 @@
 import { filter, map, reduce, toPairs } from "lodash/fp"
-import { pipe } from "../common/core"
+import { pipe } from "components/common/core"
 
 const self = n => n
 const join_with = delimiter => a => a.join(delimiter)

packages/builder/src/builderStore/loadComponentLibraries.js

@@ -1,5 +1,5 @@
 import { flatten, values, uniq, map } from "lodash/fp"
-import { pipe } from "../common/core"
+import { pipe } from "components/common/core"
 
 export const loadLibs = async (appName, appPackage) => {
   const allLibraries = {}

packages/builder/src/builderStore/store/backend.js

@@ -10,7 +10,7 @@ import {
   isIndex,
   canDeleteIndex,
   canDeleteRecord,
-} from "../../common/core"
+} from "components/common/core"
 
 export const getBackendUiStore = () => {
   const INITIAL_BACKEND_UI_STATE = {
@@ -100,9 +100,9 @@ export const saveBackend = async state => {
 
   const instances_currentFirst = state.selectedDatabase
     ? [
-        state.appInstances.find(i => i.id === state.selectedDatabase.id),
+      state.appInstances.find(i => i.id === state.selectedDatabase.id),
-        ...state.appInstances.filter(i => i.id !== state.selectedDatabase.id),
+      ...state.appInstances.filter(i => i.id !== state.selectedDatabase.id),
-      ]
+    ]
     : state.appInstances
 
   for (let instance of instances_currentFirst) {
@@ -198,7 +198,10 @@ export const saveCurrentNode = store => () => {
       const defaultIndex = templateApi(state.hierarchy).getNewIndexTemplate(
         cloned.parent()
       )
-      defaultIndex.name = `all_${cloned.name}s`
+      defaultIndex.name = hierarchyFunctions.isTopLevelIndex(cloned)
+        ? `all_${cloned.name}s`
+        : `${cloned.parent().name}_${cloned.name}s`
+
       defaultIndex.allowedRecordNodeIds = [cloned.nodeId]
     }
 

packages/builder/src/builderStore/store/index.js

@@ -1,18 +1,18 @@
 import { filter, cloneDeep, last, concat, isEmpty, values } from "lodash/fp"
-import { pipe, getNode, constructHierarchy } from "../../common/core"
+import { pipe, getNode, constructHierarchy } from "components/common/core"
 import * as backendStoreActions from "./backend"
 import { writable } from "svelte/store"
-import { defaultPagesObject } from "../../userInterface/pagesParsing/defaultPagesObject"
+import { defaultPagesObject } from "components/userInterface/pagesParsing/defaultPagesObject"
 import api from "../api"
-import { getExactComponent } from "../../userInterface/pagesParsing/searchComponents"
+import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
-import { rename } from "../../userInterface/pagesParsing/renameScreen"
+import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
   getNewScreen,
   createProps,
   makePropsSafe,
   getBuiltin,
-} from "../../userInterface/pagesParsing/createProps"
+} from "components/userInterface/pagesParsing/createProps"
-import { expandComponentDefinition } from "../../userInterface/pagesParsing/types"
+import { expandComponentDefinition } from "components/userInterface/pagesParsing/types"
 import { loadLibs, libUrlsForPreview } from "../loadComponentLibraries"
 import { buildCodeForScreens } from "../buildCodeForScreens"
 import { generate_screen_css } from "../generate_css"

packages/builder/src/components/accessLevels/AccessLevelView.svelte

@@ -5,7 +5,7 @@
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import Button from "../common/Button.svelte"
   import ActionButton from "../common/ActionButton.svelte"
-  import { validateAccessLevels } from "../common/core"
+  import { validateAccessLevels, nodeNameFromNodeKey } from "../common/core"
   import ErrorsBox from "../common/ErrorsBox.svelte"
 
   export let level
@@ -38,7 +38,9 @@
   )
 
   const getPermissionName = perm =>
-    perm.nodeKey ? `${perm.type} - ${perm.nodeKey}` : perm.type
+    perm.nodeKey 
+    ? `${perm.type} - ${nodeNameFromNodeKey(hierarchy, perm.nodeKey)}` 
+    : perm.type
 
   const save = () => {
     const newLevels = isNew

packages/builder/src/components/accessLevels/AccessLevelsRoot.svelte

@@ -1,12 +1,15 @@
 <script>
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
-  import { generateFullPermissions, getNewAccessLevel } from "../common/core"
+  import {
-  import getIcon from "../common/icon"
+    generateFullPermissions,
+    getNewAccessLevel,
+  } from "components/common/core"
+  import getIcon from "components/common/icon"
   import AccessLevelView from "./AccessLevelView.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
 
   let editingLevel = null
   let editingLevelIsNew = false

packages/builder/src/components/actionsAndTriggers/ActionView.svelte

@@ -1,12 +1,12 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
+  import Textbox from "components/common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import { cloneDeep, filter, keys, map, isUndefined } from "lodash/fp"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import { validateActions, pipe } from "../common/core"
+  import { validateActions, pipe } from "components/common/core"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
 
   export let action
   export let onFinished = action => {}

packages/builder/src/components/actionsAndTriggers/Actions.svelte

@@ -1,11 +1,11 @@
 <script>
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import ActionView from "./ActionView.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
-  import { pipe } from "../common/core"
+  import { pipe } from "components/common/core"
   import { keys, map, join } from "lodash/fp"
 
   export let editingActionIsNew = false

packages/builder/src/components/actionsAndTriggers/ActionsAndTriggersRoot.svelte

@@ -1,12 +1,12 @@
 <script>
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import Actions from "./Actions.svelte"
   import Triggers from "./Triggers.svelte"
-  import { getNewAction, getNewTrigger } from "../common/core"
+  import { getNewAction, getNewTrigger } from "components/common/core"
 
   let editingAction = null
   let editingActionIsNew = true
@@ -14,16 +14,19 @@
   let editingTriggerIsNew = true
 
   let getDefaultOptionsHtml = defaultOptions =>
-    pipe(defaultOptions, [
+    pipe(
-      keys,
+      defaultOptions,
-      map(
+      [
-        k =>
+        keys,
-          `<span style="color:var(--slate)">${k}: </span>${JSON.parse(
+        map(
-            typeOptions[k]
+          k =>
-          )}`
+            `<span style="color:var(--slate)">${k}: </span>${JSON.parse(
-      ),
+              typeOptions[k]
-      join("<br>"),
+            )}`
-    ])
+        ),
+        join("<br>"),
+      ]
+    )
 
   let onActionEdit = action => {
     editingAction = action

packages/builder/src/components/actionsAndTriggers/TriggerView.svelte

@@ -1,14 +1,14 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
+  import Textbox from "components/common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import Dropdown from "../common/Dropdown.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import CodeArea from "../common/CodeArea.svelte"
+  import CodeArea from "components/common/CodeArea.svelte"
   import { cloneDeep, filter, keys, some, map, isUndefined } from "lodash/fp"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import { validateTriggers, pipe, events } from "../common/core"
+  import { validateTriggers, pipe, events } from "components/common/core"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
 
   export let trigger
   export let onFinished = action => {}
@@ -22,7 +22,10 @@
   let cancel = () => onFinished()
   let save = () => {
     const newTriggersList = [
-      ...pipe(allTriggers, [filter(t => t !== trigger)]),
+      ...pipe(
+        allTriggers,
+        [filter(t => t !== trigger)]
+      ),
       clonedTrigger,
     ]
 

packages/builder/src/components/actionsAndTriggers/Triggers.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
   import TriggerView from "./TriggerView.svelte"
 
   export let editingTrigger = null

packages/builder/src/components/common/core.js

@@ -3,17 +3,17 @@ import {
   common,
   getTemplateApi,
   getAuthApi,
-} from "../../../core/src"
+} from "../../../../core/src"
-import { _getNew } from "../../../core/src/recordApi/getNew"
+import { _getNew } from "../../../../core/src/recordApi/getNew"
 import { find, filter, keyBy, flatten, map } from "lodash/fp"
-import { generateSchema } from "../../../core/src/indexing/indexSchemaCreator"
+import { generateSchema } from "../../../../core/src/indexing/indexSchemaCreator"
 import { generate } from "shortid"
 
-export { canDeleteIndex } from "../../../core/src/templateApi/canDeleteIndex"
+export { canDeleteIndex } from "../../../../core/src/templateApi/canDeleteIndex"
-export { canDeleteRecord } from "../../../core/src/templateApi/canDeleteRecord"
+export { canDeleteRecord } from "../../../../core/src/templateApi/canDeleteRecord"
-export { userWithFullAccess } from "../../../core/src/index"
+export { userWithFullAccess } from "../../../../core/src/index"
-export { joinKey } from "../../../core/src/common"
+export { joinKey } from "../../../../core/src/common"
-export { getExactNodeForKey } from "../../../core/src/templateApi/hierarchy"
+export { getExactNodeForKey } from "../../../../core/src/templateApi/hierarchy"
 export const pipe = common.$
 
 export const events = common.eventsList
@@ -38,7 +38,7 @@ export const authApi = (hierarchy, actions) =>
   getAuthApi({
     hierarchy,
     actions: keyBy("name")(actions),
-    publish: () => {},
+    publish: () => { },
   })
 
 export const allTypes = templateApi({}).allTypes
@@ -79,6 +79,7 @@ export const getPotentialReferenceIndexes = (hierarchy, record) =>
 
 export const isIndex = hierarchyFunctions.isIndex
 export const isRecord = hierarchyFunctions.isRecord
+export const nodeNameFromNodeKey = hierarchyFunctions.nodeNameFromNodeKey
 
 export const getDefaultTypeOptions = type =>
   !type ? {} : allTypes[type].getDefaultOptions()

packages/builder/src/components/common/eventHandlers.js

@@ -1,7 +1,7 @@
-import { eventHandlers } from "../../../client/src/state/eventHandlers"
+import { eventHandlers } from "../../../../client/src/state/eventHandlers"
 import { writable } from "svelte/store"
-export { EVENT_TYPE_MEMBER_NAME } from "../../../client/src/state/eventHandlers"
+export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers"
-import { createCoreApi } from "../../../client/src/core"
+import { createCoreApi } from "../../../../client/src/core"
 
 export const allHandlers = (appDefinition, user) => {
   const coreApi = createCoreApi(appDefinition, user)

packages/builder/src/components/database/DatabaseRoot.svelte

@@ -2,11 +2,11 @@
   import ModelView from "./ModelView.svelte"
   import IndexView from "./IndexView.svelte"
   import ModelDataTable from "./ModelDataTable"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
-  import DropdownButton from "../common/DropdownButton.svelte"
+  import DropdownButton from "components/common/DropdownButton.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
   import * as api from "./ModelDataTable/api"
   import {
     CreateEditRecordModal,

packages/builder/src/components/database/IndexView.svelte

@@ -1,13 +1,16 @@
 <script>
-  import Textbox from "../common/Textbox.svelte"
+  import Textbox from "components/common/Textbox.svelte"
-  import CodeArea from "../common/CodeArea.svelte"
+  import CodeArea from "components/common/CodeArea.svelte"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import Dropdown from "../common/Dropdown.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
   import { filter, some, map, compose } from "lodash/fp"
-  import { hierarchy as hierarchyFunctions, common } from "../../../core/src"
+  import {
-  import ErrorsBox from "../common/ErrorsBox.svelte"
+    hierarchy as hierarchyFunctions,
-  import ActionButton from "../common/ActionButton.svelte"
+    common,
+  } from "../../../../core/src/"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
 
   const SNIPPET_EDITORS = {
     MAP: "Map",

packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "../../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import {
     tap,
     get,
@@ -11,11 +11,11 @@
     map,
     remove,
     keys,
-    takeRight
+    takeRight,
   } from "lodash/fp"
-  import Select from "../../common/Select.svelte"
+  import Select from "components/common/Select.svelte"
-  import { getIndexSchema } from "../../common/core"
+  import { getIndexSchema } from "components/common/core"
-  import ActionButton from "../../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
   import TablePagination from "./TablePagination.svelte"
   import { DeleteRecordModal } from "./modals"
   import * as api from "./api"
@@ -56,7 +56,11 @@
 
   const getSchema = getIndexSchema($store.hierarchy)
 
-  const childViewsForRecord = compose(flatten, map("indexes"), get("children"))
+  const childViewsForRecord = compose(
+    flatten,
+    map("indexes"),
+    get("children")
+  )
 
   const hideInternalHeaders = compose(
     remove(headerName => INTERNAL_HEADERS.includes(headerName)),
@@ -95,7 +99,9 @@
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">{takeRight(2, $backendUiStore.breadcrumbs).join(" / ")}</h4>
+    <h4 class="budibase__title--3">
+      {takeRight(2, $backendUiStore.breadcrumbs).join(' / ')}
+    </h4>
     <Select icon="ri-eye-line" bind:value={$backendUiStore.selectedView}>
       {#each views as view}
         <option value={view}>{view.name}</option>

packages/builder/src/components/database/ModelDataTable/TablePagination.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "../../builderStore"
+  import { backendUiStore } from "builderStore"
 
   export let data
   export let currentPage

packages/builder/src/components/database/ModelDataTable/api.js

@@ -1,5 +1,5 @@
-import api from "../../builderStore/api"
+import api from "builderStore/api"
-import { getNewRecord, getNewInstance } from "../../common/core"
+import { getNewRecord, getNewInstance } from "components/common/core"
 
 export async function createUser(password, user, { appname, instanceId }) {
   const CREATE_USER_URL = `/_builder/instance/${appname}/${instanceId}/api/createUser`

packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte

@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
-  import { store } from "../../../builderStore"
+  import { store } from "builderStore"
-  import ActionButton from "../../../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "../api"
 
   export let onClosed

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Modal from "components/common/Modal.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import { backendUiStore } from "builderStore"
+  import ModelView from "../../ModelView.svelte"
+  import * as api from "../api"
+</script>
+
+<section>
+  <ModelView />
+</section>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -1,18 +1,18 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "../../../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import { compose, map, get, flatten } from "lodash/fp"
-  import Modal from "../../../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
-  import ActionButton from "../../../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import Select from "../../../common/Select.svelte"
+  import Select from "components/common/Select.svelte"
   import {
     getNewRecord,
     joinKey,
     getExactNodeForKey,
-  } from "../../../common/core"
+  } from "components/common/core"
   import RecordFieldControl from "./RecordFieldControl.svelte"
   import * as api from "../api"
-  import ErrorsBox from "../../../common/ErrorsBox.svelte"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
 
   export let record
   export let onClosed

packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte

@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
-  import { store, backendUiStore } from "../../../builderStore"
+  import { store, backendUiStore } from "builderStore"
-  import ActionButton from "../../../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "../api"
 
   export let onClosed

packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte

@@ -1,7 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
-  import ActionButton from "../../../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import { store, backendUiStore } from "../../../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import * as api from "../api"
 
   export let record

packages/builder/src/components/database/ModelView.svelte

@@ -1,12 +1,12 @@
 <script>
   import { tick } from "svelte"
-  import Textbox from "../common/Textbox.svelte"
+  import Textbox from "components/common/Textbox.svelte"
-  import Button from "../common/Button.svelte"
+  import Button from "components/common/Button.svelte"
-  import Select from "../common/Select.svelte"
+  import Select from "components/common/Select.svelte"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
   import FieldView from "./FieldView.svelte"
-  import Modal from "../common/Modal.svelte"
+  import Modal from "components/common/Modal.svelte"
   import {
     get,
     compose,
@@ -18,11 +18,11 @@
     keys,
     isDate,
   } from "lodash/fp"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
-  import { common, hierarchy } from "../../../core/src"
+  import { common, hierarchy } from "../../../../core/src/"
-  import { getNode } from "../common/core"
+  import { getNode } from "components/common/core"
-  import { templateApi, pipe, validate } from "../common/core"
+  import { templateApi, pipe, validate } from "components/common/core"
-  import ErrorsBox from "../common/ErrorsBox.svelte"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
 
   let record
   let getIndexAllowedRecords
@@ -154,7 +154,7 @@
               <div>{field.name}</div>
             </td>
             <td>{field.type}</td>
-            <td>{field.typeOptions.values || ""}</td>
+            <td>{field.typeOptions.values || ''}</td>
             <td>
               <i
                 class="ri-delete-bin-6-line hoverable"
@@ -164,26 +164,28 @@
         {/each}
       </tbody>
     </table>
-      <div class="uk-margin">
+    <div class="uk-margin">
-        <ActionButton color="secondary" on:click={store.saveCurrentNode}>
+      <ActionButton color="secondary" on:click={store.saveCurrentNode}>
-          Save
+        Save
+      </ActionButton>
+      {#if modelExistsInHierarchy}
+        <ActionButton color="primary" on:click={store.newChildRecord}>
+          Create Child Model on {record.name}
         </ActionButton>
-        {#if modelExistsInHierarchy}
+        <ActionButton
-          <ActionButton color="primary" on:click={store.newChildRecord}>
+          color="primary"
-            Create Child Model on {record.name}
+          on:click={async () => {
-          </ActionButton>
+            backendUiStore.actions.modals.show('VIEW')
-          <ActionButton
+            await tick()
-            color="primary"
+            store.newChildIndex()
-            on:click={async () => {
+          }}>
-              backendUiStore.actions.modals.show('VIEW')
+          Create Child View on {record.name}
-              await tick()
+        </ActionButton>
-              store.newChildIndex()
+        <ActionButton alert on:click={store.deleteCurrentNode}>
-            }}>
+          Delete
-            Create Child View on {record.name}
+        </ActionButton>
-          </ActionButton>
+      {/if}
-          <ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton>
+    </div>
-        {/if}
-      </div>
   {:else}
     <FieldView
       field={fieldToEdit}

packages/builder/src/components/nav/BackendNav.svelte

@@ -1,12 +1,11 @@
 <script>
   import { getContext } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
   import DatabasesList from "./DatabasesList.svelte"
   import UsersList from "./UsersList.svelte"
-  import { hierarchy as hierarchyFunctions } from "../../../core/src"
   import NavItem from "./NavItem.svelte"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
 </script>
 
 <div class="items-root">
@@ -42,7 +41,7 @@
 
     </div>
   {/if}
-  <NavItem name="ACCESS_LEVELS" label="User Levels" />
+  <NavItem name="ACCESS_LEVELS" label="User Access Levels" />
 </div>
 
 <style>
@@ -58,12 +57,17 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 2rem 1rem 1rem 1rem;
+    padding: 20px 20px 10px 20px;
   }
 
   .hierarchy-title {
+    align-items: center;
     text-transform: uppercase;
-    font-size: 0.85em;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 0.6;
+    letter-spacing: 1px;
+    text-rendering: optimizeLegibility;
   }
 
   .hierarchy {

packages/builder/src/components/nav/DatabasesList.svelte

@@ -1,7 +1,7 @@
 <script>
   import { tick, onMount } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
-  import api from "../builderStore/api"
+  import api from "builderStore/api"
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
@@ -28,7 +28,7 @@
 
   onMount(() => {
     if ($store.appInstances.length > 0) {
-      selectDatabase($store.appInstances[0]);
+      selectDatabase($store.appInstances[0])
     }
   })
 </script>
@@ -42,15 +42,14 @@
             <CheckIcon />
           {/if}
         </span>
-        <i
-          class="ri-delete-bin-7-line hoverable uk-margin-small-left"
-          on:click={() => deleteDatabase(database)} />
         <button
           class:active={database.id === $backendUiStore.selectedDatabase.id}
           on:click={() => selectDatabase(database)}>
           {database.name}
         </button>
-
+        <i
+          class="ri-delete-bin-7-line hoverable alignment"
+          on:click={() => deleteDatabase(database)} />
       </li>
     {/each}
   </ul>
@@ -58,12 +57,10 @@
 
 <style>
   .root {
-    padding-bottom: 10px;
+    font-size: 12px;
-    font-size: 0.9rem;
+    color: var(--secondary100);
-    color: var(--secondary50);
-    font-weight: bold;
     position: relative;
-    padding-left: 1.8rem;
+    padding-left: 20px;
   }
 
   ul {
@@ -72,8 +69,13 @@
     list-style: none;
   }
 
+  .alignment {
+    margin-left: auto;
+    padding-right: 20px;
+  }
+
   li {
-    margin: 0.5rem 0;
+    margin: 0px 0px 10px 0px;
     display: flex;
     align-items: center;
   }
@@ -83,10 +85,11 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 0.8rem;
+    font-size: 12px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
+    text-rendering: optimizeLegibility;
   }
 
   .active {

packages/builder/src/components/nav/HierarchyRow.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import { cloneDeep } from "lodash/fp"
   import getIcon from "../common/icon"
 
@@ -52,8 +52,9 @@
 
 <style>
   .hierarchy-item {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 400;
+    margin-bottom: 10px;
   }
 
   .capitalized {

packages/builder/src/components/nav/NavItem.svelte

@@ -1,6 +1,6 @@
 <script>
   import getIcon from "../common/icon"
-  import { backendUiStore } from "../builderStore"
+  import { backendUiStore } from "builderStore"
 
   export let name = ""
   export let label = ""

packages/builder/src/components/nav/SchemaManagementDrawer.svelte

@@ -1,10 +1,9 @@
 <script>
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
-  import DropdownButton from "../common/DropdownButton.svelte"
+  import DropdownButton from "components/common/DropdownButton.svelte"
-  import { hierarchy as hierarchyFunctions } from "../../../core/src"
   import NavItem from "./NavItem.svelte"
-  import getIcon from "../common/icon"
+  import getIcon from "components/common/icon"
 
   function newModel() {
     if ($store.currentNode) {
@@ -56,20 +55,24 @@
     flex-direction: column;
     max-height: 100%;
     height: 100%;
-    background-color: var(--secondary5);
+    background-color: var(--white);
   }
 
   .nav-group-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 2rem 1rem 1rem 1rem;
+    padding: 20px 20px 10px 20px;
   }
 
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 0.85em;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 0.6;
+    letter-spacing: 1px;
+    text-rendering: optimizeLegibility;
   }
 
   .hierarchy {

packages/builder/src/components/nav/UsersList.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "../builderStore"
+  import { store, backendUiStore } from "builderStore"
-  import api from "../builderStore/api"
+  import api from "builderStore/api"
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 

packages/builder/src/components/userInterface/CodeEditor.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
   import UIkit from "uikit"
-  import ActionButton from "../common/ActionButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
   import CodeMirror from "codemirror"
   import "codemirror/mode/javascript/javascript.js"
 

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -1,15 +1,15 @@
 <script>
   import PropsView from "./PropsView.svelte"
   import StateBindingControl from "./StateBindingControl.svelte"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
-  import IconButton from "../common/IconButton.svelte"
+  import IconButton from "components/common/IconButton.svelte"
   import {
     LayoutIcon,
     PaintIcon,
     TerminalIcon,
     CircleIndicator,
     EventsIcon,
-  } from "../common/Icons/"
+  } from "components/common/Icons/"
   import CodeEditor from "./CodeEditor.svelte"
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -1,6 +1,6 @@
 <script>
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
   import {
     find,
     sortBy,
@@ -11,16 +11,16 @@
     uniqBy,
     flatten,
   } from "lodash/fp"
-  import { ImageIcon, InputIcon, LayoutIcon } from "../common/Icons/"
+  import { ImageIcon, InputIcon, LayoutIcon } from "components/common/Icons/"
-  import Select from "../common/Select.svelte"
+  import Select from "components/common/Select.svelte"
-  import Button from "../common/PlusButton.svelte"
+  import Button from "components/common/PlusButton.svelte"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     getRecordNodes,
     getIndexNodes,
     getIndexSchema,
     pipe,
-  } from "../common/core"
+  } from "components/common/core"
 
   export let toggleTab
 
@@ -35,13 +35,16 @@
   $: templatesByComponent = groupBy(t => t.component)($store.templates)
   $: hierarchy = $store.hierarchy
   $: libraryModules = $store.libraries
-  $: standaloneTemplates = pipe(templatesByComponent, [
+  $: standaloneTemplates = pipe(
-    values,
+    templatesByComponent,
-    flatten,
+    [
-    filter(t => !$store.components.some(c => c.name === t.component)),
+      values,
-    map(t => ({ name: splitName(t.component).componentName, template: t })),
+      flatten,
-    uniqBy(t => t.name),
+      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)

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -2,10 +2,10 @@
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
   import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
-  import ConfirmDialog from "../common/ConfirmDialog.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { pipe } from "../common/core"
+  import { pipe } from "components/common/core"
-  import { store } from "../builderStore"
+  import { store } from "builderStore"
-  import { ArrowDownIcon, ShapeIcon } from "../common/Icons/"
+  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
 
   export let screens = []
 
@@ -15,12 +15,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
+    pipe(
-      trimCharsStart("./"),
+      name,
-      trimCharsStart("~/"),
+      [
-      trimCharsStart("../"),
+        trimCharsStart("./"),
-      trimChars(" "),
+        trimCharsStart("~/"),
-    ])
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -32,10 +35,10 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _screens = pipe(screens, [
+  $: _screens = pipe(
-    map(c => ({ component: c, title: lastPartOfName(c) })),
+    screens,
-    sortBy("title"),
+    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
-  ])
+  )
 
   const isScreenSelected = component =>
     component.component &&