Merge branch 'new-design-ui' of github.com:Budibase/budibase into new-design-ui

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/backend-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "src/index.js",
   "author": "Budibase",

packages/bbui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/string-templates": "^1.0.192-alpha.6",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -83,4 +83,7 @@
   :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
     margin-left: 0;
   }
+  .is-selected {
+    background: var(--spectrum-global-color-gray-300);
+  }
 </style>

packages/bbui/src/IconSideNav/IconSideNavItem.svelte

@@ -41,7 +41,6 @@
   .active :global(svg) {
     color: white;
   }
-  .icon-side-nav-item:hover,
   .active {
     background: var(--spectrum-global-color-gray-300);
   }

packages/builder/cypress/integration/createAutomation.spec.js

@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+const interact = require('../support/interact')
 
 filterTests(['smoke', 'all'], () => {
   context("Create a automation", () => {
@@ -11,51 +12,51 @@ filterTests(['smoke', 'all'], () => {
       cy.createTestTableWithData()
       cy.wait(2000)
       cy.contains("Automate").click()
-      cy.get(".add-button .spectrum-Icon").click()
+      cy.get(interact.ADD_BUTTON_SPECTRUM).click()
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
         cy.get("input").type("Add Row")
         cy.contains("Row Created").click({ force: true })
         cy.wait(500)
-        cy.get(".spectrum-Button--cta").click()
+        cy.get(interact.SPECTRUM_BUTTON_CTA).click()
       })
 
       // Setup trigger
-      cy.get(".spectrum-Picker-label").click()
+      cy.get(interact.SPECTRUM_PICKER_LABEL).click()
       cy.wait(500)
       cy.contains("dog").click()
       cy.wait(2000)
       // Create action
       cy.get('[aria-label="AddCircle"]').eq(1).click()
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
         cy.wait(1000)
         cy.contains("Create Row").trigger('mouseover').click().click()
-        cy.get(".spectrum-Button--cta").click()
+        cy.get(interact.SPECTRUM_BUTTON_CTA).click()
       })
-      cy.get(".spectrum-Picker-label").eq(1).click()
+      cy.get(interact.SPECTRUM_PICKER_LABEL).eq(1).click()
       cy.contains("dog").click()
-      cy.get(".spectrum-Textfield-input")
+      cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
         .first()
         .type("{{ trigger.row.name }}", { parseSpecialCharSequences: false })
-      cy.get(".spectrum-Textfield-input")
+      cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
         .eq(1)
         .type("11")
       cy.contains("Finish and test automation").click()
 
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
         cy.wait(1000)
-        cy.get(".spectrum-Picker-label").click()
+        cy.get(interact.SPECTRUM_PICKER_LABEL).click()
         cy.contains("dog").click()
         cy.wait(1000)
-        cy.get(".spectrum-Textfield-input")
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
           .first()
           .type("automationGoodboy")
-        cy.get(".spectrum-Textfield-input")
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
           .eq(1)
           .type("11")
-        cy.get(".spectrum-Textfield-input")
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
           .eq(2)
           .type("123456")
-        cy.get(".spectrum-Textfield-input")
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
           .eq(3)
           .type("123456")
         cy.contains("Test").click()

packages/builder/cypress/integration/createTable.spec.js

@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+const interact = require('../support/interact')
 
 filterTests(["smoke", "all"], () => {
   context("Create a Table", () => {
@@ -11,7 +12,7 @@ filterTests(["smoke", "all"], () => {
       cy.createTable("dog")
       cy.wait(1000)
       // Check if Table exists
-      cy.get(".table-title h1").should("have.text", "dog")
+      cy.get(interact.TABLE_TITLE_H1).should("have.text", "dog")
     })
 
     it("adds a new column to the table", () => {
@@ -25,13 +26,13 @@ filterTests(["smoke", "all"], () => {
     })
 
     it("updates a column on the table", () => {
-      cy.get(".title").click()
+      cy.get(interact.TABLE_TITLE).click()
-      cy.get(".spectrum-Table-editIcon > use").click()
+      cy.get(interact.SPECTRUM_TABLE_EDIT).click()
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
 
       cy.get("input").eq(0).type("updated", { force: true })
       // Unset table display column
-      cy.get(".spectrum-Switch-input").eq(1).click()
+      cy.get(interact.SPECTRUM_SWITCH_INPUT).eq(1).click()
       cy.contains("Save Column").click()
       })
       cy.contains("nameupdated ").should("contain", "nameupdated")
@@ -40,16 +41,16 @@ filterTests(["smoke", "all"], () => {
     it("edits a row", () => {
       cy.contains("button", "Edit").click({ force: true })
       cy.wait(1000)
-      cy.get(".spectrum-Modal input").clear()
+      cy.get(interact.SPECTRUM_MODAL_INPUT).clear()
-      cy.get(".spectrum-Modal input").type("Updated")
+      cy.get(interact.SPECTRUM_MODAL_INPUT).type("Updated")
       cy.contains("Save").click()
       cy.contains("Updated").should("have.text", "Updated")
     })
 
     it("deletes a row", () => {
-      cy.get(".spectrum-Checkbox-input").check({ force: true })
+      cy.get(interact.SPECTRUM_CHECKBOX_INPUT).check({ force: true })
       cy.contains("Delete 1 row(s)").click()
-      cy.get(".spectrum-Modal").contains("Delete").click()
+      cy.get(interact.SPECTRUM_MODAL).contains("Delete").click()
       cy.contains("RoverUpdated").should("not.exist")
     })
 
@@ -63,50 +64,50 @@ filterTests(["smoke", "all"], () => {
         }
         cy.reload()
         cy.wait(2000)
-        cy.get(".spectrum-Pagination").within(() => {
+        cy.get(interact.SPECTRUM_PAGINATION).within(() => {
-          cy.get(".spectrum-ActionButton").eq(1).click()
+          cy.get(interact.SPECTRUM_ACTION_BUTTON).eq(1).click()
         })
-        cy.get(".spectrum-Pagination").within(() => {
+        cy.get(interact.SPECTRUM_PAGINATION).within(() => {
-          cy.get(".spectrum-Body--secondary").contains("Page 2")
+          cy.get(interact.SPECTRUM_BODY_SECOND).contains("Page 2")
         })
       })
 
       xit("Deletes rows and checks pagination", () => {
         // Delete rows, removing second page from table
-        cy.get(".spectrum-Checkbox-input").check({ force: true })
+        cy.get(interact.SPECTRUM_CHECKBOX_INPUT).check({ force: true })
-        cy.get(".popovers").within(() => {
+        cy.get(interact.POPOVERS).within(() => {
-          cy.get(".spectrum-Button").click({ force: true })
+          cy.get(interact.SPECTRUM_BUTTON).click({ force: true })
         })
-        cy.get(".spectrum-Dialog-grid").contains("Delete").click({ force: true })
+        cy.get(interact.SPECTRUM_DIALOG_GRID).contains("Delete").click({ force: true })
         cy.wait(1000)
 
         // Confirm table only has one page
-        cy.get(".spectrum-Pagination").within(() => {
+        cy.get(interact.SPECTRUM_PAGINATION).within(() => {
-          cy.get(".spectrum-ActionButton").eq(1).should("not.be.enabled")
+          cy.get(interact.SPECTRUM_ACTION_BUTTON).eq(1).should("not.be.enabled")
         })
       })
     }
 
     it("deletes a column", () => {
       const columnName = "nameupdated"
-      cy.get(".title").click()
+      cy.get(interact.TABLE_TITLE).click()
-      cy.get(".spectrum-Table-editIcon > use").click()
+      cy.get(interact.SPECTRUM_TABLE_EDIT).click()
       cy.contains("Delete").click()
-      cy.get('[data-cy="delete-column-confirm"]').type(columnName)
+      cy.get(interact.DELETE_COLUMN_CONFIRM).type(columnName)
       cy.contains("Delete Column").click()
       cy.contains("nameupdated").should("not.exist")
     })
 
     it("deletes a table", () => {
-      cy.get(".nav-item")
+      cy.get(interact.NAV_ITEM)
         .contains("dog")
-        .parents(".nav-item")
+        .parents(interact.NAV_ITEM)
         .first()
         .within(() => {
-          cy.get(".actions .spectrum-Icon").click({ force: true })
+          cy.get(interact.ACTION_SPECTRUM_ICON).click({ force: true })
         })
-      cy.get(".spectrum-Menu > :nth-child(2)").click()
+      cy.get(interact.SPECTRUM_MENU_CHILD2).click()
-      cy.get('[data-cy="delete-table-confirm"]').type("dog")
+      cy.get(interact.DELETE_TABLE_CONFIRM).type("dog")
       cy.contains("Delete Table").click()
       cy.contains("dog").should("not.exist")
     })

packages/builder/cypress/integration/createUserAndRoles.spec.js

@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+const interact = require('../support/interact')
 
 filterTests(["smoke", "all"], () => {
   context("Create a User and Assign Roles", () => {
@@ -12,7 +13,7 @@ filterTests(["smoke", "all"], () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       cy.wait(1000)
       cy.createUser("bbuser@test.com")
-      cy.get(".spectrum-Table").should("contain", "bbuser")
+      cy.get(interact.SPECTRUM_TABLE).should("contain", "bbuser")
     })
 
     it("should confirm there is No Access for a New User", () => {
@@ -20,9 +21,9 @@ filterTests(["smoke", "all"], () => {
       cy.contains("bbuser").click()
       cy.wait(500)
       // Get No Access table - Confirm it has apps in it
-      cy.get(".spectrum-Table").eq(1).should("not.contain", "No rows found")
+      cy.get(interact.SPECTRUM_TABLE).eq(1).should("not.contain", "No rows found")
       // Get Configure Roles table - Confirm it has no apps
-      cy.get(".spectrum-Table").eq(0).contains("No rows found")
+      cy.get(interact.SPECTRUM_TABLE).eq(0).contains("No rows found")
     })
 
     if (Cypress.env("TEST_ENV")) {
@@ -40,7 +41,7 @@ filterTests(["smoke", "all"], () => {
                 } else {
                   cy.visit(`${Cypress.config().baseUrl}/builder`)
                   cy.wait(500)
-                  cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
+                  cy.get(interact.CREATE_APP_BUTTON).click({ force: true })
                   cy.createAppFromScratch(name)
                 }
               }
@@ -49,35 +50,35 @@ filterTests(["smoke", "all"], () => {
         // Navigate back to the user
         cy.visit(`${Cypress.config().baseUrl}/builder`)
         cy.wait(500)
-        cy.get(".spectrum-SideNav").contains("Users").click()
+        cy.get(interact.SPECTRUM_SIDENAV).contains("Users").click()
         cy.wait(500)
-        cy.get(".spectrum-Table").contains("bbuser").click()
+        cy.get(interact.SPECTRUM_TABLE).contains("bbuser").click()
         cy.wait(1000)
         for (let i = 0; i < 3; i++) {
-          cy.get(".spectrum-Table", { timeout: 3000})
+          cy.get(interact.SPECTRUM_TABLE, { timeout: 3000})
             .eq(1)
-            .find(".spectrum-Table-row")
+            .find(interact.SPECTRUM_TABLE_ROW)
             .eq(0)
-            .find(".spectrum-Table-cell")
+            .find(interact.SPECTRUM_TABLE_CELL)
             .eq(0)
             .click()
           cy.wait(500)
-          cy.get(".spectrum-Dialog-grid")
+          cy.get(interact.SPECTRUM_DIALOG_GRID)
             .contains("Choose an option")
             .click()
             .then(() => {
               cy.wait(1000)
               if (i == 0) {
-                cy.get(".spectrum-Menu").contains("Admin").click({ force: true })
+                cy.get(interact.SPECTRUM_MENU).contains("Admin").click({ force: true })
               }
               else if (i == 1) {
-                cy.get(".spectrum-Menu").contains("Power").click({ force: true })
+                cy.get(interact.SPECTRUM_MENU).contains("Power").click({ force: true })
               }
               else if (i == 2) {
-                cy.get(".spectrum-Menu").contains("Basic").click({ force: true })
+                cy.get(interact.SPECTRUM_MENU).contains("Basic").click({ force: true })
               }
               cy.wait(1000)
-              cy.get(".spectrum-Button")
+              cy.get(interact.SPECTRUM_BUTTON)
                 .contains("Update role")
                 .click({ force: true })
             })
@@ -85,7 +86,7 @@ filterTests(["smoke", "all"], () => {
         }
         // Confirm roles exist within Configure roles table
         cy.wait(2000)
-        cy.get(".spectrum-Table")
+        cy.get(interact.SPECTRUM_TABLE)
           .eq(0)
           .within(assginedRoles => {
             expect(assginedRoles).to.contain("Admin")
@@ -96,60 +97,60 @@ filterTests(["smoke", "all"], () => {
   
       it("should unassign role types", () => {
         // Set each app within Configure roles table to 'No Access'
-        cy.get(".spectrum-Table")
+        cy.get(interact.SPECTRUM_TABLE)
           .eq(0)
-          .find(".spectrum-Table-row")
+          .find(interact.SPECTRUM_TABLE_ROW)
           .its("length")
           .then(len => {
             for (let i = 0; i < len; i++) {
-              cy.get(".spectrum-Table")
+              cy.get(interact.SPECTRUM_TABLE)
                 .eq(0)
-                .find(".spectrum-Table-row")
+                .find(interact.SPECTRUM_TABLE_ROW)
                 .eq(0)
-                .find(".spectrum-Table-cell")
+                .find(interact.SPECTRUM_TABLE_CELL)
                 .eq(0)
                 .click()
                 .then(() => {
-                  cy.get(".spectrum-Picker").eq(1).click({ force: true })
+                  cy.get(interact.SPECTRUM_PICKER).eq(1).click({ force: true })
                   cy.wait(500)
-                  cy.get(".spectrum-Popover").contains("No Access").click()
+                  cy.get(interact.SPECTRUM_POPOVER).contains("No Access").click()
                 })
-              cy.get(".spectrum-Button")
+              cy.get(interact.SPECTRUM_BUTTON)
                 .contains("Update role")
                 .click({ force: true })
               cy.wait(1000)
             }
           })
         // Confirm Configure roles table no longer has any apps in it
-        cy.get(".spectrum-Table").eq(0).contains("No rows found")
+        cy.get(interact.SPECTRUM_TABLE).eq(0).contains("No rows found")
       })
     }
 
     it("should enable Developer access", () => {
       // Enable Developer access
-      cy.get(".field")
+      cy.get(interact.FIELD)
         .eq(4)
         .within(() => {
-          cy.get(".spectrum-Switch-input").click({ force: true })
+          cy.get(interact.SPECTRUM_SWITCH_INPUT).click({ force: true })
         })
       // No Access table should now be empty
-      cy.get(".container")
+      cy.get(interact.CONTAINER)
         .contains("No Access")
         .parent()
         .within(() => {
-          cy.get(".spectrum-Table").contains("No rows found")
+          cy.get(interact.SPECTRUM_TABLE).contains("No rows found")
         })
 
       // Each app within Configure roles should have Admin access
-      cy.get(".spectrum-Table")
+      cy.get(interact.SPECTRUM_TABLE)
         .eq(0)
-        .find(".spectrum-Table-row")
+        .find(interact.SPECTRUM_TABLE_ROW)
         .its("length")
         .then(len => {
           for (let i = 0; i < len; i++) {
-            cy.get(".spectrum-Table")
+            cy.get(interact.SPECTRUM_TABLE)
               .eq(0)
-              .find(".spectrum-Table-row")
+              .find(interact.SPECTRUM_TABLE_ROW)
               .eq(i)
               .contains("Admin")
             cy.wait(500)
@@ -169,26 +170,26 @@ filterTests(["smoke", "all"], () => {
         .contains("Configure roles")
         .parent()
         .within(() => {
-          cy.get(".spectrum-Table").contains("No rows found")
+          cy.get(interact.SPECTRUM_TABLE).contains("No rows found")
         })
     })
 
     it("should delete a user", () => {
       // Click Delete user button
-      cy.get(".spectrum-Button")
+      cy.get(interact.SPECTRUM_BUTTON)
         .contains("Delete user")
         .click({ force: true })
         .then(() => {
           // Confirm deletion within modal
           cy.wait(500)
-          cy.get(".spectrum-Dialog-grid").within(() => {
+          cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
-            cy.get(".spectrum-Button")
+            cy.get(interact.SPECTRUM_BUTTON)
               .contains("Delete user")
               .click({ force: true })
             cy.wait(4000)
           })
         })
-      cy.get(".spectrum-Table").should("not.have.text", "bbuser")
+      cy.get(interact.SPECTRUM_TABLE).should("not.have.text", "bbuser")
     })
   })
 })

packages/builder/cypress/support/interact.js

@@ -62,3 +62,45 @@ export const GLOBESTRIKE = "svg[aria-label=GlobeStrike]"
 export const GLOBE = "svg[aria-label=Globe]"
 export const UNPUBLISH_MODAL = "[data-cy=unpublish-modal]"
 export const CONFIRM_WRAP_BUTTON = ".confirm-wrap button"
+
+//changeAppiconAndColour
+export const APP_ROW_ACTION = ".app-row-actions-icon"
+export const SPECTRUM_MENU = ".spectrum-Menu"
+export const ICON_ITEM = ".icon-item"
+export const FILL = ".fill"
+export const COLOURSS = ".colors"
+export const AREA_LABEL = "[aria-label]"
+export const TITLE = ".title"
+export const GRID = ".grid"
+export const COLOUR = ".color"
+
+//createAutomation
+export const ADD_BUTTON_SPECTRUM = ".add-button .spectrum-Icon"
+export const MODAL_INNER_WRAPPER = ".modal-inner-wrapper"
+export const SPECTRUM_BUTTON_CTA = ".spectrum-Button--cta"
+export const SPECTRUM_TEXTFIELD_INPUT = ".spectrum-Textfield-input"
+
+//createTable
+export const TABLE_TITLE_H1 = ".table-title h1"
+export const TABLE_TITLE = ".title"
+export const SPECTRUM_TABLE_EDIT = ".spectrum-Table-editIcon > use"
+export const SPECTRUM_SWITCH_INPUT = ".spectrum-Switch-input"
+export const SPECTRUM_CHECKBOX_INPUT = ".spectrum-Checkbox-input"
+export const SPECTRUM_PAGINATION = ".spectrum-Pagination"
+export const SPECTRUM_ACTION_BUTTON = ".spectrum-ActionButton"
+export const SPECTRUM_BODY_SECOND = ".spectrum-Body--secondary"
+export const POPOVERS = ".popovers"
+export const SPECTRUM_DIALOG_GRID = ".spectrum-Dialog-grid"
+export const DELETE_COLUMN_CONFIRM = '[data-cy="delete-column-confirm"]'
+export const NAV_ITEM = ".nav-item"
+export const ACTION_SPECTRUM_ICON = ".actions .spectrum-Icon"
+export const SPECTRUM_MENU_CHILD2 = ".spectrum-Menu > :nth-child(2)"
+export const DELETE_TABLE_CONFIRM = '[data-cy="delete-table-confirm"]'
+
+//createUSerAndRoles
+export const SPECTRUM_TABLE = ".spectrum-Table"
+export const SPECTRUM_SIDENAV = ".spectrum-SideNav"
+export const SPECTRUM_TABLE_ROW = ".spectrum-Table-row"
+export const SPECTRUM_TABLE_CELL = ".spectrum-Table-cell"
+export const FIELD = ".field"
+export const CONTAINER = ".container"

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -69,10 +69,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.0.192-alpha.5",
+    "@budibase/bbui": "^1.0.192-alpha.6",
-    "@budibase/client": "^1.0.192-alpha.5",
+    "@budibase/client": "^1.0.192-alpha.6",
-    "@budibase/frontend-core": "^1.0.192-alpha.5",
+    "@budibase/frontend-core": "^1.0.192-alpha.6",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/string-templates": "^1.0.192-alpha.6",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",

packages/builder/src/components/design/settings/controls/BarButtonList.svelte

@@ -10,8 +10,9 @@
   {#each options as option}
     <ActionButton
       icon={option.barIcon}
-      quiet={option.value !== value}
+      quiet
       on:click={() => onChange(option.value)}
+      selected={option.value === value}
     />
   {/each}
 </ActionGroup>

packages/builder/src/components/design/settings/controls/RoleSelect.svelte

@@ -5,15 +5,16 @@
 
   export let value
   export let error
+  export let placeholder = null
 </script>
 
 <Select
   bind:value
   on:change
   options={$roles}
-  placeholder={null}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
   getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  {placeholder}
   {error}
 />

packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte

@@ -2,7 +2,7 @@
   import { Layout } from "@budibase/bbui"
 </script>
 
-<!-- routify:options index=5 -->
+<!-- routify:options index=4 -->
 <Layout gap="S" justifyItems="center">
   <slot />
 </Layout>

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -18,7 +18,7 @@
   }
 </script>
 
-<!-- routify:options index=2 -->
+<!-- routify:options index=1 -->
 <div class="root">
   <div class="nav">
     <Tabs {selected} on:select={selectFirstDatasource}>

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

@@ -12,7 +12,7 @@
     urlParam: "screenId",
     stateKey: "selectedScreenId",
     validate: id => $store.screens.some(screen => screen._id === id),
-    fallbackUrl: "../../",
+    fallbackUrl: "../../design",
     store,
     routify,
   })

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte

@@ -43,7 +43,8 @@
       extraButtonText="View details"
       extraButtonAction={() => {}}
     >
-      Custom layouts are being deprecated. They will be removed on [date].
+      Custom layouts are being deprecated. They will be removed in a future
+      release.
     </Banner>
     <Body size="S">
       You can save the content of this layout by pressing the button below.

packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte

@@ -11,6 +11,7 @@
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
   import { store } from "builderStore"
+  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
 
   export let links = []
 
@@ -75,6 +76,7 @@
                 placeholder="URL"
                 options={urlOptions}
               />
+              <RoleSelect bind:value={link.roleId} placeholder="Minimum role" />
               <Icon
                 name="Close"
                 hoverable
@@ -95,7 +97,7 @@
 <style>
   .container {
     width: 100%;
-    max-width: 600px;
+    max-width: 800px;
     margin: 0 auto;
   }
   .links {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -66,7 +65,6 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      $goto("../")
       notifications.success("Deleted screen successfully.")
     } catch (err) {
       notifications.error("Error deleting screen")

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte

@@ -45,6 +45,12 @@
       placeholder={null}
       getOptionLabel={role => role.name}
       getOptionValue={role => role._id}
+      getOptionColour={role => {
+        if (role?._id === "all") {
+          return null
+        }
+        return RoleUtils.getRoleColour(role._id)
+      }}
       options={[{ name: "All screens", _id: "all" }, ...$roles]}
     />
   </Layout>

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

@@ -0,0 +1,2 @@
+<!-- routify:options index=2 -->
+<slot />

packages/builder/src/pages/builder/app/[application]/index.svelte

@@ -1,4 +1,4 @@
 <script>
   import { redirect } from "@roxi/routify"
-  $redirect("./design")
+  $redirect("./data")
 </script>

packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte

@@ -1,2 +0,0 @@
-<!-- routify:options index=4 -->
-<slot />

packages/builder/src/pages/builder/app/[application]/settings/index.svelte

@@ -1,6 +0,0 @@
-Settings
-
-<!--  {#if $admin.cloud && $auth.user.account}
-  <UpgradeModal />
-{/if}
-<VersionModal /> -->

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^1.0.192-alpha.5",
+    "@budibase/bbui": "^1.0.192-alpha.6",
-    "@budibase/frontend-core": "^1.0.192-alpha.5",
+    "@budibase/frontend-core": "^1.0.192-alpha.6",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/string-templates": "^1.0.192-alpha.6",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",

packages/client/src/api/api.js

@@ -23,9 +23,9 @@ export const API = createAPIClient({
     }
 
     // Add role header
-    const role = get(devToolsStore).role
+    const devToolsState = get(devToolsStore)
-    if (role) {
+    if (devToolsState.enabled && devToolsState.role) {
-      headers["x-budibase-role"] = role
+      headers["x-budibase-role"] = devToolsState.role
     }
   },
 
@@ -34,7 +34,11 @@ export const API = createAPIClient({
   // Or we could check error.status and redirect to login on a 403 etc.
   onError: error => {
     const { status, method, url, message, handled } = error || {}
-    const ignoreErrorUrls = ["bbtel", "/api/global/self"]
+    const ignoreErrorUrls = [
+      "bbtel",
+      "/api/global/self",
+      "/api/tables/ta_users",
+    ]
 
     // Log any errors that we haven't manually handled
     if (!handled) {

packages/client/src/components/ClientApp.svelte

@@ -42,10 +42,7 @@
   let permissionError = false
 
   // Determine if we should show devtools or not
-  $: isDevPreview =
+  $: showDevTools = $devToolsStore.enabled && !$routeStore.queryParams?.peek
-    $appStore.isDevApp &&
-    !$builderStore.inBuilder &&
-    !$routeStore.queryParams?.peek
 
   // Handle no matching route
   $: {
@@ -59,6 +56,7 @@
             $screenStore.screens,
             $devToolsStore.role
           )
+          permissionError = false
           routeStore.actions.navigate(route)
         } else {
           // No screens likely means the user has no permissions to view this app
@@ -120,41 +118,57 @@
     dir="ltr"
     class="spectrum spectrum--medium {$themeStore.theme}"
   >
-    {#if permissionError}
+    <DeviceBindingsProvider>
-      <div class="error">
-        <Layout justifyItems="center" gap="S">
-          {@html ErrorSVG}
-          <Heading size="L">You don't have permission to use this app</Heading>
-          <Body size="S">Ask your administrator to grant you access</Body>
-        </Layout>
-      </div>
-    {:else if $screenStore.activeLayout}
       <UserBindingsProvider>
-        <DeviceBindingsProvider>
+        <StateBindingsProvider>
-          <StateBindingsProvider>
+          <RowSelectionProvider>
-            <RowSelectionProvider>
+            <!-- Settings bar can be rendered outside of device preview -->
-              <!-- Settings bar can be rendered outside of device preview -->
+            <!-- Key block needs to be outside the if statement or it breaks -->
-              <!-- Key block needs to be outside the if statement or it breaks -->
+            {#key $builderStore.selectedComponentId}
-              {#key $builderStore.selectedComponentId}
+              {#if $builderStore.inBuilder}
-                {#if $builderStore.inBuilder}
+                <SettingsBar />
-                  <SettingsBar />
+              {/if}
+            {/key}
+
+            <!-- Clip boundary for selection indicators -->
+            <div
+              id="clip-root"
+              class:preview={$builderStore.inBuilder}
+              class:tablet-preview={$builderStore.previewDevice === "tablet"}
+              class:mobile-preview={$builderStore.previewDevice === "mobile"}
+            >
+              <!-- Actual app -->
+              <div id="app-root">
+                {#if showDevTools}
+                  <DevToolsHeader />
                 {/if}
-              {/key}
 
-              <!-- Clip boundary for selection indicators -->
+                <div id="app-body">
-              <div
+                  {#if permissionError}
-                id="clip-root"
+                    <div class="error">
-                class:preview={$builderStore.inBuilder}
+                      <Layout justifyItems="center" gap="S">
-                class:tablet-preview={$builderStore.previewDevice === "tablet"}
+                        {@html ErrorSVG}
-                class:mobile-preview={$builderStore.previewDevice === "mobile"}
+                        <Heading size="L">
-              >
+                          You don't have permission to use this app
-                <!-- Actual app -->
+                        </Heading>
-                <div id="app-root">
+                        <Body size="S">
-                  {#if isDevPreview}
+                          Ask your administrator to grant you access
-                    <DevToolsHeader />
+                        </Body>
-                  {/if}
+                      </Layout>
-
+                    </div>
-                  <div id="app-body">
+                  {:else if !$screenStore.activeLayout}
+                    <div class="error">
+                      <Layout justifyItems="center" gap="S">
+                        {@html ErrorSVG}
+                        <Heading size="L">
+                          Something went wrong rendering your app
+                        </Heading>
+                        <Body size="S">
+                          Get in touch with support if this issue persists
+                        </Body>
+                      </Layout>
+                    </div>
+                  {:else}
                     <CustomThemeWrapper>
                       {#key $screenStore.activeLayout._id}
                         <Component
@@ -178,29 +192,29 @@
                       <ConfirmationDisplay />
                       <PeekScreenDisplay />
                     </CustomThemeWrapper>
+                  {/if}
 
-                    {#if isDevPreview}
+                  {#if showDevTools}
-                      <DevTools />
+                    <DevTools />
-                    {/if}
+                  {/if}
-                  </div>
                 </div>
-
-                <!-- Preview and dev tools utilities  -->
-                {#if $appStore.isDevApp}
-                  <SelectionIndicator />
-                {/if}
-                {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
-                  <HoverIndicator />
-                {/if}
-                {#if $builderStore.inBuilder}
-                  <DNDHandler />
-                {/if}
               </div>
-            </RowSelectionProvider>
+
-          </StateBindingsProvider>
+              <!-- Preview and dev tools utilities  -->
-        </DeviceBindingsProvider>
+              {#if $appStore.isDevApp}
+                <SelectionIndicator />
+              {/if}
+              {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
+                <HoverIndicator />
+              {/if}
+              {#if $builderStore.inBuilder}
+                <DNDHandler />
+              {/if}
+            </div>
+          </RowSelectionProvider>
+        </StateBindingsProvider>
       </UserBindingsProvider>
-    {/if}
+    </DeviceBindingsProvider>
   </div>
   <KeyboardManager />
 {/if}
@@ -249,7 +263,6 @@
   }
 
   .error {
-    position: absolute;
     width: 100%;
     height: 100%;
     display: grid;
@@ -258,23 +271,19 @@
     text-align: center;
     padding: 20px;
   }
-
   .error :global(svg) {
     fill: var(--spectrum-global-color-gray-500);
     width: 80px;
     height: 80px;
   }
-
   .error :global(h1),
   .error :global(p) {
     color: var(--spectrum-global-color-gray-800);
   }
-
   .error :global(p) {
     font-style: italic;
     margin-top: -0.5em;
   }
-
   .error :global(h1) {
     font-weight: 400;
   }
@@ -284,12 +293,10 @@
   #clip-root.preview {
     padding: 2px;
   }
-
   #clip-root.tablet-preview {
     width: calc(1024px + 6px);
     height: calc(768px + 6px);
   }
-
   #clip-root.mobile-preview {
     width: calc(390px + 6px);
     height: calc(844px + 6px);

packages/client/src/components/app/Layout.svelte

@@ -2,10 +2,12 @@
   import { getContext, setContext } from "svelte"
   import { writable } from "svelte/store"
   import { Heading, Icon } from "@budibase/bbui"
-  import { FieldTypes } from "../../constants"
+  import { FieldTypes } from "constants"
   import active from "svelte-spa-router/active"
+  import { RoleUtils } from "@budibase/frontend-core"
 
-  const { routeStore, styleable, linkable, builderStore } = getContext("sdk")
+  const sdk = getContext("sdk")
+  const { routeStore, styleable, linkable, builderStore, currentRole } = sdk
   const component = getContext("component")
   const context = getContext("context")
 
@@ -50,7 +52,7 @@
   })
   setContext("layout", store)
 
-  $: validLinks = links?.filter(link => link.text && link.url) || []
+  $: validLinks = getValidLinks(links, $currentRole)
   $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
   $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
   $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
@@ -79,6 +81,17 @@
     }
   }
 
+  const getValidLinks = (allLinks, role) => {
+    // Strip links missing required info
+    let validLinks = (allLinks || []).filter(link => link.text && link.url)
+
+    // Filter to only links allowed by the current role
+    const priority = RoleUtils.getRolePriority(role)
+    return validLinks.filter(link => {
+      return !link.roleId || RoleUtils.getRolePriority(link.roleId) <= priority
+    })
+  }
+
   const isInternal = url => {
     return url.startsWith("/")
   }

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -21,11 +21,11 @@
   }
 
   onMount(() => {
-    resizeObserver.observe(document.getElementById("app-root"))
+    resizeObserver.observe(document.getElementById("spectrum-root"))
   })
 
   onDestroy(() => {
-    resizeObserver.unobserve(document.getElementById("app-root"))
+    resizeObserver.unobserve(document.getElementById("spectrum-root"))
   })
 </script>
 

packages/client/src/components/context/UserBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore, devToolsStore } from "stores"
+  import { authStore, currentRole } from "stores"
   import { ActionTypes } from "constants"
   import { Constants } from "@budibase/frontend-core"
 
@@ -17,10 +17,6 @@
   ]
 </script>
 
-<Provider
+<Provider key="user" data={{ ...$authStore, roleId: $currentRole }} {actions}>
-  key="user"
-  data={{ ...$authStore, roleId: $devToolsStore.role || $authStore?.roleId }}
-  {actions}
->
   <slot />
 </Provider>

packages/client/src/index.js

@@ -1,6 +1,7 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore, appStore } from "./stores"
+import { builderStore, appStore, devToolsStore } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
+import { get } from "svelte/store"
 
 // Initialise spectrum icons
 loadSpectrumIcons()
@@ -23,7 +24,12 @@ const loadBudibase = () => {
 
   // Set app ID - this window flag is set by both the preview and the real
   // server rendered app HTML
-  appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"])
+  appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
+
+  // Enable dev tools or not. We need to be using a dev app and not inside
+  // the builder preview to enable them.
+  const enableDevTools = !get(builderStore).inBuilder && get(appStore).isDevApp
+  devToolsStore.actions.setEnabled(enableDevTools)
 
   // Create app if one hasn't been created yet
   if (!app) {

packages/client/src/sdk.js

@@ -8,6 +8,7 @@ import {
   uploadStore,
   rowSelectionStore,
   componentStore,
+  currentRole,
 } from "stores"
 import { styleable } from "utils/styleable"
 import { linkable } from "utils/linkable"
@@ -26,6 +27,7 @@ export default {
   builderStore,
   uploadStore,
   componentStore,
+  currentRole,
   styleable,
   linkable,
   getAction,

packages/client/src/stores/app.js

@@ -1,5 +1,5 @@
 import { API } from "api"
-import { get, writable } from "svelte/store"
+import { get, writable, derived } from "svelte/store"
 
 const initialState = {
   appId: null,
@@ -9,6 +9,12 @@ const initialState = {
 
 const createAppStore = () => {
   const store = writable(initialState)
+  const derivedStore = derived(store, $store => {
+    return {
+      ...$store,
+      isDevApp: $store.appId?.startsWith("app_dev"),
+    }
+  })
 
   // Fetches the app definition including screens, layouts and theme
   const fetchAppDefinition = async () => {
@@ -22,7 +28,6 @@ const createAppStore = () => {
         ...initialState,
         ...appDefinition,
         appId: appDefinition?.application?.appId,
-        isDevApp: appId.startsWith("app_dev"),
       })
     } catch (error) {
       store.set(initialState)
@@ -30,7 +35,7 @@ const createAppStore = () => {
   }
 
   // Sets the initial app ID
-  const setAppID = id => {
+  const setAppId = id => {
     store.update(state => {
       if (state) {
         state.appId = id
@@ -42,8 +47,8 @@ const createAppStore = () => {
   }
 
   return {
-    subscribe: store.subscribe,
+    subscribe: derivedStore.subscribe,
-    actions: { setAppID, fetchAppDefinition },
+    actions: { setAppId, fetchAppDefinition },
   }
 }
 

packages/client/src/stores/devTools.js

@@ -1,23 +1,29 @@
-import { get } from "svelte/store"
 import { createLocalStorageStore } from "@budibase/frontend-core"
-import { appStore } from "./app"
 import { initialise } from "./initialise"
 import { authStore } from "./auth"
+import { API } from "../api"
 
 const initialState = {
+  enabled: false,
   visible: false,
   allowSelection: false,
   role: null,
 }
 
 const createDevToolStore = () => {
-  const localStorageKey = `${get(appStore).appId}.devTools`
+  const store = createLocalStorageStore("bb-devtools", initialState)
-  const store = createLocalStorageStore(localStorageKey, initialState)
+
+  const setEnabled = enabled => {
+    store.update(state => ({
+      ...state,
+      enabled,
+    }))
+  }
 
   const setVisible = visible => {
     store.update(state => ({
       ...state,
-      visible: visible,
+      visible,
     }))
   }
 
@@ -33,14 +39,14 @@ const createDevToolStore = () => {
       ...state,
       role: role === "self" ? null : role,
     }))
-    // location.reload()
+    API.invalidateCache()
     await authStore.actions.fetchUser()
     await initialise()
   }
 
   return {
     subscribe: store.subscribe,
-    actions: { setVisible, setAllowSelection, changeRole },
+    actions: { setEnabled, setVisible, setAllowSelection, changeRole },
   }
 }
 

packages/client/src/stores/index.js

@@ -1,3 +1,7 @@
+import { derived } from "svelte/store"
+import { devToolsStore } from "./devTools.js"
+import { authStore } from "./auth.js"
+
 export { authStore } from "./auth"
 export { appStore } from "./app"
 export { notificationStore } from "./notification"
@@ -13,8 +17,17 @@ export { devToolsStore } from "./devTools"
 export { componentStore } from "./components"
 export { uploadStore } from "./uploads.js"
 export { rowSelectionStore } from "./rowSelection.js"
+
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
 
 // Initialises an app by loading screens and routes
 export { initialise } from "./initialise"
+
+// Derive the current role of the logged-in user
+export const currentRole = derived(
+  [devToolsStore, authStore],
+  ([$devToolsStore, $authStore]) => {
+    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
+  }
+)

packages/frontend-core/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "^1.0.192-alpha.5",
+    "@budibase/bbui": "^1.0.192-alpha.6",
     "lodash": "^4.17.21",
     "svelte": "^3.46.2"
   }

packages/frontend-core/src/api/index.js

@@ -57,6 +57,7 @@ export const createAPIClient = config => {
     ...defaultAPIClientConfig,
     ...config,
   }
+  let cache = {}
 
   // Generates an error object from an API response
   const makeErrorFromResponse = async (response, method) => {
@@ -139,6 +140,7 @@ export const createAPIClient = config => {
         credentials: "same-origin",
       })
     } catch (error) {
+      delete cache[url]
       throw makeError("Failed to send request", { url, method })
     }
 
@@ -151,9 +153,11 @@ export const createAPIClient = config => {
           return await response.json()
         }
       } catch (error) {
+        delete cache[url]
         return null
       }
     } else {
+      delete cache[url]
       throw await makeErrorFromResponse(response, method)
     }
   }
@@ -161,7 +165,6 @@ export const createAPIClient = config => {
   // Performs an API call to the server and caches the response.
   // Future invocation for this URL will return the cached result instead of
   // hitting the server again.
-  let cache = {}
   const makeCachedApiCall = async params => {
     const identifier = params.url
     if (!identifier) {
@@ -206,6 +209,9 @@ export const createAPIClient = config => {
     error: message => {
       throw makeError(message)
     },
+    invalidateCache: () => {
+      cache = {}
+    },
   }
 
   // Attach all endpoints

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -70,10 +70,10 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.0.3",
-    "@budibase/backend-core": "^1.0.192-alpha.5",
+    "@budibase/backend-core": "^1.0.192-alpha.6",
-    "@budibase/client": "^1.0.192-alpha.5",
+    "@budibase/client": "^1.0.192-alpha.6",
-    "@budibase/pro": "1.0.192-alpha.5",
+    "@budibase/pro": "1.0.192-alpha.6",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/string-templates": "^1.0.192-alpha.6",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",

packages/server/src/middleware/currentapp.js

@@ -74,6 +74,10 @@ module.exports = async (ctx, next) => {
       try {
         await getRole(roleHeader)
         roleId = roleHeader
+
+        // Delete admin and builder flags so that the specified role is honoured
+        delete ctx.user.builder
+        delete ctx.user.admin
       } catch (error) {
         // Swallow error and do nothing
       }

packages/string-templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",

packages/worker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "description": "Budibase background service",
   "main": "src/index.ts",
   "repository": {
@@ -32,9 +32,9 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/backend-core": "^1.0.192-alpha.5",
+    "@budibase/backend-core": "^1.0.192-alpha.6",
-    "@budibase/pro": "1.0.192-alpha.5",
+    "@budibase/pro": "1.0.192-alpha.6",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/string-templates": "^1.0.192-alpha.6",
     "@koa/router": "^8.0.0",
     "@sentry/node": "6.17.7",
     "@techpass/passport-openidconnect": "^0.3.0",