From 6db2a30e9650e68b7c2d9ad3ff4d4f1aa702c652 Mon Sep 17 00:00:00 2001
From: MihailHadzhiev2022 <mihail@budibase.com>
Date: Thu, 2 Jun 2022 15:03:47 +0300
Subject: [PATCH 01/19] Refactoring tests

Tests:
1. AppiconAndColour
2. Automation
---
 .../changeAppIconAndColour.spec.js            | 21 +++++++------
 .../integration/createAutomation.spec.js      | 31 ++++++++++---------
 packages/builder/cypress/support/interact.js  | 17 ++++++++++
 3 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/packages/builder/cypress/integration/changeAppIconAndColour.spec.js b/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
index 0f623ddb04..2e5bca9074 100644
--- a/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
+++ b/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+const interact = require('../support/interact')
 
 filterTests(['all'], () => {
   context("Change Application Icon and Colour", () => {
@@ -11,20 +12,20 @@ filterTests(['all'], () => {
           cy.applicationInAppTable("Cypress Tests")
           cy.get(".appTable")
             .within(() => {
-              cy.get(".app-row-actions-icon").eq(0).click()
+              cy.get(interact.APP_ROW_ACTION).eq(0).click()
             })
-          cy.get(".spectrum-Menu").contains("Edit icon").click()
+          cy.get(interact.SPECTRUM_MENU).contains("Edit icon").click()
           // Select random icon
-          cy.get(".grid").within(() => {
-              cy.get(".icon-item").eq(Math.floor(Math.random() * 23) + 1).click()
+          cy.get(interact.GRID).within(() => {
+              cy.get(interact.ICON_ITEM).eq(Math.floor(Math.random() * 23) + 1).click()
           })
           // Select random colour
-          cy.get(".fill").click()
-          cy.get(".colors").within(() => {
-              cy.get(".color").eq(Math.floor(Math.random() * 33) + 1).click()
+          cy.get(interact.FILL).click()
+          cy.get(interact.COLOURSS).within(() => {
+              cy.get(interact.COLOUR).eq(Math.floor(Math.random() * 33) + 1).click()
           })
           cy.intercept('**/applications/**').as('iconChange')
-          cy.get(".spectrum-Button").contains("Save").click({ force: true })
+          cy.get(interact.SPECTRUM_BUTTON).contains("Save").click({ force: true })
           cy.wait("@iconChange")
           cy.get("@iconChange").its('response.statusCode')
           .should('eq', 200)
@@ -33,9 +34,9 @@ filterTests(['all'], () => {
           // Confirm colour has been applied - There is no default colour
           cy.get(".appTable")
             .within(() => {
-              cy.get('[aria-label]').eq(0).children()
+              cy.get(interact.AREA_LABEL).eq(0).children()
               .should('have.attr', 'xlink:href').and('not.contain', '#spectrum-icon-18-Apps')
-              cy.get(".title").children().children()
+              cy.get(interact.TITLE).children().children()
               .should('have.attr', 'style').and('contains', 'color')
             })
           cy.deleteAllApps()
diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index 69ef3f98a3..6a4b70f8dc 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/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(".modal-inner-wrapper").within(() => {
+      cy.get(interact.ADD_BUTTON_SPECTRUM).click()
+      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()
diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js
index 22ab13a48b..50499ddcc4 100644
--- a/packages/builder/cypress/support/interact.js
+++ b/packages/builder/cypress/support/interact.js
@@ -58,3 +58,20 @@ 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"

From b9b60cf2cdf403bc1a21e96a78bad85d42c55000 Mon Sep 17 00:00:00 2001
From: MihailHadzhiev2022 <mihail@budibase.com>
Date: Mon, 6 Jun 2022 14:01:14 +0300
Subject: [PATCH 02/19] refactoring test createTable

---
 .../cypress/integration/createTable.spec.js   | 55 ++++++++++---------
 packages/builder/cypress/support/interact.js  | 17 ++++++
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 4600807cbc..7d55a1f03c 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/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(".spectrum-Table-editIcon > use").click()
-      cy.get(".modal-inner-wrapper").within(() => {
+      cy.get(interact.TABLE_TITLE).click()
+      cy.get(interact.SPECTRUM_TABLE_EDIT).click()
+      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(".spectrum-Modal input").type("Updated")
+      cy.get(interact.SPECTRUM_MODAL_INPUT).clear()
+      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(".spectrum-ActionButton").eq(1).click()
+        cy.get(interact.SPECTRUM_PAGINATION).within(() => {
+          cy.get(interact.SPECTRUM_ACTION_BUTTON).eq(1).click()
         })
-        cy.get(".spectrum-Pagination").within(() => {
-          cy.get(".spectrum-Body--secondary").contains("Page 2")
+        cy.get(interact.SPECTRUM_PAGINATION).within(() => {
+          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(".popovers").within(() => {
-          cy.get(".spectrum-Button").click({ force: true })
+        cy.get(interact.SPECTRUM_CHECKBOX_INPUT).check({ force: true })
+        cy.get(interact.POPOVERS).within(() => {
+          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(".spectrum-ActionButton").eq(1).should("not.be.enabled")
+        cy.get(interact.SPECTRUM_PAGINATION).within(() => {
+          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(".spectrum-Table-editIcon > use").click()
+      cy.get(interact.TABLE_TITLE).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('[data-cy="delete-table-confirm"]').type("dog")
+      cy.get(interact.SPECTRUM_MENU_CHILD2).click()
+      cy.get(interact.DELETE_TABLE_CONFIRM).type("dog")
       cy.contains("Delete Table").click()
       cy.contains("dog").should("not.exist")
     })
diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js
index 50499ddcc4..4f05189b24 100644
--- a/packages/builder/cypress/support/interact.js
+++ b/packages/builder/cypress/support/interact.js
@@ -75,3 +75,20 @@ 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"]'

From d7dc4ce6aca93b6cb3da2e6c3051e0c479b362bc Mon Sep 17 00:00:00 2001
From: MihailHadzhiev2022 <mihail@budibase.com>
Date: Mon, 6 Jun 2022 18:03:41 +0300
Subject: [PATCH 03/19] Refactoring test: createUserAndRoles

---
 .../integration/createUserAndRoles.spec.js    | 75 ++++++++++---------
 packages/builder/cypress/support/interact.js  |  8 ++
 2 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/packages/builder/cypress/integration/createUserAndRoles.spec.js b/packages/builder/cypress/integration/createUserAndRoles.spec.js
index ac7ec1b5fd..d47a96ed8d 100644
--- a/packages/builder/cypress/integration/createUserAndRoles.spec.js
+++ b/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(".spectrum-Button")
+          cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
+            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")
     })
   })
 })
diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js
index 4f05189b24..1f55956450 100644
--- a/packages/builder/cypress/support/interact.js
+++ b/packages/builder/cypress/support/interact.js
@@ -92,3 +92,11 @@ 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"

From cbf0adc98c834749e94c900b284c37e44ca80e9f Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 7 Jun 2022 09:41:26 +0000
Subject: [PATCH 04/19] v1.0.192-alpha.6

---
 lerna.json                             |  2 +-
 packages/backend-core/package.json     |  2 +-
 packages/bbui/package.json             |  4 ++--
 packages/builder/package.json          | 10 +++++-----
 packages/cli/package.json              |  2 +-
 packages/client/package.json           |  8 ++++----
 packages/frontend-core/package.json    |  4 ++--
 packages/server/package.json           |  8 ++++----
 packages/string-templates/package.json |  2 +-
 packages/worker/package.json           |  6 +++---
 10 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/lerna.json b/lerna.json
index d122442788..21ea8e3df8 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.192-alpha.5",
+  "version": "1.0.192-alpha.6",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 64ede16c9f..72d47ca33e 100644
--- a/packages/backend-core/package.json
+++ b/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",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index ce829fb115..c1acdac1b6 100644
--- a/packages/bbui/package.json
+++ b/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",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index d07431b74d..3bb279dce1 100644
--- a/packages/builder/package.json
+++ b/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/client": "^1.0.192-alpha.5",
-    "@budibase/frontend-core": "^1.0.192-alpha.5",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/bbui": "^1.0.192-alpha.6",
+    "@budibase/client": "^1.0.192-alpha.6",
+    "@budibase/frontend-core": "^1.0.192-alpha.6",
+    "@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",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index ab5f051b18..c75f7f39e2 100644
--- a/packages/cli/package.json
+++ b/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": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 0cae72268f..0ab74ead08 100644
--- a/packages/client/package.json
+++ b/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/frontend-core": "^1.0.192-alpha.5",
-    "@budibase/string-templates": "^1.0.192-alpha.5",
+    "@budibase/bbui": "^1.0.192-alpha.6",
+    "@budibase/frontend-core": "^1.0.192-alpha.6",
+    "@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",
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 1c8fa7b9a9..f8ee7b78c0 100644
--- a/packages/frontend-core/package.json
+++ b/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"
   }
diff --git a/packages/server/package.json b/packages/server/package.json
index 080aa6ee26..2fbaa60f1c 100644
--- a/packages/server/package.json
+++ b/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/client": "^1.0.192-alpha.5",
+    "@budibase/backend-core": "^1.0.192-alpha.6",
+    "@budibase/client": "^1.0.192-alpha.6",
     "@budibase/pro": "1.0.192-alpha.5",
-    "@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",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 26257075ba..f502c3ed4a 100644
--- a/packages/string-templates/package.json
+++ b/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",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 41127a14dd..cf473462d9 100644
--- a/packages/worker/package.json
+++ b/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/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",

From b0b69222d1435451dffc068b17c0776c044c88ab Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 7 Jun 2022 09:42:54 +0000
Subject: [PATCH 05/19] Update pro version to 1.0.192-alpha.6

---
 packages/server/package.json | 2 +-
 packages/worker/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/server/package.json b/packages/server/package.json
index 2fbaa60f1c..86b17d1b5f 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -72,7 +72,7 @@
     "@apidevtools/swagger-parser": "^10.0.3",
     "@budibase/backend-core": "^1.0.192-alpha.6",
     "@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.6",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index cf473462d9..f53231db2f 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -33,7 +33,7 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@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.6",
     "@koa/router": "^8.0.0",
     "@sentry/node": "6.17.7",

From feb8bff299dd5d07af5761b09077249b66500761 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Jun 2022 16:51:14 +0100
Subject: [PATCH 06/19] Update action button style for component settings to
 match designs

---
 packages/bbui/src/ActionButton/ActionButton.svelte             | 3 +++
 .../components/design/settings/controls/BarButtonList.svelte   | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 2b4d1076c2..b7c217c0d9 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/settings/controls/BarButtonList.svelte b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
index 01f198c5ec..339edb1f74 100644
--- a/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
+++ b/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>

From a34eced805305235a2df056db6f658b05c2a3208 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Jun 2022 16:51:43 +0100
Subject: [PATCH 07/19] Update layout deprecation notice

---
 .../layouts/[layoutId]/_components/LayoutSettingsPanel.svelte  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
index 8e1228d5ab..e3e09bddee 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ b/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.

From 0e8a3f1769181cb3d28ae3f12e3be44a42cd4c3d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 07:57:57 +0100
Subject: [PATCH 08/19] Remove background from icon side nav

---
 packages/bbui/src/IconSideNav/IconSideNavItem.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bbui/src/IconSideNav/IconSideNavItem.svelte b/packages/bbui/src/IconSideNav/IconSideNavItem.svelte
index 73b2b5196b..40dcb60a20 100644
--- a/packages/bbui/src/IconSideNav/IconSideNavItem.svelte
+++ b/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);
   }

From 98ac9af88b9d24a8b447d4d859ae8bd2c845a4a1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 13:34:41 +0100
Subject: [PATCH 09/19] Update order of builder tabs to put data before design
 again

---
 .../src/pages/builder/app/[application]/beta/_layout.svelte | 2 +-
 .../src/pages/builder/app/[application]/data/_layout.svelte | 2 +-
 .../pages/builder/app/[application]/design/_layout.svelte   | 2 ++
 .../pages/builder/app/[application]/settings/_layout.svelte | 2 --
 .../pages/builder/app/[application]/settings/index.svelte   | 6 ------
 5 files changed, 4 insertions(+), 10 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/settings/index.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte
index 8d61c96488..3326a99114 100644
--- a/packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte
+++ b/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>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index 87c648bd4f..a1e95cf10b 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/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}>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
new file mode 100644
index 0000000000..ec21d909aa
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
@@ -0,0 +1,2 @@
+<!-- routify:options index=2 -->
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
deleted file mode 100644
index 597bf1518d..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- routify:options index=4 -->
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
deleted file mode 100644
index 5008432fee..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-Settings
-
-<!--  {#if $admin.cloud && $auth.user.account}
-  <UpgradeModal />
-{/if}
-<VersionModal /> -->

From a0f1657087aa49d0fc10da6cda163b182bfdce65 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 13:35:38 +0100
Subject: [PATCH 10/19] Revert default builder tab to data instead of design

---
 .../builder/src/pages/builder/app/[application]/index.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/index.svelte b/packages/builder/src/pages/builder/app/[application]/index.svelte
index efcb3d1f44..0143f38324 100644
--- a/packages/builder/src/pages/builder/app/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/index.svelte
@@ -1,4 +1,4 @@
 <script>
   import { redirect } from "@roxi/routify"
-  $redirect("./design")
+  $redirect("./data")
 </script>

From 71b18a426000e83cbf2a9644fcdae54dbdd72257 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 14:26:56 +0100
Subject: [PATCH 11/19] Delete user builder and admin flags when specifying a
 custom role via dev tools

---
 packages/server/src/middleware/currentapp.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/server/src/middleware/currentapp.js b/packages/server/src/middleware/currentapp.js
index 8ddf608572..61be834d45 100644
--- a/packages/server/src/middleware/currentapp.js
+++ b/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
       }

From f351fb001943a0fb1caa48ff7633a1f3b8a1b204 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 14:27:29 +0100
Subject: [PATCH 12/19] Allow role select to accept a placeholder

---
 .../src/components/design/settings/controls/RoleSelect.svelte  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
index 2c2f3b4ac1..d1e326219b 100644
--- a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
+++ b/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}
 />

From 8dd517dcb2d965770bff23afa8f25803da342b0e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 14:28:02 +0100
Subject: [PATCH 13/19] Add role setting to navigation links to allow easily
 customising which roles see which links

---
 .../_components/NavigationLinksDrawer.svelte  |  4 +-
 .../client/src/components/ClientApp.svelte    | 43 +++++++++++--------
 .../client/src/components/app/Layout.svelte   | 19 ++++++--
 .../context/DeviceBindingsProvider.svelte     |  4 +-
 .../context/UserBindingsProvider.svelte       |  8 +---
 packages/client/src/sdk.js                    |  2 +
 packages/client/src/stores/index.js           | 14 ++++++
 7 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
index 4d1823108c..5ffccc5800 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
+++ b/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 {
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index e5cd2fb1d2..cce8de11d4 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -59,6 +59,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,17 +121,24 @@
     dir="ltr"
     class="spectrum spectrum--medium {$themeStore.theme}"
   >
-    {#if permissionError}
-      <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}
+    <DeviceBindingsProvider>
       <UserBindingsProvider>
-        <DeviceBindingsProvider>
+        {#if permissionError}
+          <div class="error-wrapper">
+            {#if isDevPreview}
+              <DevToolsHeader />
+            {/if}
+            <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>
+          </div>
+        {:else if $screenStore.activeLayout}
           <StateBindingsProvider>
             <RowSelectionProvider>
               <!-- Settings bar can be rendered outside of device preview -->
@@ -198,9 +206,9 @@
               </div>
             </RowSelectionProvider>
           </StateBindingsProvider>
-        </DeviceBindingsProvider>
+        {/if}
       </UserBindingsProvider>
-    {/if}
+    </DeviceBindingsProvider>
   </div>
   <KeyboardManager />
 {/if}
@@ -248,8 +256,11 @@
     overflow: hidden;
   }
 
+  .error-wrapper {
+    width: 100%;
+    height: 100%;
+  }
   .error {
-    position: absolute;
     width: 100%;
     height: 100%;
     display: grid;
@@ -258,23 +269,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 +291,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);
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 71ecb7d263..58b2797162 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/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("/")
   }
diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index cdc19c74c2..36d86645c4 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/context/UserBindingsProvider.svelte b/packages/client/src/components/context/UserBindingsProvider.svelte
index f7605122ae..98769cf76a 100644
--- a/packages/client/src/components/context/UserBindingsProvider.svelte
+++ b/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
-  key="user"
-  data={{ ...$authStore, roleId: $devToolsStore.role || $authStore?.roleId }}
-  {actions}
->
+<Provider key="user" data={{ ...$authStore, roleId: $currentRole }} {actions}>
   <slot />
 </Provider>
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index db31da7164..13190e0a4f 100644
--- a/packages/client/src/sdk.js
+++ b/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,
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index 280a32e069..df51aa7868 100644
--- a/packages/client/src/stores/index.js
+++ b/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,18 @@ 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, which may be overridden by
+// dev tools
+export const currentRole = derived(
+  [devToolsStore, authStore],
+  ([$devToolsStore, $authStore]) => {
+    return $devToolsStore.role || $authStore?.roleId
+  }
+)

From 10258e1df8eaf3af4367f7c2a939a046133b9ae0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 15:03:43 +0100
Subject: [PATCH 14/19] Improve logic around dev tools roles and its usages.
 Ensure dev tools roles are never used in builder preview

---
 packages/client/src/api/api.js                  |  6 +++---
 packages/client/src/components/ClientApp.svelte | 11 ++++-------
 packages/client/src/index.js                    | 10 ++++++++--
 packages/client/src/stores/app.js               | 15 ++++++++++-----
 packages/client/src/stores/devTools.js          | 13 ++++++++++---
 packages/client/src/stores/index.js             |  5 ++---
 6 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index c3cc679220..fdd83bd963 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -23,9 +23,9 @@ export const API = createAPIClient({
     }
 
     // Add role header
-    const role = get(devToolsStore).role
-    if (role) {
-      headers["x-budibase-role"] = role
+    const devToolsState = get(devToolsStore)
+    if (devToolsState.enabled && devToolsState.role) {
+      headers["x-budibase-role"] = devToolsState.role
     }
   },
 
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index cce8de11d4..e9a66229dd 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -42,10 +42,7 @@
   let permissionError = false
 
   // Determine if we should show devtools or not
-  $: isDevPreview =
-    $appStore.isDevApp &&
-    !$builderStore.inBuilder &&
-    !$routeStore.queryParams?.peek
+  $: showDevTools = $devToolsStore.enabled && !$routeStore.queryParams?.peek
 
   // Handle no matching route
   $: {
@@ -125,7 +122,7 @@
       <UserBindingsProvider>
         {#if permissionError}
           <div class="error-wrapper">
-            {#if isDevPreview}
+            {#if showDevTools}
               <DevToolsHeader />
             {/if}
             <div class="error">
@@ -158,7 +155,7 @@
               >
                 <!-- Actual app -->
                 <div id="app-root">
-                  {#if isDevPreview}
+                  {#if showDevTools}
                     <DevToolsHeader />
                   {/if}
 
@@ -187,7 +184,7 @@
                       <PeekScreenDisplay />
                     </CustomThemeWrapper>
 
-                    {#if isDevPreview}
+                    {#if showDevTools}
                       <DevTools />
                     {/if}
                   </div>
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 10062cb2da..d00277c157 100644
--- a/packages/client/src/index.js
+++ b/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) {
diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js
index 2c2ead66c4..f3fd271639 100644
--- a/packages/client/src/stores/app.js
+++ b/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,
-    actions: { setAppID, fetchAppDefinition },
+    subscribe: derivedStore.subscribe,
+    actions: { setAppId, fetchAppDefinition },
   }
 }
 
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
index 6d631080ab..3db46af608 100644
--- a/packages/client/src/stores/devTools.js
+++ b/packages/client/src/stores/devTools.js
@@ -5,6 +5,7 @@ import { initialise } from "./initialise"
 import { authStore } from "./auth"
 
 const initialState = {
+  enabled: false,
   visible: false,
   allowSelection: false,
   role: null,
@@ -14,10 +15,17 @@ const createDevToolStore = () => {
   const localStorageKey = `${get(appStore).appId}.devTools`
   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 +41,13 @@ const createDevToolStore = () => {
       ...state,
       role: role === "self" ? null : role,
     }))
-    // location.reload()
     await authStore.actions.fetchUser()
     await initialise()
   }
 
   return {
     subscribe: store.subscribe,
-    actions: { setVisible, setAllowSelection, changeRole },
+    actions: { setEnabled, setVisible, setAllowSelection, changeRole },
   }
 }
 
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index df51aa7868..e28fbaee42 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -24,11 +24,10 @@ 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, which may be overridden by
-// dev tools
+// Derive the current role of the logged-in user
 export const currentRole = derived(
   [devToolsStore, authStore],
   ([$devToolsStore, $authStore]) => {
-    return $devToolsStore.role || $authStore?.roleId
+    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
   }
 )

From 13c3390da580089b3b2267542989661a40cd0747 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 15:33:41 +0100
Subject: [PATCH 15/19] Invalidate cached API responses when bad response
 statuses are recevied and invalidate entire API cache when switching role

---
 packages/client/src/api/api.js          | 6 +++++-
 packages/client/src/stores/devTools.js  | 2 ++
 packages/frontend-core/src/api/index.js | 8 +++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index fdd83bd963..b96ad9c9e7 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -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) {
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
index 3db46af608..1558f54862 100644
--- a/packages/client/src/stores/devTools.js
+++ b/packages/client/src/stores/devTools.js
@@ -3,6 +3,7 @@ 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,
@@ -41,6 +42,7 @@ const createDevToolStore = () => {
       ...state,
       role: role === "self" ? null : role,
     }))
+    API.invalidateCache()
     await authStore.actions.fetchUser()
     await initialise()
   }
diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js
index 164f51aae5..fddbffde4a 100644
--- a/packages/frontend-core/src/api/index.js
+++ b/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

From eeb0a9fc64258d2d1d0a4988c7602e74a0ba6e3a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 15:55:59 +0100
Subject: [PATCH 16/19] Show devtools even in client app error states, to fix
 being locked out when changing to a public preview

---
 .../client/src/components/ClientApp.svelte    | 125 +++++++++---------
 packages/client/src/stores/devTools.js        |   5 +-
 2 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index e9a66229dd..db9f30fdab 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -120,46 +120,55 @@
   >
     <DeviceBindingsProvider>
       <UserBindingsProvider>
-        {#if permissionError}
-          <div class="error-wrapper">
-            {#if showDevTools}
-              <DevToolsHeader />
-            {/if}
-            <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>
-          </div>
-        {:else if $screenStore.activeLayout}
-          <StateBindingsProvider>
-            <RowSelectionProvider>
-              <!-- Settings bar can be rendered outside of device preview -->
-              <!-- Key block needs to be outside the if statement or it breaks -->
-              {#key $builderStore.selectedComponentId}
-                {#if $builderStore.inBuilder}
-                  <SettingsBar />
+        <StateBindingsProvider>
+          <RowSelectionProvider>
+            <!-- Settings bar can be rendered outside of device preview -->
+            <!-- Key block needs to be outside the if statement or it breaks -->
+            {#key $builderStore.selectedComponentId}
+              {#if $builderStore.inBuilder}
+                <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="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}
-
-                  <div id="app-body">
+                <div id="app-body">
+                  {#if permissionError}
+                    <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}
+                    <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
@@ -183,27 +192,27 @@
                       <ConfirmationDisplay />
                       <PeekScreenDisplay />
                     </CustomThemeWrapper>
+                  {/if}
 
-                    {#if showDevTools}
-                      <DevTools />
-                    {/if}
-                  </div>
+                  {#if showDevTools}
+                    <DevTools />
+                  {/if}
                 </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>
-        {/if}
+
+              <!-- 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>
       </UserBindingsProvider>
     </DeviceBindingsProvider>
   </div>
@@ -253,10 +262,6 @@
     overflow: hidden;
   }
 
-  .error-wrapper {
-    width: 100%;
-    height: 100%;
-  }
   .error {
     width: 100%;
     height: 100%;
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
index 1558f54862..4abfe33b7b 100644
--- a/packages/client/src/stores/devTools.js
+++ b/packages/client/src/stores/devTools.js
@@ -1,6 +1,4 @@
-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"
@@ -13,8 +11,7 @@ const initialState = {
 }
 
 const createDevToolStore = () => {
-  const localStorageKey = `${get(appStore).appId}.devTools`
-  const store = createLocalStorageStore(localStorageKey, initialState)
+  const store = createLocalStorageStore("bb-devtools", initialState)
 
   const setEnabled = enabled => {
     store.update(state => ({

From e2105f51a85f53cdf7a7b1f1b2a2252536bb860d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 16:00:53 +0100
Subject: [PATCH 17/19] Fix redirections when deleting screns

---
 .../builder/app/[application]/design/[screenId]/_layout.svelte  | 2 +-
 .../[screenId]/screens/_components/ScreenDropdownMenu.svelte    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 82c8e628de..d0eb93466d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/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,
   })
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
index 2f14766d8e..55c79a3b9f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
@@ -66,7 +66,6 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      $goto("../")
       notifications.success("Deleted screen successfully.")
     } catch (err) {
       notifications.error("Error deleting screen")

From 1de1091dedfa445ea7e1260a3d7669989fb8e244 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 16:04:58 +0100
Subject: [PATCH 18/19] Add role status lights to screen filter picker

---
 .../[screenId]/screens/_components/ScreenListPanel.svelte   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index feb2f754ff..40d9ab273d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/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>

From 6f00c62d48734d2930b9a4d7b602d77011334e69 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Jun 2022 16:16:57 +0100
Subject: [PATCH 19/19] Lint

---
 .../[screenId]/screens/_components/ScreenDropdownMenu.svelte     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
index 55c79a3b9f..60255259ab 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
+++ b/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 {