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

.eslintignore

@@ -1 +1,6 @@
-packages/server/builder/**/*.js
+node_modules
+public
+dist
+packages/server/builder
+packages/server/coverage
+packages/builder/.routify

.eslintrc.json

@@ -11,17 +11,22 @@
     "sourceType": "module",
     "allowImportExportEverywhere": true
   },
-  "ignorePatterns": ["node_modules", "dist", "public", "*.spec.js", "bundle.js"],
+  "ignorePatterns": [
-  "plugins": ["prettier", "svelte3"],
+    "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"
   }
-}
+}

.gitignore

@@ -88,3 +88,7 @@ hosting/.generated-envoy.dev.yaml
 
 # swap files (linux)
 *.swp
+
+# Sublime text
+*.sublime-project
+*.sublime-workspace

.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

.prettierrc → .prettierrc.json

@@ -6,5 +6,5 @@
   "arrowParens": "avoid",
   "jsxBracketSameLine": false,
   "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder" : "options-scripts-markup-styles"
+  "svelteSortOrder": "options-scripts-markup-styles"
-}
+}

lerna.json

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

package.json

@@ -4,14 +4,13 @@
   "devDependencies": {
     "@rollup/plugin-json": "^4.0.2",
     "babel-eslint": "^10.0.3",
-    "eslint": "^6.8.0",
+    "eslint": "^7.28.0",
-    "eslint-plugin-cypress": "^2.11.1",
+    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-svelte3": "^3.2.0",
-    "eslint-plugin-svelte3": "^2.7.3",
     "kill-port": "^1.6.1",
     "lerna": "3.14.1",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.1",
-    "prettier-plugin-svelte": "^2.2.0",
+    "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:eslint": "eslint packages",
-    "lint:fix": "eslint --fix packages",
+    "lint:prettier": "prettier --check \"packages/**/*.{js,svelte}\"",
-    "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,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 -",

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",

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",

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)}

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

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"
+          <label for={fieldId} class="spectrum-Link">
-            >Select a file to upload</label
+            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);

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}

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

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}

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

packages/bbui/src/Form/Multiselect.svelte

@@ -25,6 +25,7 @@
   <Multiselect
     {error}
     {disabled}
+    {readonly}
     {value}
     {options}
     {placeholder}

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

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>
 

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>

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"
 

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"
 

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,

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

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/bbui": "^0.9.48",
-    "@budibase/client": "^0.9.47",
+    "@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",

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

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(
+      const idx =
-        x => x.id === block.id
+        state.selectedAutomation.automation.definition.steps.findIndex(
-      )
+          x => x.id === block.id
+        )
       state.selectedAutomation.deleteBlock(block.id)
 
       // Select next closest step

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
         )
       }

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>

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>

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
 

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

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);
   }

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

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 =

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,

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}

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
 

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)

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 =

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({

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

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 = ""

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>

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
 

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

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -59,9 +59,7 @@
         <section>
           <Heading size="XS">Columns</Heading>
           <ul>
-            {#each context.filter(context =>
+            {#each context.filter( context => context.readableBinding.match(searchRgx) ) as { readableBinding }}
-              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 =>
+            {#each instance.filter( instance => instance.readableBinding.match(searchRgx) ) as { readableBinding }}
-              instance.readableBinding.match(searchRgx)
-            ) as { readableBinding }}
               <li on:click={() => addToText(readableBinding)}>
                 {readableBinding}
               </li>

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 =>
+          {#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
-            binding.label.match(searchRgx)
-          ) as binding}
             <div
               class="binding"
               on:click={() => {

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

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 = []
 

packages/builder/src/components/deploy/DeployModal.svelte

@@ -14,7 +14,6 @@
 
   const POLL_INTERVAL = 10000
 
-  let loading = false
   let feedbackModal
   let deployments = []
   let poll

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);

packages/builder/src/components/deploy/RevertModal.svelte

@@ -1,14 +1,6 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { Icon, Modal, notifications, ModalContent } from "@budibase/bbui"
-  import {
-    Button,
-    Icon,
-    Modal,
-    notifications,
-    ModalContent,
-  } from "@budibase/bbui"
   import { store } from "builderStore"
-  import { apps } from "stores/portal"
   import api from "builderStore/api"
 
   let revertModal

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"

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>

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { store } from "builderStore"
-  import { store, currentAssetId } from "builderStore"
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"

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">

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>

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
   )

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)} }}`

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)
+    const source = $datasources.list.find(
-      .source
+      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;

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)
+    const source = $datasources.list.find(
-      .source
+      ds => ds._id === query.datasourceId
+    ).source
     return $integrations[source].query[query.queryVerb]
   }
 </script>

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>
 

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()

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()
 

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
 

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">

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(

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)

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()

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,

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte

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

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 ?? []

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>

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) {

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;

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;
   }

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

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">

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>

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
   ) || {

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."

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"
 

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">

packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte

@@ -35,8 +35,4 @@
   .inner p {
     margin: 0;
   }
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
 </style>

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>

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 />

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">

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>

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()

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 => ({
+  $: appList = Object.keys($apps?.data).map(id => {
-    ...$apps?.data?.[id],
+    const role = $userFetch?.data?.roles?.[id] || defaultRoleId
-    _id: id,
+    return {
-    role: [$userFetch?.data?.roles?.[id]],
+      ...$apps?.data?.[id],
-  }))
+      _id: id,
+      role: [role],
+    }
+  })
   let selectedApp
 
   const userFetch = fetchData(`/api/admin/users/${userId}`)

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"

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 { auth } from "stores/portal"
-  import { post, get } from "builderStore/api"
-  import analytics from "analytics"
-  import { writable } from "svelte/store"
   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",
         },

packages/builder/src/stores/backend/tests/fixtures/queries.js

@@ -9,8 +9,7 @@ export const SOME_QUERY = {
   queryVerb: "read",
   schema: {},
   name: "Speakers",
-  _id:
+  _id: "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
-    "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
   _rev: "2-941f8699eb0adf995f8bd59c99203b26",
   readable: true,
 }
@@ -75,8 +74,7 @@ export const SAVE_QUERY_RESPONSE = {
     },
   },
   name: "Speakers",
-  _id:
+  _id: "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
-    "query_datasource_04b003a7b4a8428eadd3bb2f7eae0255_bcb8ffc6fcbc484e8d63121fc0bf986f",
   _rev: "3-5a64adef494b1e9c793dc91b51ce73c6",
   readable: true,
 }

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": {

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/bbui": "^0.9.48",
-    "@budibase/standard-components": "^0.9.47",
+    "@budibase/standard-components": "^0.9.48",
-    "@budibase/string-templates": "^0.9.47",
+    "@budibase/string-templates": "^0.9.48",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"

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/auth": "^0.9.48",
-    "@budibase/client": "^0.9.47",
+    "@budibase/client": "^0.9.48",
-    "@budibase/string-templates": "^0.9.47",
+    "@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",

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>
 

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,