Merge branch 'develop' into api-tests-generate-tenants

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,7 +6,7 @@ labels: bug
 assignees: ''
 
 ---
-## Checklist
+**Checklist**
 - [ ] I have searched budibase discussions and github issues to check if my issue already exists
 
 **Hosting**

hosting/docker-compose.dev.yaml

@@ -6,7 +6,8 @@ services:
   minio-service:
     container_name: budi-minio-dev
     restart: on-failure
-    image: minio/minio
+    # Last version that supports the "fs" backend
+    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
     volumes:
       - minio_data:/data
     ports:

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/backend-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@budibase/nano": "10.1.1",
-    "@budibase/types": "2.2.12-alpha.21",
+    "@budibase/types": "2.2.12-alpha.44",
     "@shopify/jest-koa-mocks": "5.0.1",
     "@techpass/passport-openidconnect": "0.3.2",
     "aws-cloudfront-sign": "2.2.0",

packages/bbui/package.json

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

packages/bbui/src/Accordion/Accordion.svelte

@@ -0,0 +1,58 @@
+<script>
+  import "@spectrum-css/accordion"
+
+  export let itemName
+  export let initialOpen
+  export let header
+
+  let isOpen
+
+  function getOpenClass(isOpen) {
+    if (isOpen === undefined) {
+      isOpen = initialOpen
+    }
+    return isOpen ? "is-open" : ""
+  }
+</script>
+
+<div class="spectrum-Accordion" role={itemName}>
+  <div class="spectrum-Accordion-item {getOpenClass(isOpen)}">
+    <h3 class="spectrum-Accordion-itemHeading">
+      <button
+        class="spectrum-Accordion-itemHeader"
+        type="button"
+        on:click={() => (isOpen = !isOpen)}
+      >
+        {header}
+      </button>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </h3>
+    <div class="spectrum-Accordion-itemContent" role={itemName}>
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .spectrum-Accordion {
+    margin-left: -20px;
+  }
+  .spectrum-Accordion-item {
+    border: none;
+  }
+  .spectrum-Accordion-itemContent {
+    width: 97%;
+    padding-left: 30px;
+  }
+  .spectrum-Accordion-itemHeader {
+    text-transform: none;
+    font-weight: bold;
+    font-size: 0.875rem;
+  }
+</style>

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -88,6 +88,7 @@
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-700);
   }
   .noPadding {
     padding: 0;

packages/bbui/src/Actions/click_outside.js

@@ -1,11 +1,11 @@
-const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
 let clickHandlers = []
 
 /**
  * Handle a body click event
  */
 const handleClick = event => {
-  // Ignore click if needed
+  // Ignore click if this is an ignored class
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -14,9 +14,18 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    if (!handler.element.contains(event.target)) {
+    if (handler.element.contains(event.target)) {
-      handler.callback?.(event)
+      return
     }
+
+    // Ignore clicks for modals, unless the handler is registered from a modal
+    const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null
+    const clickInModal = event.target.closest(".spectrum-Modal") != null
+    if (clickInModal && !sourceInModal) {
+      return
+    }
+
+    handler.callback?.(event)
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)
@@ -24,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true)
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, callback) => {
+const updateHandler = (id, element, anchor, callback) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
-    clickHandlers.push({ id, element, callback })
+    clickHandlers.push({ id, element, anchor, callback })
   } else {
     existingHandler.callback = callback
   }
@@ -42,12 +51,22 @@ const removeHandler = id => {
 
 /**
  * Svelte action to apply a click outside handler for a certain element
+ * opts.anchor is an optional param specifying the real root source of the
+ * component being observed. This is required for things like popovers, where
+ * the element using the clickoutside action is the popover, but the popover is
+ * rendered at the root of the DOM somewhere, whereas the popover anchor is the
+ * element we actually want to consider when determining the source component.
  */
-export default (element, callback) => {
+export default (element, opts) => {
   const id = Math.random()
-  updateHandler(id, element, callback)
+  const update = newOpts => {
+    const callback = newOpts?.callback || newOpts
+    const anchor = newOpts?.anchor || element
+    updateHandler(id, element, anchor, callback)
+  }
+  update(opts)
   return {
-    update: newCallback => updateHandler(id, element, newCallback),
+    update,
     destroy: () => removeHandler(id),
   }
 }

packages/bbui/src/Actions/position_dropdown.js

@@ -1,75 +1,68 @@
-export default function positionDropdown(element, { anchor, align, maxWidth }) {
+export default function positionDropdown(
-  let positionSide = "top"
+  element,
-  let maxHeight = 0
+  { anchor, align, maxWidth, useAnchorWidth }
-  let dimensions = getDimensions(anchor)
+) {
+  const update = () => {
+    const anchorBounds = anchor.getBoundingClientRect()
+    const elementBounds = element.getBoundingClientRect()
+    let styles = {
+      maxHeight: null,
+      minWidth: null,
+      maxWidth,
+      left: null,
+      top: null,
+    }
 
-  function getDimensions() {
+    // Determine vertical styles
-    const {
+    if (window.innerHeight - anchorBounds.bottom < 100) {
-      bottom,
+      styles.top = anchorBounds.top - elementBounds.height - 5
-      top: spaceAbove,
-      left,
-      width,
-    } = anchor.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - bottom
-    const containerRect = element.getBoundingClientRect()
-
-    let y
-
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove + 5
     } else {
-      positionSide = "top"
+      styles.top = anchorBounds.bottom + 5
-      y = bottom + 5
+      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
-      maxHeight = spaceBelow - 20
     }
 
-    return {
+    // Determine horizontal styles
-      [positionSide]: y,
+    if (!maxWidth && useAnchorWidth) {
-      left,
+      styles.maxWidth = anchorBounds.width
-      width,
-      containerWidth: containerRect.width,
     }
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
+    }
+    if (align === "right") {
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-side") {
+      styles.left = anchorBounds.left + anchorBounds.width
+    } else {
+      styles.left = anchorBounds.left
+    }
+
+    // Apply styles
+    Object.entries(styles).forEach(([style, value]) => {
+      if (value) {
+        element.style[style] = `${value.toFixed(0)}px`
+      } else {
+        element.style[style] = null
+      }
+    })
   }
 
-  function calcLeftPosition() {
+  // Apply initial styles which don't need to change
-    let left
-
-    if (align == "right") {
-      left = dimensions.left + dimensions.width - dimensions.containerWidth
-    } else if (align == "right-side") {
-      left = dimensions.left + dimensions.width
-    } else {
-      left = dimensions.left
-    }
-
-    return left
-  }
-
   element.style.position = "absolute"
   element.style.zIndex = "9999"
-  if (maxWidth) {
-    element.style.maxWidth = `${maxWidth}px`
-  }
-  element.style.minWidth = `${dimensions.width}px`
-  element.style.maxHeight = `${maxHeight.toFixed(0)}px`
-  element.style.transformOrigin = `center ${positionSide}`
-  element.style[positionSide] = `${dimensions[positionSide]}px`
-  element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
 
+  // Observe both anchor and element and resize the popover as appropriate
   const resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(() => {
+    entries.forEach(update)
-      dimensions = getDimensions()
-      element.style[positionSide] = `${dimensions[positionSide]}px`
-      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
-    })
   })
   resizeObserver.observe(anchor)
   resizeObserver.observe(element)
+
+  document.addEventListener("scroll", update, true)
+
   return {
     destroy() {
       resizeObserver.disconnect()
+      document.removeEventListener("scroll", update, true)
     },
   }
 }

packages/bbui/src/Avatar/Avatar.svelte

@@ -58,5 +58,6 @@
     overflow: hidden;
     user-select: none;
     text-transform: uppercase;
+    flex-shrink: 0;
   }
 </style>

packages/bbui/src/Button/Button.svelte

@@ -14,7 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
-  export let newStyles = false
+  export let newStyles = true
 
   let showTooltip = false
 </script>
@@ -28,6 +28,7 @@
   class:spectrum-Button--quiet={quiet}
   class:new-styles={newStyles}
   class:active
+  class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   data-cy={dataCy}
@@ -108,7 +109,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
+  .spectrum-Button--secondary.new-styles.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
 </style>

packages/bbui/src/Drawer/DrawerContent.svelte

@@ -34,7 +34,6 @@
     display: none;
   }
   .main {
-    font-family: var(--font-sans);
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {

packages/bbui/src/FancyForm/FancyButton.svelte

@@ -0,0 +1,30 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import FancyField from "./FancyField.svelte"
+
+  export let icon
+  export let disabled
+</script>
+
+<FancyField on:click clickable {disabled}>
+  {#if icon}
+    {#if icon.includes("/")}
+      <img src={icon} alt="button" />
+    {:else}
+      <Icon name={icon} />
+    {/if}
+  {/if}
+  <slot name="icon" />
+  <div>
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  img {
+    width: 22px;
+  }
+  div {
+    font-size: var(--font-size-l);
+  }
+</style>

packages/bbui/src/FancyForm/FancyButtonRadio.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} autoHeight>
+  {#if label}
+    <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="options">
+    {#each options as option}
+      <ActionButton
+        selected={getOptionValue(option) === value}
+        on:click={() => onChange(getOptionValue(option))}
+      >
+        {getOptionLabel(option)}
+      </ActionButton>
+    {/each}
+  </div>
+</FancyField>
+
+<style>
+  .options {
+    margin-top: 34px;
+    margin-bottom: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .options :global(.spectrum-ActionButton) {
+    font-size: 15px;
+    line-height: 17px;
+    height: auto;
+    padding: 6px 10px;
+  }
+</style>

packages/bbui/src/FancyForm/FancyCheckbox.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Checkbox from "../Form/Core/Checkbox.svelte"
+
+  export let value
+  export let text
+  export let disabled = false
+  export let error = null
+  export let validate = null
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = () => {
+    const newValue = !value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
+  <span>
+    <Checkbox {disabled} {value} />
+  </span>
+  <div class="text">
+    {#if text}
+      {text}
+    {/if}
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  span {
+    pointer-events: none;
+  }
+  .text {
+    font-size: 15px;
+    line-height: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .text > :global(*) {
+    font-size: inherit !important;
+  }
+</style>

packages/bbui/src/FancyForm/FancyField.svelte

@@ -0,0 +1,126 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
+  import { slide } from "svelte/transition"
+
+  export let disabled = false
+  export let error = null
+  export let focused = false
+  export let clickable = false
+  export let validate
+  export let value
+  export let ref
+  export let autoHeight
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
+</script>
+
+<div
+  bind:this={ref}
+  class="fancy-field"
+  class:error
+  class:disabled
+  class:focused
+  class:clickable
+  class:auto-height={autoHeight}
+>
+  <div class="content" on:click>
+    <div class="field">
+      <slot />
+    </div>
+    {#if error}
+      <div class="error-icon">
+        <Icon name="Alert" />
+      </div>
+    {/if}
+  </div>
+  {#if error}
+    <div transition:slide|local={{ duration: 130 }} class="error-message">
+      {error}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fancy-field {
+    max-width: 400px;
+    background: var(--spectrum-global-color-gray-75);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: border-color 130ms ease-out, background 130ms ease-out,
+      background 130ms ease-out;
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .fancy-field:hover {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .fancy-field.clickable:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .fancy-field.focused {
+    border-color: var(--spectrum-global-color-blue-400);
+  }
+  .fancy-field.error {
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .fancy-field.disabled {
+    background: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-400);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    pointer-events: none;
+  }
+  .content {
+    position: relative;
+    height: 64px;
+    padding: 0 16px;
+  }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
+  .content,
+  .field {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+  .field {
+    flex: 1 1 auto;
+  }
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+  .error-icon {
+    flex: 0 0 auto;
+  }
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+</style>

packages/bbui/src/FancyForm/FancyFieldLabel.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let placeholder = true
+</script>
+
+<div class:placeholder>
+  <slot />
+</div>
+
+<style>
+  div {
+    font-size: 14px;
+    line-height: 15px;
+    font-weight: 500;
+    position: absolute;
+    top: 10px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out,
+      transform 130ms ease-out;
+  }
+  div.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+</style>

packages/bbui/src/FancyForm/FancyForm.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { setContext } from "svelte"
+
+  let fields = {}
+
+  setContext("fancy-form", {
+    registerField: (id, api) => {
+      fields = { ...fields, [id]: api }
+    },
+    unregisterField: id => {
+      delete fields[id]
+      fields = fields
+    },
+  })
+
+  export const validate = () => {
+    let valid = true
+    Object.values(fields).forEach(api => {
+      if (!api.validate()) {
+        valid = false
+      }
+    })
+    return valid
+  }
+</script>
+
+<div class="fancy-form">
+  <slot />
+</div>
+
+<style>
+  .fancy-form :global(.fancy-field:not(:first-of-type)) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .fancy-form :global(.fancy-field:not(:last-of-type)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+</style>

packages/bbui/src/FancyForm/FancyInput.svelte

@@ -0,0 +1,77 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import { fade } from "svelte/transition"
+
+  export let label
+  export let value
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let suffix = null
+
+  const dispatch = createEventDispatcher()
+
+  let focused = false
+  $: placeholder = !focused && !value
+
+  const onChange = e => {
+    const newValue = e.target.value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} {focused}>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+  <input
+    {disabled}
+    value={value || ""}
+    type={type || "text"}
+    on:input={onChange}
+    on:focus={() => (focused = true)}
+    on:blur={() => (focused = false)}
+    class:placeholder
+  />
+  {#if suffix && !placeholder}
+    <div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
+  {/if}
+</FancyField>
+
+<style>
+  input {
+    width: 100%;
+    transition: transform 130ms ease-out;
+    transform: translateY(9px);
+    background: transparent;
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+    color: var(--spectrum-global-color-gray-900);
+    outline: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  input.placeholder {
+    transform: translateY(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+  .suffix {
+    color: var(--spectrum-global-color-gray-600);
+    transform: translateY(9px);
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+  }
+</style>

packages/bbui/src/FancyForm/FancySelect.svelte

@@ -0,0 +1,147 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+  let popover
+  let wrapper
+
+  $: placeholder = !value
+  $: selectedLabel = getSelectedLabel(value)
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+    open = false
+  }
+
+  const getSelectedLabel = value => {
+    if (!value || !options?.length) {
+      return ""
+    }
+    const selectedOption = options.find(x => getOptionValue(x) === value)
+    if (!selectedOption) {
+      return value
+    }
+    return getOptionLabel(selectedOption)
+  }
+</script>
+
+<FancyField
+  bind:ref={wrapper}
+  {error}
+  {value}
+  {validate}
+  {disabled}
+  clickable
+  on:click={() => (open = true)}
+>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="value" class:placeholder>
+    {selectedLabel || ""}
+  </div>
+
+  <div class="arrow">
+    <Icon name="ChevronDown" />
+  </div>
+</FancyField>
+
+<Popover
+  anchor={wrapper}
+  align="left"
+  portalTarget={document.documentElement}
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={true}
+  maxWidth={null}
+>
+  <div class="popover-content">
+    {#if options.length}
+      {#each options as option, idx}
+        <div
+          class="popover-option"
+          tabindex="0"
+          on:click={() => onChange(getOptionValue(option, idx))}
+        >
+          <span class="option-text">
+            {getOptionLabel(option, idx)}
+          </span>
+          {#if value === getOptionValue(option, idx)}
+            <Icon name="Checkmark" />
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</Popover>
+
+<style>
+  .value {
+    display: block;
+    flex: 1 1 auto;
+    font-size: 15px;
+    line-height: 17px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    opacity: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
+    transform: translateY(9px);
+  }
+  .value.placeholder {
+    transform: translateY(0);
+    opacity: 0;
+    pointer-events: none;
+    margin-top: 0;
+  }
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 7px 0;
+  }
+  .popover-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 7px 16px;
+    transition: background 130ms ease-out;
+    font-size: 15px;
+  }
+  .popover-option:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

packages/bbui/src/FancyForm/index.js

@@ -0,0 +1,6 @@
+export { default as FancyInput } from "./FancyInput.svelte"
+export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"
+export { default as FancyButton } from "./FancyButton.svelte"
+export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -264,7 +264,7 @@
     max-height: 100%;
   }
   :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
   }
   .is-disabled {
     pointer-events: none !important;

packages/bbui/src/Form/Core/Picker.svelte

@@ -2,12 +2,12 @@
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
+  import Popover from "../../Popover/Popover.svelte"
 
   export let id = null
   export let disabled = false
@@ -33,7 +33,10 @@
   export let sort = false
 
   const dispatch = createEventDispatcher()
+
   let searchTerm = null
+  let button
+  let popover
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -42,7 +45,9 @@
     getOptionLabel
   )
 
-  const onClick = () => {
+  const onClick = e => {
+    e.preventDefault()
+    e.stopPropagation()
     dispatch("click")
     if (readonly) {
       return
@@ -76,77 +81,119 @@
   }
 </script>
 
-<div use:clickOutside={() => (open = false)}>
+<button
-  <button
+  {id}
-    {id}
+  class="spectrum-Picker spectrum-Picker--sizeM"
-    class="spectrum-Picker spectrum-Picker--sizeM"
+  class:spectrum-Picker--quiet={quiet}
-    class:spectrum-Picker--quiet={quiet}
+  {disabled}
-    {disabled}
+  class:is-invalid={!!error}
-    class:is-invalid={!!error}
+  class:is-open={open}
-    class:is-open={open}
+  aria-haspopup="listbox"
-    aria-haspopup="listbox"
+  on:click={onClick}
-    on:click={onClick}
+  bind:this={button}
-  >
+>
-    {#if fieldIcon}
+  {#if fieldIcon}
-      <span class="option-extra">
+    <span class="option-extra icon">
-        <Icon name={fieldIcon} />
+      <Icon size="S" name={fieldIcon} />
-      </span>
-    {/if}
-    {#if fieldColour}
-      <span class="option-extra">
-        <StatusLight square color={fieldColour} />
-      </span>
-    {/if}
-    <span
-      class="spectrum-Picker-label"
-      class:is-placeholder={isPlaceholder}
-      class:auto-width={autoWidth}
-    >
-      {fieldText}
     </span>
-    {#if error}
+  {/if}
-      <svg
+  {#if fieldColour}
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+    <span class="option-extra">
-        focusable="false"
+      <StatusLight square color={fieldColour} />
-        aria-hidden="true"
+    </span>
-        aria-label="Folder"
+  {/if}
-      >
+  <span
-        <use xlink:href="#spectrum-icon-18-Alert" />
+    class="spectrum-Picker-label"
-      </svg>
+    class:is-placeholder={isPlaceholder}
-    {/if}
+    class:auto-width={autoWidth}
+  >
+    {fieldText}
+  </span>
+  {#if error}
     <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
       focusable="false"
       aria-hidden="true"
+      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
+      <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
-  </button>
+  {/if}
-  {#if open}
+  <svg
-    <div
+    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-      transition:fly|local={{ y: -20, duration: 200 }}
+    focusable="false"
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    aria-hidden="true"
-      class:auto-width={autoWidth}
+  >
-    >
+    <use xlink:href="#spectrum-css-icon-Chevron100" />
-      {#if autocomplete}
+  </svg>
-        <Search
+</button>
-          value={searchTerm}
+
-          on:change={event => (searchTerm = event.detail)}
+<Popover
-          {disabled}
+  anchor={button}
-          placeholder="Search"
+  align="left"
-        />
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={!autoWidth}
+  maxWidth={autoWidth ? 400 : null}
+>
+  <div
+    class="popover-content"
+    class:auto-width={autoWidth}
+    use:clickOutside={() => (open = false)}
+  >
+    {#if autocomplete}
+      <Search
+        value={searchTerm}
+        on:change={event => (searchTerm = event.detail)}
+        {disabled}
+        placeholder="Search"
+      />
+    {/if}
+    <ul class="spectrum-Menu" role="listbox">
+      {#if placeholderOption}
+        <li
+          class="spectrum-Menu-item placeholder"
+          class:is-selected={isPlaceholder}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => onSelectOption(null)}
+        >
+          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          </svg>
+        </li>
       {/if}
-      <ul class="spectrum-Menu" role="listbox">
+      {#if filteredOptions.length}
-        {#if placeholderOption}
+        {#each filteredOptions as option, idx}
           <li
-            class="spectrum-Menu-item placeholder"
+            class="spectrum-Menu-item"
-            class:is-selected={isPlaceholder}
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(null)}
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
+            class:is-disabled={!isOptionEnabled(option)}
           >
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            {#if getOptionIcon(option, idx)}
+              <span class="option-extra icon">
+                <Icon size="S" name={getOptionIcon(option, idx)} />
+              </span>
+            {/if}
+            {#if getOptionColour(option, idx)}
+              <span class="option-extra">
+                <StatusLight square color={getOptionColour(option, idx)} />
+              </span>
+            {/if}
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -155,61 +202,13 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/if}
+        {/each}
-        {#if filteredOptions.length}
+      {/if}
-          {#each filteredOptions as option, idx}
+    </ul>
-            <li
+  </div>
-              class="spectrum-Menu-item"
+</Popover>
-              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onSelectOption(getOptionValue(option, idx))}
-              class:is-disabled={!isOptionEnabled(option)}
-            >
-              {#if getOptionIcon(option, idx)}
-                <span class="option-extra">
-                  <Icon name={getOptionIcon(option, idx)} />
-                </span>
-              {/if}
-              {#if getOptionColour(option, idx)}
-                <span class="option-extra">
-                  <StatusLight square color={getOptionColour(option, idx)} />
-                </span>
-              {/if}
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
-              </span>
-              <svg
-                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                focusable="false"
-                aria-hidden="true"
-              >
-                <use xlink:href="#spectrum-css-icon-Checkmark100" />
-              </svg>
-            </li>
-          {/each}
-        {/if}
-      </ul>
-    </div>
-  {/if}
-</div>
 
 <style>
-  .spectrum-Popover {
-    max-height: 240px;
-    z-index: 999;
-    top: 100%;
-  }
-  .spectrum-Popover:not(.auto-width) {
-    width: 100%;
-  }
-  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
-    max-width: 400px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
@@ -229,9 +228,6 @@
   .spectrum-Picker-label.auto-width.is-placeholder {
     padding-right: 2px;
   }
-  .auto-width .spectrum-Menu-item {
-    padding-right: var(--spacing-xl);
-  }
 
   /* Icon and colour alignment */
   .spectrum-Menu-checkmark {
@@ -241,27 +237,48 @@
   .option-extra {
     padding-right: 8px;
   }
+  .option-extra.icon {
+    margin: 0 -1px;
+  }
 
-  .spectrum-Popover :global(.spectrum-Search) {
+  /* Popover */
+  .popover-content {
+    display: contents;
+  }
+  .popover-content.auto-width .spectrum-Menu-itemLabel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .popover-content.auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
+  .spectrum-Menu-item.is-disabled {
+    pointer-events: none;
+  }
+
+  /* Search styles inside popover */
+  .popover-content :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;
     width: calc(100% + 2px);
   }
-  .spectrum-Popover :global(.spectrum-Search input) {
+  .popover-content :global(.spectrum-Search input) {
     height: auto;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding-top: var(--spectrum-global-dimension-size-100);
     padding-bottom: var(--spectrum-global-dimension-size-100);
   }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
+  .popover-content :global(.spectrum-Search .spectrum-ClearButton) {
     right: 1px;
     top: 2px;
   }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
+  .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
-  .spectrum-Menu-item.is-disabled {
-    pointer-events: none;
-  }
 </style>

packages/bbui/src/Form/Core/Select.svelte

@@ -18,8 +18,11 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+
   const dispatch = createEventDispatcher()
+
   let open = false
+
   $: fieldText = getFieldText(value, options, placeholder)
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)

packages/bbui/src/Form/Core/TextField.svelte

@@ -112,8 +112,4 @@
   .spectrum-Textfield {
     width: 100%;
   }
-  input:disabled {
-    color: var(--spectrum-global-color-gray-600) !important;
-    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
-  }
 </style>

packages/bbui/src/Icon/IconAvatar.svelte

@@ -19,6 +19,7 @@
   .icon {
     width: 28px;
     height: 28px;
+    flex: 0 0 28px;
     display: grid;
     place-items: center;
     border-radius: 50%;
@@ -34,6 +35,7 @@
   .icon.size--S {
     width: 22px;
     height: 22px;
+    flex: 0 0 22px;
   }
   .icon.size--S :global(.spectrum-Icon) {
     width: 16px;
@@ -46,6 +48,7 @@
   .icon.size--L {
     width: 40px;
     height: 40px;
+    flex: 0 0 40px;
   }
   .icon.size--L :global(.spectrum-Icon) {
     width: 28px;

packages/bbui/src/InlineAlert/InlineAlert.svelte

@@ -56,5 +56,6 @@
     --spectrum-semantic-positive-icon-color: #2d9d78;
     --spectrum-semantic-negative-icon-color: #e34850;
     min-width: 100px;
+    margin: 0;
   }
 </style>

packages/bbui/src/Label/Label.svelte

@@ -21,6 +21,7 @@
   label {
     padding: 0;
     white-space: nowrap;
+    color: var(--spectrum-global-color-gray-600);
   }
 
   .muted {

packages/bbui/src/Layout/Page.svelte

@@ -1,32 +1,101 @@
 <script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
   export let wide = false
-  export let maxWidth = "80ch"
+  export let narrow = false
   export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide class:noPadding>
+<div class="page">
-  <slot />
+  <div class="main">
+    <div class="content" class:wide class:noPadding class:narrow>
+      <slot />
+      <div class="fix-scroll-padding" />
+    </div>
+  </div>
+  <div
+    id="side-panel"
+    class:visible={sidePanelVisble}
+    use:clickOutside={() => {
+      sidePanelVisble = false
+    }}
+  >
+    <slot name="side-panel" />
+  </div>
 </div>
 
 <style>
-  div {
+  .page {
+    position: relative;
+  }
+  .page,
+  .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+  }
+  .main {
+    overflow: auto;
+  }
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 1080px;
     margin: 0 auto;
-    padding: calc(var(--spacing-xl) * 2);
+    flex: 1 1 auto;
-    min-height: calc(100% - var(--spacing-xl) * 4);
+    padding: 50px 50px 0 50px;
+    z-index: 1;
   }
-
+  .fix-scroll-padding {
-  .wide {
+    content: "";
+    display: block;
+    flex: 0 0 50px;
+  }
+  .content.wide {
     max-width: none;
-    margin: 0;
+  }
+  .content.narrow {
+    max-width: 840px;
+  }
+  #side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 24px;
+    background: var(--background);
+    border-left: var(--border-light);
+    width: 320px;
+    max-width: calc(100vw - 48px - 48px);
+    overflow: auto;
+    overflow-x: hidden;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+    height: calc(100% - 48px);
+    z-index: 2;
+  }
+  #side-panel.visible {
+    transform: translateX(0);
   }
 
-  .noPadding {
+  @media (max-width: 640px) {
-    padding: 0px;
+    .content {
-    margin: 0px;
+      padding: 24px;
+      max-width: calc(100vw - 48px) !important;
+      width: calc(100vw - 48px) !important;
+      overflow: auto;
+    }
   }
 </style>

packages/bbui/src/Link/Link.svelte

@@ -1,5 +1,6 @@
 <script>
   import "@spectrum-css/link/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
 
   export let href = "#"
   export let size = "M"
@@ -9,10 +10,12 @@
   export let overBackground = false
   export let target
   export let download
+
+  const dispatch = createEventDispatcher()
 </script>
 
 <a
-  on:click
+  on:click={e => dispatch("click") && e.stopPropagation()}
   {href}
   {target}
   {download}

packages/bbui/src/List/ListItem.svelte

@@ -30,9 +30,11 @@
       <Label>{subtitle}</Label>
     {/if}
   </div>
-  <div class="right">
+  {#if $$slots.default}
-    <slot />
+    <div class="right">
-  </div>
+      <slot />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -45,6 +47,7 @@
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
     transition: background 130ms ease-out;
+    gap: var(--spacing-m);
   }
   .list-item:not(:first-child) {
     border-top: none;

packages/bbui/src/Modal/CustomContent.svelte

@@ -26,7 +26,6 @@
     padding: 40px;
     background-color: var(--purple);
     color: white;
-    font-family: var(--font-sans);
     font-weight: bold;
     text-align: center;
     user-select: none;

packages/bbui/src/Modal/Modal.svench

@@ -19,7 +19,6 @@
 
 <style>
   p, span {
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
 

packages/bbui/src/Modal/ModalContent.svelte

@@ -104,7 +104,7 @@
         {/if}
 
         {#if showCancelButton}
-          <Button group secondary newStyles on:click={close}>
+          <Button group secondary on:click={close}>
             {cancelText}
           </Button>
         {/if}
@@ -151,7 +151,8 @@
     overflow: visible;
   }
   .spectrum-Dialog-heading {
-    font-family: var(--font-sans);
+    font-family: var(--font-accent);
+    font-weight: 600;
   }
   .spectrum-Dialog-heading.noDivider {
     margin-bottom: 12px;

packages/bbui/src/Modal/QuizModal.svelte

@@ -42,7 +42,6 @@
 <style>
   p {
     margin: 0;
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
   p.error {

packages/bbui/src/Popover/Popover.svelte

@@ -4,6 +4,9 @@
   import { createEventDispatcher } from "svelte"
   import positionDropdown from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import { getContext } from "svelte"
+  import Context from "../context"
 
   const dispatch = createEventDispatcher()
 
@@ -12,9 +15,10 @@
   export let portalTarget
   export let dataCy
   export let maxWidth
-
   export let direction = "bottom"
   export let showTip = false
+  export let open = false
+  export let useAnchorWidth = false
 
   let tipSvg =
     '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
@@ -22,6 +26,7 @@
   $: tooltipClasses = showTip
     ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
     : ""
+  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
   export const show = () => {
     dispatch("open")
@@ -35,13 +40,22 @@
 
   const handleOutsideClick = e => {
     if (open) {
-      e.stopPropagation()
+      // Stop propagation if the source is the anchor
+      let node = e.target
+      let fromAnchor = false
+      while (!fromAnchor && node && node.parentNode) {
+        fromAnchor = node === anchor
+        node = node.parentNode
+      }
+      if (fromAnchor) {
+        e.stopPropagation()
+      }
+
+      // Hide the popover
       hide()
     }
   }
 
-  let open = null
-
   function handleEscape(e) {
     if (open && e.key === "Escape") {
       hide()
@@ -50,15 +64,19 @@
 </script>
 
 {#if open}
-  <Portal target={portalTarget}>
+  <Portal {target}>
     <div
       tabindex="0"
-      use:positionDropdown={{ anchor, align, maxWidth }}
+      use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
-      use:clickOutside={handleOutsideClick}
+      use:clickOutside={{
+        callback: handleOutsideClick,
+        anchor,
+      }}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
       data-cy={dataCy}
+      transition:fly|local={{ y: -20, duration: 200 }}
     >
       {#if showTip}
         {@html tipSvg}

packages/bbui/src/Popover/Popover.svench

@@ -29,7 +29,6 @@
     font-size: var(--font-size-m);
     margin: 0 0 var(--spacing-l) 0;
     font-weight: 600;
-    font-family: var(--font-sans);
   }
 
   .input-group-column {

packages/bbui/src/Table/StringRenderer.svelte

@@ -1,8 +1,11 @@
 <script>
   export let value
+  export let schema
 </script>
 
-<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+<div class:capitalise={schema?.capitalise}>
+  {typeof value === "object" ? JSON.stringify(value) : value}
+</div>
 
 <style>
   div {
@@ -10,5 +13,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: var(--max-cell-width);
+    width: 0;
+    flex: 1 1 auto;
+  }
+  div.capitalise {
+    text-transform: capitalize;
   }
 </style>

packages/bbui/src/Table/Table.svelte

@@ -21,6 +21,8 @@
    * template: a HBS or JS binding to use as the value
    * background: the background color
    * color: the text color
+   * borderLeft: show a left border
+   * borderRight: show a right border
    */
   export let data = []
   export let schema = {}
@@ -31,6 +33,7 @@
   export let allowSelectRows
   export let allowEditRows = true
   export let allowEditColumns = true
+  export let allowClickRows = true
   export let selectedRows = []
   export let customRenderers = []
   export let disableSorting = false
@@ -270,6 +273,17 @@
       if (schema[field].align === "Right") {
         styles[field] += "justify-content: flex-end; text-align: right;"
       }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-left: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-right: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].minWidth) {
+        styles[field] += `min-width: ${schema[field].minWidth};`
+      }
     })
     return styles
   }
@@ -290,7 +304,11 @@
         </slot>
       </div>
     {:else}
-      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+      <div
+        class="spectrum-Table"
+        class:no-scroll={!rowCount}
+        style={`${heightStyle}${gridStyle}`}
+      >
         {#if fields.length}
           <div class="spectrum-Table-head">
             {#if showEditColumn}
@@ -356,7 +374,7 @@
         {/if}
         {#if sortedRows?.length}
           {#each sortedRows as row, idx}
-            <div class="spectrum-Table-row">
+            <div class="spectrum-Table-row" class:clickable={allowClickRows}>
               {#if showEditColumn}
                 <div
                   class:noBorderCheckbox={!showHeaderBorder}
@@ -433,10 +451,10 @@
   /* Wrapper */
   .wrapper {
     position: relative;
-    z-index: 0;
     --table-bg: var(--spectrum-global-color-gray-50);
     --table-border: 1px solid var(--spectrum-alias-border-color-mid);
     --cell-padding: var(--spectrum-global-dimension-size-250);
+    overflow: auto;
   }
   .wrapper--quiet {
     --table-bg: var(--spectrum-alias-background-color-transparent);
@@ -460,6 +478,9 @@
     display: grid;
     overflow: auto;
   }
+  .spectrum-Table.no-scroll {
+    overflow: visible;
+  }
 
   /* Header */
   .spectrum-Table-head {
@@ -546,12 +567,13 @@
   /* Table rows */
   .spectrum-Table-row {
     display: contents;
+    cursor: auto;
   }
-  .spectrum-Table-row:hover .spectrum-Table-cell {
+  .spectrum-Table-row.clickable {
-    /*background-color: var(--hover-bg) !important;*/
+    cursor: pointer;
   }
-  .spectrum-Table-row:hover .spectrum-Table-cell:after {
+  .spectrum-Table-row.clickable:hover .spectrum-Table-cell {
-    background-color: var(--spectrum-alias-highlight-hover);
+    background-color: var(--spectrum-global-color-gray-100);
   }
   .wrapper--quiet .spectrum-Table-row {
     border-left: none;
@@ -584,24 +606,13 @@
     border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
     background-color: var(--table-bg);
     z-index: auto;
+    transition: background-color 130ms ease-out;
   }
   .spectrum-Table-cell--edit {
     position: sticky;
     left: 0;
     z-index: 2;
   }
-  .spectrum-Table-cell:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    transition: background-color
-      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
-  }
 
   /* Placeholder  */
   .placeholder {

packages/bbui/src/Tabs/Tab.svelte

@@ -82,7 +82,8 @@
   .spectrum-Tabs-item {
     color: var(--spectrum-global-color-gray-600);
   }
-  .spectrum-Tabs-item.is-selected {
+  .spectrum-Tabs-item.is-selected,
+  .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
 </style>

packages/bbui/src/Tags/Tag.svelte

@@ -37,7 +37,7 @@
 
 <style>
   .spectrum-Tags-item {
-    margin-top: 0;
     margin-bottom: 0;
+    margin-top: 0;
   }
 </style>

packages/bbui/src/Tags/Tags.svelte

@@ -5,3 +5,13 @@
 <div class="spectrum-Tags" role="list" aria-label="list">
   <slot />
 </div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>

packages/bbui/src/Typography/Heading.svelte

@@ -15,3 +15,9 @@
 >
   <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>

packages/bbui/src/bbui.css

@@ -40,12 +40,14 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);
 
   font-size: 16px;
   --font-size-xs: 0.75rem;
@@ -89,6 +91,8 @@
   --border-light-2: 2px var(--grey-3) solid;
   --border-blue: 2px var(--blue) solid;
   --border-transparent: 2px transparent solid;
+
+  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
 }
 
 a {

packages/bbui/src/context.js

@@ -1,3 +1,4 @@
 export default {
   Modal: "bbui-modal",
+  PopoverRoot: "bbui-popover-root",
 }

packages/bbui/src/index.js

@@ -75,6 +75,7 @@ export { default as ListItem } from "./List/ListItem.svelte"
 export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
+export { default as Accordion } from "./Accordion/Accordion.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
@@ -101,3 +102,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"
+
+// Fancy form components
+export * from "./FancyForm"

packages/bbui/yarn.lock

@@ -109,6 +109,11 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@spectrum-css/accordion@3.0.24":
+  version "3.0.24"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74"
+  integrity sha512-jNOmUsxmiT3lRLButnN5KKHM94fd+87fjiF8L0c4uRNgJl6ZsBuxPXrM15lV4y1f8D2IACAw01/ZkGRAeaCOFA==
+
 "@spectrum-css/actionbutton@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"

packages/builder/assets/bb-emblem.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#393C44;}
+	.st0{fill:#000000;}
 	.st1{fill:#FFFFFF;}
 	.st2{fill:#4285F4;}
 </style>

packages/builder/cypress.json

@@ -11,9 +11,5 @@
     "WORKER_PORT": "4200",
     "JWT_SECRET": "test",
     "HOST_IP": ""
-  },
-  "retries": {
-    "runMode": 1,
-    "openMode": 0
   }
 }

packages/builder/cypress/integration/adminAndManagement/authentication.spec.js

@@ -2,7 +2,7 @@ import filterTests from "../../support/filterTests"
 // const interact = require("../support/interact")
 
 filterTests(["smoke", "all"], () => {
-  context("Auth Configuration", () => {
+  xcontext("Auth Configuration", () => {
     before(() => {
       cy.login()
     })
@@ -21,7 +21,7 @@ filterTests(["smoke", "all"], () => {
       cy.get("[data-cy=oidc-active]").should('not.be.checked')
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -45,7 +45,7 @@ filterTests(["smoke", "all"], () => {
       cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -85,11 +85,11 @@ filterTests(["smoke", "all"], () => {
       cy.get(".auth-form input.spectrum-Textfield-input").type("Another ")
       cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 6)
       cy.get(".spectrum-Tags-item").contains("Another")
-      
+
       cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -123,7 +123,7 @@ filterTests(["smoke", "all"], () => {
       cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -144,7 +144,7 @@ filterTests(["smoke", "all"], () => {
 
       cy.get("div.content").scrollTo("bottom")
 
-      cy.get("[data-cy=restore-oidc-default-scopes]").click({force: true})
+      cy.get("[data-cy=restore-oidc-default-scopes]").click({ force: true })
 
       cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 4)
 

packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js

@@ -3,107 +3,112 @@ const interact = require('../../support/interact')
 
 filterTests(["smoke", "all"], () => {
   context("User Settings Menu", () => {
-    
+
     before(() => {
       cy.login()
     })
-    
+
     it("should update user information via user settings menu", () => {
-        const fname = "test"
+      const fname = "test"
-        const lname = "user"
+      const lname = "user"
 
-        cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.updateUserInformation(fname, lname)
+      cy.updateUserInformation(fname, lname)
 
-        // Go to user info and confirm name update
+      // Go to user info and confirm name update
-        cy.contains("Users").click()
+      cy.contains("Users").click()
-        cy.contains("test@test.com").click()
+      cy.contains("test@test.com").click()
 
-        cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
+      cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
-            cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
-          })
+      })
-        cy.get(interact.FIELD).eq(2).within(() => {
+      cy.get(interact.FIELD).eq(2).within(() => {
-            cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
-          })
+      })
     })
 
-    it("should allow copying of the users API key", () => {
+    xit("should allow copying of the users API key", () => {
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
-        cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
-            cy.get(interact.SPECTRUM_ICON).click({force: true})
+        cy.get(interact.SPECTRUM_ICON).click({ force: true })
-        })
+      })
-        // There may be timing issues with this on the smoke build
+      // There may be timing issues with this on the smoke build
-        cy.wait(500)
+      cy.wait(500)
-        cy.get(".spectrum-Toast-content")
+      cy.get(".spectrum-Toast-content")
         .contains("URL copied to clipboard")
         .should("be.visible")
     })
 
     it("should allow API key regeneration", () => {
-        // Get initial API key value
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_DIALOG_CONTENT)
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+        cy.get(interact.SPECTRUM_ICON).click({ force: true })
+      })
+      // Get initial API key value
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT)
         .find(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').as('keyOne')
 
-        // Click re-generate key button
+      // Click re-generate key button
-        cy.get("button").contains("Re-generate key").click({ force: true })
+      cy.get("button").contains("Regenerate key").click({ force: true })
 
-        // Verify API key was changed
+      // Verify API key was changed
-        cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
-            cy.get('@keyOne').then((keyOne) => {
+        cy.get('@keyOne').then((keyOne) => {
-                cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
+          cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
-            })
         })
-        cy.closeModal()
+      })
+      cy.closeModal()
     })
 
     it("should update password", () => {
-        // Access Update password modal
+      // Access Update password modal
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
 
-        // Enter new password and update
+      // Enter new password and update
-        cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
+      cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
-            for (let i = 0; i < 2; i++) {
+        for (let i = 0; i < 2; i++) {
-                // password set to 'newpwd'
+          // password set to 'newpwd'
-                cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
+          cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
-              }
+        }
-            cy.get("button").contains("Update password").click({ force: true })
+        cy.get("button").contains("Update password").click({ force: true })
-        })
+      })
 
-        // Logout & in with new password
+      // Logout & in with new password
-        //cy.logOut()
+      //cy.logOut()
-        cy.login("test@test.com", "newpwd")
+      cy.login("test@test.com", "newpwd")
     })
 
-    it("should open and close developer mode", () => {
+    xit("should open and close developer mode", () => {
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
-        
-        // Close developer mode & verify
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
-        cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
-        cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
-        cy.get(".app").should('not.exist') // At least one app should be available
 
-        // Open developer mode & verify
+      // Close developer mode & verify
-        cy.get(".avatar > .icon").click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
+      cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
-        cy.get(interact.SPECTRUM_SIDENAV).should('exist') // config sections available
+      cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
-        cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
+      cy.get(".app").should('not.exist') // At least one app should be available
+
+      // Open developer mode & verify
+      cy.get(".avatar > .icon").click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
+      cy.get(".app-table").should('exist') // config sections available
+      cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
     })
 
     after(() => {
-        // Change password back to original value
+      // Change password back to original value
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
-        cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
+      cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
-            for (let i = 0; i < 2; i++) {
+        for (let i = 0; i < 2; i++) {
-                cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
+          cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
-              }
+        }
-            cy.get("button").contains("Update password").click({ force: true })
+        cy.get("button").contains("Update password").click({ force: true })
-        })
-        // Remove users name
-        cy.updateUserInformation()
       })
+      // Remove users name
+      cy.updateUserInformation()
+    })
   })
 })

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

@@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
 import clientPackage from "@budibase/client/package.json"
 
 filterTests(["all"], () => {
-  context("Application Overview screen", () => {
+  xcontext("Application Overview screen", () => {
     before(() => {
       cy.login()
       cy.deleteAllApps()

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

@@ -14,15 +14,15 @@ filterTests(['smoke', 'all'], () => {
         cy.visit(`${Cypress.config().baseUrl}/builder/portal/apps/create`, { timeout: 5000 }) //added /portal/apps/create
         cy.wait(1000)
         cy.get(interact.CREATE_APP_BUTTON, { timeout: 10000 }).contains('Start from scratch').should("exist")
-        
+
         cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
         cy.get(interact.TEMPLATE_CATEGORY).should("exist")
-        
+
         cy.get(interact.APP_TABLE).should("not.exist")
       })
     }
 
-    it("should provide filterable templates", () => {
+    xit("should provide filterable templates", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
       cy.wait(500)
 
@@ -30,16 +30,16 @@ filterTests(['smoke', 'all'], () => {
         .its("body")
         .then(val => {
           if (val.length > 0) {
-            cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true})
+            cy.get(interact.SPECTRUM_BUTTON).contains("View Templates").click({ force: true })
           }
         })
 
       cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
       cy.get(interact.TEMPLATE_CATEGORY).should("exist")
-      
+
       cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).its('length').should('be.gt', 1)
       cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).its('length').should('be.gt', 2)
-      
+
       cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).eq(1).click()
       cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).should('have.length', 1)
 
@@ -104,14 +104,14 @@ filterTests(['smoke', 'all'], () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
 
       cy.updateUserInformation("Ted", "Userman")
-      
+
       cy.createApp("", false)
       cy.applicationInAppTable("Teds app")
       cy.deleteApp("Teds app")
 
       // Accomodate names that end in 'S'
       cy.updateUserInformation("Chris", "Userman")
-      
+
       cy.createApp("", false)
       cy.applicationInAppTable("Chris app")
       cy.deleteApp("Chris app")
@@ -123,35 +123,49 @@ filterTests(['smoke', 'all'], () => {
       const exportedApp = 'cypress/fixtures/exported-app.txt'
 
       cy.importApp(exportedApp, "")
-
       cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 })
-
       cy.applicationInAppTable("My app")
-      
+      cy.get(".app-table .name").eq(0).click()
-      cy.get(".appTable .name").eq(0).click()
+      cy.closeModal()
-
+      cy.get(`[aria-label="ShowMenu"]`).click()
-      cy.deleteApp("My app")
+      cy.get(".spectrum-Menu").within(() => {
+        cy.contains("Overview").click()
+      })
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
+      cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
+      cy.get(".spectrum-Dialog-grid").within(() => {
+        cy.get("input").type("My app")
+      })
+      cy.get(".spectrum-Button--warning").click()
     })
 
     it("should create an application from an export, using the users first name as the default app name", () => {
       const exportedApp = 'cypress/fixtures/exported-app.txt'
 
       cy.updateUserInformation("Ted", "Userman")
-
       cy.importApp(exportedApp, "")
-
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-
       cy.applicationInAppTable("Teds app")
-      
+      cy.get(".app-table .name").eq(0).click()
-      cy.get(".appTable .name").eq(0).click()
+      cy.closeModal()
-
+      cy.get(`[aria-label="ShowMenu"]`).click()
-      cy.deleteApp("Teds app")
+      cy.get(".spectrum-Menu").within(() => {
-
+        cy.contains("Overview").click()
+      })
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
+      cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
+      cy.get(".spectrum-Dialog-grid").within(() => {
+        cy.get("input").type("Teds app")
+      })
+      cy.get(".spectrum-Button--warning").click()
       cy.updateUserInformation("", "")
     })
 
-    it("should generate the first application from a template", () => {
+    xit("should generate the first application from a template", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       cy.wait(500)
 
@@ -172,28 +186,28 @@ filterTests(['smoke', 'all'], () => {
         const card = cy.get('.template-card').eq(0).should("exist");
         const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist")
         cardOverlay.invoke("show")
-        cardOverlay.get("button").contains("Use template").should("exist").click({force: true})
+        cardOverlay.get("button").contains("Use template").should("exist").click({ force: true })
       })
 
       // CMD Create app from theme card
       cy.get(".spectrum-Modal").should('be.visible')
-      
+
       const templateName = cy.get(".spectrum-Modal .template-thumbnail-text")
       templateName.invoke('text')
-      .then(templateNameText => {
+        .then(templateNameText => {
-        const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-")
+          const templateNameParsed = "/" + templateNameText.toLowerCase().replace(/\s+/g, "-")
-        cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
+          cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
-        cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
+          cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
 
-        cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
+          cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
-        cy.wait(5000)
+          cy.wait(5000)
-        
-        cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.wait(2000)
 
-        cy.applicationInAppTable(templateNameText)
+          cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.deleteApp(templateNameText) 
+          cy.wait(2000)
-      });
+
+          cy.applicationInAppTable(templateNameText)
+          cy.deleteApp(templateNameText)
+        });
 
     })
 
@@ -217,5 +231,5 @@ filterTests(['smoke', 'all'], () => {
       cy.deleteApp(secondAppName)
     })
 
-  })  
+  })
 })

packages/builder/cypress/support/commands.js

@@ -101,7 +101,7 @@ Cypress.Commands.add("deleteUser", email => {
 })
 
 Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
-  cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({
+  cy.get(".user-dropdown .icon", { timeout: 2000 }).click({
     force: true,
   })
 
@@ -132,7 +132,7 @@ Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
         .blur()
     }
     cy.get(".confirm-wrap").within(() => {
-      cy.get("button").contains("Update information").click({ force: true })
+      cy.get("button").contains("Save").click({ force: true })
     })
     cy.get(".spectrum-Dialog-grid").should("not.exist")
   })
@@ -222,9 +222,12 @@ Cypress.Commands.add("deleteApp", name => {
           // Go to app overview
           const appIdParsed = appId.split("_").pop()
           const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
-          cy.get(actionEleId).within(() => {
+          cy.get(actionEleId).click()
-            cy.contains("Manage").click({ force: true })
+          cy.get(`[aria-label="ShowMenu"]`).click()
+          cy.get(".spectrum-Menu").within(() => {
+            cy.contains("Overview").click()
           })
+
           cy.wait(500)
 
           // Unpublish first if needed
@@ -400,7 +403,7 @@ Cypress.Commands.add("searchForApplication", appName => {
         return
       } else {
         // Searches for the app
-        cy.get(".filter").then(() => {
+        cy.get(".spectrum-Search").then(() => {
           cy.get(".spectrum-Textfield").within(() => {
             cy.get("input").eq(0).clear({ force: true })
             cy.get("input").eq(0).type(appName, { force: true })
@@ -413,7 +416,7 @@ Cypress.Commands.add("searchForApplication", appName => {
 // Assumes there are no others
 Cypress.Commands.add("applicationInAppTable", appName => {
   cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
-  cy.get(".appTable", { timeout: 30000 }).within(() => {
+  cy.get(".app-table", { timeout: 30000 }).within(() => {
     cy.get(".title").contains(appName).should("exist")
   })
 })

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -71,11 +71,12 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "2.2.12-alpha.21",
+    "@budibase/bbui": "2.2.12-alpha.44",
-    "@budibase/client": "2.2.12-alpha.21",
+    "@budibase/client": "2.2.12-alpha.44",
-    "@budibase/frontend-core": "2.2.12-alpha.21",
+    "@budibase/frontend-core": "2.2.12-alpha.44",
-    "@budibase/string-templates": "2.2.12-alpha.21",
+    "@budibase/string-templates": "2.2.12-alpha.44",
     "@sentry/browser": "5.19.1",
+    "@spectrum-css/accordion": "^3.0.24",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
     "codemirror": "^5.59.0",
@@ -87,7 +88,7 @@
     "shortid": "2.2.15",
     "svelte-dnd-action": "^0.9.8",
     "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "0.1.0",
+    "svelte-portal": "1.0.0",
     "uuid": "8.3.1",
     "yup": "0.29.2"
   },

packages/builder/src/App.svelte

@@ -11,11 +11,8 @@
 
 <div class="banner-container" />
 <BannerDisplay />
-
 <NotificationDisplay />
-
 <LicensingOverlays />
-
 <Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />
 <HelpIcon />

packages/builder/src/builderStore/dataBinding.js

@@ -378,6 +378,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
           providerId,
           // Table ID is used by JSON fields to know what table the field is in
           tableId: table?._id,
+          component: component._component,
           category: component._instanceName,
           icon: def.icon,
           display: {

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

@@ -25,7 +25,6 @@
   export let loading = false
   export let hideAutocolumns
   export let rowCount
-  export let type
   export let disableSorting = false
   export let customPlaceholder = false
 

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

@@ -20,7 +20,8 @@
     $isActive,
     $tables,
     $queries,
-    $views
+    $views,
+    openDataSources
   )
   $: openDataSource = enrichedDataSources.find(x => x.open)
   $: {
@@ -36,7 +37,8 @@
     isActive,
     tables,
     queries,
-    views
+    views,
+    openDataSources
   ) => {
     if (!datasources?.list?.length) {
       return []

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte

@@ -6,6 +6,7 @@
     Toggle,
     Button,
     TextArea,
+    Accordion,
   } from "@budibase/bbui"
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
   import { capitalise } from "helpers"
@@ -51,15 +52,24 @@
 
   let addButton
 
-  function getDisplayName(key) {
+  function getDisplayName(key, fieldKey) {
     let name
-    if (schema[key]?.display) {
+    if (fieldKey && schema[key]["fields"][fieldKey]?.display) {
+      name = schema[key]["fields"][fieldKey].display
+    } else if (fieldKey) {
+      name = fieldKey
+    } else if (schema[key]?.display) {
       name = schema[key].display
     } else {
       name = key
     }
     return capitalise(name)
   }
+  function getFieldGroupKeys(fieldGroup) {
+    return Object.entries(schema[fieldGroup].fields || {})
+      .filter(el => filter(el))
+      .map(([key]) => key)
+  }
 </script>
 
 <form>
@@ -100,6 +110,27 @@
             error={$validation.errors[configKey]}
           />
         </div>
+      {:else if schema[configKey].type === "fieldGroup"}
+        <Accordion
+          itemName={configKey}
+          initialOpen={getFieldGroupKeys(configKey).some(
+            fieldKey => !!config[fieldKey]
+          )}
+          header={getDisplayName(configKey)}
+        >
+          <Layout gap="S">
+            {#each getFieldGroupKeys(configKey) as fieldKey}
+              <div class="form-row">
+                <Label>{getDisplayName(configKey, fieldKey)}</Label>
+                <Input
+                  type={schema[configKey]["fields"][fieldKey]?.type}
+                  on:change
+                  bind:value={config[fieldKey]}
+                />
+              </div>
+            {/each}
+          </Layout>
+        </Accordion>
       {:else}
         <div class="form-row">
           <Label>{getDisplayName(configKey)}</Label>

packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte

@@ -10,7 +10,6 @@
   } from "@budibase/bbui"
   import { tables } from "stores/backend"
   import { Helpers } from "@budibase/bbui"
-  import { writable } from "svelte/store"
 
   export let save
   export let datasource
@@ -18,41 +17,97 @@
   export let fromRelationship = {}
   export let toRelationship = {}
   export let close
-  export let selectedFromTable
 
-  let originalFromName = fromRelationship.name,
+  const colNotSet = "Please specify a column name"
-    originalToName = toRelationship.name
+  const relationshipAlreadyExists =
-  let fromTable, toTable, through, linkTable, tableOptions
+    "A relationship between these tables already exists."
-  let isManyToMany, isManyToOne, relationshipTypes
+  const relationshipTypes = [
-  let errors, valid
+    {
-  let currentTables = {}
+      label: "One to Many",
+      value: RelationshipTypes.MANY_TO_ONE,
+    },
+    {
+      label: "Many to Many",
+      value: RelationshipTypes.MANY_TO_MANY,
+    },
+  ]
 
-  if (fromRelationship && !fromRelationship.relationshipType) {
+  let originalFromColumnName = toRelationship.name,
-    fromRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
+    originalToColumnName = fromRelationship.name
-  }
+  let originalFromTable = plusTables.find(
+    table => table._id === toRelationship?.tableId
+  )
+  let originalToTable = plusTables.find(
+    table => table._id === fromRelationship?.tableId
+  )
 
-  if (toRelationship && selectedFromTable) {
+  let tableOptions
-    toRelationship.tableId = selectedFromTable._id
+  let errors = {}
-  }
+  let hasClickedSave = !!fromRelationship.relationshipType
+  let fromPrimary,
+    fromForeign,
+    fromTable,
+    toTable,
+    throughTable,
+    fromColumn,
+    toColumn
+  let fromId, toId, throughId, throughToKey, throughFromKey
+  let isManyToMany, isManyToOne, relationshipType
 
-  function inSchema(table, prop, ogName) {
+  $: {
-    if (!table || !prop || prop === ogName) {
+    if (!fromPrimary) {
-      return false
+      fromPrimary = fromRelationship.foreignKey
+      fromForeign = toRelationship.foreignKey
+    }
+    if (!fromColumn && !errors.fromColumn) {
+      fromColumn = toRelationship.name
+    }
+    if (!toColumn && !errors.toColumn) {
+      toColumn = fromRelationship.name
+    }
+    if (!fromId) {
+      fromId = toRelationship.tableId
+    }
+    if (!toId) {
+      toId = fromRelationship.tableId
+    }
+    if (!throughId) {
+      throughId = fromRelationship.through
+      throughFromKey = fromRelationship.throughFrom
+      throughToKey = fromRelationship.throughTo
+    }
+    if (!relationshipType) {
+      relationshipType = fromRelationship.relationshipType
     }
-    const keys = Object.keys(table.schema).map(key => key.toLowerCase())
-    return keys.indexOf(prop.toLowerCase()) !== -1
   }
 
-  const touched = writable({})
+  $: tableOptions = plusTables.map(table => ({
+    label: table.name,
+    value: table._id,
+  }))
+  $: valid = getErrorCount(errors) === 0 || !hasClickedSave
 
-  function invalidThroughTable({ through, throughTo, throughFrom }) {
+  $: isManyToMany = relationshipType === RelationshipTypes.MANY_TO_MANY
+  $: isManyToOne = relationshipType === RelationshipTypes.MANY_TO_ONE
+  $: fromTable = plusTables.find(table => table._id === fromId)
+  $: toTable = plusTables.find(table => table._id === toId)
+  $: throughTable = plusTables.find(table => table._id === throughId)
+
+  $: toRelationship.relationshipType = fromRelationship?.relationshipType
+
+  const getErrorCount = errors =>
+    Object.entries(errors)
+      .filter(entry => !!entry[1])
+      .map(entry => entry[0]).length
+
+  function invalidThroughTable() {
     // need to know the foreign key columns to check error
-    if (!through || !throughTo || !throughFrom) {
+    if (!throughId || !throughToKey || !throughFromKey) {
       return false
     }
-    const throughTable = plusTables.find(tbl => tbl._id === through)
+    const throughTbl = plusTables.find(tbl => tbl._id === throughId)
-    const otherColumns = Object.values(throughTable.schema).filter(
+    const otherColumns = Object.values(throughTbl.schema).filter(
-      col => col.name !== throughFrom && col.name !== throughTo
+      col => col.name !== throughFromKey && col.name !== throughToKey
     )
     for (let col of otherColumns) {
       if (col.constraints?.presence && !col.autocolumn) {
@@ -62,142 +117,138 @@
     return false
   }
 
-  function checkForErrors(fromRelate, toRelate) {
+  function validate() {
-    const isMany =
+    const isMany = relationshipType === RelationshipTypes.MANY_TO_MANY
-      fromRelate.relationshipType === RelationshipTypes.MANY_TO_MANY
     const tableNotSet = "Please specify a table"
+    const foreignKeyNotSet = "Please pick a foreign key"
     const errObj = {}
-    if ($touched.from && !fromTable) {
+    if (!relationshipType) {
-      errObj.from = tableNotSet
+      errObj.relationshipType = "Please specify a relationship type"
     }
-    if ($touched.to && !toTable) {
+    if (!fromTable) {
-      errObj.to = tableNotSet
+      errObj.fromTable = tableNotSet
     }
-    if ($touched.through && isMany && !fromRelate.through) {
+    if (!toTable) {
-      errObj.through = tableNotSet
+      errObj.toTable = tableNotSet
     }
-    if ($touched.through && invalidThroughTable(fromRelate)) {
+    if (isMany && !throughTable) {
-      errObj.through =
+      errObj.throughTable = tableNotSet
-        "Ensure all columns in table are nullable or auto generated"
     }
-    if ($touched.foreign && !isMany && !fromRelate.fieldName) {
+    if (isMany && !throughFromKey) {
-      errObj.foreign = "Please pick the foreign key"
+      errObj.throughFromKey = foreignKeyNotSet
     }
-    const colNotSet = "Please specify a column name"
+    if (isMany && !throughToKey) {
-    if ($touched.fromCol && !fromRelate.name) {
+      errObj.throughToKey = foreignKeyNotSet
-      errObj.fromCol = colNotSet
     }
-    if ($touched.toCol && !toRelate.name) {
+    if (invalidThroughTable()) {
-      errObj.toCol = colNotSet
+      errObj.throughTable =
+        "Ensure non-key columns are nullable or auto-generated"
     }
-    if ($touched.primary && !fromPrimary) {
+    if (!isMany && !fromForeign) {
-      errObj.primary = "Please pick the primary key"
+      errObj.fromForeign = foreignKeyNotSet
     }
+    if (!fromColumn) {
+      errObj.fromColumn = colNotSet
+    }
+    if (!toColumn) {
+      errObj.toColumn = colNotSet
+    }
+    if (!isMany && !fromPrimary) {
+      errObj.fromPrimary = "Please pick the primary key"
+    }
+    if (isMany && relationshipExists()) {
+      errObj.fromTable = relationshipAlreadyExists
+      errObj.toTable = relationshipAlreadyExists
+    }
+
     // currently don't support relationships back onto the table itself, needs to relate out
     const tableError = "From/to/through tables must be different"
-    if (fromTable && (fromTable === toTable || fromTable === through)) {
+    if (fromTable && (fromTable === toTable || fromTable === throughTable)) {
-      errObj.from = tableError
+      errObj.fromTable = tableError
     }
-    if (toTable && (toTable === fromTable || toTable === through)) {
+    if (toTable && (toTable === fromTable || toTable === throughTable)) {
-      errObj.to = tableError
+      errObj.toTable = tableError
     }
-    if (through && (through === fromTable || through === toTable)) {
+    if (
-      errObj.through = tableError
+      throughTable &&
+      (throughTable === fromTable || throughTable === toTable)
+    ) {
+      errObj.throughTable = tableError
     }
     const colError = "Column name cannot be an existing column"
-    if (inSchema(fromTable, fromRelate.name, originalFromName)) {
+    if (isColumnNameBeingUsed(toTable, fromColumn, originalFromColumnName)) {
-      errObj.fromCol = colError
+      errObj.fromColumn = colError
     }
-    if (inSchema(toTable, toRelate.name, originalToName)) {
+    if (isColumnNameBeingUsed(fromTable, toColumn, originalToColumnName)) {
-      errObj.toCol = colError
+      errObj.toColumn = colError
     }
 
     let fromType, toType
-    if (fromPrimary && fromRelate.fieldName) {
+    if (fromPrimary && fromForeign) {
       fromType = fromTable?.schema[fromPrimary]?.type
-      toType = toTable?.schema[fromRelate.fieldName]?.type
+      toType = toTable?.schema[fromForeign]?.type
     }
     if (fromType && toType && fromType !== toType) {
-      errObj.foreign =
+      errObj.fromForeign =
         "Column type of the foreign key must match the primary key"
     }
+
     errors = errObj
+    return getErrorCount(errors) === 0
   }
 
-  let fromPrimary
+  function isColumnNameBeingUsed(table, columnName, originalName) {
-  $: {
+    if (!table || !columnName || columnName === originalName) {
-    if (!fromPrimary && fromTable) {
+      return false
-      fromPrimary = fromTable.primary[0]
-    }
-  }
-  $: isManyToMany =
-    fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY
-  $: isManyToOne =
-    fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_ONE
-  $: tableOptions = plusTables.map(table => ({
-    label: table.name,
-    value: table._id,
-  }))
-  $: fromTable = plusTables.find(table => table._id === toRelationship?.tableId)
-  $: toTable = plusTables.find(table => table._id === fromRelationship?.tableId)
-  $: through = plusTables.find(table => table._id === fromRelationship?.through)
-  $: checkForErrors(fromRelationship, toRelationship)
-  $: valid =
-    Object.keys(errors).length === 0 && Object.keys($touched).length !== 0
-  $: linkTable = through || toTable
-  $: relationshipTypes = [
-    {
-      label: "Many",
-      value: RelationshipTypes.MANY_TO_MANY,
-    },
-    {
-      label: "One",
-      value: RelationshipTypes.MANY_TO_ONE,
-    },
-  ]
-  $: updateRelationshipType(fromRelationship?.relationshipType)
-  $: tableChanged(fromTable, toTable)
-
-  function updateRelationshipType(fromType) {
-    if (fromType === RelationshipTypes.MANY_TO_MANY) {
-      toRelationship.relationshipType = RelationshipTypes.MANY_TO_MANY
-    } else {
-      toRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
     }
+    const keys = Object.keys(table.schema).map(key => key.toLowerCase())
+    return keys.indexOf(columnName.toLowerCase()) !== -1
   }
 
   function buildRelationships() {
-    // if any to many only need to check from
-    const manyToMany =
-      fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY
-    // main is simply used to know this is the side the user configured it from
     const id = Helpers.uuid()
-    if (!manyToMany) {
+    //Map temporary variables
-      delete fromRelationship.through
-      delete toRelationship.through
-    }
     let relateFrom = {
       ...fromRelationship,
+      tableId: toId,
+      name: toColumn,
+      relationshipType,
+      fieldName: fromForeign,
+      through: throughId,
+      throughFrom: throughFromKey,
+      throughTo: throughToKey,
       type: "link",
       main: true,
       _id: id,
     }
-    let relateTo = {
+    let relateTo = (toRelationship = {
       ...toRelationship,
+      tableId: fromId,
+      name: fromColumn,
+      through: throughId,
       type: "link",
       _id: id,
+    })
+
+    // if any to many only need to check from
+    const manyToMany =
+      relateFrom.relationshipType === RelationshipTypes.MANY_TO_MANY
+
+    if (!manyToMany) {
+      delete relateFrom.through
+      delete relateTo.through
     }
 
     // [0] is because we don't support composite keys for relationships right now
     if (manyToMany) {
       relateFrom = {
         ...relateFrom,
-        through: through._id,
+        through: throughTable._id,
         fieldName: toTable.primary[0],
       }
       relateTo = {
         ...relateTo,
-        through: through._id,
+        through: throughTable._id,
         fieldName: fromTable.primary[0],
         throughFrom: relateFrom.throughTo,
         throughTo: relateFrom.throughFrom,
@@ -226,9 +277,56 @@
     toRelationship = relateTo
   }
 
-  // save the relationship on to the datasource
+  function relationshipExists() {
+    if (
+      originalFromTable &&
+      originalToTable &&
+      originalFromTable === fromTable &&
+      originalToTable === toTable
+    ) {
+      return false
+    }
+    let fromThroughLinks = Object.values(
+      datasource.entities[fromTable.name].schema
+    ).filter(value => value.through)
+    let toThroughLinks = Object.values(
+      datasource.entities[toTable.name].schema
+    ).filter(value => value.through)
+
+    const matchAgainstUserInput = (fromTableId, toTableId) =>
+      (fromTableId === fromId && toTableId === toId) ||
+      (fromTableId === toId && toTableId === fromId)
+
+    return !!fromThroughLinks.find(from =>
+      toThroughLinks.find(
+        to =>
+          from.through === to.through &&
+          matchAgainstUserInput(from.tableId, to.tableId)
+      )
+    )
+  }
+
+  function removeExistingRelationship() {
+    if (originalFromTable && originalFromColumnName) {
+      delete datasource.entities[originalFromTable.name].schema[
+        originalToColumnName
+      ]
+    }
+    if (originalToTable && originalToColumnName) {
+      delete datasource.entities[originalToTable.name].schema[
+        originalFromColumnName
+      ]
+    }
+  }
+
   async function saveRelationship() {
+    hasClickedSave = true
+    if (!validate()) {
+      return false
+    }
     buildRelationships()
+    removeExistingRelationship()
+
     // source of relationship
     datasource.entities[fromTable.name].schema[fromRelationship.name] =
       fromRelationship
@@ -236,43 +334,14 @@
     datasource.entities[toTable.name].schema[toRelationship.name] =
       toRelationship
 
-    // If relationship has been renamed
-    if (originalFromName !== fromRelationship.name) {
-      delete datasource.entities[fromTable.name].schema[originalFromName]
-    }
-    if (originalToName !== toRelationship.name) {
-      delete datasource.entities[toTable.name].schema[originalToName]
-    }
-
-    // store the original names so it won't cause an error
-    originalToName = toRelationship.name
-    originalFromName = fromRelationship.name
     await save()
   }
-
   async function deleteRelationship() {
-    delete datasource.entities[fromTable.name].schema[fromRelationship.name]
+    removeExistingRelationship()
-    delete datasource.entities[toTable.name].schema[toRelationship.name]
     await save()
     await tables.fetch()
     close()
   }
-
-  function tableChanged(fromTbl, toTbl) {
-    if (
-      (currentTables?.from?._id === fromTbl?._id &&
-        currentTables?.to?._id === toTbl?._id) ||
-      originalFromName ||
-      originalToName
-    ) {
-      return
-    }
-    fromRelationship.name = toTbl?.name || ""
-    errors.fromCol = ""
-    toRelationship.name = fromTbl?.name || ""
-    errors.toCol = ""
-    currentTables = { from: fromTbl, to: toTbl }
-  }
 </script>
 
 <ModalContent
@@ -284,7 +353,9 @@
   <Select
     label="Relationship type"
     options={relationshipTypes}
-    bind:value={fromRelationship.relationshipType}
+    bind:value={relationshipType}
+    bind:error={errors.relationshipType}
+    on:change={() => (errors.relationshipType = null)}
   />
   <div class="headings">
     <Detail>Tables</Detail>
@@ -292,58 +363,89 @@
   <Select
     label="Select from table"
     options={tableOptions}
-    disabled={!!selectedFromTable}
+    bind:value={fromId}
-    on:change={() => ($touched.from = true)}
+    bind:error={errors.fromTable}
-    bind:error={errors.from}
+    on:change={e => {
-    bind:value={toRelationship.tableId}
+      fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
+      if (errors.fromTable === relationshipAlreadyExists) {
+        errors.toColumn = null
+      }
+      errors.fromTable = null
+      errors.fromColumn = null
+      errors.toTable = null
+      errors.throughTable = null
+    }}
   />
   {#if isManyToOne && fromTable}
     <Select
-      label={`Primary Key (${fromTable?.name})`}
+      label={`Primary Key (${fromTable.name})`}
-      options={Object.keys(fromTable?.schema)}
+      options={Object.keys(fromTable.schema)}
-      on:change={() => ($touched.primary = true)}
-      bind:error={errors.primary}
       bind:value={fromPrimary}
+      bind:error={errors.fromPrimary}
+      on:change={() => (errors.fromPrimary = null)}
     />
   {/if}
   <Select
     label={"Select to table"}
     options={tableOptions}
-    on:change={() => ($touched.to = true)}
+    bind:value={toId}
-    bind:error={errors.to}
+    bind:error={errors.toTable}
-    bind:value={fromRelationship.tableId}
+    on:change={e => {
+      toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
+      if (errors.toTable === relationshipAlreadyExists) {
+        errors.fromColumn = null
+      }
+      errors.toTable = null
+      errors.toColumn = null
+      errors.fromTable = null
+      errors.throughTable = null
+    }}
   />
   {#if isManyToMany}
     <Select
       label={"Through"}
       options={tableOptions}
-      on:change={() => ($touched.through = true)}
+      bind:value={throughId}
-      bind:error={errors.through}
+      bind:error={errors.throughTable}
-      bind:value={fromRelationship.through}
+      on:change={() => {
+        errors.fromTable = null
+        errors.toTable = null
+        errors.throughTable = null
+      }}
     />
-    {#if fromTable && toTable && through}
+    {#if fromTable && toTable && throughTable}
       <Select
         label={`Foreign Key (${fromTable?.name})`}
-        options={Object.keys(through?.schema)}
+        options={Object.keys(throughTable?.schema)}
-        on:change={() => ($touched.fromForeign = true)}
+        bind:value={throughToKey}
-        bind:error={errors.fromForeign}
+        bind:error={errors.throughToKey}
-        bind:value={fromRelationship.throughTo}
+        on:change={e => {
+          if (throughFromKey === e.detail) {
+            throughFromKey = null
+          }
+          errors.throughToKey = null
+        }}
       />
       <Select
         label={`Foreign Key (${toTable?.name})`}
-        options={Object.keys(through?.schema)}
+        options={Object.keys(throughTable?.schema)}
-        on:change={() => ($touched.toForeign = true)}
+        bind:value={throughFromKey}
-        bind:error={errors.toForeign}
+        bind:error={errors.throughFromKey}
-        bind:value={fromRelationship.throughFrom}
+        on:change={e => {
+          if (throughToKey === e.detail) {
+            throughToKey = null
+          }
+          errors.throughFromKey = null
+        }}
       />
     {/if}
   {:else if isManyToOne && toTable}
     <Select
       label={`Foreign Key (${toTable?.name})`}
       options={Object.keys(toTable?.schema)}
-      on:change={() => ($touched.foreign = true)}
+      bind:value={fromForeign}
-      bind:error={errors.foreign}
+      bind:error={errors.fromForeign}
-      bind:value={fromRelationship.fieldName}
+      on:change={() => (errors.fromForeign = null)}
     />
   {/if}
   <div class="headings">
@@ -354,19 +456,21 @@
     provide a name for these columns.
   </Body>
   <Input
-    on:blur={() => ($touched.fromCol = true)}
-    bind:error={errors.fromCol}
     label="From table column"
-    bind:value={fromRelationship.name}
+    bind:value={fromColumn}
+    bind:error={errors.fromColumn}
+    on:change={e => {
+      errors.fromColumn = e.detail?.length > 0 ? null : colNotSet
+    }}
   />
   <Input
-    on:blur={() => ($touched.toCol = true)}
-    bind:error={errors.toCol}
     label="To table column"
-    bind:value={toRelationship.name}
+    bind:value={toColumn}
+    bind:error={errors.toColumn}
+    on:change={e => (errors.toColumn = e.detail?.length > 0 ? null : colNotSet)}
   />
   <div slot="footer">
-    {#if originalFromName != null}
+    {#if originalFromColumnName != null}
       <Button warning text on:click={deleteRelationship}>Delete</Button>
     {/if}
   </div>

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

@@ -14,7 +14,7 @@
 
   export let rows = []
   export let schema = {}
-  export let allValid = false
+  export let allValid = true
   export let displayColumn = null
 
   const typeOptions = [
@@ -174,7 +174,6 @@
   }
 
   label {
-    font-family: var(--font-sans);
     cursor: pointer;
     font-weight: 600;
     box-sizing: border-box;

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -33,7 +33,7 @@
   let autoColumns = getAutoColumnInformation()
   let schema = {}
   let rows = []
-  let allValid = false
+  let allValid = true
   let displayColumn = null
 
   function getAutoColumns() {
@@ -99,7 +99,7 @@
   title="Create Table"
   confirmText="Create"
   onConfirm={saveTable}
-  disabled={error || !name || !allValid}
+  disabled={error || !name || (rows.length && !allValid)}
 >
   <Input
     data-cy="table-name-input"

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

@@ -8,6 +8,7 @@
     ProgressCircle,
     Layout,
     Body,
+    Icon,
   } from "@budibase/bbui"
   import { auth, apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
@@ -56,85 +57,77 @@
   }
 </script>
 
-<div class="lock-status">
+{#if lockedBy}
-  {#if lockedBy}
+  <div class="lock-status">
-    <Button
+    <Icon
-      quiet
+      name="LockClosed"
-      secondary
+      hoverable
-      icon="LockClosed"
       size={buttonSize}
-      on:click={() => {
+      on:click={e => {
+        e.stopPropagation()
         appLockModal.show()
       }}
-    >
+    />
-      <span class="lock-status-text">
-        {lockedByHeading}
-      </span>
-    </Button>
-  {/if}
-</div>
-
-{#key app}
-  <div>
-    <Modal bind:this={appLockModal}>
-      <ModalContent
-        title={lockedByHeading}
-        dataCy={"app-lock-modal"}
-        showConfirmButton={false}
-        showCancelButton={false}
-      >
-        <Layout noPadding>
-          <Body size="S">
-            Apps are locked to prevent work from being lost from overlapping
-            changes between your team.
-          </Body>
-          {#if lockedByYou && getExpiryDuration(app) > 0}
-            <span class="lock-expiry-body">
-              {processStringSync(
-                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
-                {
-                  time: getExpiryDuration(app),
-                }
-              )}
-            </span>
-          {/if}
-          <div class="lock-modal-actions">
-            <ButtonGroup>
-              <Button
-                secondary
-                quiet={lockedBy && lockedByYou}
-                disabled={processing}
-                on:click={() => {
-                  appLockModal.hide()
-                }}
-              >
-                <span class="cancel"
-                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-                >
-              </Button>
-              {#if lockedByYou}
-                <Button
-                  secondary
-                  disabled={processing}
-                  on:click={() => {
-                    releaseLock()
-                    appLockModal.hide()
-                  }}
-                >
-                  {#if processing}
-                    <ProgressCircle overBackground={true} size="S" />
-                  {:else}
-                    <span class="unlock">Release Lock</span>
-                  {/if}
-                </Button>
-              {/if}
-            </ButtonGroup>
-          </div>
-        </Layout>
-      </ModalContent>
-    </Modal>
   </div>
-{/key}
+{/if}
+
+<Modal bind:this={appLockModal}>
+  <ModalContent
+    title={lockedByHeading}
+    dataCy={"app-lock-modal"}
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <Layout noPadding>
+      <Body size="S">
+        Apps are locked to prevent work being lost from overlapping changes
+        between your team.
+      </Body>
+      {#if lockedByYou && getExpiryDuration(app) > 0}
+        <span class="lock-expiry-body">
+          {processStringSync(
+            "This lock will expire in {{ duration time 'millisecond' }} from now.",
+            {
+              time: getExpiryDuration(app),
+            }
+          )}
+        </span>
+      {/if}
+      <div class="lock-modal-actions">
+        <ButtonGroup>
+          <Button
+            secondary
+            quiet={lockedBy && lockedByYou}
+            disabled={processing}
+            on:click={() => {
+              appLockModal.hide()
+            }}
+          >
+            <span class="cancel"
+              >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+            >
+          </Button>
+          {#if lockedByYou}
+            <Button
+              cta
+              disabled={processing}
+              on:click={() => {
+                releaseLock()
+                appLockModal.hide()
+              }}
+            >
+              {#if processing}
+                <ProgressCircle overBackground={true} size="S" />
+              {:else}
+                <span class="unlock">Release Lock</span>
+              {/if}
+            </Button>
+          {/if}
+        </ButtonGroup>
+      </div>
+    </Layout>
+  </ModalContent>
+</Modal>
 
 <style>
   .lock-modal-actions {
@@ -148,8 +141,4 @@
     gap: var(--spacing-s);
     max-width: 175px;
   }
-  .lock-status-text {
-    font-weight: 400;
-    color: var(--spectrum-global-color-gray-800);
-  }
 </style>

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

@@ -135,7 +135,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height);
     min-height: var(--code-mirror-height);
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.3;
     border: var(--spectrum-alias-border-size-thin) solid;
     border-color: var(--spectrum-alias-border-color);

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

@@ -1,64 +0,0 @@
-<script>
-  import {
-    ActionMenu,
-    Checkbox,
-    MenuItem,
-    Heading,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import { admin } from "stores/portal"
-  import { goto } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  let width = window.innerWidth
-  $: side = width < 500 ? "right" : "left"
-
-  const resizeObserver = new ResizeObserver(entries => {
-    if (entries?.[0]) {
-      width = entries[0].contentRect?.width
-    }
-  })
-
-  onMount(() => {
-    const doc = document.documentElement
-    resizeObserver.observe(doc)
-
-    return () => {
-      resizeObserver.unobserve(doc)
-    }
-  })
-</script>
-
-<ActionMenu align={side}>
-  <div slot="control" class="icon">
-    <ProgressCircle size="S" value={$admin.onboardingProgress} />
-  </div>
-  <MenuItem disabled>
-    <header class="item">
-      <Heading size="XXS">Get Started Checklist</Heading>
-      <ProgressCircle size="S" value={$admin.onboardingProgress} />
-    </header>
-  </MenuItem>
-  {#each Object.keys($admin.checklist) as checklistItem, idx}
-    <MenuItem>
-      <div
-        class="item"
-        on:click={() => $goto($admin.checklist[checklistItem].link)}
-      >
-        <span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
-        <Checkbox value={$admin.checklist[checklistItem].checked} />
-      </div>
-    </MenuItem>
-  {/each}
-</ActionMenu>
-
-<style>
-  .item {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 175px 20px;
-  }
-  .icon {
-    cursor: pointer;
-  }
-</style>

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

@@ -1,47 +1,46 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Modal } from "@budibase/bbui"
   import ChooseIconModal from "components/start/ChooseIconModal.svelte"
 
   export let name
-  export let size
+  export let size = "M"
   export let app
+  export let color
+  export let autoSave = false
 
-  let iconModal
+  let modal
 </script>
 
 <div class="editable-icon">
-  <div
+  <div class="hover" on:click={modal.show}>
-    class="edit-hover"
+    <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
-    on:click={() => {
-      iconModal.show()
-    }}
-  >
-    <Icon name={"Edit"} size={"L"} />
   </div>
-  <div class="app-icon">
+  <div class="normal">
-    <Icon {name} {size} />
+    <Icon {name} {size} {color} />
   </div>
 </div>
-<ChooseIconModal {app} bind:this={iconModal} />
+
+<Modal bind:this={modal}>
+  <ChooseIconModal {name} {color} {app} {autoSave} on:change />
+</Modal>
 
 <style>
-  .editable-icon:hover .app-icon {
-    opacity: 0;
-  }
   .editable-icon {
     position: relative;
+    display: flex;
+    justify-content: flex-start;
   }
-  .editable-icon:hover .edit-hover {
+  .normal {
-    opacity: 1;
+    display: block;
   }
-  .edit-hover {
+  .hover {
-    color: var(--spectrum-global-color-gray-600);
+    display: none;
     cursor: pointer;
-    z-index: 100;
+  }
-    width: 100%;
+  .editable-icon:hover .normal {
-    height: 100%;
+    display: none;
-    position: absolute;
+  }
-    opacity: 0;
+  .editable-icon:hover .hover {
-    /* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
+    display: block;
   }
 </style>

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

@@ -31,6 +31,7 @@
     bottom: var(--spacing-m);
     right: var(--spacing-m);
     border-radius: 55%;
+    z-index: 99999;
   }
   .hidden {
     display: none;

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

@@ -2,6 +2,7 @@
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/backend"
   import { Constants, RoleUtils } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
 
   export let value
   export let error
@@ -9,26 +10,62 @@
   export let autoWidth = false
   export let quiet = false
   export let allowPublic = true
+  export let allowRemove = false
 
-  $: options = getOptions($roles, allowPublic)
+  const dispatch = createEventDispatcher()
+  const RemoveID = "remove"
+
+  $: options = getOptions($roles, allowPublic, allowRemove)
 
   const getOptions = (roles, allowPublic) => {
+    if (allowRemove) {
+      roles = [
+        ...roles,
+        {
+          _id: RemoveID,
+          name: "Remove",
+        },
+      ]
+    }
     if (allowPublic) {
       return roles
     }
     return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
   }
+
+  const getColor = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return null
+    }
+    return RoleUtils.getRoleColour(role._id)
+  }
+
+  const getIcon = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return "Close"
+    }
+    return null
+  }
+
+  const onChange = e => {
+    if (allowRemove && e.detail === RemoveID) {
+      dispatch("remove")
+    } else {
+      dispatch("change", e.detail)
+    }
+  }
 </script>
 
 <Select
   {autoWidth}
   {quiet}
   bind:value
-  on:change
+  on:change={onChange}
   {options}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
-  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  getOptionColour={getColor}
+  getOptionIcon={getIcon}
   {placeholder}
   {error}
 />

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

@@ -1,128 +1,110 @@
 <script>
-  import {
+  import { Layout, Detail, Button, Modal } from "@budibase/bbui"
-    Layout,
-    Detail,
-    Heading,
-    Button,
-    Modal,
-    ActionGroup,
-    ActionButton,
-  } from "@budibase/bbui"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { licensing } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
 
   export let templates
 
-  let selectedTemplateCategory
+  let selectedCategory
   let creationModal
   let template
 
-  const groupTemplatesByCategory = (templates, categoryFilter) => {
+  $: categories = getCategories(templates)
-    let grouped = templates.reduce((acc, template) => {
+  $: filteredCategories = getFilteredCategories(categories, selectedCategory)
-      if (
+
-        typeof categoryFilter === "string" &&
+  const getCategories = templates => {
-        [categoryFilter].indexOf(template.category) < 0
+    let categories = {}
-      ) {
+    templates?.forEach(template => {
-        return acc
+      if (!categories[template.category]) {
+        categories[template.category] = []
       }
-
+      categories[template.category].push(template)
-      acc[template.category] = !acc[template.category]
+    })
-        ? []
+    categories = Object.entries(categories).map(
-        : acc[template.category]
+      ([category, categoryTemplates]) => {
-      acc[template.category].push(template)
+        return {
-
+          name: category,
-      return acc
+          templates: categoryTemplates,
-    }, {})
+        }
-    return grouped
+      }
+    )
+    categories.sort((a, b) => {
+      return a.name < b.name ? -1 : 1
+    })
+    return categories
   }
 
-  $: filteredTemplates = groupTemplatesByCategory(
+  const getFilteredCategories = (categories, selectedCategory) => {
-    templates,
+    if (!selectedCategory) {
-    selectedTemplateCategory
+      return categories
-  )
+    }
-
+    return categories.filter(x => x.name === selectedCategory)
-  $: filteredTemplateCategories = filteredTemplates
+  }
-    ? Object.keys(filteredTemplates).sort()
-    : []
-
-  $: templateCategories = templates
-    ? Object.keys(groupTemplatesByCategory(templates)).sort()
-    : []
 
   const stopAppCreation = () => {
     template = null
   }
 </script>
 
-<div class="template-header">
+<Content>
-  <Layout noPadding gap="S">
+  <div slot="side-nav">
-    <Heading size="S">Templates</Heading>
+    <SideNav>
-    <div class="template-category-filters spectrum-ActionGroup">
+      <SideNavItem
-      <ActionGroup>
+        on:click={() => (selectedCategory = null)}
-        <ActionButton
+        text="All"
-          selected={!selectedTemplateCategory}
+        active={selectedCategory == null}
-          on:click={() => {
+      />
-            selectedTemplateCategory = null
+      {#each categories as category}
-          }}
+        <SideNavItem
-        >
+          on:click={() => (selectedCategory = category.name)}
-          All
+          text={category.name}
-        </ActionButton>
+          active={selectedCategory === category.name}
-        {#each templateCategories as templateCategoryKey}
+        />
-          <ActionButton
+      {/each}
-            dataCy={templateCategoryKey}
+    </SideNav>
-            selected={templateCategoryKey == selectedTemplateCategory}
+  </div>
-            on:click={() => {
+  <div class="template-categories">
-              selectedTemplateCategory = templateCategoryKey
+    <Layout gap="XL" noPadding>
-            }}
+      {#each filteredCategories as category}
-          >
+        <div class="template-category" data-cy={category.name}>
-            {templateCategoryKey}
+          <Detail size="M">{category.name}</Detail>
-          </ActionButton>
+          <div class="template-grid">
-        {/each}
+            {#each category.templates as templateEntry}
-      </ActionGroup>
+              <TemplateCard
-    </div>
+                name={templateEntry.name}
-  </Layout>
+                imageSrc={templateEntry.image}
-</div>
+                backgroundColour={templateEntry.background}
-
+                icon={templateEntry.icon}
-<div class="template-categories">
-  <Layout gap="XL" noPadding>
-    {#each filteredTemplateCategories as templateCategoryKey}
-      <div class="template-category" data-cy={templateCategoryKey}>
-        <Detail size="M">{templateCategoryKey}</Detail>
-        <div class="template-grid">
-          {#each filteredTemplates[templateCategoryKey] as templateEntry}
-            <TemplateCard
-              name={templateEntry.name}
-              imageSrc={templateEntry.image}
-              backgroundColour={templateEntry.background}
-              icon={templateEntry.icon}
-            >
-              {#if !($licensing?.usageMetrics?.apps >= 100)}
-                <Button
-                  cta
-                  on:click={() => {
-                    template = templateEntry
-                    creationModal.show()
-                  }}
-                >
-                  Use template
-                </Button>
-              {/if}
-              <a
-                href={templateEntry.url}
-                target="_blank"
-                class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
-                on:click|stopPropagation
               >
-                Details
+                {#if !($licensing?.usageMetrics?.apps >= 100)}
-              </a>
+                  <Button
-            </TemplateCard>
+                    cta
-          {/each}
+                    on:click={() => {
+                      template = templateEntry
+                      creationModal.show()
+                    }}
+                  >
+                    Use template
+                  </Button>
+                {/if}
+                <a
+                  href={templateEntry.url}
+                  target="_blank"
+                  class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
+                  on:click|stopPropagation
+                >
+                  Details
+                </a>
+              </TemplateCard>
+            {/each}
+          </div>
         </div>
-      </div>
+      {/each}
-    {/each}
+    </Layout>
-  </Layout>
+  </div>
-</div>
+</Content>
 
 <Modal
   bind:this={creationModal}

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

@@ -469,7 +469,7 @@
   }
 
   .binding__type {
-    font-family: monospace;
+    font-family: var(--font-mono);
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 2px 4px;

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -12,7 +12,7 @@
     dummy.select()
     document.execCommand("copy")
     document.body.removeChild(dummy)
-    notifications.success(`URL copied to clipboard`)
+    notifications.success(`Copied to clipboard`)
   }
 </script>
 

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

@@ -57,15 +57,13 @@
 <Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={publishModal}>
   <ModalContent
-    title="Publish to Production"
+    title="Publish to production"
     confirmText="Publish"
     onConfirm={publishApp}
     dataCy={"deploy-app-modal"}
   >
-    <span
+    The changes you have made will be published to the production version of the
-      >The changes you have made will be published to the production version of
+    application.
-      the application.</span
-    >
   </ModalContent>
 </Modal>
 

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

@@ -179,7 +179,7 @@
 </ConfirmDialog>
 
 <div class="buttons">
-  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <Button on:click={previewApp} secondary>Preview</Button>
   <DeployModal onOk={completePublish} />
 </div>
 

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

@@ -70,7 +70,10 @@
       type: "provider",
     }))
   $: links = bindings
+    // Get only link bindings
     .filter(x => x.fieldSchema?.type === "link")
+    // Filter out bindings provided by forms
+    .filter(x => !x.component?.endsWith("/form"))
     .map(binding => {
       const { providerId, readableBinding, fieldSchema } = binding || {}
       const { name, tableId } = fieldSchema || {}

packages/builder/src/components/integration/QueryEditor.svelte

@@ -185,7 +185,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
-    font-family: monospace !important;
+    font-family: var(--font-mono);
     line-height: 1.3;
   }
 </style>

packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte

@@ -1,106 +0,0 @@
-<script>
-  import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
-  import { goto } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  export let history
-  export let appId
-  export let close
-  const STOPPED_ERROR = "stopped_error"
-
-  $: exists = $automationStore.automations?.find(
-    auto => auto._id === history?.automationId
-  )
-</script>
-
-{#if history}
-  <div class="body">
-    <div class="top">
-      <div class="controls">
-        <StatusRenderer value={history.status} />
-        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
-      </div>
-    </div>
-    <Layout paddingY="XL" paddingX="XL" gap="S">
-      <div class="icon">
-        <Icon name="Clock" />
-        <DateTimeRenderer value={history.createdAt} />
-      </div>
-      <div class="icon">
-        <Icon name="JourneyVoyager" />
-        <div>{history.automationName}</div>
-      </div>
-      {#if history.status === STOPPED_ERROR}
-        <div class="cron-error">
-          <InlineAlert
-            type="error"
-            header="CRON automation disabled"
-            message="Fix the error and re-publish your app to re-activate."
-          />
-        </div>
-      {/if}
-      <div>
-        {#if exists}
-          <ActionButton
-            icon="Edit"
-            fullWidth={false}
-            on:click={() =>
-              $goto(`../../../app/${appId}/automate/${history.automationId}`)}
-            >Edit automation</ActionButton
-          >
-        {/if}
-      </div>
-    </Layout>
-    <div class="bottom">
-      {#key history}
-        <TestDisplay testResults={history} width="100%" />
-      {/key}
-    </div>
-  </div>
-{:else}
-  <div>No details found</div>
-{/if}
-
-<style>
-  .body {
-    right: 0;
-    background-color: var(--background);
-    border-left: var(--border-light);
-    width: 420px;
-    height: calc(100vh - 240px);
-    position: fixed;
-    overflow: auto;
-  }
-
-  .top {
-    padding: var(--spacing-m) 0 var(--spacing-m) 0;
-    border-bottom: var(--border-light);
-  }
-
-  .bottom {
-    border-top: var(--border-light);
-    padding-top: calc(var(--spacing-xl) * 2);
-    padding-bottom: calc(var(--spacing-xl) * 2);
-  }
-
-  .icon {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .controls {
-    padding: 0 var(--spacing-l) 0 var(--spacing-l);
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: var(--spacing-s);
-  }
-
-  .cron-error {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-</style>

packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: status = getStatus(isError, isStopped)
-
-  function getStatus(error, stopped) {
-    if (error) {
-      return { color: "var(--red)", message: "Error", icon: "Alert" }
-    } else if (stopped) {
-      return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
-    } else {
-      return {
-        color: "var(--green)",
-        message: "Success",
-        icon: "CheckmarkCircle",
-      }
-    }
-  }
-</script>
-
-<div class="cell">
-  <Icon color={status.color} name={status.icon} />
-  <div style={`color: ${status.color};`}>
-    {status.message}
-  </div>
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>

packages/builder/src/components/portal/page/Breadcrumb.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let url
+  export let text
+</script>
+
+<div>
+  <a href={url}>
+    {text}
+  </a>
+  <Icon name="ChevronRight" />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-700);
+    gap: var(--spacing-m);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  div :global(.spectrum-Icon),
+  a {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

packages/builder/src/components/portal/page/Breadcrumbs.svelte

@@ -0,0 +1,22 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  div :global(> *:last-child .spectrum-Icon) {
+    display: none;
+  }
+  div :global(> *:last-child) {
+    color: var(--spectrum-global-color-gray-900);
+    flex: 1 1 auto;
+    width: 0;
+  }
+</style>

packages/builder/src/components/portal/page/Content.svelte

@@ -0,0 +1,46 @@
+<script>
+  export let narrow = false
+  export let showMobileNav = false
+</script>
+
+<div class="content">
+  <div class="side-nav" class:show-mobile={showMobileNav}>
+    <slot name="side-nav" />
+  </div>
+  <div class="main" class:narrow>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 40px;
+  }
+  .side-nav {
+    flex: 0 0 200px;
+  }
+  .main {
+    flex: 1 1 auto;
+  }
+  .main.narrow {
+    max-width: 600px;
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+    }
+    .side-nav:not(.show-mobile) {
+      display: none;
+    }
+    .side-nav.show-mobile :global(.side-nav) {
+      border-bottom: var(--border-light);
+      margin: 0 -24px;
+      padding: 0 24px 32px 24px;
+    }
+  }
+</style>

packages/builder/src/components/portal/page/Header.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { Heading } from "@budibase/bbui"
+
+  export let title
+  export let wrap = true
+</script>
+
+<div class="header" class:wrap>
+  <slot name="icon" />
+  <Heading size="L">{title}</Heading>
+  <div class="buttons">
+    <slot name="buttons" />
+  </div>
+</div>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .header.wrap {
+    flex-wrap: wrap;
+  }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    margin-top: -2px;
+  }
+  .header:not(.wrap) :global(.spectrum-Heading) {
+    overflow: hidden;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .buttons :global(> div) {
+    display: contents;
+  }
+  @media (max-width: 640px) {
+    .wrap .buttons {
+      margin-bottom: var(--spacing-m);
+    }
+  }
+</style>

packages/builder/src/components/portal/page/SideNav.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let title
+</script>
+
+<div class="side-nav">
+  {#if title}
+    <div class="title">{title}</div>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 4px;
+  }
+  .title {
+    margin-left: var(--spacing-m);
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let text
+  export let url
+  export let active = false
+</script>
+
+<a on:click href={url} class:active>
+  {text || ""}
+</a>
+
+<style>
+  a {
+    padding: var(--spacing-s) var(--spacing-m);
+    color: var(--spectrum-global-color-gray-900);
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+  }
+  .active,
+  a:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

packages/builder/src/components/portal/page/index.js

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte"
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
+export { default as Header } from "./Header.svelte"
+export { default as Content } from "./Content.svelte"
+export { default as SideNavItem } from "./SideNavItem.svelte"
+export { default as SideNav } from "./SideNav.svelte"

packages/builder/src/components/settings/APIKeyModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import { ModalContent } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
   import { auth } from "stores/portal"
   import { onMount } from "svelte"
   import CopyInput from "components/common/inputs/CopyInput.svelte"
@@ -27,15 +28,13 @@
 </script>
 
 <ModalContent
-  title="Developer information"
+  title="API Key"
-  showConfirmButton={false}
+  showSecondaryButton
-  showSecondaryButton={true}
+  secondaryButtonText="Regenerate key"
-  secondaryButtonText="Re-generate key"
   secondaryAction={generateAPIKey}
+  showCancelButton={false}
+  confirmText="Close"
 >
-  <Body size="S">
+  <Body size="S">Your API key for accessing the Budibase public API:</Body>
-    You can find information about your developer account here, such as the API
+  <CopyInput bind:value={apiKey} />
-    key used to access the Budibase API.
-  </Body>
-  <CopyInput bind:value={apiKey} label="API key" />
 </ModalContent>

packages/builder/src/components/settings/ProfileModal.svelte

@@ -18,11 +18,7 @@
   }
 </script>
 
-<ModalContent
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
-  title="Update user information"
-  confirmText="Update information"
-  onConfirm={updateInfo}
->
   <Body size="S">
     Personalise the platform by adding your first name and last name.
   </Body>

packages/builder/src/components/settings/ThemeModal.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
+</script>
+
+<ModalContent title="Theme">
+  <Select
+    options={Constants.Themes}
+    bind:value={$themeStore.theme}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.class}
+  />
+</ModalContent>

packages/builder/src/components/start/AppRow.svelte

@@ -1,85 +1,126 @@
 <script>
-  import { Heading, Button, Icon } from "@budibase/bbui"
+  import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
   import AppLockModal from "../common/AppLockModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
+  import { goto } from "@roxi/routify"
 
   export let app
-  export let editApp
+
-  export let appOverview
+  const handleDefaultClick = () => {
+    if (window.innerWidth < 640) {
+      goToOverview()
+    } else {
+      goToBuilder()
+    }
+  }
+
+  const goToBuilder = () => {
+    if (app.lockedOther) {
+      notifications.error(
+        `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
+      )
+      return
+    }
+    $goto(`../../app/${app.devId}`)
+  }
+
+  const goToOverview = () => {
+    $goto(`../overview/${app.devId}`)
+  }
 </script>
 
-<div class="title" data-cy={`${app.devId}`}>
+<div class="app-row" on:click={handleDefaultClick}>
-  <div>
+  <div class="title" data-cy={`${app.devId}`}>
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
+    <div class="app-icon">
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
+      <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
     </div>
-    <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
+    <div class="name" data-cy="app-name-link">
-      <Heading size="XS">
+      <Heading size="S">
         {app.name}
       </Heading>
     </div>
   </div>
-</div>
+
-<div class="desktop">
+  <div class="updated">
-  {#if app.updatedAt}
+    {#if app.updatedAt}
-    {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+      {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
-      time: new Date().getTime() - new Date(app.updatedAt).getTime(),
+        time: new Date().getTime() - new Date(app.updatedAt).getTime(),
-    })}
+      })}
-  {:else}
-    Never updated
-  {/if}
-</div>
-<div class="desktop">
-  <span><AppLockModal {app} buttonSize="M" /></span>
-</div>
-<div class="desktop">
-  <div class="app-status">
-    {#if app.deployed}
-      <Icon name="Globe" disabled={false} />
-      Published
     {:else}
-      <Icon name="GlobeStrike" disabled={true} />
+      Never updated
-      <span class="disabled"> Unpublished </span>
     {/if}
   </div>
-</div>
+
-<div data-cy={`row_actions_${app.appId}`}>
+  <div class="title app-status" class:deployed={app.deployed}>
-  <div class="app-row-actions">
+    <Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
-    <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
+    <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
-      Manage
+  </div>
-    </Button>
+
-    <Button
+  <div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
-      size="S"
+    <AppLockModal {app} buttonSize="M" />
-      primary
+    <Button size="S" secondary on:click={goToOverview}>Manage</Button>
-      newStyles
+    <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
-      disabled={app.lockedOther}
-      on:click={() => editApp(app)}
-    >
       Edit
     </Button>
   </div>
 </div>
 
 <style>
-  div.title,
+  .app-row {
-  div.title > div {
+    background: var(--background);
-    display: flex;
+    padding: 24px 32px;
-    max-width: 100%;
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: 35% 25% 15% auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    transition: border 130ms ease-out;
+    border: 1px solid transparent;
   }
+  .app-row:hover {
+    cursor: pointer;
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .updated {
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .title,
+  .name {
+    flex: 1 1 auto;
+  }
+  .name {
+    width: 0;
+  }
+  .title,
+  .app-status {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .title :global(.spectrum-Heading),
+  .title :global(.spectrum-Icon),
+  .title :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .app-status:not(.deployed) :global(.spectrum-Icon),
+  .app-status:not(.deployed) :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   .app-row-actions {
-    grid-gap: var(--spacing-s);
+    gap: var(--spacing-m);
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    align-items: center;
   }
-  .app-status {
+
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: 24px 100px;
-  }
-  .app-status span.disabled {
-    opacity: 0.3;
-  }
   .name {
     text-decoration: none;
     overflow: hidden;
@@ -88,17 +129,30 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
   }
 
+  @media (max-width: 1000px) {
+    .app-row {
+      grid-template-columns: 45% 30% auto;
+    }
+    .updated {
+      display: none;
+    }
+  }
+  @media (max-width: 800px) {
+    .app-row {
+      grid-template-columns: 1fr auto;
+    }
+    .app-status {
+      display: none;
+    }
+  }
   @media (max-width: 640px) {
-    .desktop {
+    .app-row {
-      display: none !important;
+      padding: 20px;
+    }
+    .app-row-actions {
+      display: none;
     }
   }
 </style>

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -1,18 +1,20 @@
 <script>
   import {
     ModalContent,
-    Modal,
     Icon,
     ColorPicker,
     Label,
     notifications,
   } from "@budibase/bbui"
   import { apps } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
 
   export let app
-  let modal
+  export let name
-  $: selectedIcon = app?.icon?.name || "Apps"
+  export let color
-  $: selectedColor = app?.icon?.color
+  export let autoSave = false
+
+  const dispatch = createEventDispatcher()
 
   let iconsList = [
     "Apps",
@@ -40,30 +42,15 @@
     "GraphBarHorizontal",
     "Demographic",
   ]
-  export const show = () => {
-    modal.show()
-  }
-  export const hide = () => {
-    modal.hide()
-  }
-
-  const onCancel = () => {
-    selectedIcon = ""
-    selectedColor = ""
-    hide()
-  }
-
-  const changeColor = val => {
-    selectedColor = val
-  }
 
   const save = async () => {
+    if (!autoSave) {
+      dispatch("change", { color, name })
+      return
+    }
     try {
       await apps.update(app.instance._id, {
-        icon: {
+        icon: { name, color },
-          name: selectedIcon,
-          color: selectedColor,
-        },
       })
     } catch (error) {
       notifications.error("Error updating app")
@@ -71,41 +58,32 @@
   }
 </script>
 
-<Modal bind:this={modal} on:hide={onCancel}>
+<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
-  <ModalContent
+  <div class="scrollable-icons">
-    title={"Edit Icon"}
+    <div class="title-spacing">
-    confirmText={"Save"}
+      <Label>Select an icon</Label>
-    onConfirm={() => save()}
-  >
-    <div class="scrollable-icons">
-      <div class="title-spacing">
-        <Label>Select an icon</Label>
-      </div>
-      <div class="grid">
-        {#each iconsList as item}
-          <div
-            class="icon-item"
-            class:selected={item === selectedIcon}
-            on:click={() => (selectedIcon = item)}
-          >
-            <Icon name={item} />
-          </div>
-        {/each}
-      </div>
     </div>
-    <div class="color-selection">
+    <div class="grid">
-      <div>
+      {#each iconsList as item}
-        <Label>Select a color</Label>
+        <div
-      </div>
+          class="icon-item"
-      <div class="color-selection-item">
+          class:selected={item === name}
-        <ColorPicker
+          on:click={() => (name = item)}
-          bind:value={selectedColor}
+        >
-          on:change={e => changeColor(e.detail)}
+          <Icon name={item} />
-        />
+        </div>
-      </div>
+      {/each}
     </div>
-  </ModalContent>
+  </div>
-</Modal>
+  <div class="color-selection">
+    <div>
+      <Label>Select a color</Label>
+    </div>
+    <div class="color-selection-item">
+      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
+    </div>
+  </div>
+</ModalContent>
 
 <style>
   .scrollable-icons {

packages/builder/src/components/start/CreateAppModal.svelte

@@ -138,6 +138,7 @@
       }
 
       $goto(`/builder/app/${createdApp.instance._id}`)
+      // apps.load()
     } catch (error) {
       creating = false
       console.error(error)

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -1,22 +1,29 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
   import { apps } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
+  import EditableIcon from "../common/EditableIcon.svelte"
 
   export let app
 
-  const values = writable({ name: "", url: null })
+  const values = writable({
-  const validation = createValidationStore()
+    name: app.name,
-  $: validation.check($values)
+    url: app.url,
-
+    iconName: app.icon?.name,
-  onMount(async () => {
+    iconColor: app.icon?.color,
-    $values.name = app.name
-    $values.url = app.url
-    setupValidation()
   })
+  const validation = createValidationStore()
+
+  $: validation.check($values)
 
   const setupValidation = async () => {
     const applications = svelteGet(apps)
@@ -28,14 +35,14 @@
 
   async function updateApp() {
     try {
-      // Update App
+      await apps.update(app.instance._id, {
-      const body = {
+        name: $values.name?.trim(),
-        name: $values.name.trim(),
+        url: $values.url?.trim(),
-      }
+        icon: {
-      if ($values.url) {
+          name: $values.iconName,
-        body.url = $values.url.trim()
+          color: $values.iconColor,
-      }
+        },
-      await apps.update(app.instance._id, body)
+      })
     } catch (error) {
       console.error(error)
       notifications.error("Error updating app")
@@ -68,15 +75,22 @@
     let resolvedUrl = resolveAppUrl(null, appName)
     tidyUrl(resolvedUrl)
   }
+
+  const updateIcon = e => {
+    const { name, color } = e.detail
+    $values.iconColor = color
+    $values.iconName = name
+  }
+
+  onMount(setupValidation)
 </script>
 
 <ModalContent
-  title={"Edit app"}
+  title="Edit name and URL"
-  confirmText={"Save"}
+  confirmText="Save"
   onConfirm={updateApp}
   disabled={!$validation.valid}
 >
-  <Body size="S">Update the name of your app.</Body>
   <Input
     bind:value={$values.name}
     error={$validation.touched.name && $validation.errors.name}
@@ -84,6 +98,16 @@
     on:change={nameToUrl($values.name)}
     label="Name"
   />
+  <Layout noPadding gap="XS">
+    <Label>Icon</Label>
+    <EditableIcon
+      {app}
+      size="XL"
+      name={$values.iconName}
+      color={$values.iconColor}
+      on:change={updateIcon}
+    />
+  </Layout>
   <Input
     bind:value={$values.url}
     error={$validation.touched.url && $validation.errors.url}

packages/builder/src/components/usage/Usage.svelte

@@ -39,15 +39,21 @@
       {#if showWarning}
         <Icon name="Alert" />
       {/if}
-      <div class="heading header-item">
+      <Heading size="XS" weight="light">
-        <Heading size="XS" weight="light">{usage.name}</Heading>
+        <span class="nowrap">
-      </div>
+          {usage.name}
+        </span>
+      </Heading>
     </div>
-    {#if unlimited}
+    <Body size="S">
-      <Body size="S">{usage.used} / Unlimited</Body>
+      <span class="nowrap">
-    {:else}
+        {#if unlimited}
-      <Body size="S">{usage.used} / {usage.total}</Body>
+          {usage.used} / Unlimited
-    {/if}
+        {:else}
+          {usage.used} / {usage.total}
+        {/if}
+      </span>
+    </Body>
   </div>
   <div>
     {#if unlimited}
@@ -89,13 +95,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: flex-end;
     margin-bottom: 12px;
+    gap: var(--spacing-m);
   }
   .header-container {
     display: flex;
   }
-  .heading {
+  .nowrap {
-    margin-top: 3px;
+    white-space: nowrap;
-    margin-left: 5px;
   }
 </style>

packages/builder/src/components/usage/UsageDashCard.svelte

@@ -47,7 +47,7 @@
     <div class="header-actions">
       {#if secondaryDefined}
         <div>
-          <Button newStyles secondary on:click={secondaryAction}
+          <Button secondary on:click={secondaryAction}
             >{secondaryActionText}</Button
           >
         </div>

packages/builder/src/global.css

@@ -23,7 +23,6 @@ body {
   --grey-8: var(--spectrum-global-color-gray-800);
   --grey-9: var(--spectrum-global-color-gray-900);
 
-  font-family: var(--font-sans);
   color: var(--ink);
   background-color: var(--background-alt);
 }

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

@@ -105,32 +105,34 @@
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Access`)}
+              $goto(`../../portal/overview/${application}/access`)}
           >
             Access
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(
+              $goto(`../../portal/overview/${application}/automation-history`)}
-                `../../portal/overview/${application}?tab=${encodeURIComponent(
-                  "Automation History"
-                )}`
-              )}
           >
             Automation history
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Backups`)}
+              $goto(`../../portal/overview/${application}/backups`)}
           >
             Backups
           </MenuItem>
 
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Settings`)}
+              $goto(`../../portal/overview/${application}/name-and-url`)}
           >
-            Settings
+            Name and URL
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
+          >
+            Version
           </MenuItem>
         </ActionMenu>
         <Heading size="XS">{$store.name || "App"}</Heading>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -176,7 +176,6 @@
   const addComponent = async component => {
     try {
       await store.actions.components.create(component)
-      $goto("../")
     } catch (error) {
       notifications.error(error || "Error creating component")
     }
@@ -263,6 +262,7 @@
                     orderMap[component.component]}
                   on:click={() => addComponent(component.component)}
                   on:mouseover={() => (selectedIndex = null)}
+                  on:focus
                 >
                   <Icon name={component.icon} />
                   <Body size="XS">{component.name}</Body>

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

@@ -20,6 +20,7 @@
   class="container"
   on:mouseover={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
+  on:focus
   style="--color: {color};"
 >
   <StatusLight square {color} />

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

@@ -172,7 +172,7 @@
         {bindings}
       />
     {/each}
-    <Button secondary newStyles on:click={() => $goto("../components")}>
+    <Button secondary on:click={() => $goto("../components")}>
       View components
     </Button>
   </Layout>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte

@@ -17,7 +17,7 @@
 <div class="container">
   <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
   <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
-    <Button primary newStyles>Button</Button>
+    <Button primary>Button</Button>
   </div>
 </div>