Merge branch 'master' of github.com:Budibase/budibase into feature/self-hosting

lerna.json

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

packages/builder/cypress/support/commands.js

@@ -115,7 +115,7 @@ Cypress.Commands.add("createUser", (email, password, role) => {
   // Create User
   cy.contains("Users").click()
 
-  cy.contains("Create New Row").click()
+  cy.contains("Create New User").click()
 
   cy.get(".modal").within(() => {
     cy.get("input")

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.3.8",
+  "version": "0.4.2",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -63,8 +63,8 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.52.2",
+    "@budibase/bbui": "^1.52.4",
-    "@budibase/client": "^0.3.8",
+    "@budibase/client": "^0.4.2",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",

packages/builder/src/analytics.js

@@ -39,19 +39,22 @@ function identify(id) {
 
 async function identifyByApiKey(apiKey) {
   if (!analyticsEnabled) return true
-  const response = await fetch(
+  try {
-    `https://03gaine137.execute-api.eu-west-1.amazonaws.com/prod/account/id?api_key=${apiKey.trim()}`
+    const response = await fetch(
-  )
+      `https://03gaine137.execute-api.eu-west-1.amazonaws.com/prod/account/id?api_key=${apiKey.trim()}`
+    )
+    if (response.status === 200) {
+      const id = await response.json()
 
-  if (response.status === 200) {
+      await api.put("/api/keys/userId", { value: id })
-    const id = await response.json()
+      identify(id)
+      return true
+    }
 
-    await api.put("/api/keys/userId", { value: id })
+    return false
-    identify(id)
+  } catch (error) {
-    return true
+    console.log(error)
   }
-
-  return false
 }
 
 function captureException(err) {

packages/builder/src/builderStore/index.js

@@ -4,9 +4,9 @@ import { getAutomationStore } from "./store/automation"
 import { getHostingStore } from "./store/hosting"
 
 import { getThemeStore } from "./store/theme"
-import { derived } from "svelte/store"
+import { derived, writable } from "svelte/store"
 import analytics from "analytics"
-import { LAYOUT_NAMES } from "../constants"
+import { FrontendTypes, LAYOUT_NAMES } from "../constants"
 import { makePropsSafe } from "components/userInterface/assetParsing/createProps"
 
 export const store = getFrontendStore()
@@ -16,18 +16,12 @@ export const themeStore = getThemeStore()
 export const hostingStore = getHostingStore()
 
 export const currentAsset = derived(store, $store => {
-  const layout = $store.layouts
+  const type = $store.currentFrontEndType
-    ? $store.layouts.find(layout => layout._id === $store.currentAssetId)
+  if (type === FrontendTypes.SCREEN) {
-    : null
+    return $store.screens.find(screen => screen._id === $store.selectedScreenId)
-
+  } else if (type === FrontendTypes.LAYOUT) {
-  if (layout) return layout
+    return $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
-
+  }
-  const screen = $store.screens
-    ? $store.screens.find(screen => screen._id === $store.currentAssetId)
-    : null
-
-  if (screen) return screen
-
   return null
 })
 
@@ -62,8 +56,14 @@ export const selectedComponent = derived(
   }
 )
 
-export const currentAssetName = derived(store, () => {
+export const currentAssetId = derived(store, $store => {
-  return currentAsset.name
+  return $store.currentFrontEndType === FrontendTypes.SCREEN
+    ? $store.selectedScreenId
+    : $store.selectedLayoutId
+})
+
+export const currentAssetName = derived(currentAsset, $currentAsset => {
+  return $currentAsset?.name
 })
 
 // leave this as before for consistency
@@ -77,6 +77,8 @@ export const mainLayout = derived(store, $store => {
   )
 })
 
+export const selectedAccessRole = writable("BASIC")
+
 export const initialise = async () => {
   try {
     await analytics.activate()

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

@@ -6,6 +6,7 @@ const INITIAL_BACKEND_UI_STATE = {
   tables: [],
   views: [],
   users: [],
+  roles: [],
   selectedDatabase: {},
   selectedTable: {},
   draftTable: {},
@@ -177,6 +178,26 @@ export const getBackendUiStore = () => {
           return state
         }),
     },
+    roles: {
+      fetch: async () => {
+        const response = await api.get("/api/roles")
+        const roles = await response.json()
+        store.update(state => {
+          state.roles = roles
+          return state
+        })
+      },
+      delete: async role => {
+        const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
+        await store.actions.roles.fetch()
+        return response
+      },
+      save: async role => {
+        const response = await api.post("/api/roles", role)
+        await store.actions.roles.fetch()
+        return response
+      },
+    },
   }
 
   return store

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

@@ -3,7 +3,6 @@ import { cloneDeep } from "lodash/fp"
 import {
   createProps,
   getBuiltin,
-  makePropsSafe,
 } from "components/userInterface/assetParsing/createProps"
 import {
   allScreens,
@@ -12,6 +11,7 @@ import {
   currentAsset,
   mainLayout,
   selectedComponent,
+  selectedAccessRole,
 } from "builderStore"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
@@ -33,7 +33,8 @@ const INITIAL_FRONTEND_STATE = {
   screens: [],
   components: [],
   currentFrontEndType: "none",
-  currentAssetId: "",
+  selectedScreenId: "",
+  selectedLayoutId: "",
   selectedComponentId: "",
   errors: [],
   hasAppPackage: false,
@@ -85,25 +86,31 @@ export const getFrontendStore = () => {
       },
     },
     screens: {
-      select: async screenId => {
+      select: screenId => {
         store.update(state => {
-          const screen = get(allScreens).find(screen => screen._id === screenId)
+          let screens = get(allScreens)
+          let screen =
+            screens.find(screen => screen._id === screenId) || screens[0]
           if (!screen) return state
 
+          // Update role to the screen's role setting so that it will always
+          // be visible
+          selectedAccessRole.set(screen.routing.roleId)
+
           state.currentFrontEndType = FrontendTypes.SCREEN
-          state.currentAssetId = screenId
+          state.selectedScreenId = screen._id
           state.currentView = "detail"
           state.selectedComponentId = screen.props?._id
-
           return state
         })
       },
       create: async screen => {
         screen = await store.actions.screens.save(screen)
         store.update(state => {
-          state.currentAssetId = screen._id
+          state.selectedScreenId = screen._id
           state.selectedComponentId = screen.props._id
           state.currentFrontEndType = FrontendTypes.SCREEN
+          selectedAccessRole.set(screen.routing.roleId)
           return state
         })
         return screen
@@ -112,6 +119,7 @@ export const getFrontendStore = () => {
         const creatingNewScreen = screen._id === undefined
         const response = await api.post(`/api/screens`, screen)
         screen = await response.json()
+        await store.actions.routing.fetch()
 
         store.update(state => {
           const foundScreen = state.screens.findIndex(
@@ -121,17 +129,13 @@ export const getFrontendStore = () => {
             state.screens.splice(foundScreen, 1)
           }
           state.screens.push(screen)
-
-          if (creatingNewScreen) {
-            const safeProps = makePropsSafe(
-              state.components[screen.props._component],
-              screen.props
-            )
-            state.selectedComponentId = safeProps._id
-            screen.props = safeProps
-          }
           return state
         })
+
+        if (creatingNewScreen) {
+          store.actions.screens.select(screen._id)
+        }
+
         return screen
       },
       delete: async screens => {
@@ -148,8 +152,8 @@ export const getFrontendStore = () => {
                 `/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
               )
             )
-            if (screenToDelete._id === state.currentAssetId) {
+            if (screenToDelete._id === state.selectedScreenId) {
-              state.currentAssetId = ""
+              state.selectedScreenId = null
             }
           }
           return state
@@ -172,39 +176,42 @@ export const getFrontendStore = () => {
     layouts: {
       select: layoutId => {
         store.update(state => {
-          const layout = store.actions.layouts.find(layoutId)
+          const layout =
+            store.actions.layouts.find(layoutId) || get(store).layouts[0]
+          if (!layout) return
           state.currentFrontEndType = FrontendTypes.LAYOUT
           state.currentView = "detail"
-
+          state.selectedLayoutId = layout._id
-          state.currentAssetId = layout._id
           state.selectedComponentId = layout.props?._id
-
           return state
         })
       },
       save: async layout => {
         const layoutToSave = cloneDeep(layout)
-
+        const creatingNewLayout = layoutToSave._id === undefined
         const response = await api.post(`/api/layouts`, layoutToSave)
-
+        const savedLayout = await response.json()
-        const json = await response.json()
 
         store.update(state => {
           const layoutIdx = state.layouts.findIndex(
-            stateLayout => stateLayout._id === json._id
+            stateLayout => stateLayout._id === savedLayout._id
           )
-
           if (layoutIdx >= 0) {
             // update existing layout
-            state.layouts.splice(layoutIdx, 1, json)
+            state.layouts.splice(layoutIdx, 1, savedLayout)
           } else {
             // save new layout
-            state.layouts.push(json)
+            state.layouts.push(savedLayout)
           }
-
-          state.currentAssetId = json._id
           return state
         })
+
+        // Select layout if creating a new one
+        if (creatingNewLayout) {
+          store.actions.layouts.select(savedLayout._id)
+        }
+
+        return savedLayout
       },
       find: layoutId => {
         if (!layoutId) {
@@ -217,16 +224,17 @@ export const getFrontendStore = () => {
         const response = await api.delete(
           `/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
         )
-
         if (response.status !== 200) {
           const json = await response.json()
           throw new Error(json.message)
         }
-
         store.update(state => {
           state.layouts = state.layouts.filter(
             layout => layout._id !== layoutToDelete._id
           )
+          if (layoutToDelete._id === state.selectedLayoutId) {
+            state.selectedLayoutId = get(mainLayout)._id
+          }
           return state
         })
       },
@@ -455,7 +463,6 @@ export const getFrontendStore = () => {
 
               // Save layout
               nav._children = [...nav._children, newLink]
-              state.currentAssetId = layout._id
               promises.push(store.actions.layouts.save(layout))
             }
             return state

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -44,6 +44,7 @@
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
     <CreateRowButton
+      title={isUsersTable ? 'Create New User' : 'Create New Row'}
       modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
     <CreateViewButton />
     <ExportButton view={tableView} />

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -82,7 +82,7 @@
       if (!allowEditing) {
         return false
       }
-      return !(isUsersTable && ["email", "roleId"].indexOf(key) !== -1)
+      return !(isUsersTable && ["email", "roleId"].includes(key))
     }
 
     Object.entries(schema || {}).forEach(([key, value]) => {

packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte

@@ -3,6 +3,7 @@
   import CreateEditRow from "../modals/CreateEditRow.svelte"
 
   export let modalContentComponent = CreateEditRow
+  export let title = "Create New Row"
 
   let modal
 </script>
@@ -10,7 +11,7 @@
 <div>
   <Button text small on:click={modal.show}>
     <Icon name="addrow" />
-    Create New Row
+    {title}
   </Button>
 </div>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte

@@ -1,42 +1,10 @@
-<!-- Module scoped cache of saved role options -->
-<script context="module">
-  import builderApi from "builderStore/api"
-
-  let cachedRoles
-
-  async function getRoles(force = false) {
-    if (cachedRoles && !force) {
-      return await cachedRoles
-    }
-    cachedRoles = new Promise(resolve => {
-      builderApi
-        .get("/api/roles")
-        .then(response => response.json())
-        .then(resolve)
-    })
-    return await cachedRoles
-  }
-</script>
-
 <script>
+  import { backendUiStore } from "builderStore"
+
   export let roleId
 
-  let roleName
+  $: role = $backendUiStore.roles.find(role => role._id === roleId)
-  $: getRole()
+  $: roleName = role?.name ?? "Unknown role"
-
-  async function getRole() {
-    // Try to find a matching role
-    let roles = await getRoles()
-    let role = roles.find(role => role._id === roleId)
-
-    // If we didn't find a matching role, try updating the cached results
-    if (!role) {
-      let roles = await getRoles(true)
-      let role = roles.find(role => role._id === roleId)
-    }
-    role = roles.find(role => role._id === roleId)
-    roleName = role?.name ?? "Unknown role"
-  }
 </script>
 
 <div>{roleName}</div>

packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte

@@ -45,3 +45,9 @@
     </div>
   {/each}
 </ModalContent>
+
+<style>
+  div {
+    min-width: 0;
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte

@@ -1,18 +1,14 @@
 <script>
-  import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import RowFieldControl from "../RowFieldControl.svelte"
   import * as backendApi from "../api"
-  import builderApi from "builderStore/api"
   import { ModalContent, Select } from "@budibase/bbui"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
 
   export let row = {}
 
   let errors = []
-  let roles = []
-  let rolesLoaded = false
 
   $: creating = row?._id == null
   $: table = row.tableId
@@ -56,14 +52,6 @@
     notifier.success("User saved successfully.")
     backendUiStore.actions.rows.save(rowResponse)
   }
-
-  const fetchRoles = async () => {
-    const rolesResponse = await builderApi.get("/api/roles")
-    roles = await rolesResponse.json()
-    rolesLoaded = true
-  }
-
-  onMount(fetchRoles)
 </script>
 
 <ModalContent
@@ -80,19 +68,17 @@
     bind:value={row.password} />
   <!-- Defer rendering this select until roles load, otherwise the initial
        selection is always undefined -->
-  {#if rolesLoaded}
+  <Select
-    <Select
+    thin
-      thin
+    secondary
-      secondary
+    label="Role"
-      label="Role"
+    data-cy="roleId-select"
-      data-cy="roleId-select"
+    bind:value={row.roleId}>
-      bind:value={row.roleId}>
+    <option value="">Choose an option</option>
-      <option value="">Choose an option</option>
+    {#each $backendUiStore.roles as role}
-      {#each roles as role}
+      <option value={role._id}>{role.name}</option>
-        <option value={role._id}>{role.name}</option>
+    {/each}
-      {/each}
+  </Select>
-    </Select>
-  {/if}
   {#each customSchemaKeys as [key, meta]}
     <RowFieldControl {meta} bind:value={row[key]} {creating} />
   {/each}

packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte

@@ -4,27 +4,26 @@
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import { backendUiStore } from "builderStore"
 
-  let roles = []
   let permissions = []
   let selectedRole = {}
   let errors = []
   $: selectedRoleId = selectedRole._id
-  $: otherRoles = roles.filter(role => role._id !== selectedRoleId)
+  $: otherRoles = $backendUiStore.roles.filter(
+    role => role._id !== selectedRoleId
+  )
   $: isCreating = selectedRoleId == null || selectedRoleId === ""
 
-  // Loads available roles and permissions from the server
+  const fetchPermissions = async () => {
-  const fetchRoles = async () => {
-    const rolesResponse = await api.get("/api/roles")
-    roles = await rolesResponse.json()
     const permissionsResponse = await api.get("/api/permissions")
     permissions = await permissionsResponse.json()
   }
 
-  // Changes the seleced role
+  // Changes the selected role
   const changeRole = event => {
     const id = event?.target?.value
-    const role = roles.find(role => role._id === id)
+    const role = $backendUiStore.roles.find(role => role._id === id)
     if (role) {
       selectedRole = {
         ...role,
@@ -61,7 +60,7 @@
     }
 
     // Save/create the role
-    const response = await api.post("/api/roles", selectedRole)
+    const response = await backendUiStore.actions.roles.save(selectedRole)
     if (response.status === 200) {
       notifier.success("Role saved successfully.")
     } else {
@@ -72,11 +71,8 @@
 
   // Deletes the selected role
   const deleteRole = async () => {
-    const response = await api.delete(
+    const response = await backendUiStore.actions.roles.delete(selectedRole)
-      `/api/roles/${selectedRole._id}/${selectedRole._rev}`
-    )
     if (response.status === 200) {
-      await fetchRoles()
       changeRole()
       notifier.success("Role deleted successfully.")
     } else {
@@ -84,7 +80,7 @@
     }
   }
 
-  onMount(fetchRoles)
+  onMount(fetchPermissions)
 </script>
 
 <ModalContent
@@ -101,7 +97,7 @@
     value={selectedRoleId}
     on:change={changeRole}>
     <option value="">Create new role</option>
-    {#each roles as role}
+    {#each $backendUiStore.roles as role}
       <option value={role._id}>{role.name}</option>
     {/each}
   </Select>

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -82,7 +82,7 @@
       files = fileArray
       validateCSV()
     })
-    reader.readAsBinaryString(fileArray[0])
+    reader.readAsText(fileArray[0])
   }
 
   async function omitColumn(columnName) {

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

@@ -61,7 +61,7 @@
   }
   .nav-item:hover,
   .nav-item.selected {
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-s);
   }
 
   .content {

packages/builder/src/components/settings/tabs/General.svelte

@@ -4,7 +4,7 @@
   import api from "builderStore/api"
 
   async function updateApplication(data) {
-    const response = await api.put(`/api/${$store.appId}`, data)
+    const response = await api.put(`/api/applications/${$store.appId}`, data)
     const app = await response.json()
     store.update(state => {
       state = {

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -84,6 +84,7 @@
     overflow: hidden;
     margin: auto;
     height: 100%;
+    background-color: white;
   }
   .component-container iframe {
     border: 0;

packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { store, currentAsset } from "builderStore"
+  import { store, currentAssetId } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
@@ -22,7 +22,7 @@
     const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
-    $goto(`./${$store.currentAssetId}/${path}`)
+    $goto(`./${$currentAssetId}/${path}`)
   }
 
   const dragstart = component => e => {

packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { writable } from "svelte/store"
   import { goto } from "@sveltech/routify"
   import { store, selectedComponent, currentAsset } from "builderStore"
   import instantiateStore from "./dragDropStore"
@@ -20,6 +19,7 @@
   export let route
   export let path
   export let indent
+  export let border
 
   $: selectedScreen = $currentAsset
 
@@ -34,6 +34,7 @@
   icon="ri-folder-line"
   text={path}
   opened={true}
+  {border}
   withArrow={route.subpaths} />
 
 {#each Object.entries(route.subpaths) as [url, subpath]}
@@ -41,8 +42,8 @@
     <NavItem
       icon="ri-artboard-2-line"
       indentLevel={indent || 1}
-      selected={$store.currentAssetId === screenId}
+      selected={$store.selectedScreenId === screenId}
-      opened={$store.currentAssetId === screenId}
+      opened={$store.selectedScreenId === screenId}
       text={ROUTE_NAME_MAP[url]?.[role] || url}
       withArrow={route.subpaths}
       on:click={() => changeScreen(screenId)}>

packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte

@@ -1,12 +1,76 @@
 <script>
-  import { store } from "builderStore"
+  import { store, selectedAccessRole } from "builderStore"
   import PathTree from "./PathTree.svelte"
 
-  $: paths = Object.keys($store.routes || {}).sort()
+  let routes = {}
+  $: paths = Object.keys(routes || {}).sort()
+
+  $: {
+    const allRoutes = $store.routes
+    const sortedPaths = Object.keys(allRoutes || {}).sort()
+    const selectedRoleId = $selectedAccessRole
+    const selectedScreenId = $store.selectedScreenId
+
+    let found = false
+    let firstValidScreenId
+    let filteredRoutes = {}
+    let screenRoleId
+
+    // Filter all routes down to only those which match the current role
+    sortedPaths.forEach(path => {
+      const config = allRoutes[path]
+      Object.entries(config.subpaths).forEach(([subpath, pathConfig]) => {
+        Object.entries(pathConfig.screens).forEach(([roleId, screenId]) => {
+          if (screenId === selectedScreenId) {
+            screenRoleId = roleId
+            found = roleId === selectedRoleId
+          }
+          if (roleId === selectedRoleId) {
+            if (!firstValidScreenId) {
+              firstValidScreenId = screenId
+            }
+            if (!filteredRoutes[path]) {
+              filteredRoutes[path] = { subpaths: {} }
+            }
+            filteredRoutes[path].subpaths[subpath] = {
+              screens: {
+                [selectedRoleId]: screenId,
+              },
+            }
+          }
+        })
+      })
+    })
+    routes = filteredRoutes
+
+    // Select the correct role for the current screen ID
+    if (!found && screenRoleId) {
+      selectedAccessRole.set(screenRoleId)
+    }
+
+    // If the selected screen isn't in this filtered list, select the first one
+    else if (!found && firstValidScreenId) {
+      store.actions.screens.select(firstValidScreenId)
+    }
+  }
 </script>
 
 <div class="root">
-  {#each paths as path}
+  {#each paths as path, idx}
-    <PathTree {path} route={$store.routes[path]} />
+    <PathTree border={idx > 0} {path} route={routes[path]} />
   {/each}
+
+  {#if !paths.length}
+    <div class="empty">
+      There aren't any screens configured with this access role.
+    </div>
+  {/if}
 </div>
+
+<style>
+  div.empty {
+    font-size: var(--font-size-xs);
+    color: var(--grey-5);
+    padding-top: var(--spacing-xs);
+  }
+</style>

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

@@ -1,6 +1,11 @@
 <script>
-  import { goto, url } from "@sveltech/routify"
+  import { goto } from "@sveltech/routify"
-  import { store, currentAssetName, selectedComponent } from "builderStore"
+  import {
+    store,
+    currentAssetName,
+    selectedComponent,
+    currentAssetId,
+  } from "builderStore"
   import components from "./temporaryPanelStructure.js"
   import { DropdownMenu } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@@ -27,7 +32,7 @@
   const onComponentChosen = component => {
     store.actions.components.create(component._component, component.presetProps)
     const path = store.actions.components.findRoute($selectedComponent)
-    $goto(`./${$store.currentAssetId}/${path}`)
+    $goto(`./${$currentAssetId}/${path}`)
     close()
   }
 </script>

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

@@ -1,13 +1,19 @@
 <script>
   import { onMount } from "svelte"
   import { goto, params, url } from "@sveltech/routify"
-  import { store, currentAsset, selectedComponent } from "builderStore"
+  import {
+    store,
+    allScreens,
+    currentAsset,
+    backendUiStore,
+    selectedAccessRole,
+  } from "builderStore"
   import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
   import Layout from "components/userInterface/Layout.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
   import NewLayoutModal from "components/userInterface/NewLayoutModal.svelte"
-  import { Modal, Switcher } from "@budibase/bbui"
+  import { Modal, Switcher, Select } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -24,11 +30,38 @@
   let routes = {}
   let tab = $params.assetType
 
-  function navigate({ detail }) {
+  const navigate = ({ detail }) => {
-    if (!detail) return
+    if (!detail) {
+      return
+    }
     $goto(`../${detail.heading.key}`)
   }
 
+  const updateAccessRole = event => {
+    const role = event.target.value
+
+    // Select a valid screen with this new role - otherwise we'll not be
+    // able to change role at all because ComponentNavigationTree will kick us
+    // back the current role again because the same screen ID is still selected
+    const firstValidScreenId = $allScreens.find(
+      screen => screen.routing.roleId === role
+    )?._id
+    if (firstValidScreenId) {
+      store.actions.screens.select(firstValidScreenId)
+    }
+
+    // Otherwise clear the selected screen ID so that the first new valid screen
+    // can be selected by ComponentNavigationTree
+    else {
+      store.update(state => {
+        state.selectedScreenId = null
+        return state
+      })
+    }
+
+    selectedAccessRole.set(role)
+  }
+
   onMount(() => {
     store.actions.routing.fetch()
   })
@@ -41,11 +74,21 @@
         on:click={modal.show}
         data-cy="new-screen"
         class="ri-add-circle-fill" />
-      {#if $currentAsset}
+      <div class="role-select">
-        <div class="nav-items-container">
+        <Select
-          <ComponentNavigationTree />
+          extraThin
-        </div>
+          secondary
-      {/if}
+          on:change={updateAccessRole}
+          value={$selectedAccessRole}
+          label="Filter by Access">
+          {#each $backendUiStore.roles as role}
+            <option value={role._id}>{role.name}</option>
+          {/each}
+        </Select>
+      </div>
+      <div class="nav-items-container">
+        <ComponentNavigationTree />
+      </div>
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
@@ -54,8 +97,8 @@
         on:click={modal.show}
         data-cy="new-layout"
         class="ri-add-circle-fill" />
-      {#each $store.layouts as layout (layout._id)}
+      {#each $store.layouts as layout, idx (layout._id)}
-        <Layout {layout} />
+        <Layout {layout} border={idx > 0} />
       {/each}
       <Modal bind:this={modal}>
         <NewLayoutModal />
@@ -82,4 +125,8 @@
     cursor: pointer;
     color: var(--blue);
   }
+
+  .role-select {
+    margin-bottom: var(--spacing-m);
+  }
 </style>

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

@@ -10,6 +10,7 @@
   import { writable } from "svelte/store"
 
   export let layout
+  export let border
 
   let confirmDeleteDialog
   let componentToDelete = ""
@@ -23,17 +24,17 @@
 </script>
 
 <NavItem
-  border={false}
+  {border}
   icon="ri-layout-3-line"
   text={layout.name}
   withArrow
-  selected={$store.currentAssetId === layout._id}
+  selected={$store.selectedLayoutId === layout._id}
-  opened={$store.currentAssetId === layout._id}
+  opened={$store.selectedLayoutId === layout._id}
   on:click={selectLayout}>
   <LayoutDropdownMenu {layout} />
 </NavItem>
 
-{#if $store.currentAssetId === layout._id && layout.props?._children}
+{#if $store.selectedLayoutId === layout._id && layout.props?._children}
   <ComponentTree
     components={layout.props._children}
     currentComponent={$selectedComponent}

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

@@ -1,19 +1,15 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
-  import { store, backendUiStore, allScreens } from "builderStore"
+  import { store } from "builderStore"
   import { Input, ModalContent } from "@budibase/bbui"
-  import analytics from "analytics"
-
-  const CONTAINER = "@budibase/standard-components/container"
 
   let name = ""
 
   async function save() {
     try {
-      await store.actions.layouts.save({ name })
+      const layout = await store.actions.layouts.save({ name })
-      $goto(`./${$store.currentAssetId}`)
+      $goto(`./${layout._id}`)
       notifier.success(`Layout ${name} created successfully`)
     } catch (err) {
       notifier.danger(`Error creating layout ${name}.`)

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

@@ -1,17 +1,11 @@
 <script>
   import { goto } from "@sveltech/routify"
   import { store, backendUiStore, allScreens } from "builderStore"
-  import {
+  import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
-    Input,
-    Button,
-    Spacer,
-    Select,
-    ModalContent,
-    Toggle,
-  } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
-  import { some } from "lodash/fp"
   import analytics from "analytics"
+  import { onMount } from "svelte"
+  import api from "builderStore/api"
 
   const CONTAINER = "@budibase/standard-components/container"
 
@@ -21,15 +15,13 @@
   let templateIndex
   let draftScreen
   let createLink = true
+  let roleId = "BASIC"
 
   $: templates = getTemplates($store, $backendUiStore.tables)
-
   $: route = !route && $allScreens.length === 0 ? "*" : route
-
   $: baseComponents = Object.values($store.components)
     .filter(componentDefinition => componentDefinition.baseComponent)
     .map(c => c._component)
-
   $: {
     if (templates && templateIndex === undefined) {
       templateIndex = 0
@@ -56,10 +48,10 @@
 
   const save = async () => {
     if (!route) {
-      routeError = "Url is required"
+      routeError = "URL is required"
     } else {
-      if (routeNameExists(route)) {
+      if (routeExists(route, roleId)) {
-        routeError = "This url is already taken"
+        routeError = "This URL is already taken for this access role"
       } else {
         routeError = ""
       }
@@ -69,8 +61,7 @@
 
     draftScreen.props._instanceName = name
     draftScreen.props._component = baseComponent
-    // TODO: need to fix this up correctly
+    draftScreen.routing = { route, roleId }
-    draftScreen.routing = { route, roleId: "ADMIN" }
 
     const createdScreen = await store.actions.screens.create(draftScreen)
     if (createLink) {
@@ -85,12 +76,14 @@
       })
     }
 
-    $goto(`./screen/${createdScreen._id}`)
+    $goto(`./${createdScreen._id}`)
   }
 
-  const routeNameExists = route => {
+  const routeExists = (route, roleId) => {
     return $allScreens.some(
-      screen => screen.routing.route.toLowerCase() === route.toLowerCase()
+      screen =>
+        screen.routing.route.toLowerCase() === route.toLowerCase() &&
+        screen.routing.roleId === roleId
     )
   }
 
@@ -113,14 +106,16 @@
       {/each}
     {/if}
   </Select>
-
   <Input label="Name" bind:value={name} />
-
   <Input
     label="Url"
     error={routeError}
     bind:value={route}
     on:change={routeChanged} />
-
+  <Select label="Access" bind:value={roleId} secondary>
+    {#each $backendUiStore.roles as role}
+      <option value={role._id}>{role.name}</option>
+    {/each}
+  </Select>
   <Toggle text="Create link in navigation bar" bind:checked={createLink} />
 </ModalContent>

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

@@ -0,0 +1,15 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { backendUiStore } from "builderStore"
+
+  export let value
+
+  let roles = []
+</script>
+
+<Select bind:value extraThin secondary on:change>
+  <option value="">Choose an option</option>
+  {#each $backendUiStore.roles as role}
+    <option value={role._id}>{role.name}</option>
+  {/each}
+</Select>

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

@@ -4,6 +4,7 @@
   import { FrontendTypes } from "constants"
   import PropertyControl from "./PropertyControl.svelte"
   import LayoutSelect from "./LayoutSelect.svelte"
+  import RoleSelect from "./RoleSelect.svelte"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { excludeProps } from "./propertyCategories.js"
   import { store, allScreens, currentAsset } from "builderStore"
@@ -36,8 +37,8 @@
   const screenDefinition = [
     { key: "description", label: "Description", control: Input },
     { key: "routing.route", label: "Route", control: Input },
+    { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },
-    { key: "routing.roleId", label: "Role", control: Input },
   ]
 
   const layoutDefinition = [{ key: "title", label: "Title", control: Input }]

packages/builder/src/pages/[application]/_reset.svelte

@@ -20,6 +20,7 @@
       backendUiStore.actions.reset()
       await store.actions.initialise(pkg)
       await automationStore.actions.fetch()
+      await backendUiStore.actions.roles.fetch()
       return pkg
     } else {
       throw new Error(pkg)
@@ -217,5 +218,6 @@
     position: absolute;
     bottom: var(--spacing-m);
     left: var(--spacing-m);
+    z-index: 1;
   }
 </style>

packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte

@@ -26,11 +26,12 @@
   // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
   if ($leftover) {
     // Get the correct screen children.
-    const assetChildren = assetList.find(
+    const assetChildren =
-      asset =>
+      assetList.find(
-        asset._id === $params.asset ||
+        asset =>
-        asset._id === decodeURIComponent($params.asset)
+          asset._id === $params.asset ||
-    ).props._children
+          asset._id === decodeURIComponent($params.asset)
+      )?.props._children ?? []
     findComponent(componentIds, assetChildren)
   }
   // }

packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte

@@ -1,11 +1,10 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
+  import { store, backendUiStore, currentAsset } from "builderStore"
   import { onMount } from "svelte"
   import { FrontendTypes } from "constants"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import { last } from "lodash/fp"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
 
   $: instance = $store.appInstance
@@ -36,7 +35,7 @@
   </div>
 
   <div class="preview-pane">
-    {#if $store.currentAssetId && $store.currentAssetId.length > 0}
+    {#if $currentAsset}
       <ComponentSelectionList />
       <div class="preview-content">
         <CurrentItemPreview />

packages/builder/src/pages/[application]/design/[assetType]/index.svelte

@@ -5,12 +5,32 @@
 
   // Go to first layout
   if ($params.assetType === FrontendTypes.LAYOUT) {
-    $goto(`../${$store.layouts[0]?._id}`)
+    // Try to use previously selected layout first
+    let id
+    if (
+      $store.selectedLayoutId &&
+      $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
+    ) {
+      id = $store.selectedLayoutId
+    } else {
+      id = $store.layouts[0]?._id
+    }
+    $goto(`../${id}`)
   }
 
   // Go to first screen
   if ($params.assetType === FrontendTypes.SCREEN) {
-    $goto(`../${$allScreens[0]?._id}`)
+    // Try to use previously selected layout first
+    let id
+    if (
+      $store.selectedScreenId &&
+      $allScreens.find(screen => screen._id === $store.selectedScreenId)
+    ) {
+      id = $store.selectedScreenId
+    } else {
+      id = $allScreens[0]?._id
+    }
+    $goto(`../${id}`)
   }
 </script>
 

packages/builder/yarn.lock

@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.52.2":
+"@budibase/bbui@^1.52.4":
-  version "1.52.2"
+  version "1.52.4"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.2.tgz#a0774880fb755eb81c762bc355550af7f4562b09"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.4.tgz#ae3c17e1f49f14e65831703958bcddc6e64afd24"
-  integrity sha512-PxiN5xvr+Z/RpypMDYh3lNhCUnejH1moMoWW7PiuCiho5VXGauR+M8T49p5eTKoFSqRMC7BUdFJJ9ye/cnQxNA==
+  integrity sha512-/wiv5dSyvXLgy2/zGEslnCsjwE8qqng1D8k5ScSOPEyMab8tzzd1XxfZAN9rp84zIMgAXeH6s5a4j4riR+jVkg==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.3.8",
+  "version": "0.4.2",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.js",
@@ -15,7 +15,7 @@
     "svelte-spa-router": "^3.0.5"
   },
   "devDependencies": {
-    "@budibase/standard-components": "^0.3.8",
+    "@budibase/standard-components": "^0.4.2",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "fs-extra": "^8.1.0",
@@ -23,8 +23,8 @@
     "rollup": "^2.33.2",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-svelte": "^6.1.1",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-svelte": "^6.1.1",
     "rollup-plugin-terser": "^4.0.4",
     "svelte": "^3.30.0",
     "svelte-jester": "^1.0.6"

packages/client/src/components/ClientApp.svelte

@@ -3,7 +3,7 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import SDK from "../sdk"
-  import { createDataStore, routeStore, screenStore } from "../store"
+  import { createDataStore, initialise, screenStore } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -14,13 +14,11 @@
 
   // Load app config
   onMount(async () => {
-    await routeStore.actions.fetchRoutes()
+    await initialise()
-    await screenStore.actions.fetchScreens()
     loaded = true
   })
 </script>
 
 {#if loaded && $screenStore.activeLayout}
-  <!-- // TODO: need to get the active screen as well -->
   <Component definition={$screenStore.activeLayout.props} />
 {/if}

packages/client/src/components/Router.svelte

@@ -7,7 +7,15 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  $: routerConfig = getRouterConfig($routeStore.routes)
+  // Only wrap this as an array to take advantage of svelte keying,
+  // to ensure the svelte-spa-router is fully remounted when route config
+  // changes
+  $: configs = [
+    {
+      routes: getRouterConfig($routeStore.routes),
+      id: $routeStore.routeSessionId,
+    },
+  ]
 
   const getRouterConfig = routes => {
     let config = {}
@@ -25,11 +33,11 @@
   }
 </script>
 
-{#if routerConfig}
+{#each configs as config (config.id)}
   <div use:styleable={$component.styles}>
-    <Router on:routeLoading={onRouteLoading} routes={routerConfig} />
+    <Router on:routeLoading={onRouteLoading} routes={config.routes} />
   </div>
-{/if}
+{/each}
 
 <style>
   div {

packages/client/src/store/auth.js

@@ -1,18 +1,29 @@
 import * as API from "../api"
 import { getAppId } from "../utils/getAppId"
 import { writable } from "svelte/store"
+import { initialise } from "./initialise"
+import { routeStore } from "./routes"
 
 const createAuthStore = () => {
   const store = writable("")
 
+  const goToDefaultRoute = () => {
+    // Setting the active route forces an update of the active screen ID,
+    // even if we're on the same URL
+    routeStore.actions.setActiveRoute("/")
+
+    // Navigating updates the URL to reflect this route
+    routeStore.actions.navigate("/")
+  }
   const logIn = async ({ email, password }) => {
     const user = await API.logIn({ email, password })
     if (!user.error) {
       store.set(user.token)
-      location.reload()
+      await initialise()
+      goToDefaultRoute()
     }
   }
-  const logOut = () => {
+  const logOut = async () => {
     store.set("")
     const appId = getAppId()
     if (appId) {
@@ -20,7 +31,8 @@ const createAuthStore = () => {
         window.document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
       }
     }
-    location.reload()
+    await initialise()
+    goToDefaultRoute()
   }
 
   return {

packages/client/src/store/index.js

@@ -6,3 +6,6 @@ export { bindingStore } from "./binding"
 
 // Data stores are layered and duplicated, so it is not a singleton
 export { createDataStore, dataStore } from "./data"
+
+// Initialises an app by loading screens and routes
+export { initialise } from "./initialise"

packages/client/src/store/initialise.js

@@ -0,0 +1,7 @@
+import { routeStore } from "./routes"
+import { screenStore } from "./screens"
+
+export async function initialise() {
+  await routeStore.actions.fetchRoutes()
+  await screenStore.actions.fetchScreens()
+}

packages/client/src/store/routes.js

@@ -7,6 +7,7 @@ const createRouteStore = () => {
     routes: [],
     routeParams: {},
     activeRoute: null,
+    routeSessionId: Math.random(),
   }
   const store = writable(initialState)
 
@@ -29,6 +30,7 @@ const createRouteStore = () => {
 
     store.update(state => {
       state.routes = routes
+      state.routeSessionId = Math.random()
       return state
     })
   }

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.3.8",
+  "version": "0.4.2",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -21,7 +21,6 @@
       "maintainer": "Budibase",
       "icon": "./build/icons/",
       "target": [
-        "AppImage",
         "deb"
       ],
       "category": "Development"
@@ -49,7 +48,7 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.3.8",
+    "@budibase/client": "^0.4.2",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",

packages/server/src/utilities/tests/__snapshots__/csvParser.spec.js.snap

@@ -5,7 +5,7 @@ Array [
   Object {
     "Address": "5 Sesame Street",
     "Age": 4324,
-    "Name": "Bert",
+    "Name": "Bertå",
   },
   Object {
     "Address": "1 World Trade Center",

packages/server/src/utilities/tests/csvParser.spec.js

@@ -89,7 +89,7 @@ describe("CSV Parser", () => {
         })
       ).toEqual([
         {
-          Name: "Bert",
+          Name: "Bertå",
         },
         {
           Name: "Ernie",

packages/server/src/utilities/tests/test.csv

@@ -1,4 +1,4 @@
 "Name","Age","Address"
-"Bert","4324","5 Sesame Street"
+"Bertå","4324","5 Sesame Street"
 "Ernie","34","1 World Trade Center"
 "Big Bird","23423","44 Second Avenue"

packages/standard-components/package.json

@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.3.8",
+  "version": "0.4.2",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
-    "@budibase/bbui": "^1.52.1",
+    "@budibase/bbui": "^1.52.4",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "apexcharts": "^3.22.1",
@@ -41,8 +41,8 @@
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^12.0.2",
     "quill": "^1.3.7",
-    "turndown": "^7.0.0",
     "svelte-apexcharts": "^1.0.2",
-    "svelte-flatpickr": "^3.1.0"
+    "svelte-flatpickr": "^3.1.0",
+    "turndown": "^7.0.0"
   }
 }

packages/standard-components/src/Link.svelte

@@ -11,7 +11,7 @@
   $: target = openInNewTab ? "_blank" : "_self"
 </script>
 
-<a href={url} use:linkable {target} use:styleable={$component.styles}>
+<a href={url || '/'} use:linkable {target} use:styleable={$component.styles}>
   {text}
   <slot />
 </a>

packages/standard-components/src/Navigation.svelte

@@ -6,8 +6,8 @@
 
   export let logoUrl
 
-  const logOut = () => {
+  const logOut = async () => {
-    authStore.actions.logOut()
+    await authStore.actions.logOut()
   }
 </script>
 

packages/standard-components/src/charts/ApexChart.svelte

@@ -11,7 +11,9 @@
 {#if options}
   <div use:chart={options} use:styleable={$component.styles} />
 {:else if options === false}
-  <div use:styleable={$component.styles}>Invalid chart options</div>
+  <div use:styleable={$component.styles}>
+    Use the settings panel to build your chart -->
+  </div>
 {/if}
 
 <style>

packages/standard-components/yarn.lock

@@ -39,10 +39,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.52.1":
+"@budibase/bbui@^1.52.4":
-  version "1.52.1"
+  version "1.52.4"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.1.tgz#7f1612616205debeac0c65242b4856cce07e4cd0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.4.tgz#ae3c17e1f49f14e65831703958bcddc6e64afd24"
-  integrity sha512-950HXR4Z8b0TgJH3Dt7gLgeHlgtBVMTtG+KkFTtID/zeiXohf60wr2cyAuttCZ3yb4rFRHC+SDXo2NOsKdenKw==
+  integrity sha512-/wiv5dSyvXLgy2/zGEslnCsjwE8qqng1D8k5ScSOPEyMab8tzzd1XxfZAN9rp84zIMgAXeH6s5a4j4riR+jVkg==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"