Merge branch 'master' of github.com:Budibase/budibase into feature/layout-poc

5 years ago · d5e40fc090
125 changed files with 1554 additions and 1066 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1 +1,6 @@
-packages/server/builder/**/*.js
+node_modules
+public
+dist
+packages/server/builder
+packages/server/coverage
+packages/builder/.routify
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -11,17 +11,22 @@
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
-  "ignorePatterns": ["node_modules", "dist", "public", "*.spec.js", "bundle.js"],
-  "plugins": ["prettier", "svelte3"],
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "public",
+    "*.spec.js",
+    "bundle.js"
+  ],
+  "plugins": ["svelte3"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
-      "files": ["**/*.svelte"],
+      "files": ["*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "rules": {
-    "prettier/prettier": "error",
    "no-self-assign": "off"
  }
-}
+}
--- a/.gitignore
+++ b/.gitignore
@ -88,3 +88,7 @@ hosting/.generated-envoy.dev.yaml

 # swap files (linux)
 *.swp
+
+# Sublime text
+*.sublime-project
+*.sublime-workspace
--- a/.prettierignore
+++ b/.prettierignore
@ -1,5 +1,8 @@
-packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+node_modules
 public
 dist
+*.spec.js
+packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
 packages/server/builder
-**/*.spec.js
+packages/server/coverage
+packages/builder/.routify
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -6,5 +6,5 @@
  "arrowParens": "avoid",
  "jsxBracketSameLine": false,
  "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder" : "options-scripts-markup-styles"
-}
+  "svelteSortOrder": "options-scripts-markup-styles"
+}
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "0.9.47",
+  "version": "0.9.48",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/package.json
+++ b/package.json
@ -4,14 +4,13 @@
  "devDependencies": {
    "@rollup/plugin-json": "^4.0.2",
    "babel-eslint": "^10.0.3",
-    "eslint": "^6.8.0",
-    "eslint-plugin-cypress": "^2.11.1",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-svelte3": "^2.7.3",
+    "eslint": "^7.28.0",
+    "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-svelte3": "^3.2.0",
    "kill-port": "^1.6.1",
    "lerna": "3.14.1",
-    "prettier": "^2.2.1",
-    "prettier-plugin-svelte": "^2.2.0",
+    "prettier": "^2.3.1",
+    "prettier-plugin-svelte": "^2.3.0",
    "rimraf": "^3.0.2",
    "rollup-plugin-replace": "^2.2.0",
    "svelte": "^3.38.2"
@ -33,9 +32,12 @@
    "dev": "yarn run kill-port && lerna link && lerna run --parallel dev:builder --concurrency 1",
    "dev:noserver": "lerna link && lerna run dev:stack:up && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server --ignore @budibase/worker",
    "test": "lerna run test",
-    "lint": "eslint packages",
-    "lint:fix": "eslint --fix packages",
-    "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"",
+    "lint:eslint": "eslint packages",
+    "lint:prettier": "prettier --check \"packages/**/*.{js,svelte}\"",
+    "lint": "yarn run lint:eslint && yarn run lint:prettier",
+    "lint:fix:eslint": "eslint --fix packages",
+    "lint:fix:prettier": "prettier --write \"packages/**/*.{js,svelte}\"",
+    "lint:fix": "yarn run lint:fix:prettier && yarn run lint:fix:eslint",
    "test:e2e": "lerna run cy:test",
    "test:e2e:ci": "lerna run cy:ci",
    "build:docker": "lerna run build:docker && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -",
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/auth",
-  "version": "0.9.47",
+  "version": "0.9.48",
  "description": "Authentication middlewares for budibase builder and apps",
  "main": "src/index.js",
  "author": "Budibase",
--- 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": "0.9.47",
+  "version": "0.9.48",
  "license": "AGPL-3.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@ -58,6 +58,7 @@
    class:is-focused={open || focus}
  >
    <input
+      {id}
      type="text"
      on:focus={() => (focus = true)}
      on:blur={() => (focus = false)}
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@ -10,7 +10,6 @@
  export let id = null
  export let disabled = false
  export let error = null
-  export let isPlaceholder = false
  export let enableTime = true
  export let value = null
  export let placeholder = null
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@ -30,9 +30,6 @@
    "bmp",
    "jfif",
  ]
-  const onChange = event => {
-    dispatch("change", event.target.checked)
-  }

  const fieldId = id || generateID()
  let selectedImageIdx = 0
@ -205,7 +202,8 @@
        width="125"
        height="60"
        viewBox="0 0 199 97.7"
-        ><defs>
+      >
+        <defs>
          <style>
            .cls-1,
            .cls-2 {
@ -267,9 +265,9 @@
        <p
          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
        >
-          <label for={fieldId} class="spectrum-Link"
-            >Select a file to upload</label
-          >
+          <label for={fieldId} class="spectrum-Link">
+            Select a file to upload
+          </label>
          <br />
          from your computer
        </p>
@ -368,22 +366,11 @@
  .right {
    right: 5px;
  }
-  i {
-    font-size: 2rem;
-    color: var(--ink);
-  }
-  i:hover {
-    cursor: pointer;
-    color: var(--background);
-  }
  .delete-button {
    transition: all 0.3s;
    margin-left: 10px;
    display: flex;
  }
-  .delete-button i {
-    font-size: 2em;
-  }
  .delete-button:hover {
    cursor: pointer;
    color: var(--red);
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@ -10,6 +10,7 @@
  export let options = []
  export let getOptionLabel = option => option
  export let getOptionValue = option => option
+  export let readonly = false

  const dispatch = createEventDispatcher()
  $: selectedLookupMap = getSelectedLookupMap(value)
@ -72,6 +73,7 @@
  {id}
  {error}
  {disabled}
+  {readonly}
  {fieldText}
  {options}
  isPlaceholder={!value?.length}
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -22,7 +22,7 @@
  export let quiet = false

  const dispatch = createEventDispatcher()
-  const onClick = e => {
+  const onClick = () => {
    dispatch("click")
    if (readonly) {
      return
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@ -32,7 +32,9 @@
          {disabled}
        />
        <span class="spectrum-Radio-button" />
-        <label class="spectrum-Radio-label">{getOptionLabel(option)}</label>
+        <label for="" class="spectrum-Radio-label">
+          {getOptionLabel(option)}
+        </label>
      </div>
    {/each}
  {/if}
--- a/packages/bbui/src/Form/Core/Switch.svelte
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@ -3,7 +3,6 @@
  import { createEventDispatcher } from "svelte"

  export let value = false
-  export let error = null
  export let id = null
  export let text = null
  export let disabled = false
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@ -25,6 +25,7 @@
  <Multiselect
    {error}
    {disabled}
+    {readonly}
    {value}
    {options}
    {placeholder}
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@ -10,7 +10,11 @@
  export let hoverable = false
  export let disabled = false

-  $: rotation = directions.indexOf(direction) * 45
+  $: rotation = getRotation(direction)
+
+  const getRotation = direction => {
+    return directions.indexOf(direction) * 45
+  }
 </script>

 <svg
--- a/packages/bbui/src/Label/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@ -4,7 +4,7 @@
  export let size = "M"
 </script>

-<label class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+<label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
  <slot />
 </label>

--- a/packages/bbui/src/Modal/Content.svelte
+++ b/packages/bbui/src/Modal/Content.svelte
@ -4,14 +4,3 @@
 </script>

 <Input label="Your Name" bind:value />
-
-<style>
-  p {
-    font-size: var(--font-size-m);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--grey-7);
-  }
-</style>
--- a/packages/bbui/src/Modal/QuizModal.svelte
+++ b/packages/bbui/src/Modal/QuizModal.svelte
@ -1,5 +1,4 @@
 <script>
-  import { onMount } from "svelte"
  import ModalContent from "./ModalContent.svelte"
  import Input from "../Form/Input.svelte"

--- a/packages/bbui/src/ProgressBar/ProgressBar.svelte
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@ -8,7 +8,6 @@
  export let duration = 1000
  export let width = false
  export let sideLabel = false
-  export let overBackground = false

  export let size = "M"

--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@ -10,7 +10,6 @@
  export let value
  export let customRenderers = []

-  const plainTypes = ["string", "options", "number", "longform"]
  const typeMap = {
    boolean: BooleanRenderer,
    datetime: DateTimeRenderer,
--- a/packages/bbui/src/Table/SelectEditRenderer.svelte
+++ b/packages/bbui/src/Table/SelectEditRenderer.svelte
@ -3,7 +3,6 @@
  import ActionButton from "../ActionButton/ActionButton.svelte"

  export let selected
-  export let onToggleSelection
  export let onEdit
  export let allowSelectRows = false
  export let allowEditRows = false
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "0.9.47",
+  "version": "0.9.48",
  "license": "AGPL-3.0",
  "private": true,
  "scripts": {
@ -65,10 +65,10 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^0.9.47",
-    "@budibase/client": "^0.9.47",
+    "@budibase/bbui": "^0.9.48",
+    "@budibase/client": "^0.9.48",
    "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.47",
+    "@budibase/string-templates": "^0.9.48",
    "@sentry/browser": "5.19.1",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
@ -97,8 +97,6 @@
    "babel-jest": "^26.6.3",
    "cypress": "^5.1.0",
    "cypress-terminal-report": "^1.4.1",
-    "eslint": "^7.23.0",
-    "eslint-plugin-cypress": "^2.11.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "ncp": "^2.0.0",
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@ -2,23 +2,21 @@ import { store } from "./index"
 import { get as svelteGet } from "svelte/store"
 import { removeCookie, Cookies } from "./cookies"

-const apiCall = method => async (
-  url,
-  body,
-  headers = { "Content-Type": "application/json" }
-) => {
-  headers["x-budibase-app-id"] = svelteGet(store).appId
-  const json = headers["Content-Type"] === "application/json"
-  const resp = await fetch(url, {
-    method: method,
-    body: json ? JSON.stringify(body) : body,
-    headers,
-  })
-  if (resp.status === 403) {
-    removeCookie(Cookies.Auth)
+const apiCall =
+  method =>
+  async (url, body, headers = { "Content-Type": "application/json" }) => {
+    headers["x-budibase-app-id"] = svelteGet(store).appId
+    const json = headers["Content-Type"] === "application/json"
+    const resp = await fetch(url, {
+      method: method,
+      body: json ? JSON.stringify(body) : body,
+      headers,
+    })
+    if (resp.status === 403) {
+      removeCookie(Cookies.Auth)
+    }
+    return resp
  }
-  return resp
-}

 export const post = apiCall("POST")
 export const get = apiCall("GET")
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@ -100,9 +100,10 @@ const automationActions = store => ({
  },
  deleteAutomationBlock: block => {
    store.update(state => {
-      const idx = state.selectedAutomation.automation.definition.steps.findIndex(
-        x => x.id === block.id
-      )
+      const idx =
+        state.selectedAutomation.automation.definition.steps.findIndex(
+          x => x.id === block.id
+        )
      state.selectedAutomation.deleteBlock(block.id)

      // Select next closest step
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
@ -48,7 +48,7 @@
          return
        }
        formattedTagline = formattedTagline.replace(
-          new RegExp(`{{\s*${inputPath}\s*}}`),
+          new RegExp(`{{\\s*${inputPath}\\s*}}`),
          prettyValue
        )
      }
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -84,14 +84,4 @@
    background-color: var(--grey-2);
    color: var(--grey-8);
  }
-  header i {
-    font-size: 20px;
-  }
-  header i.delete {
-    opacity: 0.5;
-  }
-  header i.delete:hover {
-    cursor: pointer;
-    opacity: 1;
-  }
 </style>
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@ -53,8 +53,4 @@
    text-decoration: underline;
    margin-left: var(--spectrum-alias-item-padding-s);
  }
-  i {
-    font-size: 20px;
-    text-decoration: none;
-  }
 </style>
--- a/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Select, Label, Heading, Input } from "@budibase/bbui"
+  import { Button, Select, Input } from "@budibase/bbui"

  export let value

--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@ -11,7 +11,6 @@
  import * as api from "./api"
  import Table from "./Table.svelte"
  import { TableNames } from "constants"
-  import CreateEditUser from "./modals/CreateEditUser.svelte"
  import CreateEditRow from "./modals/CreateEditRow.svelte"

  let hideAutocolumns = true
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -18,7 +18,6 @@
  export let title
  export let allowEditing = false
  export let loading = false
-  export let theme = "alpine"
  export let hideAutocolumns
  export let rowCount

@ -149,11 +148,6 @@
    justify-content: flex-start;
    align-items: center;
  }
-  .table-title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 600;
-    margin: 0;
-  }
  .table-title > div {
    margin-left: var(--spacing-xs);
  }
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"

  export let selectedRows
--- a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
@ -19,7 +19,6 @@
  ]

  export let view = {}
-  export let onClosed

  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
  $: fields =
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -33,7 +33,6 @@
  let fieldDefinitions = cloneDeep(FIELDS)
  const { hide } = getContext(Context.Modal)

-  export let onClosed = () => {}
  export let field = {
    type: "string",
    constraints: fieldDefinitions.STRING.constraints,
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@ -104,6 +104,7 @@
    options={$roles}
    getOptionLabel={role => role.name}
    getOptionValue={role => role._id}
+    disabled={!creating}
  />
  {#each customSchemaKeys as [key, meta]}
    {#if !meta.autocolumn}
--- a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
@ -5,8 +5,6 @@
  import { tables } from "stores/backend"
  import analytics from "analytics"

-  export let onClosed
-
  let name
  let field

--- a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
@ -56,7 +56,6 @@
  ]

  export let view = {}
-  export let onClosed

  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
  $: fields = viewTable && Object.keys(viewTable.schema)
--- a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
@ -1,10 +1,9 @@
 <script>
-  import { Button, Select, ModalContent, notifications } from "@budibase/bbui"
+  import { Select, ModalContent, notifications } from "@budibase/bbui"
  import { tables, views } from "stores/backend"
  import { FIELDS } from "constants/backend"

  export let view = {}
-  export let onClosed

  $: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
  $: fields =
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@ -12,7 +12,6 @@

  export let resourceId
  export let permissions
-  export let onClosed

  async function changePermission(level, role) {
    await permissionsStore.save({
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@ -2,7 +2,7 @@
  import { goto } from "@roxi/routify"
  import { datasources } from "stores/backend"
  import { notifications } from "@budibase/bbui"
-  import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"

  export let datasource
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@ -27,7 +27,6 @@

  $: tableNames = $tables.list.map(table => table.name)

-  let modal
  let name
  let dataImport
  let error = ""
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@ -117,22 +117,4 @@
    margin-top: 4px;
    font-weight: 600;
  }
-
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 600;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
 </style>
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@ -15,7 +15,6 @@
  export let view

  let editorModal
-  let confirmDeleteDialogue
  let originalName = view.name
  let confirmDeleteDialog

--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@ -1,6 +1,6 @@
 <script>
  import { join } from "lodash/fp"
-  import { TextArea, Label } from "@budibase/bbui"
+  import { TextArea } from "@budibase/bbui"

  export let values
  export let label
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -59,9 +59,7 @@
        <section>
          <Heading size="XS">Columns</Heading>
          <ul>
-            {#each context.filter(context =>
-              context.readableBinding.match(searchRgx)
-            ) as { readableBinding }}
+            {#each context.filter( context => context.readableBinding.match(searchRgx) ) as { readableBinding }}
              <li
                on:click={() => {
                  value = addToText(value, getCaretPosition(), readableBinding)
@ -77,9 +75,7 @@
        <section>
          <Heading size="XS">Components</Heading>
          <ul>
-            {#each instance.filter(instance =>
-              instance.readableBinding.match(searchRgx)
-            ) as { readableBinding }}
+            {#each instance.filter( instance => instance.readableBinding.match(searchRgx) ) as { readableBinding }}
              <li on:click={() => addToText(readableBinding)}>
                {readableBinding}
              </li>
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@ -15,7 +15,6 @@

  const dispatch = createEventDispatcher()

-  export let bindingContainer
  export let bindableProperties = []
  export let validity = true
  export let value = ""
@ -50,9 +49,7 @@
      <div class="section">
        {#each categories as [categoryName, bindings]}
          <Heading size="XS">{categoryName}</Heading>
-          {#each bindings.filter(binding =>
-            binding.label.match(searchRgx)
-          ) as binding}
+          {#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
            <div
              class="binding"
              on:click={() => {
--- a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@ -12,6 +12,7 @@
    "",
    requiredValidator
  )
+  // eslint-disable-next-line no-unused-vars
  const [repeatPassword, _, repeatTouched] = createValidationStore(
    "",
    requiredValidator
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@ -3,7 +3,6 @@
  import { ModalContent } from "@budibase/bbui"
  import { onMount } from "svelte"
  import WebhookDisplay from "../automation/Shared/WebhookDisplay.svelte"
-  import analytics from "analytics"

  let webhookUrls = []

--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/packages/builder/src/components/deploy/DeployModal.svelte
@ -14,7 +14,6 @@

  const POLL_INTERVAL = 10000

-  let loading = false
  let feedbackModal
  let deployments = []
  let poll
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -2,7 +2,7 @@
  import { onMount, onDestroy } from "svelte"
  import Spinner from "components/common/Spinner.svelte"
  import { slide } from "svelte/transition"
-  import { Heading, Body, Button, Modal, ModalContent } from "@budibase/bbui"
+  import { Heading, Button, Modal, ModalContent } from "@budibase/bbui"
  import api from "builderStore/api"
  import { notifications } from "@budibase/bbui"
  import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
@ -160,11 +160,6 @@
    overflow-y: auto;
  }

-  h4 {
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-s);
-  }
-
  header {
    padding-left: var(--spacing-l);
    padding-bottom: var(--spacing-xl);
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@ -1,14 +1,6 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
-  import {
-    Button,
-    Icon,
-    Modal,
-    notifications,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { Icon, Modal, notifications, ModalContent } from "@budibase/bbui"
  import { store } from "builderStore"
-  import { apps } from "stores/portal"
  import api from "builderStore/api"

  let revertModal
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@ -1,6 +1,6 @@
 <script>
  import { onMount } from "svelte"
-  import { store, currentAsset, selectedComponent } from "builderStore"
+  import { store, currentAsset } from "builderStore"
  import iframeTemplate from "./iframeTemplate"
  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
  import { FrontendTypes } from "constants"
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@ -8,7 +8,6 @@
  export let component

  let confirmDeleteDialog
-  let anchor

  $: definition = store.actions.components.getDefinition(component?._component)
  $: noChildrenAllowed = !component || !definition?.hasChildren
@ -115,12 +114,3 @@
  okText="Delete Component"
  onOk={deleteComponent}
 />
-
-<style>
-  hr {
-    margin: 8px 0;
-    background-color: var(--grey-4);
-    height: 1px;
-    border: none;
-  }
-</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@ -1,6 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { store, currentAssetId } from "builderStore"
+  import { store } from "builderStore"
  import { DropEffect, DropPosition } from "./dragDropStore"
  import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
  import NavItem from "components/common/NavItem.svelte"
--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
@ -1,7 +1,7 @@
 <script>
  export let categories = []
  export let selectedCategory = {}
-  export let onClick = category => {}
+  export let onClick = () => {}
 </script>

 <div class="tabs">
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@ -131,8 +131,4 @@
    min-height: 120px;
    font-size: var(--font-size-xs);
  }
-
-  option {
-    text-transform: capitalize;
-  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -3,17 +3,10 @@
  import { store, selectedComponent, currentAsset } from "builderStore"
  import { Tabs, Tab } from "@budibase/bbui"
  import { FrontendTypes } from "constants"
-  import CategoryTab from "./CategoryTab.svelte"
  import DesignView from "./DesignView.svelte"
  import SettingsView from "./SettingsView.svelte"
  import { setWith } from "lodash"

-  const categories = [
-    { value: "settings", name: "Settings" },
-    { value: "design", name: "Design" },
-  ]
-  let selectedCategory = categories[0]
-
  $: definition = store.actions.components.getDefinition(
    $selectedComponent._component
  )
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@ -6,7 +6,6 @@
  import { createEventDispatcher, onMount } from "svelte"

  export let value
-  export let onChange

  const dispatch = createEventDispatcher()
  const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@ -103,8 +103,9 @@
  }

  function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
-      .source
+    const source = $datasources.list.find(
+      ds => ds._id === query.datasourceId
+    ).source
    return $integrations[source].query[query.queryVerb]
  }
 </script>
@ -264,12 +265,6 @@
    background-color: var(--spectrum-global-color-gray-200);
  }

-  .drawer-contents {
-    padding: var(--spacing-l);
-    height: calc(40vh - 2 * var(--spacing-l));
-    overflow-y: auto;
-  }
-
  i {
    margin-left: 5px;
    display: flex;
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Layout } from "@budibase/bbui"
+  import { Select, Layout } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import { datasources, integrations, queries } from "stores/backend"
  import { getBindableProperties } from "builderStore/dataBinding"
@ -18,8 +18,9 @@
  )

  function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
-      .source
+    const source = $datasources.list.find(
+      ds => ds._id === query.datasourceId
+    ).source
    return $integrations[source].query[query.queryVerb]
  }
 </script>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@ -6,9 +6,6 @@

  export let parameters

-  let bindingDrawer
-  let tempValue = parameters.url
-
  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@ -9,7 +9,6 @@

  export let componentInstance = {}
  export let value = ""
-  export let multiselect = false
  export let placeholder

  const dispatch = createEventDispatcher()
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@ -14,7 +14,6 @@
  } from "builderStore/dataBinding"
  import LuceneFilterBuilder from "./LuceneFilterBuilder.svelte"
  import { currentAsset } from "builderStore"
-  import SaveFields from "../EventsEditor/actions/SaveFields.svelte"

  const dispatch = createEventDispatcher()

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
@ -9,12 +9,9 @@
  } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import { getBindableProperties } from "builderStore/dataBinding"
-  import { createEventDispatcher } from "svelte"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
  import { generate } from "shortid"

-  const dispatch = createEventDispatcher()
-
  export let schemaFields
  export let value

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
@ -6,7 +6,7 @@
  export let isMultiSelect = false
  export let value = []
  export let initialValue = ""
-  export let onChange = selected => {}
+  export let onChange = () => {}

  onMount(() => {
    if (!value && !!initialValue) {
@ -28,9 +28,6 @@
    }
    onChange(val)
  }
-
-  const checkSelected = val =>
-    isMultiSelect ? value.includes(val) : value === val
 </script>

 <div class="flatbutton-group">
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@ -9,7 +9,6 @@

  export let componentInstance
  export let value
-  export let onChange
  export let type

  $: form = findClosestMatchingComponent(
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@ -57,7 +57,7 @@
  let loading = false

  function findIconByTerm(term) {
-    const r = new RegExp(`\^${term}`, "i")
+    const r = new RegExp(`^${term}`, "i")
    return icons.filter(i => r.test(i))
  }

@ -99,7 +99,7 @@
    loading = false
  }

-  async function searchForIcon(e) {
+  async function searchForIcon() {
    currentPage = 1
    loading = true
    filteredIcons = findIconByTerm(searchTerm)
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@ -9,7 +9,6 @@

  export let componentInstance = {}
  export let value = ""
-  export let multiselect = false
  export let placeholder

  const dispatch = createEventDispatcher()
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer, Body } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import {
    getBindableProperties,
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@ -17,8 +17,11 @@
  }

  const getControlProps = props => {
-    const { label, key, control, ...otherProps } = props || {}
-    return otherProps || {}
+    let controlProps = { ...(props || {}) }
+    delete controlProps.label
+    delete controlProps.key
+    delete controlProps.control
+    return controlProps
  }
 </script>

--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@ -44,13 +44,6 @@
    { key: "routing.roleId", label: "Access", control: RoleSelect },
    { key: "layoutId", label: "Layout", control: LayoutSelect },
  ]
-  const assetProps = [
-    "title",
-    "description",
-    "routing.route",
-    "layoutId",
-    "routing.roleId",
-  ]
  let confirmResetFieldsDialog

  $: settings = componentDefinition?.settings ?? []
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -46,8 +46,4 @@
    align-items: center;
    margin-bottom: var(--spacing-m);
  }
-
-  .ri-close-circle-fill {
-    cursor: pointer;
-  }
 </style>
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@ -77,8 +77,6 @@
  const refs = {}
  let editor
  let updating_externally = false
-  let marker
-  let error_line
  let destroyed = false

  $: if (editor && width && height) {
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@ -59,14 +59,6 @@
 {/if}

 <style>
-  .field {
-    margin-bottom: var(--spacing-m);
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-
  .horizontal {
    display: grid;
    grid-template-columns: 20% 1fr;
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -216,15 +216,6 @@
    gap: var(--spacing-l);
  }

-  .button-container {
-    display: flex;
-  }
-
-  .delete {
-    align-self: center;
-    cursor: pointer;
-  }
-
  .viewer {
    min-height: 200px;
  }
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -1,6 +1,5 @@
 <script>
  import { Button, Heading, Body } from "@budibase/bbui"
-  import AppCard from "./AppCard.svelte"
  import Spinner from "components/common/Spinner.svelte"
  import api from "builderStore/api"

@ -27,7 +26,7 @@
          <Heading size="S">{template.name}</Heading>
          <Body size="M" grey>{template.category}</Body>
          <Body size="S" black>{template.description}</Body>
-          <div><img src={template.image} width="100%" /></div>
+          <div><img alt="template" src={template.image} width="100%" /></div>
          <div class="card-footer">
            <Button secondary on:click={() => onSelect(template)}>
              Create
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@ -36,7 +36,7 @@
 <section>
  <div class="container">
    <Layout>
-      <img src={Logo} />
+      <img alt="logo" src={Logo} />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Create an admin user</Heading>
        <Body size="M" textAlign="center">
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -1,7 +1,7 @@
 <script>
  import { store, automationStore } from "builderStore"
  import { roles } from "stores/backend"
-  import { Button, Icon, ActionGroup, Tabs, Tab } from "@budibase/bbui"
+  import { Icon, ActionGroup, Tabs, Tab } from "@budibase/bbui"
  import DeployModal from "components/deploy/DeployModal.svelte"
  import RevertModal from "components/deploy/RevertModal.svelte"
  import { get } from "builderStore/api"
@ -113,11 +113,6 @@
    flex-direction: column;
  }

-  a {
-    text-transform: none;
-    color: var(--grey-5);
-  }
-
  .top-nav {
    flex: 0 0 auto;
    background: var(--background);
@ -150,23 +145,6 @@
    margin-bottom: -1px;
  }

-  .topnavitemright a {
-    cursor: pointer;
-    color: var(--grey-7);
-    margin: 0 12px 0 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 24px;
-    width: 24px;
-  }
-
-  .topnavitemright a:hover {
-    color: var(--ink);
-    font-weight: 600;
-  }
-
  .home-logo {
    border-style: none;
    background-color: rgba(0, 0, 0, 0);
@ -184,12 +162,4 @@
  .home-logo img {
    height: 30px;
  }
-
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
-  i:hover {
-    color: var(--ink);
-  }
 </style>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@ -3,17 +3,6 @@
  import { database, queries } from "stores/backend"
  import QueryInterface from "components/integration/QueryViewer.svelte"

-  async function fetchQueryConfig() {
-    try {
-      const response = await api.get(`/api/integrations/${datasource.source}`)
-      const json = await response.json()
-      config = json.query
-    } catch (err) {
-      notifications.error("Error fetching datasource configuration options.")
-      console.error(err)
-    }
-  }
-
  $: selectedQuery = $queries.list.find(
    query => query._id === $queries.selected
  ) || {
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -28,7 +28,7 @@
    unsaved = true
  }

-  $beforeUrlChange((event, store) => {
+  $beforeUrlChange(() => {
    if (unsaved) {
      notifications.error(
        "Unsaved changes. Please save your datasource configuration before leaving."
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
@ -1,5 +1,5 @@
 <script>
-  import { datasources, tables } from "stores/backend"
+  import { datasources } from "stores/backend"
  import { goto } from "@roxi/routify"
  import { onMount } from "svelte"

--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -13,7 +13,7 @@
  } from "@budibase/bbui"
  import { onMount } from "svelte"
  import { apps, organisation, auth } from "stores/portal"
-  import { goto, redirect } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
  import { AppStatus } from "constants"
  import { gradient } from "actions"
  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
@ -46,7 +46,7 @@
    <Page>
      <div class="content">
        <Layout noPadding>
-          <img src={$organisation.logoUrl || Logo} />
+          <img alt="logo" src={$organisation.logoUrl || Logo} />
          <div class="info-title">
            <Layout noPadding gap="XS">
              <Heading size="L">
--- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
@ -35,8 +35,4 @@
  .inner p {
    margin: 0;
  }
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
 </style>
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@ -26,7 +26,7 @@
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src={$organisation.logoUrl || Logo} />
+        <img alt="logo" src={$organisation.logoUrl || Logo} />
      </Layout>
      <Layout gap="XS" noPadding>
        <Heading textAlign="center">Forgotten your password?</Heading>
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@ -50,7 +50,7 @@
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src={Logo} />
+        <img alt="logo" src={Logo} />
        <Heading>Sign in to Budibase</Heading>
      </Layout>
      <GoogleButton />
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -25,7 +25,7 @@
 <section>
  <div class="container">
    <Layout>
-      <img src={Logo} />
+      <img src={Logo} alt="logo" />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Accept Invitation</Heading>
        <Body textAlign="center" size="M">
--- a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
@ -6,7 +6,6 @@
    Heading,
    ActionButton,
    Body,
-    Page,
    Layout,
    notifications,
    Tabs,
@ -128,7 +127,7 @@
  </Tab>
  <Tab title="Preview">
    <div class="preview">
-      <iframe srcdoc={previewContent} />
+      <iframe title="preview" srcdoc={previewContent} />
    </div>
  </Tab>
 </Tabs>
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@ -51,10 +51,12 @@

    if (response.status !== 200) {
      const error = await response.text()
-      let message = error
+      let message
      try {
        message = JSON.parse(error).message
-      } catch (err) {}
+      } catch (err) {
+        message = error
+      }
      notifications.error(`Failed to save email settings, reason: ${message}`)
    } else {
      const json = await response.json()
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -33,12 +33,16 @@
    role: {},
  }

+  $: defaultRoleId = $userFetch?.data?.builder?.global ? "ADMIN" : ""
  // Merge the Apps list and the roles response to get something that makes sense for the table
-  $: appList = Object.keys($apps?.data).map(id => ({
-    ...$apps?.data?.[id],
-    _id: id,
-    role: [$userFetch?.data?.roles?.[id]],
-  }))
+  $: appList = Object.keys($apps?.data).map(id => {
+    const role = $userFetch?.data?.roles?.[id] || defaultRoleId
+    return {
+      ...$apps?.data?.[id],
+      _id: id,
+      role: [role],
+    }
+  })
  let selectedApp

  const userFetch = fetchData(`/api/admin/users/${userId}`)
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@ -12,7 +12,7 @@
    notifications,
  } from "@budibase/bbui"
  import { auth, organisation } from "stores/portal"
-  import { post, get } from "builderStore/api"
+  import { post } from "builderStore/api"
  import analytics from "analytics"
  import { writable } from "svelte/store"
  import { redirect } from "@roxi/routify"
--- a/packages/builder/src/pages/builder/portal/settings/update.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/update.svelte
@ -5,16 +5,9 @@
    Body,
    Button,
    Divider,
-    Label,
-    Input,
-    Toggle,
-    Dropzone,
    notifications,
  } from "@budibase/bbui"
-  import { auth, organisation } from "stores/portal"
-  import { post, get } from "builderStore/api"
-  import analytics from "analytics"
-  import { writable } from "svelte/store"
+  import { auth } from "stores/portal"
  import { redirect } from "@roxi/routify"

  // Only admins allowed here
@ -27,7 +20,7 @@
  async function updateBudibase() {
    try {
      notifications.info("Updating budibase..")
-      const response = await fetch("/v1/update", {
+      await fetch("/v1/update", {
        headers: {
          Authorization: "Bearer budibase",
        },
--- a/packages/builder/src/stores/backend/tests/fixtures/queries.js
+++ b/packages/builder/src/stores/backend/tests/fixtures/queries.js
@ -9,8 +9,7 @@ export const SOME_QUERY = {
  queryVerb: "read",
  schema: {},
  name: "Speakers",
-  _id:
-    "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
+  _id: "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
  _rev: "2-941f8699eb0adf995f8bd59c99203b26",
  readable: true,
 }
@ -75,8 +74,7 @@ export const SAVE_QUERY_RESPONSE = {
    },
  },
  name: "Speakers",
-  _id:
-    "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
+  _id: "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
  _rev: "3-5a64adef494b1e9c793dc91b51ce73c6",
  readable: true,
 }
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/cli",
-  "version": "0.9.47",
+  "version": "0.9.48",
  "description": "Budibase CLI, for developers, self hosting and migrations.",
  "main": "src/index.js",
  "bin": {
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/client",
-  "version": "0.9.47",
+  "version": "0.9.48",
  "license": "MPL-2.0",
  "module": "dist/budibase-client.js",
  "main": "dist/budibase-client.js",
@ -18,9 +18,9 @@
    "dev:builder": "rollup -cw"
  },
  "dependencies": {
-    "@budibase/bbui": "^0.9.47",
-    "@budibase/standard-components": "^0.9.47",
-    "@budibase/string-templates": "^0.9.47",
+    "@budibase/bbui": "^0.9.48",
+    "@budibase/standard-components": "^0.9.48",
+    "@budibase/string-templates": "^0.9.48",
    "regexparam": "^1.3.0",
    "shortid": "^2.2.15",
    "svelte-spa-router": "^3.0.5"
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/server",
  "email": "hi@budibase.com",
-  "version": "0.9.47",
+  "version": "0.9.48",
  "description": "Budibase Web Server",
  "main": "src/electron.js",
  "repository": {
@ -55,9 +55,9 @@
  "author": "Budibase",
  "license": "AGPL-3.0-or-later",
  "dependencies": {
-    "@budibase/auth": "^0.9.47",
-    "@budibase/client": "^0.9.47",
-    "@budibase/string-templates": "^0.9.47",
+    "@budibase/auth": "^0.9.48",
+    "@budibase/client": "^0.9.48",
+    "@budibase/string-templates": "^0.9.48",
    "@elastic/elasticsearch": "7.10.0",
    "@koa/router": "8.0.0",
    "@sendgrid/mail": "7.1.1",
@ -109,7 +109,7 @@
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.47",
+    "@budibase/standard-components": "^0.9.48",
    "@jest/test-sequencer": "^24.8.0",
    "babel-jest": "^27.0.2",
    "docker-compose": "^0.23.6",
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@ -2,8 +2,6 @@
  export let title = ""
  export let favicon = ""

-  export let appId
-  export let production
  export let clientLibPath
 </script>

--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@ -4,7 +4,6 @@ const {
  getUserMetadataParams,
 } = require("../../db/utils")
 const { InternalTables } = require("../../db/utils")
-const { addAppRoleToUser } = require("../../utilities/workerRequests")
 const { getGlobalUsers } = require("../../utilities/global")
 const { getFullUser } = require("../../utilities/users")

@ -53,9 +52,6 @@ exports.updateMetadata = async function (ctx) {
  const appId = ctx.appId
  const db = new CouchDB(appId)
  const user = removeGlobalProps(ctx.request.body)
-  if (user.roleId) {
-    await addAppRoleToUser(ctx, appId, user.roleId, user._id)
-  }
  const metadata = {
    tableId: InternalTables.USER_METADATA,
    ...user,