Merge branch 'feature/test-image' into feature/dependencies-image

2023-01-23 18:43:36 +00:00 · 2023-01-23 18:43:36 +00:00 · 4df4494d00
parent 422d4e92cc 17f6c505e0
commit 4df4494d00
44 changed files with 2088 additions and 371 deletions
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/backend-core",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "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.32",
+    "@budibase/types": "2.2.12-alpha.34",
    "@shopify/jest-koa-mocks": "5.0.1",
    "@techpass/passport-openidconnect": "0.3.2",
    "aws-cloudfront-sign": "2.2.0",
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/bbui",
  "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "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.32",
+    "@budibase/string-templates": "2.2.12-alpha.34",
+    "@spectrum-css/accordion": "3.0.24",
    "@spectrum-css/actionbutton": "1.0.1",
    "@spectrum-css/actiongroup": "1.0.1",
    "@spectrum-css/avatar": "3.0.2",
--- a/packages/bbui/src/Accordion/Accordion.svelte
+++ b/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>
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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;
--- a/packages/bbui/src/FancyForm/FancyButton.svelte
+++ b/packages/bbui/src/FancyForm/FancyButton.svelte
@ -0,0 +1,29 @@
+<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}
+  <div>
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  img {
+    width: 22px;
+  }
+  div {
+    font-size: var(--font-size-l);
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
+++ b/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>
--- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte
+++ b/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>
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/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>
--- a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
+++ b/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>
--- a/packages/bbui/src/FancyForm/FancyForm.svelte
+++ b/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>
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@ -0,0 +1,63 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+
+  export let label
+  export let value
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let validate = 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
+  />
+</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;
+  }
+  input.placeholder {
+    transform: translateY(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@ -0,0 +1,135 @@
+<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
+
+  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
+  }
+</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>
+    {value || ""}
+  </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>
--- a/packages/bbui/src/FancyForm/index.js
+++ b/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"
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/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)
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@ -18,6 +18,7 @@
  <div class="main">
    <div class="content" class:wide class:noPadding class:narrow>
      <slot />
+      <div class="fix-scroll-padding" />
    </div>
  </div>
  <div
@ -55,9 +56,14 @@
    max-width: 1080px;
    margin: 0 auto;
    flex: 1 1 auto;
-    padding: 50px;
+    padding: 50px 50px 0 50px;
    z-index: 1;
  }
+  .fix-scroll-padding {
+    content: "";
+    display: block;
+    flex: 0 0 50px;
+  }
  .content.wide {
    max-width: none;
  }
--- a/packages/bbui/src/Link/Link.svelte
+++ b/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}
--- a/packages/bbui/src/index.js
+++ b/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"
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@ -109,10 +109,15 @@
    estree-walker "^1.0.1"
    picomatch "^2.2.2"

-"@spectrum-css/actionbutton@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
-  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+"@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.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.2.tgz#7753a94c64cebecfca6749ef20e37a5ea80c59be"
+  integrity sha512-laDWk7PCgy2I0AGsMjTmYKkiMVYVoF1B4tffJf4cIp66znTiqPHEbLDh5EDNU88JLTY2bWoCOY4cJxvXk5gERw==

 "@spectrum-css/actiongroup@1.0.1":
  version "1.0.1"
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "license": "GPL-3.0",
  "private": true,
  "scripts": {
@ -71,11 +71,12 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "2.2.12-alpha.32",
-    "@budibase/client": "2.2.12-alpha.32",
-    "@budibase/frontend-core": "2.2.12-alpha.32",
-    "@budibase/string-templates": "2.2.12-alpha.32",
+    "@budibase/bbui": "2.2.12-alpha.34",
+    "@budibase/client": "2.2.12-alpha.34",
+    "@budibase/frontend-core": "2.2.12-alpha.34",
+    "@budibase/string-templates": "2.2.12-alpha.34",
    "@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",
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/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>
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@ -5,7 +5,7 @@
 </script>

 <a on:click href={url} class:active>
-  {text}
+  {text || ""}
 </a>

 <style>
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -98,7 +98,7 @@
  /* Customise tabs appearance*/
  .nav :global(.spectrum-Tabs) {
    margin-bottom: -2px;
-    padding: 7px 0;
+    padding: 5px 0;
    flex: 1 1 auto;
  }
  .nav :global(.spectrum-Tabs-content) {
--- a/packages/builder/src/pages/builder/portal/account/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/account/_layout.svelte
@ -1,14 +1,15 @@
 <script>
-  import { isActive } from "@roxi/routify"
+  import { goto, isActive } from "@roxi/routify"
  import { Page } from "@budibase/bbui"
  import { Content, SideNav, SideNavItem } from "components/portal/page"
  import { menu } from "stores/portal"

-  $: pages = $menu.find(x => x.title === "Account").subPages
+  $: pages = $menu.find(x => x.title === "Account")?.subPages || []
+  $: !pages.length && $goto("../")
 </script>

-<Page narrow>
-  <Content>
+<Page>
+  <Content narrow>
    <div slot="side-nav">
      <SideNav>
        {#each pages as { title, href }}
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -227,7 +227,7 @@
      {/each}
      <div class="title">
        <div class="welcome">
-          <Layout noPadding gap="S">
+          <Layout noPadding gap="XS">
            <Heading size="L">{welcomeHeader}</Heading>
            <Body size="M">
              Manage your apps and get a head start with templates
--- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
@ -1,11 +1,12 @@
 <script>
-  import { isActive } from "@roxi/routify"
+  import { goto, isActive } from "@roxi/routify"
  import { Page } from "@budibase/bbui"
  import { Content, SideNav, SideNavItem } from "components/portal/page"
  import { menu } from "stores/portal"

  $: wide = $isActive("./email/:template")
-  $: pages = $menu.find(x => x.title === "Settings").subPages
+  $: pages = $menu.find(x => x.title === "Settings")?.subPages || []
+  $: !pages.length && $goto("../")
 </script>

 <Page>
--- a/packages/builder/src/pages/builder/portal/users/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte
@ -1,11 +1,12 @@
 <script>
  import { Page } from "@budibase/bbui"
  import { SideNav, SideNavItem, Content } from "components/portal/page"
-  import { isActive } from "@roxi/routify"
+  import { isActive, goto } from "@roxi/routify"
  import { menu } from "stores/portal"

  $: wide = $isActive("./users/index") || $isActive("./groups/index")
-  $: pages = $menu.find(x => x.title === "Users").subPages
+  $: pages = $menu.find(x => x.title === "Users")?.subPages || []
+  $: !pages.length && $goto("../")
 </script>

 <Page>
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -1356,6 +1356,11 @@
  dependencies:
    "@sinonjs/commons" "^1.7.0"

+"@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/page@^3.0.1":
  version "3.0.8"
  resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.8.tgz#001efa9e4c10095df9b2b37cf7d7d6eb60140190"
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/cli",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Budibase CLI, for developers, self hosting and migrations.",
  "main": "src/index.js",
  "bin": {
@ -26,9 +26,9 @@
    "outputPath": "build"
  },
  "dependencies": {
-    "@budibase/backend-core": "2.2.12-alpha.32",
-    "@budibase/string-templates": "2.2.12-alpha.32",
-    "@budibase/types": "2.2.12-alpha.32",
+    "@budibase/backend-core": "2.2.12-alpha.34",
+    "@budibase/string-templates": "2.2.12-alpha.34",
+    "@budibase/types": "2.2.12-alpha.34",
    "axios": "0.21.2",
    "chalk": "4.1.0",
    "cli-progress": "3.11.2",
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/client",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "license": "MPL-2.0",
  "module": "dist/budibase-client.js",
  "main": "dist/budibase-client.js",
@ -19,9 +19,9 @@
    "dev:builder": "rollup -cw"
  },
  "dependencies": {
-    "@budibase/bbui": "2.2.12-alpha.32",
-    "@budibase/frontend-core": "2.2.12-alpha.32",
-    "@budibase/string-templates": "2.2.12-alpha.32",
+    "@budibase/bbui": "2.2.12-alpha.34",
+    "@budibase/frontend-core": "2.2.12-alpha.34",
+    "@budibase/string-templates": "2.2.12-alpha.34",
    "@spectrum-css/button": "^3.0.3",
    "@spectrum-css/card": "^3.0.3",
    "@spectrum-css/divider": "^1.0.3",
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@ -1,12 +1,12 @@
 {
  "name": "@budibase/frontend-core",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Budibase frontend core libraries used in builder and client",
  "author": "Budibase",
  "license": "MPL-2.0",
  "svelte": "src/index.js",
  "dependencies": {
-    "@budibase/bbui": "2.2.12-alpha.32",
+    "@budibase/bbui": "2.2.12-alpha.34",
    "lodash": "^4.17.21",
    "svelte": "^3.46.2"
  }
--- a/packages/frontend-core/src/components/SplitPage.svelte
+++ b/packages/frontend-core/src/components/SplitPage.svelte
@ -0,0 +1,50 @@
+<div class="split-page">
+  <div class="left">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+  <div class="right">
+    <slot name="right" />
+  </div>
+</div>
+
+<style>
+  .split-page {
+    height: 100%;
+    display: grid;
+    grid-template-columns: max(50%, 380px) 1fr;
+    justify-content: stretch;
+    overflow: hidden;
+  }
+  .left {
+    background: var(--background);
+    display: grid;
+    place-items: center;
+    padding: 40px;
+    overflow-y: auto;
+  }
+  .right {
+    background: linear-gradient(
+      to bottom right,
+      var(--spectrum-global-color-gray-300) 0%,
+      var(--background) 100%
+    );
+  }
+  .content {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  @media (max-width: 740px) {
+    .split-page {
+      grid-template-columns: 1fr;
+    }
+    .left {
+      padding: 20px;
+    }
+    .right {
+      display: none;
+    }
+  }
+</style>
--- a/packages/frontend-core/src/components/TestimonialPage.svelte
+++ b/packages/frontend-core/src/components/TestimonialPage.svelte
@ -0,0 +1,62 @@
+<script>
+  import SplitPage from "./SplitPage.svelte"
+  import { Layout } from "@budibase/bbui"
+</script>
+
+<SplitPage>
+  <slot />
+  <div class="wrapper" slot="right">
+    <div class="testimonial">
+      <Layout noPadding gap="S">
+        <div class="text">
+          "Here is an example of how Budibase changed my life for the better and
+          now all I do is eat, sleep, build apps, repeat."
+        </div>
+        <div class="user">
+          <img
+            src="https://icon-library.com/images/male-user-icon/male-user-icon-24.jpg"
+          />
+          <div class="author">
+            <div class="name">No-code Enthusiast</div>
+            <div class="company">Bedroom TLD</div>
+          </div>
+        </div>
+      </Layout>
+    </div>
+  </div>
+</SplitPage>
+
+<style>
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+  .testimonial {
+    width: 280px;
+    padding: 40px;
+  }
+  .text {
+    font-size: var(--font-size-l);
+    font-style: italic;
+  }
+  img {
+    width: 40px;
+  }
+  .user {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .name {
+    font-weight: bold;
+    color: var(--spectrum-global-color-gray-900);
+    font-size: var(--font-size-l);
+  }
+  .company {
+    color: var(--spectrum-global-color-gray-700);
+  }
+</style>
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@ -0,0 +1,2 @@
+export { default as SplitPage } from "./SplitPage.svelte"
+export { default as TestimonialPage } from "./TestimonialPage.svelte"
--- a/packages/frontend-core/src/index.js
+++ b/packages/frontend-core/src/index.js
@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData"
 export * as Constants from "./constants"
 export * from "./stores"
 export * from "./utils"
+export * from "./components"
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/sdk",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Budibase Public API SDK",
  "author": "Budibase",
  "license": "MPL-2.0",
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/server",
  "email": "hi@budibase.com",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Budibase Web Server",
  "main": "src/index.ts",
  "repository": {
@ -43,11 +43,11 @@
  "license": "GPL-3.0",
  "dependencies": {
    "@apidevtools/swagger-parser": "10.0.3",
-    "@budibase/backend-core": "2.2.12-alpha.32",
-    "@budibase/client": "2.2.12-alpha.32",
-    "@budibase/pro": "2.2.12-alpha.32",
-    "@budibase/string-templates": "2.2.12-alpha.32",
-    "@budibase/types": "2.2.12-alpha.32",
+    "@budibase/backend-core": "2.2.12-alpha.34",
+    "@budibase/client": "2.2.12-alpha.34",
+    "@budibase/pro": "2.2.12-alpha.34",
+    "@budibase/string-templates": "2.2.12-alpha.34",
+    "@budibase/types": "2.2.12-alpha.34",
    "@bull-board/api": "3.7.0",
    "@bull-board/koa": "3.9.4",
    "@elastic/elasticsearch": "7.10.0",
--- a/packages/server/src/integrations/mongodb.ts
+++ b/packages/server/src/integrations/mongodb.ts
@ -12,11 +12,16 @@ import {
  FindOneAndUpdateOptions,
  UpdateOptions,
  OperationOptions,
+  MongoClientOptions,
 } from "mongodb"
+import environment from "../environment"

 interface MongoDBConfig {
  connectionString: string
  db: string
+  tlsCertificateFile: string
+  tlsCertificateKeyFile: string
+  tlsCAFile: string
 }

 interface MongoDBQuery {
@ -26,292 +31,331 @@ interface MongoDBQuery {
  }
 }

-const SCHEMA: Integration = {
-  docs: "https://github.com/mongodb/node-mongodb-native",
-  friendlyName: "MongoDB",
-  type: "Non-relational",
-  description:
-    "MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.",
-  datasource: {
-    connectionString: {
-      type: DatasourceFieldType.STRING,
-      required: true,
-      default: "mongodb://localhost:27017",
-    },
-    db: {
-      type: DatasourceFieldType.STRING,
-      required: true,
-    },
-  },
-  query: {
-    create: {
-      type: QueryType.JSON,
-    },
-    read: {
-      type: QueryType.JSON,
-    },
-    update: {
-      type: QueryType.JSON,
-    },
-    delete: {
-      type: QueryType.JSON,
-    },
-    aggregate: {
-      type: QueryType.JSON,
-      readable: true,
-      steps: [
-        {
-          key: "$addFields",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$bucket",
-          template: `{
-  "groupBy": "",
-  "boundaries": [],
-  "default": "",
-  "output": {}
-}`,
-        },
-        {
-          key: "$bucketAuto",
-          template: `{
-  "groupBy": "",
-  "buckets": 1,
-  "output": {},
-  "granularity": "R5"
-}`,
-        },
-        {
-          key: "$changeStream",
-          template: `{
-  "allChangesForCluster": true,
-  "fullDocument": "",
-  "fullDocumentBeforeChange": "",
-  "resumeAfter": 1,
-  "showExpandedEvents": true,
-  "startAfter": {},
-  "startAtOperationTime": ""
-}`,
-        },
-        {
-          key: "$collStats",
-          template: `{
-  "latencyStats": { "histograms": true } },
-  "storageStats": { "scale": 1 } },
-  "count": {},
-  "queryExecStats": {}
-}`,
-        },
-        {
-          key: "$count",
-          template: ``,
-        },
-        {
-          key: "$densify",
-          template: `{
-  "field": "",
-  "partitionByFields": [],
-  "range": {
-    "step": 1,
-    "unit": 1,
-    "bounds": "full"
-  }
-}`,
-        },
-        {
-          key: "$documents",
-          template: `[]`,
-        },
-        {
-          key: "$facet",
-          template: `{\n\t\n}`,
-        },
-        {
-          key: "$fill",
-          template: `{
-  "partitionBy": "",
-  "partitionByFields": [],
-  "sortBy": {},
-  "output": {}
-}`,
-        },
-        {
-          key: "$geoNear",
-          template: `{
-  "near": { 
-    "type": "Point", 
-    "coordinates": [ 
-      -73.98142, 40.71782
-    ] 
-  },
-  "key": "location",
-  "distanceField": "dist.calculated",
-  "query": { "category": "Parks" }
-}`,
-        },
-        {
-          key: "$graphLookup",
-          template: `{
-  "from": "",
-  "startWith": "",
-  "connectFromField": "",
-  "connectToField": "",
-  "as": "",
-  "maxDepth": 1,
-  "depthField": "",
-  "restrictSearchWithMatch": {}
-}`,
-        },
-        {
-          key: "$group",
-          template: `{
-  "_id": ""
-}`,
-        },
-        {
-          key: "$indexStats",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$limit",
-          template: `1`,
-        },
-        {
-          key: "$listLocalSessions",
-          template: `{\n\t\n}`,
-        },
-        {
-          key: "$listSessions",
-          template: `{\n\t\n}`,
-        },
-        {
-          key: "$lookup",
-          template: `{
-  "from": "",
-  "localField": "",
-  "foreignField": "",
-  "as": ""
-}`,
-        },
-        {
-          key: "$match",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$merge",
-          template: `{
-  "into": {},
-  "on": "_id",
-  "whenMatched": "replace",
-  "whenNotMatched": "insert"
-}`,
-        },
-        {
-          key: "$out",
-          template: `{
-  "db": "",
-  "coll": ""
-}`,
-        },
-        {
-          key: "$planCacheStats",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$project",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$redact",
-          template: "",
-        },
-        {
-          key: "$replaceRoot",
-          template: `{ "newRoot": "" }`,
-        },
-        {
-          key: "$replaceWith",
-          template: ``,
-        },
-        {
-          key: "$sample",
-          template: `{ "size": 3 }`,
-        },
-        {
-          key: "$set",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$setWindowFields",
-          template: `{
-  "partitionBy": "",
-  "sortBy": {},
-  "output": {}
-}`,
-        },
-        {
-          key: "$skip",
-          template: `1`,
-        },
-        {
-          key: "$sort",
-          template: "{\n\t\n}",
-        },
-        {
-          key: "$sortByCount",
-          template: "",
-        },
-        {
-          key: "$unionWith",
-          template: `{
-  "coll": "",
-  "pipeline": []
-}`,
-        },
-        {
-          key: "$unset",
-          template: "",
-        },
-        {
-          key: "$unwind",
-          template: `{
-  "path": "",
-  "includeArrayIndex": "",
-  "preserveNullAndEmptyArrays": true
-}`,
-        },
-      ],
-    },
-  },
-  extra: {
-    collection: {
-      displayName: "Collection",
-      type: DatasourceFieldType.STRING,
-      required: true,
-    },
-    actionType: {
-      displayName: "Query Type",
-      type: DatasourceFieldType.LIST,
-      required: true,
-      data: {
-        read: ["find", "findOne", "findOneAndUpdate", "count", "distinct"],
-        create: ["insertOne", "insertMany"],
-        update: ["updateOne", "updateMany"],
-        delete: ["deleteOne", "deleteMany"],
-        aggregate: ["json", "pipeline"],
+const getSchema = () => {
+  let schema = {
+    docs: "https://github.com/mongodb/node-mongodb-native",
+    friendlyName: "MongoDB",
+    type: "Non-relational",
+    description:
+      "MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.",
+    datasource: {
+      connectionString: {
+        type: DatasourceFieldType.STRING,
+        required: true,
+        default: "mongodb://localhost:27017",
+        display: "Connection string",
+      },
+      db: {
+        type: DatasourceFieldType.STRING,
+        required: true,
+        display: "DB",
      },
    },
-  },
+    query: {
+      create: {
+        type: QueryType.JSON,
+      },
+      read: {
+        type: QueryType.JSON,
+      },
+      update: {
+        type: QueryType.JSON,
+      },
+      delete: {
+        type: QueryType.JSON,
+      },
+      aggregate: {
+        type: QueryType.JSON,
+        readable: true,
+        steps: [
+          {
+            key: "$addFields",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$bucket",
+            template: `{
+    "groupBy": "",
+    "boundaries": [],
+    "default": "",
+    "output": {}
+  }`,
+          },
+          {
+            key: "$bucketAuto",
+            template: `{
+    "groupBy": "",
+    "buckets": 1,
+    "output": {},
+    "granularity": "R5"
+  }`,
+          },
+          {
+            key: "$changeStream",
+            template: `{
+    "allChangesForCluster": true,
+    "fullDocument": "",
+    "fullDocumentBeforeChange": "",
+    "resumeAfter": 1,
+    "showExpandedEvents": true,
+    "startAfter": {},
+    "startAtOperationTime": ""
+  }`,
+          },
+          {
+            key: "$collStats",
+            template: `{
+    "latencyStats": { "histograms": true } },
+    "storageStats": { "scale": 1 } },
+    "count": {},
+    "queryExecStats": {}
+  }`,
+          },
+          {
+            key: "$count",
+            template: ``,
+          },
+          {
+            key: "$densify",
+            template: `{
+    "field": "",
+    "partitionByFields": [],
+    "range": {
+      "step": 1,
+      "unit": 1,
+      "bounds": "full"
+    }
+  }`,
+          },
+          {
+            key: "$documents",
+            template: `[]`,
+          },
+          {
+            key: "$facet",
+            template: `{\n\t\n}`,
+          },
+          {
+            key: "$fill",
+            template: `{
+    "partitionBy": "",
+    "partitionByFields": [],
+    "sortBy": {},
+    "output": {}
+  }`,
+          },
+          {
+            key: "$geoNear",
+            template: `{
+    "near": { 
+      "type": "Point", 
+      "coordinates": [ 
+        -73.98142, 40.71782
+      ] 
+    },
+    "key": "location",
+    "distanceField": "dist.calculated",
+    "query": { "category": "Parks" }
+  }`,
+          },
+          {
+            key: "$graphLookup",
+            template: `{
+    "from": "",
+    "startWith": "",
+    "connectFromField": "",
+    "connectToField": "",
+    "as": "",
+    "maxDepth": 1,
+    "depthField": "",
+    "restrictSearchWithMatch": {}
+  }`,
+          },
+          {
+            key: "$group",
+            template: `{
+    "_id": ""
+  }`,
+          },
+          {
+            key: "$indexStats",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$limit",
+            template: `1`,
+          },
+          {
+            key: "$listLocalSessions",
+            template: `{\n\t\n}`,
+          },
+          {
+            key: "$listSessions",
+            template: `{\n\t\n}`,
+          },
+          {
+            key: "$lookup",
+            template: `{
+    "from": "",
+    "localField": "",
+    "foreignField": "",
+    "as": ""
+  }`,
+          },
+          {
+            key: "$match",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$merge",
+            template: `{
+    "into": {},
+    "on": "_id",
+    "whenMatched": "replace",
+    "whenNotMatched": "insert"
+  }`,
+          },
+          {
+            key: "$out",
+            template: `{
+    "db": "",
+    "coll": ""
+  }`,
+          },
+          {
+            key: "$planCacheStats",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$project",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$redact",
+            template: "",
+          },
+          {
+            key: "$replaceRoot",
+            template: `{ "newRoot": "" }`,
+          },
+          {
+            key: "$replaceWith",
+            template: ``,
+          },
+          {
+            key: "$sample",
+            template: `{ "size": 3 }`,
+          },
+          {
+            key: "$set",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$setWindowFields",
+            template: `{
+    "partitionBy": "",
+    "sortBy": {},
+    "output": {}
+  }`,
+          },
+          {
+            key: "$skip",
+            template: `1`,
+          },
+          {
+            key: "$sort",
+            template: "{\n\t\n}",
+          },
+          {
+            key: "$sortByCount",
+            template: "",
+          },
+          {
+            key: "$unionWith",
+            template: `{
+    "coll": "",
+    "pipeline": []
+  }`,
+          },
+          {
+            key: "$unset",
+            template: "",
+          },
+          {
+            key: "$unwind",
+            template: `{
+    "path": "",
+    "includeArrayIndex": "",
+    "preserveNullAndEmptyArrays": true
+  }`,
+          },
+        ],
+      },
+    },
+    extra: {
+      collection: {
+        displayName: "Collection",
+        type: DatasourceFieldType.STRING,
+        required: true,
+      },
+      actionType: {
+        displayName: "Query Type",
+        type: DatasourceFieldType.LIST,
+        required: true,
+        data: {
+          read: ["find", "findOne", "findOneAndUpdate", "count", "distinct"],
+          create: ["insertOne", "insertMany"],
+          update: ["updateOne", "updateMany"],
+          delete: ["deleteOne", "deleteMany"],
+          aggregate: ["json", "pipeline"],
+        },
+      },
+    },
+  }
+  if (environment.SELF_HOSTED) {
+    schema.datasource = {
+      ...schema.datasource,
+      //@ts-ignore
+      tls: {
+        type: DatasourceFieldType.FIELD_GROUP,
+        display: "Configure SSL",
+        fields: {
+          tlsCertificateFile: {
+            type: DatasourceFieldType.STRING,
+            required: false,
+            display: "Certificate file path",
+          },
+          tlsCertificateKeyFile: {
+            type: DatasourceFieldType.STRING,
+            required: false,
+            display: "Certificate Key file path",
+          },
+          tlsCAFile: {
+            type: DatasourceFieldType.STRING,
+            required: false,
+            display: "CA file path",
+          },
+        },
+      },
+    }
+  }
+  return schema
 }

+const SCHEMA: Integration = getSchema()
+
 class MongoIntegration implements IntegrationBase {
  private config: MongoDBConfig
  private client: any

  constructor(config: MongoDBConfig) {
    this.config = config
-    this.client = new MongoClient(config.connectionString)
+    const options: MongoClientOptions = {
+      tlsCertificateFile: config.tlsCertificateFile || undefined,
+      tlsCertificateKeyFile: config.tlsCertificateKeyFile || undefined,
+      tlsCAFile: config.tlsCAFile || undefined,
+    }
+    this.client = new MongoClient(config.connectionString, options)
  }

  async connect() {
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -1278,13 +1278,13 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

-"@budibase/backend-core@2.2.12-alpha.32":
-  version "2.2.12-alpha.32"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-2.2.12-alpha.32.tgz#5d53fdde38e80fdade73c59cb81623041984a5fc"
-  integrity sha512-XoaqGrttx01wlblI0+O23R9uS5FTMgK07juY6mUkdReCK46IvmG7FFnuYu0euKVRbhChSf5X8S+fvKIAEi1ZFw==
+"@budibase/backend-core@2.2.12-alpha.34":
+  version "2.2.12-alpha.34"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-2.2.12-alpha.34.tgz#0e2042ab8b2e52bf04c672283a50e153a3157e88"
+  integrity sha512-cViRaNxmi3RmAOZpBlRtFEj7l6umJjgB1k8B3J6KArvdxezZmV0smQrpX4colDLJhRfm1O5vQm6oigxGgZRpXg==
  dependencies:
    "@budibase/nano" "10.1.1"
-    "@budibase/types" "2.2.12-alpha.32"
+    "@budibase/types" "2.2.12-alpha.34"
    "@shopify/jest-koa-mocks" "5.0.1"
    "@techpass/passport-openidconnect" "0.3.2"
    aws-cloudfront-sign "2.2.0"
@ -1379,13 +1379,13 @@
    qs "^6.11.0"
    tough-cookie "^4.1.2"

-"@budibase/pro@2.2.12-alpha.32":
-  version "2.2.12-alpha.32"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.2.12-alpha.32.tgz#4f35b0ada97458cc69ee41ebb40d56b361518065"
-  integrity sha512-Kn/IahgIb9Ydzmasv4Bhlh3rvyAC2tBVSoI33OZ/6PKF0vPYJNJkFds3iGELNV7SyWoLbVWb2z5SQ4SSaOYsJw==
+"@budibase/pro@2.2.12-alpha.34":
+  version "2.2.12-alpha.34"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.2.12-alpha.34.tgz#7978fc6b8590990fc262a861e94b5d6f11488e3e"
+  integrity sha512-A/GYLM/yGQMqPmli+hkOFVyc6gv+BwdnClb2Ajyak72zoyRU4pMrcI5TSGevuYEiBXbebZjOZS8TAxZNYO04Zw==
  dependencies:
-    "@budibase/backend-core" "2.2.12-alpha.32"
-    "@budibase/types" "2.2.12-alpha.32"
+    "@budibase/backend-core" "2.2.12-alpha.34"
+    "@budibase/types" "2.2.12-alpha.34"
    "@koa/router" "8.0.8"
    bull "4.10.1"
    joi "17.6.0"
@ -1410,10 +1410,10 @@
    svelte-apexcharts "^1.0.2"
    svelte-flatpickr "^3.1.0"

-"@budibase/types@2.2.12-alpha.32":
-  version "2.2.12-alpha.32"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-2.2.12-alpha.32.tgz#71af8e8cff66acbfd65aa87e66183dd95d76ce6f"
-  integrity sha512-ZZwmO+0ORGEFbU/EQvtnjo1VonUbBdsciFkTOiopVupU5iNY2oCKgbYTQiTZZisQrRuiKdPV6P17uV+YTkjQSQ==
+"@budibase/types@2.2.12-alpha.34":
+  version "2.2.12-alpha.34"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-2.2.12-alpha.34.tgz#1f1b9993221f4f43cb300d08870a5a81736d4bd1"
+  integrity sha512-SWjZDUi6e2KBVPVW3ErjGSsr86/mpNrYurWyv9QVbk0leNI6K1Zlokk6CsDaHatcrRTPVdNxQBfgYzsp8gWaCQ==

 "@bull-board/api@3.7.0":
  version "3.7.0"
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/string-templates",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Handlebars wrapper for Budibase templating.",
  "main": "src/index.cjs",
  "module": "dist/bundle.mjs",
--- a/packages/types/package.json
+++ b/packages/types/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/types",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Budibase types",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
--- a/packages/types/src/sdk/datasources.ts
+++ b/packages/types/src/sdk/datasources.ts
@ -33,6 +33,7 @@ export enum DatasourceFieldType {
  OBJECT = "object",
  JSON = "json",
  FILE = "file",
+  FIELD_GROUP = "fieldGroup",
 }

 export enum SourceName {
@ -95,6 +96,16 @@ export interface ExtraQueryConfig {
  }
 }

+export interface DatasourceConfig {
+  [key: string]: {
+    type: string
+    display?: string
+    required?: boolean
+    default?: any
+    deprecated?: boolean
+  }
+}
+
 export interface Integration {
  docs: string
  plus?: boolean
@ -104,7 +115,7 @@ export interface Integration {
  friendlyName: string
  type?: string
  iconUrl?: string
-  datasource: {}
+  datasource: DatasourceConfig
  query: {
    [key: string]: QueryDefinition
  }
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/worker",
  "email": "hi@budibase.com",
-  "version": "2.2.12-alpha.32",
+  "version": "2.2.12-alpha.34",
  "description": "Budibase background service",
  "main": "src/index.ts",
  "repository": {
@ -36,10 +36,10 @@
  "author": "Budibase",
  "license": "GPL-3.0",
  "dependencies": {
-    "@budibase/backend-core": "2.2.12-alpha.32",
-    "@budibase/pro": "2.2.12-alpha.32",
-    "@budibase/string-templates": "2.2.12-alpha.32",
-    "@budibase/types": "2.2.12-alpha.32",
+    "@budibase/backend-core": "2.2.12-alpha.34",
+    "@budibase/pro": "2.2.12-alpha.34",
+    "@budibase/string-templates": "2.2.12-alpha.34",
+    "@budibase/types": "2.2.12-alpha.34",
    "@koa/router": "8.0.8",
    "@sentry/node": "6.17.7",
    "@techpass/passport-openidconnect": "0.3.2",
--- a/packages/worker/yarn.lock
+++ b/packages/worker/yarn.lock