Merge branch 'master' of github.com:Budibase/budibase into feature/audit-log-sqs

packages/backend-core/src/context/types.ts

@@ -1,4 +1,6 @@
 import { IdentityContext, Snippet, VM } from "@budibase/types"
+import { OAuth2Client } from "google-auth-library"
+import { GoogleSpreadsheet } from "google-spreadsheet"
 
 // keep this out of Budibase types, don't want to expose context info
 export type ContextMap = {
@@ -12,4 +14,8 @@ export type ContextMap = {
   vm?: VM
   cleanup?: (() => void | Promise<void>)[]
   snippets?: Snippet[]
+  googleSheets?: {
+    oauthClient: OAuth2Client
+    clients: Record<string, GoogleSpreadsheet>
+  }
 }

packages/backend-core/src/sql/sqlTable.ts

@@ -126,6 +126,7 @@ function generateSchema(
         break
       case FieldType.ATTACHMENTS:
       case FieldType.ATTACHMENT_SINGLE:
+      case FieldType.SIGNATURE_SINGLE:
       case FieldType.AUTO:
       case FieldType.JSON:
       case FieldType.INTERNAL:

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

@@ -0,0 +1,267 @@
+<script>
+  import { onMount, createEventDispatcher } from "svelte"
+  import Atrament from "atrament"
+  import Icon from "../../Icon/Icon.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  let last
+
+  export let value
+  export let disabled = false
+  export let editable = true
+  export let width = 400
+  export let height = 220
+  export let saveIcon = false
+  export let darkMode
+
+  export function toDataUrl() {
+    // PNG to preserve transparency
+    return canvasRef.toDataURL("image/png")
+  }
+
+  export function toFile() {
+    const data = canvasContext
+      .getImageData(0, 0, width, height)
+      .data.some(channel => channel !== 0)
+
+    if (!data) {
+      return
+    }
+
+    let dataURIParts = toDataUrl().split(",")
+    if (!dataURIParts.length) {
+      console.error("Could not retrieve signature data")
+    }
+
+    // Pull out the base64 encoded byte data
+    let binaryVal = atob(dataURIParts[1])
+    let blobArray = new Uint8Array(binaryVal.length)
+    let pos = 0
+    while (pos < binaryVal.length) {
+      blobArray[pos] = binaryVal.charCodeAt(pos)
+      pos++
+    }
+
+    const signatureBlob = new Blob([blobArray], {
+      type: "image/png",
+    })
+
+    return new File([signatureBlob], "signature.png", {
+      type: signatureBlob.type,
+    })
+  }
+
+  export function clearCanvas() {
+    return canvasContext.clearRect(0, 0, canvasWidth, canvasHeight)
+  }
+
+  let canvasRef
+  let canvasContext
+  let canvasWrap
+  let canvasWidth
+  let canvasHeight
+  let signature
+
+  let updated = false
+  let signatureFile
+  let urlFailed
+
+  $: if (value) {
+    signatureFile = value
+  }
+
+  $: if (signatureFile?.url) {
+    updated = false
+  }
+
+  $: if (last) {
+    dispatch("update")
+  }
+
+  onMount(() => {
+    if (!editable) {
+      return
+    }
+
+    const getPos = e => {
+      var rect = canvasRef.getBoundingClientRect()
+      const canvasX = e.offsetX || e.targetTouches?.[0].pageX - rect.left
+      const canvasY = e.offsetY || e.targetTouches?.[0].pageY - rect.top
+
+      return { x: canvasX, y: canvasY }
+    }
+
+    const checkUp = e => {
+      last = getPos(e)
+    }
+
+    canvasRef.addEventListener("pointerdown", e => {
+      const current = getPos(e)
+      //If the cursor didn't move at all, block the default pointerdown
+      if (last?.x === current?.x && last?.y === current?.y) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    })
+
+    document.addEventListener("pointerup", checkUp)
+
+    signature = new Atrament(canvasRef, {
+      width,
+      height,
+      color: "white",
+    })
+
+    signature.weight = 4
+    signature.smoothing = 2
+
+    canvasWrap.style.width = `${width}px`
+    canvasWrap.style.height = `${height}px`
+
+    const { width: wrapWidth, height: wrapHeight } =
+      canvasWrap.getBoundingClientRect()
+
+    canvasHeight = wrapHeight
+    canvasWidth = wrapWidth
+
+    canvasContext = canvasRef.getContext("2d")
+
+    return () => {
+      signature.destroy()
+      document.removeEventListener("pointerup", checkUp)
+    }
+  })
+</script>
+
+<div class="signature" class:light={!darkMode} class:image-error={urlFailed}>
+  {#if !disabled}
+    <div class="overlay">
+      {#if updated && saveIcon}
+        <span class="save">
+          <Icon
+            name="Checkmark"
+            hoverable
+            tooltip={"Save"}
+            tooltipPosition={"top"}
+            tooltipType={"info"}
+            on:click={() => {
+              dispatch("change", toDataUrl())
+            }}
+          />
+        </span>
+      {/if}
+      {#if signatureFile?.url && !updated}
+        <span class="delete">
+          <Icon
+            name="DeleteOutline"
+            hoverable
+            tooltip={"Delete"}
+            tooltipPosition={"top"}
+            tooltipType={"info"}
+            on:click={() => {
+              if (editable) {
+                clearCanvas()
+              }
+              dispatch("clear")
+            }}
+          />
+        </span>
+      {/if}
+    </div>
+  {/if}
+  {#if !editable && signatureFile?.url}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    {#if !urlFailed}
+      <img
+        src={signatureFile?.url}
+        on:error={() => {
+          urlFailed = true
+        }}
+      />
+    {:else}
+      Could not load signature
+    {/if}
+  {:else}
+    <div bind:this={canvasWrap} class="canvas-wrap">
+      <canvas
+        id="signature-canvas"
+        bind:this={canvasRef}
+        style="--max-sig-width: {width}px; --max-sig-height: {height}px"
+      />
+      {#if editable}
+        <div class="indicator-overlay">
+          <div class="sign-here">
+            <Icon name="Close" />
+            <hr />
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .indicator-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    padding: var(--spectrum-global-dimension-size-150);
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+  .sign-here {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spectrum-global-dimension-size-150);
+  }
+  .sign-here hr {
+    border: 0;
+    border-top: 2px solid var(--spectrum-global-color-gray-200);
+    width: 100%;
+  }
+  .canvas-wrap {
+    position: relative;
+    margin: auto;
+  }
+  .signature img {
+    max-width: 100%;
+  }
+  #signature-canvas {
+    max-width: var(--max-sig-width);
+    max-height: var(--max-sig-height);
+  }
+  .signature.light img,
+  .signature.light #signature-canvas {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+  }
+  .signature.image-error .overlay {
+    padding-top: 0px;
+  }
+  .signature {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    text-align: center;
+  }
+  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    padding: var(--spectrum-global-dimension-size-150);
+    text-align: right;
+    z-index: 2;
+    box-sizing: border-box;
+  }
+  .save,
+  .delete {
+    display: inline-block;
+  }
+</style>

packages/bbui/src/Form/Core/index.js

@@ -16,3 +16,4 @@ export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
 export { default as CoreSlider } from "./Slider.svelte"
 export { default as CoreFile } from "./File.svelte"
+export { default as CoreSignature } from "./Signature.svelte"

packages/bbui/src/Modal/Modal.svelte

@@ -173,6 +173,7 @@
   }
 
   .spectrum-Modal {
+    border: 2px solid var(--spectrum-global-color-gray-200);
     overflow: visible;
     max-height: none;
     margin: 40px 0;

packages/bbui/src/Modal/ModalContent.svelte

@@ -27,6 +27,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
+  export let custom = false
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -63,12 +64,13 @@
   class:spectrum-Dialog--medium={size === "M"}
   class:spectrum-Dialog--large={size === "L"}
   class:spectrum-Dialog--extraLarge={size === "XL"}
+  class:no-grid={custom}
   style="position: relative;"
   role="dialog"
   tabindex="-1"
   aria-modal="true"
 >
-  <div class="spectrum-Dialog-grid">
+  <div class="modal-core" class:spectrum-Dialog-grid={!custom}>
     {#if title || $$slots.header}
       <h1
         class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
@@ -153,6 +155,25 @@
   .spectrum-Dialog-content {
     overflow: visible;
   }
+
+  .no-grid .spectrum-Dialog-content {
+    border-top: 2px solid var(--spectrum-global-color-gray-200);
+    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+  }
+
+  .no-grid .spectrum-Dialog-heading {
+    margin-top: 12px;
+    margin-left: 12px;
+  }
+
+  .spectrum-Dialog.no-grid {
+    width: 100%;
+  }
+
+  .spectrum-Dialog.no-grid .spectrum-Dialog-buttonGroup {
+    padding: 12px;
+  }
+
   .spectrum-Dialog-heading {
     font-family: var(--font-accent);
     font-weight: 600;

packages/bbui/src/Tabs/Tab.svelte

@@ -1,40 +1,28 @@
 <script>
-  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import { getContext, onDestroy } from "svelte"
   import Portal from "svelte-portal"
 
   export let title
   export let icon = ""
   export let id
 
-  const dispatch = createEventDispatcher()
   let selected = getContext("tab")
-  let tab_internal
+  let observer
-  let tabInfo
+  let ref
 
-  const setTabInfo = () => {
+  $: isSelected = $selected.title === title
-    // If the tabs are being rendered inside a component which uses
+  $: {
-    // a svelte transition to enter, then this initial getBoundingClientRect
+    if (isSelected && ref) {
-    // will return an incorrect position.
+      observe()
-    // We just need to get this off the main thread to fix this, by using
+    } else {
-    // a 0ms timeout.
+      stopObserving()
-    setTimeout(() => {
+    }
-      tabInfo = tab_internal?.getBoundingClientRect()
-      if (tabInfo && $selected.title === title) {
-        $selected.info = tabInfo
-      }
-    }, 0)
   }
 
-  onMount(() => {
+  const setTabInfo = () => {
-    setTabInfo()
+    const tabInfo = ref?.getBoundingClientRect()
-  })
+    if (tabInfo) {
-
+      $selected.info = tabInfo
-  //Ensure that the underline is in the correct location
-  $: {
-    if ($selected.title === title && tab_internal) {
-      if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
-        setTabInfo()
-      }
     }
   }
 
@@ -42,10 +30,25 @@
     $selected = {
       ...$selected,
       title,
-      info: tab_internal.getBoundingClientRect(),
+      info: ref.getBoundingClientRect(),
     }
-    dispatch("click")
   }
+
+  const observe = () => {
+    if (!observer) {
+      observer = new ResizeObserver(setTabInfo)
+      observer.observe(ref)
+    }
+  }
+
+  const stopObserving = () => {
+    if (observer) {
+      observer.unobserve(ref)
+      observer = null
+    }
+  }
+
+  onDestroy(stopObserving)
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -53,11 +56,12 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   {id}
-  bind:this={tab_internal}
+  bind:this={ref}
   on:click={onClick}
-  class:is-selected={$selected.title === title}
+  on:click
   class="spectrum-Tabs-item"
-  class:emphasized={$selected.title === title && $selected.emphasized}
+  class:is-selected={isSelected}
+  class:emphasized={isSelected && $selected.emphasized}
   tabindex="0"
 >
   {#if icon}
@@ -72,7 +76,8 @@
   {/if}
   <span class="spectrum-Tabs-itemLabel">{title}</span>
 </div>
-{#if $selected.title === title}
+
+{#if isSelected}
   <Portal target=".spectrum-Tabs-content-{$selected.id}">
     <slot />
   </Portal>

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -364,6 +364,7 @@
       value.customType !== "cron" &&
       value.customType !== "triggerSchema" &&
       value.customType !== "automationFields" &&
+      value.type !== "signature_single" &&
       value.type !== "attachment" &&
       value.type !== "attachment_single"
     )
@@ -456,7 +457,7 @@
               value={inputData[key]}
               options={Object.keys(table?.schema || {})}
             />
-          {:else if value.type === "attachment"}
+          {:else if value.type === "attachment" || value.type === "signature_single"}
             <div class="attachment-field-wrapper">
               <div class="label-wrapper">
                 <Label>{label}</Label>

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -24,6 +24,11 @@
 
   let table
   let schemaFields
+  let attachmentTypes = [
+    FieldType.ATTACHMENTS,
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.SIGNATURE_SINGLE,
+  ]
 
   $: {
     table = $tables.list.find(table => table._id === value?.tableId)
@@ -120,15 +125,9 @@
 {#if schemaFields.length}
   {#each schemaFields as [field, schema]}
     {#if !schema.autocolumn}
-      <div
+      <div class:schema-fields={!attachmentTypes.includes(schema.type)}>
-        class:schema-fields={schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE}
-      >
         <Label>{field}</Label>
-        <div
+        <div class:field-width={!attachmentTypes.includes(schema.type)}>
-          class:field-width={schema.type !== FieldType.ATTACHMENTS &&
-            schema.type !== FieldType.ATTACHMENT_SINGLE}
-        >
           {#if isTestModal}
             <RowSelectorTypes
               {isTestModal}

packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte

@@ -21,6 +21,12 @@
     return clone
   })
 
+  let attachmentTypes = [
+    FieldType.ATTACHMENTS,
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.SIGNATURE_SINGLE,
+  ]
+
   function schemaHasOptions(schema) {
     return !!schema.constraints?.inclusion?.length
   }
@@ -29,7 +35,8 @@
     let params = {}
 
     if (
-      schema.type === FieldType.ATTACHMENT_SINGLE &&
+      (schema.type === FieldType.ATTACHMENT_SINGLE ||
+        schema.type === FieldType.SIGNATURE_SINGLE) &&
       Object.keys(keyValueObj).length === 0
     ) {
       return []
@@ -100,16 +107,20 @@
     on:change={e => onChange(e, field)}
     useLabel={false}
   />
-{:else if schema.type === FieldType.ATTACHMENTS || schema.type === FieldType.ATTACHMENT_SINGLE}
+{:else if attachmentTypes.includes(schema.type)}
   <div class="attachment-field-spacinng">
     <KeyValueBuilder
       on:change={e =>
         onChange(
           {
             detail:
-              schema.type === FieldType.ATTACHMENT_SINGLE
+              schema.type === FieldType.ATTACHMENT_SINGLE ||
+              schema.type === FieldType.SIGNATURE_SINGLE
                 ? e.detail.length > 0
-                  ? { url: e.detail[0].name, filename: e.detail[0].value }
+                  ? {
+                      url: e.detail[0].name,
+                      filename: e.detail[0].value,
+                    }
                   : {}
                 : e.detail.map(({ name, value }) => ({
                     url: name,
@@ -125,7 +136,8 @@
       customButtonText={"Add attachment"}
       keyPlaceholder={"URL"}
       valuePlaceholder={"Filename"}
-      actionButtonDisabled={schema.type === FieldType.ATTACHMENT_SINGLE &&
+      actionButtonDisabled={(schema.type === FieldType.ATTACHMENT_SINGLE ||
+        schema.type === FieldType.SIGNATURE) &&
         Object.keys(value[field]).length >= 1}
     />
   </div>

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

@@ -1,4 +1,5 @@
 <script>
+  import { API } from "api"
   import {
     Input,
     Select,
@@ -8,11 +9,16 @@
     Label,
     RichTextField,
     TextArea,
+    CoreSignature,
+    ActionButton,
+    notifications,
   } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "helpers"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
   import Editor from "../../integration/QueryEditor.svelte"
+  import { SignatureModal } from "@budibase/frontend-core/src/components"
+  import { themeStore } from "stores/portal"
 
   export let meta
   export let value
@@ -38,8 +44,35 @@
 
   const timeStamp = resolveTimeStamp(value)
   const isTimeStamp = !!timeStamp || meta?.timeOnly
+
+  $: currentTheme = $themeStore?.theme
+  $: darkMode = !currentTheme.includes("light")
+
+  let signatureModal
 </script>
 
+<SignatureModal
+  {darkMode}
+  onConfirm={async sigCanvas => {
+    const signatureFile = sigCanvas.toFile()
+
+    let attachRequest = new FormData()
+    attachRequest.append("file", signatureFile)
+
+    try {
+      const uploadReq = await API.uploadBuilderAttachment(attachRequest)
+      const [signatureAttachment] = uploadReq
+      value = signatureAttachment
+    } catch (error) {
+      $notifications.error(error.message || "Failed to save signature")
+      value = []
+    }
+  }}
+  title={meta.name}
+  {value}
+  bind:this={signatureModal}
+/>
+
 {#if type === "options" && meta.constraints.inclusion.length !== 0}
   <Select
     {label}
@@ -58,7 +91,51 @@
     bind:value
   />
 {:else if type === "attachment"}
-  <Dropzone {label} {error} bind:value />
+  <Dropzone
+    compact
+    {label}
+    {error}
+    {value}
+    on:change={e => {
+      value = e.detail
+    }}
+  />
+{:else if type === "attachment_single"}
+  <Dropzone
+    compact
+    {label}
+    {error}
+    value={value ? [value] : []}
+    on:change={e => {
+      value = e.detail?.[0]
+    }}
+    maximum={1}
+  />
+{:else if type === "signature_single"}
+  <div class="signature">
+    <Label>{label}</Label>
+    <div class="sig-wrap" class:display={value}>
+      {#if value}
+        <CoreSignature
+          {darkMode}
+          {value}
+          editable={false}
+          on:clear={() => {
+            value = null
+          }}
+        />
+      {:else}
+        <ActionButton
+          fullWidth
+          on:click={() => {
+            signatureModal.show()
+          }}
+        >
+          Add signature
+        </ActionButton>
+      {/if}
+    </div>
+  </div>
 {:else if type === "boolean"}
   <Toggle text={label} {error} bind:value />
 {:else if type === "array" && meta.constraints.inclusion.length !== 0}
@@ -94,3 +171,22 @@
 {:else}
   <Input {label} {type} {error} bind:value disabled={readonly} />
 {/if}
+
+<style>
+  .signature :global(label.spectrum-FieldLabel) {
+    padding-top: var(--spectrum-fieldlabel-padding-top);
+    padding-bottom: var(--spectrum-fieldlabel-padding-bottom);
+  }
+  .sig-wrap.display {
+    min-height: 50px;
+    justify-content: center;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--spectrum-global-color-gray-50);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <script>
   import { datasources, tables, integrations, appStore } from "stores/builder"
-  import { admin } from "stores/portal"
+  import { themeStore, admin } from "stores/portal"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import { TableNames } from "constants"
   import { Grid } from "@budibase/frontend-core"
@@ -38,6 +38,9 @@
   })
   $: relationshipsEnabled = relationshipSupport(tableDatasource)
 
+  $: currentTheme = $themeStore?.theme
+  $: darkMode = !currentTheme.includes("light")
+
   const relationshipSupport = datasource => {
     const integration = $integrations[datasource?.source]
     return !isInternal && integration?.relationships !== false
@@ -56,6 +59,7 @@
 <div class="wrapper">
   <Grid
     {API}
+    {darkMode}
     datasource={gridDatasource}
     canAddRows={!isUsersTable}
     canDeleteRows={!isUsersTable}

packages/builder/src/components/backend/DataTable/formula.js

@@ -9,6 +9,7 @@ const MAX_DEPTH = 1
 const TYPES_TO_SKIP = [
   FieldType.FORMULA,
   FieldType.LONGFORM,
+  FieldType.SIGNATURE_SINGLE,
   FieldType.ATTACHMENTS,
   //https://github.com/Budibase/budibase/issues/3030
   FieldType.INTERNAL,

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -412,6 +412,7 @@
         FIELDS.FORMULA,
         FIELDS.JSON,
         FIELDS.BARCODEQR,
+        FIELDS.SIGNATURE_SINGLE,
         FIELDS.BIGINT,
         FIELDS.AUTO,
       ]

packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js

@@ -86,8 +86,9 @@ export const createValidatedConfigStore = (integration, config) => {
     ([$configStore, $errorsStore, $selectedValidatorsStore]) => {
       const validatedConfig = []
 
+      const allowedRestKeys = ["rejectUnauthorized", "downloadImages"]
       Object.entries(integration.datasource).forEach(([key, properties]) => {
-        if (integration.name === "REST" && key !== "rejectUnauthorized") {
+        if (integration.name === "REST" && !allowedRestKeys.includes(key)) {
           return
         }
 

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

@@ -54,6 +54,10 @@
       label: "Attachment",
       value: FieldType.ATTACHMENT_SINGLE,
     },
+    {
+      label: "Signature",
+      value: FieldType.SIGNATURE_SINGLE,
+    },
     {
       label: "Attachment list",
       value: FieldType.ATTACHMENTS,

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

@@ -28,6 +28,12 @@
   let bindingDrawer
   let currentVal = value
 
+  let attachmentTypes = [
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.ATTACHMENTS,
+    FieldType.SIGNATURE_SINGLE,
+  ]
+
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
   $: isJS = isJSBinding(value)
@@ -105,6 +111,7 @@
     boolean: isValidBoolean,
     attachment: false,
     attachment_single: false,
+    signature_single: false,
   }
 
   const isValid = value => {
@@ -126,6 +133,7 @@
         "bigint",
         "barcodeqr",
         "attachment",
+        "signature_single",
         "attachment_single",
       ].includes(type)
     ) {
@@ -169,7 +177,7 @@
       {updateOnChange}
     />
   {/if}
-  {#if !disabled && type !== "formula" && !disabled && type !== FieldType.ATTACHMENTS && !disabled && type !== FieldType.ATTACHMENT_SINGLE}
+  {#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
     <div
       class={`icon ${getIconClass(value, type)}`}
       on:click={() => {

packages/builder/src/components/design/settings/componentSettings.js

@@ -76,6 +76,7 @@ const componentMap = {
   "field/array": FormFieldSelect,
   "field/json": FormFieldSelect,
   "field/barcodeqr": FormFieldSelect,
+  "field/signature_single": FormFieldSelect,
   "field/bb_reference": FormFieldSelect,
   // Some validation types are the same as others, so not all types are
   // explicitly listed here. e.g. options uses string validation
@@ -85,6 +86,8 @@ const componentMap = {
   "validation/boolean": ValidationEditor,
   "validation/datetime": ValidationEditor,
   "validation/attachment": ValidationEditor,
+  "validation/attachment_single": ValidationEditor,
+  "validation/signature_single": ValidationEditor,
   "validation/link": ValidationEditor,
   "validation/bb_reference": ValidationEditor,
 }

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte

@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
   import { runtimeToReadableBinding } from "dataBinding"
   import { isJSBinding } from "@budibase/string-templates"

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

@@ -100,9 +100,6 @@
       on:click={() => {
         get(store).actions.select(draggableItem.id)
       }}
-      on:mousedown={() => {
-        get(store).actions.select()
-      }}
       bind:this={anchors[draggableItem.id]}
       class:highlighted={draggableItem.id === $store.selected}
     >

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

@@ -3,7 +3,6 @@
   import { componentStore } from "stores/builder"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
-  import { customPositionHandler } from "."
   import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
 
   export let anchor
@@ -18,76 +17,74 @@
 
   let popover
   let drawers = []
-  let open = false
+  let isOpen = false
 
   // Auto hide the component when another item is selected
   $: if (open && $draggable.selected !== componentInstance._id) {
-    popover.hide()
+    close()
   }
-
   // Open automatically if the component is marked as selected
   $: if (!open && $draggable.selected === componentInstance._id && popover) {
-    popover.show()
+    open()
-    open = true
   }
-
   $: componentDef = componentStore.getDefinition(componentInstance._component)
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
+  const open = () => {
+    isOpen = true
+    drawers = []
+    $draggable.actions.select(componentInstance._id)
+  }
+
+  const close = () => {
+    // Slight delay allows us to be able to properly toggle open/close state by
+    // clicking again on the settings icon
+    setTimeout(() => {
+      isOpen = false
+      if ($draggable.selected === componentInstance._id) {
+        $draggable.actions.select()
+      }
+    }, 10)
+  }
+
+  const toggleOpen = () => {
+    if (isOpen) {
+      close()
+    } else {
+      open()
+    }
+  }
+
   const processComponentDefinitionSettings = componentDef => {
     if (!componentDef) {
       return {}
     }
     const clone = cloneDeep(componentDef)
-
     if (typeof parseSettings === "function") {
       clone.settings = parseSettings(clone.settings)
     }
-
     return clone
   }
 
   const updateSetting = async (setting, value) => {
     const nestedComponentInstance = cloneDeep(componentInstance)
-
     const patchFn = componentStore.updateComponentSetting(setting.key, value)
     patchFn(nestedComponentInstance)
-
     dispatch("change", nestedComponentInstance)
   }
 </script>
 
-<Icon
+<Icon name="Settings" hoverable size="S" on:click={toggleOpen} />
-  name="Settings"
-  hoverable
-  size="S"
-  on:click={() => {
-    if (!open) {
-      popover.show()
-      open = true
-    }
-  }}
-/>
 
 <Popover
-  bind:this={popover}
+  open={isOpen}
-  on:open={() => {
+  on:close={close}
-    drawers = []
-    $draggable.actions.select(componentInstance._id)
-  }}
-  on:close={() => {
-    open = false
-    if ($draggable.selected === componentInstance._id) {
-      $draggable.actions.select()
-    }
-  }}
   {anchor}
   align="left-outside"
   showPopover={drawers.length === 0}
   clickOutsideOverride={drawers.length > 0}
   maxHeight={600}
   offset={18}
-  handlePostionUpdate={customPositionHandler}
 >
   <span class="popover-wrap">
     <Layout noPadding noGap>

packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js

@@ -1,18 +0,0 @@
-export const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
-  let { left, top, offset } = cfg
-  let percentageOffset = 30
-  // left-outside
-  left = anchorBounds.left - eleBounds.width - (offset || 5)
-
-  // shift up from the anchor, if space allows
-  let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
-  let defaultTop = anchorBounds.top - offsetPos
-
-  if (window.innerHeight - defaultTop < eleBounds.height) {
-    top = window.innerHeight - eleBounds.height - 5
-  } else {
-    top = anchorBounds.top - offsetPos
-  }
-
-  return { ...cfg, left, top }
-}

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte

@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"

packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js

@@ -41,6 +41,7 @@ export const FieldTypeToComponentMap = {
   [FieldType.BOOLEAN]: "booleanfield",
   [FieldType.LONGFORM]: "longformfield",
   [FieldType.DATETIME]: "datetimefield",
+  [FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
   [FieldType.ATTACHMENTS]: "attachmentfield",
   [FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
   [FieldType.LINK]: "relationshipfield",

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte

@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte

@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
   import { setContext } from "svelte"
   import { writable } from "svelte/store"

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js

@@ -67,6 +67,7 @@ const toGridFormat = draggableListColumns => {
     label: entry.label,
     field: entry.field,
     active: entry.active,
+    width: entry.width,
   }))
 }
 
@@ -81,6 +82,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         field: column.field,
         label: column.label,
         columnType: schema[column.field].type,
+        width: column.width,
       },
       {}
     )

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -108,6 +108,8 @@
       Constraints.MaxFileSize,
       Constraints.MaxUploadSize,
     ],
+    ["attachment_single"]: [Constraints.Required, Constraints.MaxUploadSize],
+    ["signature_single"]: [Constraints.Required],
     ["link"]: [
       Constraints.Required,
       Constraints.Contains,

packages/builder/src/components/portal/onboarding/tours.js

@@ -10,7 +10,6 @@ import {
   NewFormSteps,
 } from "./steps"
 import { API } from "api"
-import { customPositionHandler } from "components/design/settings/controls/EditComponentPopover"
 
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
@@ -187,7 +186,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_CREATE_STEPS)
             builderStore.highlightSetting("steps", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
         },
       ],
@@ -203,7 +201,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_ROW_ID)
             builderStore.highlightSetting("rowId", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
         },
         {
@@ -219,7 +216,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_VIEW_UPDATE_STEPS)
             builderStore.highlightSetting("steps", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
           scrollIntoView: true,
         },

packages/builder/src/constants/backend/index.js

@@ -127,6 +127,14 @@ export const FIELDS = {
       presence: false,
     },
   },
+  SIGNATURE_SINGLE: {
+    name: "Signature",
+    type: FieldType.SIGNATURE_SINGLE,
+    icon: "AnnotatePen",
+    constraints: {
+      presence: false,
+    },
+  },
   LINK: {
     name: "Relationship",
     type: FieldType.LINK,

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

@@ -105,10 +105,6 @@
   }
 
   onMount(async () => {
-    document.fonts.onloadingdone = e => {
-      builderStore.loadFonts(e.fontfaces)
-    }
-
     if (!hasSynced && application) {
       try {
         await API.syncApp(application)
@@ -149,19 +145,17 @@
           />
         </span>
         <Tabs {selected} size="M">
-          {#key $builderStore?.fonts}
+          {#each $layout.children as { path, title }}
-            {#each $layout.children as { path, title }}
+            <TourWrap stepKeys={[`builder-${title}-section`]}>
-              <TourWrap stepKeys={[`builder-${title}-section`]}>
+              <Tab
-                <Tab
+                quiet
-                  quiet
+                selected={$isActive(path)}
-                  selected={$isActive(path)}
+                on:click={topItemNavigate(path)}
-                  on:click={topItemNavigate(path)}
+                title={capitalise(title)}
-                  title={capitalise(title)}
+                id={`builder-${title}-tab`}
-                  id={`builder-${title}-tab`}
+              />
-                />
+            </TourWrap>
-              </TourWrap>
+          {/each}
-            {/each}
-          {/key}
         </Tabs>
       </div>
       <div class="topcenternav">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -71,6 +71,7 @@
       "multifieldselect",
       "s3upload",
       "codescanner",
+      "signaturesinglefield",
       "bbreferencesinglefield",
       "bbreferencefield"
     ]

packages/builder/src/stores/builder/builder.js

@@ -14,7 +14,6 @@ export const INITIAL_BUILDER_STATE = {
   tourKey: null,
   tourStepKey: null,
   hoveredComponentId: null,
-  fonts: null,
 }
 
 export class BuilderStore extends BudiStore {
@@ -37,16 +36,6 @@ export class BuilderStore extends BudiStore {
     this.websocket
   }
 
-  loadFonts(fontFaces) {
-    const ff = fontFaces.map(
-      fontFace => `${fontFace.family}-${fontFace.weight}`
-    )
-    this.update(state => ({
-      ...state,
-      fonts: [...(state.fonts || []), ...ff],
-    }))
-  }
-
   init(app) {
     if (!app?.appId) {
       console.error("BuilderStore: No appId supplied for websocket")

packages/cli/src/environment.ts

@@ -1,3 +1,4 @@
+process.env.DISABLE_PINO_LOGGER = "1"
 process.env.NO_JS = "1"
 process.env.JS_BCRYPT = "1"
 process.env.DISABLE_JWT_WARNING = "1"

packages/cli/src/index.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-process.env.DISABLE_PINO_LOGGER = "1"
+// have to import this before anything else
 import "./environment"
 import { getCommands } from "./options"
 import { Command } from "commander"

packages/cli/start.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 dir="$(dirname -- "$(readlink -f "${BASH_SOURCE}")")"
-${dir}/node_modules/ts-node/dist/bin.js ${dir}/src/index.ts $@
+${dir}/../../node_modules/ts-node/dist/bin.js ${dir}/src/index.ts $@

packages/client/manifest.json

@@ -2746,6 +2746,14 @@
         "type": "plainText",
         "label": "Label",
         "key": "label"
+      },
+      {
+        "type": "number",
+        "label": "Initial width",
+        "key": "width",
+        "placeholder": "Auto",
+        "min": 80,
+        "max": 9999
       }
     ]
   },
@@ -4107,6 +4115,55 @@
       }
     ]
   },
+  "signaturesinglefield": {
+    "name": "Signature",
+    "icon": "AnnotatePen",
+    "styles": ["size"],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
+    "settings": [
+      {
+        "type": "field/signature_single",
+        "label": "Field",
+        "key": "field",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "validation/signature_single",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "embeddedmap": {
     "name": "Embedded Map",
     "icon": "Location",
@@ -4372,7 +4429,7 @@
         "defaultValue": false
       },
       {
-        "type": "validation/attachment",
+        "type": "validation/attachment_single",
         "label": "Validation",
         "key": "validation"
       },

packages/client/package.json

@@ -34,7 +34,8 @@
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
     "svelte-apexcharts": "^1.0.2",
-    "svelte-spa-router": "^4.0.1"
+    "svelte-spa-router": "^4.0.1",
+    "atrament": "^4.3.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.0",

packages/client/src/components/Component.svelte

@@ -193,6 +193,9 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
+
   // Update component context
   $: store.set({
     id,
@@ -222,6 +225,7 @@
     parent: id,
     ancestors: [...($component?.ancestors ?? []), instance._component],
     path: [...($component?.path ?? []), id],
+    darkMode,
   })
 
   const initialise = (instance, force = false) => {

packages/client/src/components/app/GridBlock.svelte

@@ -37,13 +37,16 @@
 
   let grid
   let gridContext
-  let minHeight
+  let minHeight = 0
 
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
   $: parsedColumns = getParsedColumns(columns)
   $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
   $: schemaOverrides = getSchemaOverrides(parsedColumns)
   $: enrichedButtons = enrichButtons(buttons)
   $: selectedRows = deriveSelectedRows(gridContext)
+  $: styles = patchStyles($component.styles, minHeight)
   $: data = { selectedRows: $selectedRows }
   $: actions = [
     {
@@ -84,9 +87,11 @@
 
   const getSchemaOverrides = columns => {
     let overrides = {}
-    columns.forEach(column => {
+    columns.forEach((column, idx) => {
       overrides[column.field] = {
         displayName: column.label,
+        width: column.width,
+        order: idx,
       }
     })
     return overrides
@@ -128,52 +133,55 @@
     )
   }
 
+  const patchStyles = (styles, minHeight) => {
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        "min-height": `${minHeight}px`,
+      },
+    }
+  }
+
   onMount(() => {
     gridContext = grid.getContext()
     gridContext.minHeight.subscribe($height => (minHeight = $height))
   })
 </script>
 
-<span style="--min-height:{minHeight}px">
+<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
-  <div
+  <Grid
-    use:styleable={$component.styles}
+    bind:this={grid}
-    class:in-builder={$builderStore.inBuilder}
+    datasource={table}
-  >
+    {API}
-    <Grid
+    {stripeRows}
-      bind:this={grid}
+    {quiet}
-      datasource={table}
+    {darkMode}
-      {API}
+    {initialFilter}
-      {stripeRows}
+    {initialSortColumn}
-      {quiet}
+    {initialSortOrder}
-      {initialFilter}
+    {fixedRowHeight}
-      {initialSortColumn}
+    {columnWhitelist}
-      {initialSortOrder}
+    {schemaOverrides}
-      {fixedRowHeight}
+    canAddRows={allowAddRows}
-      {columnWhitelist}
+    canEditRows={allowEditRows}
-      {schemaOverrides}
+    canDeleteRows={allowDeleteRows}
-      canAddRows={allowAddRows}
+    canEditColumns={false}
-      canEditRows={allowEditRows}
+    canExpandRows={false}
-      canDeleteRows={allowDeleteRows}
+    canSaveSchema={false}
-      canEditColumns={false}
+    canSelectRows={true}
-      canExpandRows={false}
+    showControls={false}
-      canSaveSchema={false}
+    notifySuccess={notificationStore.actions.success}
-      canSelectRows={true}
+    notifyError={notificationStore.actions.error}
-      showControls={false}
+    buttons={enrichedButtons}
-      notifySuccess={notificationStore.actions.success}
+    isCloud={$environmentStore.cloud}
-      notifyError={notificationStore.actions.error}
+    on:rowclick={e => onRowClick?.({ row: e.detail })}
-      buttons={enrichedButtons}
+  />
-      isCloud={$environmentStore.cloud}
+</div>
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
-  </div>
-</span>
 
 <Provider {data} {actions} />
 
 <style>
-  span {
-    display: contents;
-  }
   div {
     display: flex;
     flex-direction: column;
@@ -182,7 +190,6 @@
     border-radius: 4px;
     overflow: hidden;
     height: 410px;
-    min-height: var(--min-height);
   }
   div.in-builder :global(*) {
     pointer-events: none;

packages/client/src/components/app/blocks/FormBlockComponent.svelte

@@ -15,6 +15,7 @@
     [FieldType.BOOLEAN]: "booleanfield",
     [FieldType.LONGFORM]: "longformfield",
     [FieldType.DATETIME]: "datetimefield",
+    [FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
     [FieldType.ATTACHMENTS]: "attachmentfield",
     [FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
     [FieldType.LINK]: "relationshipfield",

packages/client/src/components/app/forms/SignatureField.svelte

@@ -0,0 +1,129 @@
+<script>
+  import { CoreSignature, ActionButton } from "@budibase/bbui"
+  import { getContext } from "svelte"
+  import Field from "./Field.svelte"
+  import { SignatureModal } from "@budibase/frontend-core/src/components"
+
+  export let field
+  export let label
+  export let disabled = false
+  export let readonly = false
+  export let validation
+  export let onChange
+  export let span
+  export let helpText = null
+
+  let fieldState
+  let fieldApi
+  let fieldSchema
+  let modal
+
+  const { API, notificationStore, builderStore } = getContext("sdk")
+  const context = getContext("context")
+  const formContext = getContext("form")
+
+  const saveSignature = async canvas => {
+    try {
+      const signatureFile = canvas.toFile()
+      let updateValue
+
+      if (signatureFile) {
+        let attachRequest = new FormData()
+        attachRequest.append("file", signatureFile)
+
+        const resp = await API.uploadAttachment({
+          data: attachRequest,
+          tableId: formContext?.dataSource?.tableId,
+        })
+        const [signatureAttachment] = resp
+        updateValue = signatureAttachment
+      } else {
+        updateValue = null
+      }
+
+      const changed = fieldApi.setValue(updateValue)
+      if (onChange && changed) {
+        onChange({ value: updateValue })
+      }
+    } catch (error) {
+      notificationStore.actions.error(
+        `There was a problem saving your signature`
+      )
+      console.error(error)
+    }
+  }
+
+  const deleteSignature = async () => {
+    const changed = fieldApi.setValue(null)
+    if (onChange && changed) {
+      onChange({ value: null })
+    }
+  }
+
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
+</script>
+
+<SignatureModal
+  onConfirm={saveSignature}
+  title={label || fieldSchema?.name || ""}
+  value={fieldState?.value}
+  {darkMode}
+  bind:this={modal}
+/>
+
+<Field
+  {label}
+  {field}
+  {disabled}
+  {readonly}
+  {validation}
+  {span}
+  {helpText}
+  type="signature_single"
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema
+  defaultValue={[]}
+>
+  {#if fieldState}
+    {#if (Array.isArray(fieldState?.value) && !fieldState?.value?.length) || !fieldState?.value}
+      <ActionButton
+        fullWidth
+        disabled={fieldState.disabled}
+        on:click={() => {
+          if (!$builderStore.inBuilder) {
+            modal.show()
+          }
+        }}
+      >
+        Add signature
+      </ActionButton>
+    {:else}
+      <div class="signature-field">
+        <CoreSignature
+          {darkMode}
+          disabled={$builderStore.inBuilder || fieldState.disabled}
+          editable={false}
+          value={fieldState?.value}
+          on:clear={deleteSignature}
+        />
+      </div>
+    {/if}
+  {/if}
+</Field>
+
+<style>
+  .signature-field {
+    min-height: 50px;
+    justify-content: center;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--spectrum-global-color-gray-50);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+  }
+</style>

packages/client/src/components/app/forms/index.js

@@ -16,5 +16,6 @@ export { default as formstep } from "./FormStep.svelte"
 export { default as jsonfield } from "./JSONField.svelte"
 export { default as s3upload } from "./S3Upload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
+export { default as signaturesinglefield } from "./SignatureField.svelte"
 export { default as bbreferencefield } from "./BBReferenceField.svelte"
 export { default as bbreferencesinglefield } from "./BBReferenceSingleField.svelte"

packages/client/src/components/app/forms/validation.js

@@ -200,6 +200,17 @@ const parseType = (value, type) => {
     return value
   }
 
+  // Parse attachment/signature single, treating no key as null
+  if (
+    type === FieldTypes.ATTACHMENT_SINGLE ||
+    type === FieldTypes.SIGNATURE_SINGLE
+  ) {
+    if (!value?.key) {
+      return null
+    }
+    return value
+  }
+
   // Parse links, treating no elements as null
   if (type === FieldTypes.LINK) {
     if (!Array.isArray(value) || !value.length) {
@@ -246,10 +257,8 @@ const maxLengthHandler = (value, rule) => {
 // Evaluates a max file size (MB) constraint
 const maxFileSizeHandler = (value, rule) => {
   const limit = parseType(rule.value, "number")
-  return (
+  const check = attachment => attachment.size / 1000000 > limit
-    value == null ||
+  return value == null || !(value?.key ? check(value) : value.some(check))
-    !value.some(attachment => attachment.size / 1000000 > limit)
-  )
 }
 
 // Evaluates a max total upload size (MB) constraint
@@ -257,8 +266,11 @@ const maxUploadSizeHandler = (value, rule) => {
   const limit = parseType(rule.value, "number")
   return (
     value == null ||
-    value.reduce((acc, currentItem) => acc + currentItem.size, 0) / 1000000 <=
+    (value?.key
-      limit
+      ? value.size / 1000000 <= limit
+      : value.reduce((acc, currentItem) => acc + currentItem.size, 0) /
+          1000000 <=
+        limit)
   )
 }
 

packages/frontend-core/src/components/SignatureModal.svelte

@@ -0,0 +1,59 @@
+<script>
+  import { Modal, ModalContent, Body, CoreSignature } from "@budibase/bbui"
+
+  export let onConfirm = () => {}
+  export let value
+  export let title
+  export let darkMode
+
+  export const show = () => {
+    edited = false
+    modal.show()
+  }
+
+  let modal
+  let canvas
+  let edited = false
+</script>
+
+<Modal bind:this={modal}>
+  <ModalContent
+    showConfirmButton
+    showCancelButton={false}
+    showCloseIcon={false}
+    custom
+    disabled={!edited}
+    showDivider={false}
+    onConfirm={() => {
+      onConfirm(canvas)
+    }}
+  >
+    <div slot="header">
+      <Body>{title}</Body>
+    </div>
+    <div class="signature-wrap modal">
+      <CoreSignature
+        {darkMode}
+        {value}
+        saveIcon={false}
+        bind:this={canvas}
+        on:update={() => {
+          edited = true
+        }}
+      />
+    </div>
+  </ModalContent>
+</Modal>
+
+<style>
+  .signature-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    box-sizing: border-box;
+    position: relative;
+  }
+</style>

packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte

@@ -8,7 +8,6 @@
   export let onChange
   export let readonly = false
   export let api
-  export let invertX = false
   export let schema
   export let maximum
 
@@ -92,13 +91,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover
+  <GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
-    open={isOpen}
-    {anchor}
-    {invertX}
-    maxHeight={null}
-    on:close={close}
-  >
     <div class="dropzone">
       <Dropzone
         {value}

packages/frontend-core/src/components/grid/cells/DataCell.svelte

@@ -18,8 +18,6 @@
   export let row
   export let cellId
   export let updateValue = rows.actions.updateValue
-  export let invertX = false
-  export let invertY = false
   export let contentLines = 1
   export let hidden = false
 
@@ -93,8 +91,6 @@
     onChange={cellAPI.setValue}
     {focused}
     {readonly}
-    {invertY}
-    {invertX}
     {contentLines}
   />
   <slot />

packages/frontend-core/src/components/grid/cells/DateCell.svelte

@@ -10,7 +10,6 @@
   export let focused = false
   export let readonly = false
   export let api
-  export let invertX = false
 
   let isOpen
   let anchor
@@ -111,7 +110,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover {anchor} {invertX} maxHeight={null} on:close={close}>
+  <GridPopover {anchor} maxHeight={null} on:close={close}>
     <CoreDatePickerPopoverContents
       value={parsedValue}
       useKeyboardShortcuts={false}

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -23,7 +23,6 @@
     subscribe,
     config,
     ui,
-    columns,
     definition,
     datasource,
     schema,
@@ -158,17 +157,13 @@
   }
 
   const makeDisplayColumn = () => {
-    columns.actions.changePrimaryDisplay(column.name)
+    datasource.actions.changePrimaryDisplay(column.name)
     open = false
   }
 
   const hideColumn = () => {
-    columns.update(state => {
+    datasource.actions.addSchemaMutation(column.name, { visible: false })
-      const index = state.findIndex(col => col.name === column.name)
+    datasource.actions.saveSchemaMutations()
-      state[index].visible = false
-      return state.slice()
-    })
-    columns.actions.saveChanges()
     open = false
   }
 

packages/frontend-core/src/components/grid/cells/LongFormCell.svelte

@@ -8,7 +8,6 @@
   export let onChange
   export let readonly = false
   export let api
-  export let invertX = false
 
   let textarea
   let isOpen = false
@@ -67,7 +66,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover {anchor} {invertX} on:close={close}>
+  <GridPopover {anchor} on:close={close}>
     <textarea
       bind:this={textarea}
       value={value || ""}

packages/frontend-core/src/components/grid/cells/OptionsCell.svelte

@@ -11,7 +11,6 @@
   export let multi = false
   export let readonly = false
   export let api
-  export let invertX
   export let contentLines = 1
 
   let isOpen = false
@@ -120,7 +119,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover {anchor} {invertX} on:close={close}>
+  <GridPopover {anchor} on:close={close}>
     <div class="options">
       {#each options as option, idx}
         {@const color = optionColors[option] || getOptionColor(option)}

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -13,7 +13,6 @@
   export let focused
   export let schema
   export let onChange
-  export let invertX = false
   export let contentLines = 1
   export let searchFunction = API.searchTable
   export let primaryDisplay
@@ -275,7 +274,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if isOpen}
-  <GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
+  <GridPopover open={isOpen} {anchor} on:close={close}>
     <div class="dropdown" on:wheel|stopPropagation>
       <div class="search">
         <Input

packages/frontend-core/src/components/grid/cells/SignatureCell.svelte

@@ -0,0 +1,162 @@
+<script>
+  import { onMount, getContext } from "svelte"
+  import { SignatureModal } from "@budibase/frontend-core/src/components"
+  import { CoreSignature, ActionButton } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
+
+  export let schema
+  export let value
+  export let focused = false
+  export let onChange
+  export let readonly = false
+  export let api
+
+  const { API, notifications, props } = getContext("grid")
+
+  let isOpen = false
+  let modal
+  let anchor
+
+  $: editable = focused && !readonly
+  $: {
+    if (!focused) {
+      close()
+    }
+  }
+
+  const onKeyDown = () => {
+    return false
+  }
+
+  const open = () => {
+    isOpen = true
+  }
+
+  const close = () => {
+    isOpen = false
+  }
+
+  const deleteSignature = async () => {
+    onChange(null)
+  }
+
+  const saveSignature = async sigCanvas => {
+    const signatureFile = sigCanvas.toFile()
+
+    let attachRequest = new FormData()
+    attachRequest.append("file", signatureFile)
+
+    try {
+      const uploadReq = await API.uploadBuilderAttachment(attachRequest)
+      const [signatureAttachment] = uploadReq
+      onChange(signatureAttachment)
+    } catch (error) {
+      $notifications.error(error.message || "Failed to save signature")
+      return []
+    }
+  }
+
+  onMount(() => {
+    api = {
+      focus: () => open(),
+      blur: () => close(),
+      isActive: () => isOpen,
+      onKeyDown,
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="signature-cell"
+  class:light={!$props?.darkMode}
+  class:editable
+  bind:this={anchor}
+  on:click={editable ? open : null}
+>
+  {#if value?.url}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img src={value?.url} />
+  {/if}
+</div>
+
+<SignatureModal
+  onConfirm={saveSignature}
+  title={schema?.name}
+  {value}
+  darkMode={$props.darkMode}
+  bind:this={modal}
+/>
+
+{#if isOpen}
+  <GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
+    <div class="signature" class:empty={!value}>
+      {#if value?.key}
+        <div class="signature-wrap">
+          <CoreSignature
+            darkMode={$props.darkMode}
+            editable={false}
+            {value}
+            on:change={saveSignature}
+            on:clear={deleteSignature}
+          />
+        </div>
+      {:else}
+        <div class="add-signature">
+          <ActionButton
+            fullWidth
+            on:click={() => {
+              modal.show()
+            }}
+          >
+            Add signature
+          </ActionButton>
+        </div>
+      {/if}
+    </div>
+  </GridPopover>
+{/if}
+
+<style>
+  .signature {
+    min-width: 320px;
+    padding: var(--cell-padding);
+    background: var(--grid-background-alt);
+    border: var(--cell-border);
+  }
+  .signature.empty {
+    width: 100%;
+    min-width: unset;
+  }
+  .signature-cell.light img {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+  }
+  .signature-cell {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    max-width: 320px;
+    padding-left: var(--cell-padding);
+    padding-right: var(--cell-padding);
+    flex-wrap: nowrap;
+    align-self: stretch;
+    overflow: hidden;
+    user-select: none;
+  }
+  .signature-cell.editable:hover {
+    cursor: pointer;
+  }
+  .signature-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    box-sizing: border-box;
+    position: relative;
+  }
+</style>

packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte

@@ -3,7 +3,7 @@
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
-  const { columns, stickyColumn, dispatch } = getContext("grid")
+  const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
   let open = false
   let anchor
@@ -11,36 +11,20 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleVisibility = async (column, visible) => {
+  const toggleColumn = async (column, visible) => {
-    columns.update(state => {
+    datasource.actions.addSchemaMutation(column.name, { visible })
-      const index = state.findIndex(col => col.name === column.name)
+    await datasource.actions.saveSchemaMutations()
-      state[index].visible = visible
-      return state.slice()
-    })
-    await columns.actions.saveChanges()
     dispatch(visible ? "show-column" : "hide-column")
   }
 
-  const showAll = async () => {
+  const toggleAll = async visible => {
-    columns.update(state => {
+    let mutations = {}
-      return state.map(col => ({
+    $columns.forEach(column => {
-        ...col,
+      mutations[column.name] = { visible }
-        visible: true,
-      }))
     })
-    await columns.actions.saveChanges()
+    datasource.actions.addSchemaMutations(mutations)
-    dispatch("show-column")
+    await datasource.actions.saveSchemaMutations()
-  }
+    dispatch(visible ? "show-column" : "hide-column")
-
-  const hideAll = async () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: false,
-      }))
-    })
-    await columns.actions.saveChanges()
-    dispatch("hide-column")
   }
 
   const getText = columns => {
@@ -80,14 +64,14 @@
         <Toggle
           size="S"
           value={column.visible}
-          on:change={e => toggleVisibility(column, e.detail)}
+          on:change={e => toggleColumn(column, e.detail)}
           disabled={column.primaryDisplay}
         />
       {/each}
     </div>
     <div class="buttons">
-      <ActionButton on:click={showAll}>Show all</ActionButton>
+      <ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
-      <ActionButton on:click={hideAll}>Hide all</ActionButton>
+      <ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
     </div>
   </div>
 </Popover>

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -54,6 +54,7 @@
   export let notifySuccess = null
   export let notifyError = null
   export let buttons = null
+  export let darkMode
   export let isCloud = null
 
   // Unique identifier for DOM nodes inside this instance
@@ -109,6 +110,7 @@
     notifySuccess,
     notifyError,
     buttons,
+    darkMode,
     isCloud,
   })
 

packages/frontend-core/src/components/grid/layout/GridBody.svelte

@@ -9,7 +9,6 @@
     bounds,
     renderedRows,
     visibleColumns,
-    rowVerticalInversionIndex,
     hoveredRowId,
     dispatch,
     isDragging,
@@ -41,11 +40,7 @@
 <div bind:this={body} class="grid-body">
   <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
-      <GridRow
+      <GridRow {row} top={idx === 0} />
-        {row}
-        top={idx === 0}
-        invertY={idx >= $rowVerticalInversionIndex}
-      />
     {/each}
     {#if $config.canAddRows}
       <div

packages/frontend-core/src/components/grid/layout/GridRow.svelte

@@ -5,7 +5,6 @@
 
   export let row
   export let top = false
-  export let invertY = false
 
   const {
     focusedCellId,
@@ -15,7 +14,6 @@
     hoveredRowId,
     selectedCellMap,
     focusedRow,
-    columnHorizontalInversionIndex,
     contentLines,
     isDragging,
     dispatch,
@@ -38,15 +36,13 @@
   on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
   on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
 >
-  {#each $visibleColumns as column, columnIdx}
+  {#each $visibleColumns as column}
     {@const cellId = getCellID(row._id, column.name)}
     <DataCell
       {cellId}
       {column}
       {row}
-      {invertY}
       {rowFocused}
-      invertX={columnIdx >= $columnHorizontalInversionIndex}
       highlighted={rowHovered || rowFocused || reorderSource === column.name}
       selected={rowSelected}
       rowIdx={row.__idx}

packages/frontend-core/src/components/grid/layout/NewRow.svelte

@@ -24,8 +24,6 @@
     rowHeight,
     hasNextPage,
     maxScrollTop,
-    rowVerticalInversionIndex,
-    columnHorizontalInversionIndex,
     selectedRows,
     loaded,
     refreshing,
@@ -43,17 +41,9 @@
   $: firstColumn = $stickyColumn || $visibleColumns[0]
   $: width = GutterWidth + ($stickyColumn?.width || 0)
   $: $datasource, (visible = false)
-  $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
   $: selectedRowCount = Object.values($selectedRows).length
   $: hasNoRows = !$rows.length
 
-  const shouldInvertY = (offset, inversionIndex, rows) => {
-    if (offset === 0) {
-      return false
-    }
-    return rows.length >= inversionIndex
-  }
-
   const addRow = async () => {
     // Blur the active cell and tick to let final value updates propagate
     isAdding = true
@@ -205,7 +195,6 @@
           width={$stickyColumn.width}
           {updateValue}
           topRow={offset === 0}
-          {invertY}
         >
           {#if $stickyColumn?.schema?.autocolumn}
             <div class="readonly-overlay">Can't edit auto column</div>
@@ -219,7 +208,7 @@
     <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
       <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
-          {#each $visibleColumns as column, columnIdx}
+          {#each $visibleColumns as column}
             {@const cellId = `new-${column.name}`}
             <DataCell
               {cellId}
@@ -230,8 +219,6 @@
               focused={$focusedCellId === cellId}
               width={column.width}
               topRow={offset === 0}
-              invertX={columnIdx >= $columnHorizontalInversionIndex}
-              {invertY}
               hidden={!$columnRenderMap[column.name]}
             >
               {#if column?.schema?.autocolumn}

packages/frontend-core/src/components/grid/lib/renderers.js

@@ -13,6 +13,7 @@ import JSONCell from "../cells/JSONCell.svelte"
 import AttachmentCell from "../cells/AttachmentCell.svelte"
 import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
+import SignatureCell from "../cells/SignatureCell.svelte"
 import BBReferenceSingleCell from "../cells/BBReferenceSingleCell.svelte"
 
 const TypeComponentMap = {
@@ -20,6 +21,7 @@ const TypeComponentMap = {
   [FieldType.OPTIONS]: OptionsCell,
   [FieldType.DATETIME]: DateCell,
   [FieldType.BARCODEQR]: TextCell,
+  [FieldType.SIGNATURE_SINGLE]: SignatureCell,
   [FieldType.LONGFORM]: LongFormCell,
   [FieldType.ARRAY]: MultiSelectCell,
   [FieldType.NUMBER]: NumberCell,

packages/frontend-core/src/components/grid/stores/columns.js

@@ -1,5 +1,4 @@
 import { derived, get, writable } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
 import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
 
 export const createStores = () => {
@@ -75,72 +74,23 @@ export const deriveStores = context => {
 }
 
 export const createActions = context => {
-  const { columns, stickyColumn, datasource, definition, schema } = context
+  const { columns, datasource, schema } = context
-
-  // Updates the datasources primary display column
-  const changePrimaryDisplay = async column => {
-    return await datasource.actions.saveDefinition({
-      ...get(definition),
-      primaryDisplay: column,
-    })
-  }
 
   // Updates the width of all columns
   const changeAllColumnWidths = async width => {
-    columns.update(state => {
+    const $schema = get(schema)
-      return state.map(col => ({
+    let mutations = {}
-        ...col,
+    Object.keys($schema).forEach(field => {
-        width,
+      mutations[field] = { width }
-      }))
-    })
-    if (get(stickyColumn)) {
-      stickyColumn.update(state => ({
-        ...state,
-        width,
-      }))
-    }
-    await saveChanges()
-  }
-
-  // Persists column changes by saving metadata against datasource schema
-  const saveChanges = async () => {
-    const $columns = get(columns)
-    const $definition = get(definition)
-    const $stickyColumn = get(stickyColumn)
-    let newSchema = cloneDeep(get(schema)) || {}
-
-    // Build new updated datasource schema
-    Object.keys(newSchema).forEach(column => {
-      // Respect order specified by columns
-      const index = $columns.findIndex(x => x.name === column)
-      if (index !== -1) {
-        newSchema[column].order = index
-      } else {
-        delete newSchema[column].order
-      }
-
-      // Copy over metadata
-      if (column === $stickyColumn?.name) {
-        newSchema[column].visible = true
-        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
-      } else {
-        newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
-      }
-    })
-
-    await datasource.actions.saveDefinition({
-      ...$definition,
-      schema: newSchema,
     })
+    datasource.actions.addSchemaMutations(mutations)
+    await datasource.actions.saveSchemaMutations()
   }
 
   return {
     columns: {
       ...columns,
       actions: {
-        saveChanges,
-        changePrimaryDisplay,
         changeAllColumnWidths,
       },
     },

packages/frontend-core/src/components/grid/stores/datasource.js

@@ -4,15 +4,23 @@ import { memo } from "../../../utils"
 
 export const createStores = () => {
   const definition = memo(null)
+  const schemaMutations = memo({})
 
   return {
     definition,
+    schemaMutations,
   }
 }
 
 export const deriveStores = context => {
-  const { API, definition, schemaOverrides, columnWhitelist, datasource } =
+  const {
-    context
+    API,
+    definition,
+    schemaOverrides,
+    columnWhitelist,
+    datasource,
+    schemaMutations,
+  } = context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -35,42 +43,26 @@ export const deriveStores = context => {
     return schema
   })
 
+  // Derives the total enriched schema, made up of the saved schema and any
+  // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, columnWhitelist],
+    [schema, schemaOverrides, schemaMutations, columnWhitelist],
-    ([$schema, $schemaOverrides, $columnWhitelist]) => {
+    ([$schema, $schemaOverrides, $schemaMutations, $columnWhitelist]) => {
       if (!$schema) {
         return null
       }
-      let enrichedSchema = { ...$schema }
+      let enrichedSchema = {}
-
+      Object.keys($schema).forEach(field => {
-      // Apply schema overrides
+        // Apply whitelist if provided
-      Object.keys($schemaOverrides || {}).forEach(field => {
+        if ($columnWhitelist?.length && !$columnWhitelist.includes(field)) {
-        if (enrichedSchema[field]) {
+          return
-          enrichedSchema[field] = {
+        }
-            ...enrichedSchema[field],
+        enrichedSchema[field] = {
-            ...$schemaOverrides[field],
+          ...$schema[field],
-          }
+          ...$schemaOverrides?.[field],
+          ...$schemaMutations[field],
         }
       })
-
-      // Apply whitelist if specified
-      if ($columnWhitelist?.length) {
-        const sortedColumns = {}
-
-        $columnWhitelist.forEach((columnKey, idx) => {
-          const enrichedColumn = enrichedSchema[columnKey]
-          if (enrichedColumn) {
-            sortedColumns[columnKey] = {
-              ...enrichedColumn,
-              order: idx,
-              visible: true,
-            }
-          }
-        })
-
-        return sortedColumns
-      }
-
       return enrichedSchema
     }
   )
@@ -100,6 +92,8 @@ export const createActions = context => {
     table,
     viewV2,
     nonPlus,
+    schemaMutations,
+    schema,
   } = context
 
   // Gets the appropriate API for the configured datasource type
@@ -136,11 +130,81 @@ export const createActions = context => {
     // Update server
     if (get(config).canSaveSchema) {
       await getAPI()?.actions.saveDefinition(newDefinition)
-    }
 
-    // Broadcast change to external state can be updated, as this change
+      // Broadcast change so external state can be updated, as this change
-    // will not be received by the builder websocket because we caused it ourselves
+      // will not be received by the builder websocket because we caused it
-    dispatch("updatedatasource", newDefinition)
+      // ourselves
+      dispatch("updatedatasource", newDefinition)
+    }
+  }
+
+  // Updates the datasources primary display column
+  const changePrimaryDisplay = async column => {
+    return await saveDefinition({
+      ...get(definition),
+      primaryDisplay: column,
+    })
+  }
+
+  // Adds a schema mutation for a single field
+  const addSchemaMutation = (field, mutation) => {
+    if (!field || !mutation) {
+      return
+    }
+    schemaMutations.update($schemaMutations => {
+      return {
+        ...$schemaMutations,
+        [field]: {
+          ...$schemaMutations[field],
+          ...mutation,
+        },
+      }
+    })
+  }
+
+  // Adds schema mutations for multiple fields at once
+  const addSchemaMutations = mutations => {
+    const fields = Object.keys(mutations || {})
+    if (!fields.length) {
+      return
+    }
+    schemaMutations.update($schemaMutations => {
+      let newSchemaMutations = { ...$schemaMutations }
+      fields.forEach(field => {
+        newSchemaMutations[field] = {
+          ...newSchemaMutations[field],
+          ...mutations[field],
+        }
+      })
+      return newSchemaMutations
+    })
+  }
+
+  // Saves schema changes to the server, if possible
+  const saveSchemaMutations = async () => {
+    // If we can't save schema changes then we just want to keep this in memory
+    if (!get(config).canSaveSchema) {
+      return
+    }
+    const $definition = get(definition)
+    const $schemaMutations = get(schemaMutations)
+    const $schema = get(schema)
+    let newSchema = {}
+
+    // Build new updated datasource schema
+    Object.keys($schema).forEach(column => {
+      newSchema[column] = {
+        ...$schema[column],
+        ...$schemaMutations[column],
+      }
+    })
+
+    // Save the changes, then reset our local mutations
+    await saveDefinition({
+      ...$definition,
+      schema: newSchema,
+    })
+    schemaMutations.set({})
   }
 
   // Adds a row to the datasource
@@ -185,6 +249,10 @@ export const createActions = context => {
         getRow,
         isDatasourceValid,
         canUseColumn,
+        changePrimaryDisplay,
+        addSchemaMutation,
+        addSchemaMutations,
+        saveSchemaMutations,
       },
     },
   }

packages/frontend-core/src/components/grid/stores/reorder.js

@@ -34,6 +34,7 @@ export const createActions = context => {
     stickyColumn,
     maxScrollLeft,
     width,
+    datasource,
   } = context
 
   let autoScrollInterval
@@ -173,20 +174,17 @@ export const createActions = context => {
     document.removeEventListener("touchend", stopReordering)
     document.removeEventListener("touchcancel", stopReordering)
 
-    // Ensure there's actually a change
+    // Ensure there's actually a change before saving
-    let { sourceColumn, targetColumn } = get(reorder)
+    const { sourceColumn, targetColumn } = get(reorder)
-    if (sourceColumn !== targetColumn) {
-      moveColumn(sourceColumn, targetColumn)
-      await columns.actions.saveChanges()
-    }
-
-    // Reset state
     reorder.set(reorderInitialState)
+    if (sourceColumn !== targetColumn) {
+      await moveColumn(sourceColumn, targetColumn)
+    }
   }
 
   // Moves a column after another columns.
   // An undefined target column will move the source to index 0.
-  const moveColumn = (sourceColumn, targetColumn) => {
+  const moveColumn = async (sourceColumn, targetColumn) => {
     let $columns = get(columns)
     let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
     let targetIdx = $columns.findIndex(x => x.name === targetColumn)
@@ -198,14 +196,21 @@ export const createActions = context => {
       }
       return state.toSpliced(targetIdx, 0, removed[0])
     })
+
+    // Extract new orders as schema mutations
+    let mutations = {}
+    get(columns).forEach((column, idx) => {
+      mutations[column.name] = { order: idx }
+    })
+    datasource.actions.addSchemaMutations(mutations)
+    await datasource.actions.saveSchemaMutations()
   }
 
   // Moves a column one place left (as appears visually)
   const moveColumnLeft = async column => {
     const $visibleColumns = get(visibleColumns)
     const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
-    moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
+    await moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
-    await columns.actions.saveChanges()
   }
 
   // Moves a column one place right (as appears visually)
@@ -215,8 +220,7 @@ export const createActions = context => {
     if (sourceIdx === $visibleColumns.length - 1) {
       return
     }
-    moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
+    await moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
-    await columns.actions.saveChanges()
   }
 
   return {

packages/frontend-core/src/components/grid/stores/resize.js

@@ -6,7 +6,6 @@ const initialState = {
   initialMouseX: null,
   initialWidth: null,
   column: null,
-  columnIdx: null,
   width: 0,
   left: 0,
 }
@@ -21,7 +20,7 @@ export const createStores = () => {
 }
 
 export const createActions = context => {
-  const { resize, columns, stickyColumn, ui } = context
+  const { resize, ui, datasource } = context
 
   // Starts resizing a certain column
   const startResizing = (column, e) => {
@@ -32,12 +31,6 @@ export const createActions = context => {
     e.preventDefault()
     ui.actions.blur()
 
-    // Find and cache index
-    let columnIdx = get(columns).findIndex(col => col.name === column.name)
-    if (columnIdx === -1) {
-      columnIdx = "sticky"
-    }
-
     // Set initial store state
     resize.set({
       width: column.width,
@@ -45,7 +38,6 @@ export const createActions = context => {
       initialWidth: column.width,
       initialMouseX: x,
       column: column.name,
-      columnIdx,
     })
 
     // Add mouse event listeners to handle resizing
@@ -58,7 +50,7 @@ export const createActions = context => {
 
   // Handler for moving the mouse to resize columns
   const onResizeMouseMove = e => {
-    const { initialMouseX, initialWidth, width, columnIdx } = get(resize)
+    const { initialMouseX, initialWidth, width, column } = get(resize)
     const { x } = parseEventLocation(e)
     const dx = x - initialMouseX
     const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
@@ -69,17 +61,7 @@ export const createActions = context => {
     }
 
     // Update column state
-    if (columnIdx === "sticky") {
+    datasource.actions.addSchemaMutation(column, { width })
-      stickyColumn.update(state => ({
-        ...state,
-        width: newWidth,
-      }))
-    } else {
-      columns.update(state => {
-        state[columnIdx].width = newWidth
-        return [...state]
-      })
-    }
 
     // Update state
     resize.update(state => ({
@@ -101,26 +83,16 @@ export const createActions = context => {
 
     // Persist width if it changed
     if ($resize.width !== $resize.initialWidth) {
-      await columns.actions.saveChanges()
+      await datasource.actions.saveSchemaMutations()
     }
   }
 
   // Resets a column size back to default
   const resetSize = async column => {
-    const $stickyColumn = get(stickyColumn)
+    datasource.actions.addSchemaMutation(column.name, {
-    if (column.name === $stickyColumn?.name) {
+      width: DefaultColumnWidth,
-      stickyColumn.update(state => ({
+    })
-        ...state,
+    await datasource.actions.saveSchemaMutations()
-        width: DefaultColumnWidth,
-      }))
-    } else {
-      columns.update(state => {
-        const columnIdx = state.findIndex(x => x.name === column.name)
-        state[columnIdx].width = DefaultColumnWidth
-        return [...state]
-      })
-    }
-    await columns.actions.saveChanges()
   }
 
   return {

packages/frontend-core/src/components/grid/stores/viewport.js

@@ -1,9 +1,5 @@
 import { derived } from "svelte/store"
-import {
+import { MinColumnWidth } from "../lib/constants"
-  MaxCellRenderOverflow,
-  MinColumnWidth,
-  ScrollBarSize,
-} from "../lib/constants"
 
 export const deriveStores = context => {
   const {
@@ -85,51 +81,10 @@ export const deriveStores = context => {
     }
   )
 
-  // Determine the row index at which we should start vertically inverting cell
-  // dropdowns
-  const rowVerticalInversionIndex = derived(
-    [height, rowHeight, scrollTop],
-    ([$height, $rowHeight, $scrollTop]) => {
-      const offset = $scrollTop % $rowHeight
-
-      // Compute the last row index with space to render popovers below it
-      const minBottom =
-        $height - ScrollBarSize * 3 - MaxCellRenderOverflow + offset
-      const lastIdx = Math.floor(minBottom / $rowHeight)
-
-      // Compute the first row index with space to render popovers above it
-      const minTop = MaxCellRenderOverflow + offset
-      const firstIdx = Math.ceil(minTop / $rowHeight)
-
-      // Use the greater of the two indices so that we prefer content below,
-      // unless there is room to render the entire popover above
-      return Math.max(lastIdx, firstIdx)
-    }
-  )
-
-  // Determine the column index at which we should start horizontally inverting
-  // cell dropdowns
-  const columnHorizontalInversionIndex = derived(
-    [visibleColumns, scrollLeft, width],
-    ([$visibleColumns, $scrollLeft, $width]) => {
-      const cutoff = $width + $scrollLeft - ScrollBarSize * 3
-      let inversionIdx = $visibleColumns.length
-      for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
-        const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
-        if (rightEdge + MaxCellRenderOverflow <= cutoff) {
-          break
-        }
-      }
-      return inversionIdx
-    }
-  )
-
   return {
     scrolledRowCount,
     visualRowCapacity,
     renderedRows,
     columnRenderMap,
-    rowVerticalInversionIndex,
-    columnHorizontalInversionIndex,
   }
 }

packages/frontend-core/src/components/index.js

@@ -1,5 +1,6 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
+export { default as SignatureModal } from "./SignatureModal.svelte"
 export { default as Testimonial } from "./Testimonial.svelte"
 export { default as UserAvatar } from "./UserAvatar.svelte"
 export { default as UserAvatars } from "./UserAvatars.svelte"

packages/frontend-core/src/constants.js

@@ -121,6 +121,7 @@ export const TypeIconMap = {
   [FieldType.OPTIONS]: "Dropdown",
   [FieldType.DATETIME]: "Calendar",
   [FieldType.BARCODEQR]: "Camera",
+  [FieldType.SIGNATURE_SINGLE]: "AnnotatePen",
   [FieldType.LONGFORM]: "TextAlignLeft",
   [FieldType.ARRAY]: "Duplicate",
   [FieldType.NUMBER]: "123",

packages/server/package.json

@@ -79,7 +79,7 @@
     "dotenv": "8.2.0",
     "form-data": "4.0.0",
     "global-agent": "3.0.0",
-    "google-spreadsheet": "4.1.2",
+    "google-spreadsheet": "npm:@budibase/google-spreadsheet@4.1.2",
     "ioredis": "5.3.2",
     "isolated-vm": "^4.7.2",
     "jimp": "0.22.10",

packages/server/src/api/routes/tests/row.spec.ts

@@ -309,6 +309,11 @@ describe.each([
           name: "attachments",
           constraints: { type: "array", presence: false },
         }
+        const signature: FieldSchema = {
+          type: FieldType.SIGNATURE_SINGLE,
+          name: "signature",
+          constraints: { presence: false },
+        }
         const bool: FieldSchema = {
           type: FieldType.BOOLEAN,
           name: "boolean",
@@ -375,6 +380,8 @@ describe.each([
               attachmentListUndefined: attachmentList,
               attachmentListEmpty: attachmentList,
               attachmentListEmptyArrayStr: attachmentList,
+              signatureNull: signature,
+              signatureUndefined: signature,
               arrayFieldEmptyArrayStr: arrayField,
               arrayFieldArrayStrKnown: arrayField,
               arrayFieldNull: arrayField,
@@ -416,6 +423,8 @@ describe.each([
           attachmentListUndefined: undefined,
           attachmentListEmpty: "",
           attachmentListEmptyArrayStr: "[]",
+          signatureNull: null,
+          signatureUndefined: undefined,
           arrayFieldEmptyArrayStr: "[]",
           arrayFieldUndefined: undefined,
           arrayFieldNull: null,
@@ -450,6 +459,8 @@ describe.each([
         expect(row.attachmentListUndefined).toBe(undefined)
         expect(row.attachmentListEmpty).toEqual([])
         expect(row.attachmentListEmptyArrayStr).toEqual([])
+        expect(row.signatureNull).toEqual(null)
+        expect(row.signatureUndefined).toBe(undefined)
         expect(row.arrayFieldEmptyArrayStr).toEqual([])
         expect(row.arrayFieldNull).toEqual([])
         expect(row.arrayFieldUndefined).toEqual(undefined)
@@ -894,70 +905,91 @@ describe.each([
   })
 
   isInternal &&
-    describe("attachments", () => {
+    describe("attachments and signatures", () => {
-      it("should allow enriching single attachment rows", async () => {
+      const coreAttachmentEnrichment = async (
-        const table = await config.api.table.save(
+        schema: any,
+        field: string,
+        attachmentCfg: string | string[]
+      ) => {
+        const testTable = await config.api.table.save(
           defaultTable({
-            schema: {
+            schema,
-              attachment: {
-                type: FieldType.ATTACHMENT_SINGLE,
-                name: "attachment",
-                constraints: { presence: false },
-              },
-            },
           })
         )
-        const attachmentId = `${uuid.v4()}.csv`
+        const attachmentToStoreKey = (attachmentId: string) => {
-        const row = await config.api.row.save(table._id!, {
+          return {
+            key: `${config.getAppId()}/attachments/${attachmentId}`,
+          }
+        }
+        const draftRow = {
           name: "test",
           description: "test",
-          attachment: {
+          [field]:
-            key: `${config.getAppId()}/attachments/${attachmentId}`,
+            typeof attachmentCfg === "string"
-          },
+              ? attachmentToStoreKey(attachmentCfg)
+              : attachmentCfg.map(attachmentToStoreKey),
+          tableId: testTable._id,
+        }
+        const row = await config.api.row.save(testTable._id!, draftRow)
 
-          tableId: table._id,
-        })
         await config.withEnv({ SELF_HOSTED: "true" }, async () => {
           return context.doInAppContext(config.getAppId(), async () => {
-            const enriched = await outputProcessing(table, [row])
+            const enriched: Row[] = await outputProcessing(table, [row])
-            expect((enriched as Row[])[0].attachment.url.split("?")[0]).toBe(
+            const [targetRow] = enriched
-              `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
+            const attachmentEntries = Array.isArray(targetRow[field])
-            )
+              ? targetRow[field]
+              : [targetRow[field]]
+
+            for (const entry of attachmentEntries) {
+              const attachmentId = entry.key.split("/").pop()
+              expect(entry.url.split("?")[0]).toBe(
+                `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
+              )
+            }
           })
         })
+      }
+
+      it("should allow enriching single attachment rows", async () => {
+        await coreAttachmentEnrichment(
+          {
+            attachment: {
+              type: FieldType.ATTACHMENT_SINGLE,
+              name: "attachment",
+              constraints: { presence: false },
+            },
+          },
+          "attachment",
+          `${uuid.v4()}.csv`
+        )
       })
 
       it("should allow enriching attachment list rows", async () => {
-        const table = await config.api.table.save(
+        await coreAttachmentEnrichment(
-          defaultTable({
+          {
-            schema: {
+            attachments: {
-              attachment: {
+              type: FieldType.ATTACHMENTS,
-                type: FieldType.ATTACHMENTS,
+              name: "attachments",
-                name: "attachment",
+              constraints: { type: "array", presence: false },
-                constraints: { type: "array", presence: false },
-              },
             },
-          })
+          },
+          "attachments",
+          [`${uuid.v4()}.csv`]
         )
-        const attachmentId = `${uuid.v4()}.csv`
+      })
-        const row = await config.api.row.save(table._id!, {
+
-          name: "test",
+      it("should allow enriching signature rows", async () => {
-          description: "test",
+        await coreAttachmentEnrichment(
-          attachment: [
+          {
-            {
+            signature: {
-              key: `${config.getAppId()}/attachments/${attachmentId}`,
+              type: FieldType.SIGNATURE_SINGLE,
+              name: "signature",
+              constraints: { presence: false },
             },
-          ],
+          },
-          tableId: table._id,
+          "signature",
-        })
+          `${uuid.v4()}.png`
-        await config.withEnv({ SELF_HOSTED: "true" }, async () => {
+        )
-          return context.doInAppContext(config.getAppId(), async () => {
-            const enriched = await outputProcessing(table, [row])
-            expect((enriched as Row[])[0].attachment[0].url.split("?")[0]).toBe(
-              `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
-            )
-          })
-        })
       })
     })
 

packages/server/src/api/routes/tests/search.spec.ts

@@ -21,9 +21,6 @@ import _ from "lodash"
 import tk from "timekeeper"
 import { encodeJSBinding } from "@budibase/string-templates"
 
-const serverTime = new Date("2024-05-06T00:00:00.000Z")
-tk.freeze(serverTime)
-
 describe.each([
   ["lucene", undefined],
   ["sqs", undefined],
@@ -251,8 +248,14 @@ describe.each([
   describe("bindings", () => {
     let globalUsers: any = []
 
-    const future = new Date(serverTime.getTime())
+    const serverTime = new Date()
-    future.setDate(future.getDate() + 30)
+
+    // In MariaDB and MySQL we only store dates to second precision, so we need
+    // to remove milliseconds from the server time to ensure searches work as
+    // expected.
+    serverTime.setMilliseconds(0)
+
+    const future = new Date(serverTime.getTime() + 1000 * 60 * 60 * 24 * 30)
 
     const rows = (currentUser: User) => {
       return [
@@ -358,20 +361,22 @@ describe.each([
     })
 
     it("should parse the date binding and return all rows after the resolved value", async () => {
-      await expectQuery({
+      await tk.withFreeze(serverTime, async () => {
-        range: {
+        await expectQuery({
-          appointment: {
+          range: {
-            low: "{{ [now] }}",
+            appointment: {
-            high: "9999-00-00T00:00:00.000Z",
+              low: "{{ [now] }}",
+              high: "9999-00-00T00:00:00.000Z",
+            },
           },
-        },
+        }).toContainExactly([
-      }).toContainExactly([
+          {
-        {
+            name: config.getUser().firstName,
-          name: config.getUser().firstName,
+            appointment: future.toISOString(),
-          appointment: future.toISOString(),
+          },
-        },
+          { name: "serverDate", appointment: serverTime.toISOString() },
-        { name: "serverDate", appointment: serverTime.toISOString() },
+        ])
-      ])
+      })
     })
 
     it("should parse the date binding and return all rows before the resolved value", async () => {
@@ -407,8 +412,7 @@ describe.each([
     })
 
     it("should parse the encoded js binding. Return rows with appointments 2 weeks in the past", async () => {
-      const jsBinding =
+      const jsBinding = `const currentTime = new Date(${Date.now()})\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();`
-        "const currentTime = new Date()\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();"
       const encodedBinding = encodeJSBinding(jsBinding)
 
       await expectQuery({

packages/server/src/automations/automationUtils.ts

@@ -113,7 +113,8 @@ export async function sendAutomationAttachmentsToStorage(
     const schema = table.schema[prop]
     if (
       schema?.type === FieldType.ATTACHMENTS ||
-      schema?.type === FieldType.ATTACHMENT_SINGLE
+      schema?.type === FieldType.ATTACHMENT_SINGLE ||
+      schema?.type === FieldType.SIGNATURE_SINGLE
     ) {
       attachmentRows[prop] = value
     }

packages/server/src/integrations/googlesheets.ts

@@ -72,6 +72,7 @@ const isTypeAllowed: Record<FieldType, boolean> = {
   [FieldType.JSON]: false,
   [FieldType.INTERNAL]: false,
   [FieldType.BIGINT]: false,
+  [FieldType.SIGNATURE_SINGLE]: false,
 }
 
 const ALLOWED_TYPES = Object.entries(isTypeAllowed)
@@ -228,32 +229,53 @@ class GoogleSheetsIntegration implements DatasourcePlus {
 
   private async connect() {
     try {
-      await setupCreationAuth(this.config)
+      const bbCtx = context.getCurrentContext()
+      let oauthClient = bbCtx?.googleSheets?.oauthClient
 
-      // Initialise oAuth client
+      if (!oauthClient) {
-      const googleConfig = await configs.getGoogleDatasourceConfig()
+        await setupCreationAuth(this.config)
-      if (!googleConfig) {
+
-        throw new HTTPError("Google config not found", 400)
+        // Initialise oAuth client
+        const googleConfig = await configs.getGoogleDatasourceConfig()
+        if (!googleConfig) {
+          throw new HTTPError("Google config not found", 400)
+        }
+
+        oauthClient = new OAuth2Client({
+          clientId: googleConfig.clientID,
+          clientSecret: googleConfig.clientSecret,
+        })
+
+        const tokenResponse = await this.fetchAccessToken({
+          client_id: googleConfig.clientID,
+          client_secret: googleConfig.clientSecret,
+          refresh_token: this.config.auth.refreshToken,
+        })
+
+        oauthClient.setCredentials({
+          refresh_token: this.config.auth.refreshToken,
+          access_token: tokenResponse.access_token,
+        })
+        if (bbCtx && !bbCtx.googleSheets) {
+          bbCtx.googleSheets = {
+            oauthClient,
+            clients: {},
+          }
+          bbCtx.cleanup = bbCtx.cleanup || []
+        }
       }
 
-      const oauthClient = new OAuth2Client({
+      let client = bbCtx?.googleSheets?.clients[this.spreadsheetId]
-        clientId: googleConfig.clientID,
+      if (!client) {
-        clientSecret: googleConfig.clientSecret,
+        client = new GoogleSpreadsheet(this.spreadsheetId, oauthClient)
-      })
+        await client.loadInfo()
 
-      const tokenResponse = await this.fetchAccessToken({
+        if (bbCtx?.googleSheets?.clients) {
-        client_id: googleConfig.clientID,
+          bbCtx.googleSheets.clients[this.spreadsheetId] = client
-        client_secret: googleConfig.clientSecret,
+        }
-        refresh_token: this.config.auth.refreshToken,
+      }
-      })
 
-      oauthClient.setCredentials({
+      this.client = client
-        refresh_token: this.config.auth.refreshToken,
-        access_token: tokenResponse.access_token,
-      })
-
-      this.client = new GoogleSpreadsheet(this.spreadsheetId, oauthClient)
-      await this.client.loadInfo()
     } catch (err: any) {
       // this happens for xlsx imports
       if (err.message?.includes("operation is not supported")) {

packages/server/src/integrations/rest.ts

@@ -1,22 +1,22 @@
 import {
-  Integration,
   DatasourceFieldType,
-  QueryType,
+  HttpMethod,
-  PaginationConfig,
+  Integration,
   IntegrationBase,
+  PaginationConfig,
   PaginationValues,
-  RestQueryFields as RestQuery,
+  QueryType,
-  RestConfig,
   RestAuthType,
   RestBasicAuthConfig,
   RestBearerAuthConfig,
-  HttpMethod,
+  RestConfig,
+  RestQueryFields as RestQuery,
 } from "@budibase/types"
 import get from "lodash/get"
 import * as https from "https"
 import qs from "querystring"
-import fetch from "node-fetch"
 import type { Response } from "node-fetch"
+import fetch from "node-fetch"
 import { formatBytes } from "../utilities"
 import { performance } from "perf_hooks"
 import FormData from "form-data"
@@ -87,6 +87,12 @@ const SCHEMA: Integration = {
       default: true,
       required: false,
     },
+    downloadImages: {
+      display: "Download images",
+      type: DatasourceFieldType.BOOLEAN,
+      default: true,
+      required: false,
+    },
   },
   query: {
     create: {
@@ -139,7 +145,8 @@ class RestIntegration implements IntegrationBase {
       filename: string | undefined
 
     const { contentType, contentDisposition } = getAttachmentHeaders(
-      response.headers
+      response.headers,
+      { downloadImages: this.config.downloadImages }
     )
     if (
       contentDisposition.includes("filename") ||

packages/server/src/integrations/tests/restUtils.spec.ts

@@ -1,13 +1,13 @@
 import { getAttachmentHeaders } from "../utils/restUtils"
 import type { Headers } from "node-fetch"
 
-function headers(dispositionValue: string) {
+function headers(dispositionValue: string, contentType?: string) {
   return {
     get: (name: string) => {
       if (name.toLowerCase() === "content-disposition") {
         return dispositionValue
       } else {
-        return "application/pdf"
+        return contentType || "application/pdf"
       }
     },
     set: () => {},
@@ -35,4 +35,14 @@ describe("getAttachmentHeaders", () => {
     )
     expect(contentDisposition).toBe(`inline; filename="report.pdf"`)
   })
+
+  it("should handle an image", () => {
+    const { contentDisposition } = getAttachmentHeaders(
+      headers("", "image/png"),
+      {
+        downloadImages: true,
+      }
+    )
+    expect(contentDisposition).toBe(`attachment; filename="image.png"`)
+  })
 })

packages/server/src/integrations/utils/restUtils.ts

@@ -1,6 +1,9 @@
 import type { Headers } from "node-fetch"
 
-export function getAttachmentHeaders(headers: Headers) {
+export function getAttachmentHeaders(
+  headers: Headers,
+  opts?: { downloadImages?: boolean }
+) {
   const contentType = headers.get("content-type") || ""
   let contentDisposition = headers.get("content-disposition") || ""
 
@@ -23,6 +26,15 @@ export function getAttachmentHeaders(headers: Headers) {
       }
     }
   }
+  // for images which don't supply a content disposition, make one up, as binary
+  // data for images in REST responses isn't really useful, we should always download them
+  else if (opts?.downloadImages && contentType.startsWith("image/")) {
+    const format = contentType.split("/")[1]
+    return {
+      contentDisposition: `attachment; filename="image.${format}"`,
+      contentType,
+    }
+  }
 
   return { contentDisposition, contentType }
 }

packages/server/src/integrations/utils/utils.ts

@@ -254,6 +254,7 @@ function copyExistingPropsOver(
         case FieldType.ARRAY:
         case FieldType.ATTACHMENTS:
         case FieldType.ATTACHMENT_SINGLE:
+        case FieldType.SIGNATURE_SINGLE:
         case FieldType.JSON:
         case FieldType.BB_REFERENCE:
         case FieldType.BB_REFERENCE_SINGLE:

packages/server/src/sdk/app/backups/imports.ts

@@ -68,7 +68,8 @@ export async function updateAttachmentColumns(prodAppId: string, db: Database) {
               rewriteAttachmentUrl(prodAppId, attachment)
             )
           } else if (
-            columnType === FieldType.ATTACHMENT_SINGLE &&
+            (columnType === FieldType.ATTACHMENT_SINGLE ||
+              columnType === FieldType.SIGNATURE_SINGLE) &&
             row[column]
           ) {
             row[column] = rewriteAttachmentUrl(prodAppId, row[column])

packages/server/src/sdk/app/rows/attachments.ts

@@ -32,7 +32,8 @@ export async function getRowsWithAttachments(appId: string, table: Table) {
   for (let [key, column] of Object.entries(table.schema)) {
     if (
       column.type === FieldType.ATTACHMENTS ||
-      column.type === FieldType.ATTACHMENT_SINGLE
+      column.type === FieldType.ATTACHMENT_SINGLE ||
+      column.type === FieldType.SIGNATURE_SINGLE
     ) {
       attachmentCols.push(key)
     }

packages/server/src/sdk/app/rows/utils.ts

@@ -145,6 +145,10 @@ export async function validate({
     throw new Error("Unable to fetch table for validation")
   }
   const errors: Record<string, any> = {}
+  const disallowArrayTypes = [
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.BB_REFERENCE_SINGLE,
+  ]
   for (let fieldName of Object.keys(fetchedTable.schema)) {
     const column = fetchedTable.schema[fieldName]
     const constraints = cloneDeep(column.constraints)
@@ -161,6 +165,10 @@ export async function validate({
     if (type === FieldType.OPTIONS && constraints?.inclusion) {
       constraints.inclusion.push(null as any, "")
     }
+
+    if (disallowArrayTypes.includes(type) && Array.isArray(row[fieldName])) {
+      errors[fieldName] = `Cannot accept arrays`
+    }
     let res
 
     // Validate.js doesn't seem to handle array

packages/server/src/sdk/app/tables/internal/sqs.ts

@@ -29,6 +29,7 @@ const FieldTypeMap: Record<FieldType, SQLiteType> = {
   [FieldType.BARCODEQR]: SQLiteType.BLOB,
   [FieldType.ATTACHMENTS]: SQLiteType.BLOB,
   [FieldType.ATTACHMENT_SINGLE]: SQLiteType.BLOB,
+  [FieldType.SIGNATURE_SINGLE]: SQLiteType.BLOB,
   [FieldType.ARRAY]: SQLiteType.BLOB,
   [FieldType.LINK]: SQLiteType.BLOB,
   [FieldType.BIGINT]: SQLiteType.TEXT,

packages/server/src/sdk/tests/attachments.spec.ts

@@ -23,13 +23,35 @@ describe("should be able to re-write attachment URLs", () => {
     await config.init()
   })
 
-  it("should update URLs on a number of rows over the limit", async () => {
+  const coreBehaviour = async (tblSchema: any, row: any) => {
     const table = await config.api.table.save({
       name: "photos",
       type: "table",
       sourceId: INTERNAL_TABLE_SOURCE_ID,
       sourceType: TableSourceType.INTERNAL,
-      schema: {
+      schema: tblSchema,
+    })
+
+    for (let i = 0; i < FIND_LIMIT * 4; i++) {
+      await config.api.row.save(table._id!, {
+        ...row,
+      })
+    }
+
+    const db = dbCore.getDB(config.getAppId())
+    await sdk.backups.updateAttachmentColumns(db.name, db)
+
+    return {
+      db,
+      rows: (await sdk.rows.getAllInternalRows(db.name)).filter(
+        row => row.tableId === table._id
+      ),
+    }
+  }
+
+  it("Attachment field, should update URLs on a number of rows over the limit", async () => {
+    const { rows, db } = await coreBehaviour(
+      {
         photo: {
           type: FieldType.ATTACHMENT_SINGLE,
           name: "photo",
@@ -43,21 +65,11 @@ describe("should be able to re-write attachment URLs", () => {
           name: "otherCol",
         },
       },
-    })
+      {
-
-    for (let i = 0; i < FIND_LIMIT * 4; i++) {
-      await config.api.row.save(table._id!, {
         photo: { ...attachment },
         gallery: [{ ...attachment }, { ...attachment }],
         otherCol: "string",
-      })
+      }
-    }
-
-    const db = dbCore.getDB(config.getAppId())
-    await sdk.backups.updateAttachmentColumns(db.name, db)
-
-    const rows = (await sdk.rows.getAllInternalRows(db.name)).filter(
-      row => row.tableId === table._id
     )
     for (const row of rows) {
       expect(row.otherCol).toBe("string")
@@ -69,4 +81,27 @@ describe("should be able to re-write attachment URLs", () => {
       expect(row.gallery[1].key).toBe(`${db.name}/attachments/a.png`)
     }
   })
+  it("Signature field, should update URLs on a number of rows over the limit", async () => {
+    const { rows, db } = await coreBehaviour(
+      {
+        signature: {
+          type: FieldType.SIGNATURE_SINGLE,
+          name: "signature",
+        },
+        otherCol: {
+          type: FieldType.STRING,
+          name: "otherCol",
+        },
+      },
+      {
+        signature: { ...attachment },
+        otherCol: "string",
+      }
+    )
+    for (const row of rows) {
+      expect(row.otherCol).toBe("string")
+      expect(row.signature.url).toBe("")
+      expect(row.signature.key).toBe(`${db.name}/attachments/a.png`)
+    }
+  })
 })

packages/server/src/utilities/rowProcessor/attachments.ts

@@ -31,7 +31,8 @@ export class AttachmentCleanup {
   ): string[] {
     if (
       type !== FieldType.ATTACHMENTS &&
-      type !== FieldType.ATTACHMENT_SINGLE
+      type !== FieldType.ATTACHMENT_SINGLE &&
+      type !== FieldType.SIGNATURE_SINGLE
     ) {
       return []
     }
@@ -62,7 +63,8 @@ export class AttachmentCleanup {
       for (let [key, schema] of Object.entries(tableSchema)) {
         if (
           schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE
+          schema.type !== FieldType.ATTACHMENT_SINGLE &&
+          schema.type !== FieldType.SIGNATURE_SINGLE
         ) {
           continue
         }
@@ -100,10 +102,12 @@ export class AttachmentCleanup {
       for (let [key, schema] of Object.entries(table.schema)) {
         if (
           schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE
+          schema.type !== FieldType.ATTACHMENT_SINGLE &&
+          schema.type !== FieldType.SIGNATURE_SINGLE
         ) {
           continue
         }
+
         rows.forEach(row => {
           files = files.concat(
             AttachmentCleanup.extractAttachmentKeys(schema.type, row[key])
@@ -120,7 +124,8 @@ export class AttachmentCleanup {
       for (let [key, schema] of Object.entries(table.schema)) {
         if (
           schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE
+          schema.type !== FieldType.ATTACHMENT_SINGLE &&
+          schema.type !== FieldType.SIGNATURE_SINGLE
         ) {
           continue
         }

packages/server/src/utilities/rowProcessor/index.ts

@@ -158,7 +158,10 @@ export async function inputProcessing(
           delete attachment.url
         })
       }
-    } else if (field.type === FieldType.ATTACHMENT_SINGLE) {
+    } else if (
+      field.type === FieldType.ATTACHMENT_SINGLE ||
+      field.type === FieldType.SIGNATURE_SINGLE
+    ) {
       const attachment = clonedRow[key]
       if (attachment?.url) {
         delete clonedRow[key].url
@@ -230,7 +233,8 @@ export async function outputProcessing<T extends Row[] | Row>(
   for (let [property, column] of Object.entries(table.schema)) {
     if (
       column.type === FieldType.ATTACHMENTS ||
-      column.type === FieldType.ATTACHMENT_SINGLE
+      column.type === FieldType.ATTACHMENT_SINGLE ||
+      column.type === FieldType.SIGNATURE_SINGLE
     ) {
       for (let row of enriched) {
         if (row[property] == null) {

packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts

@@ -1,22 +1,30 @@
 import { AttachmentCleanup } from "../attachments"
 import { FieldType, Table, Row, TableSourceType } from "@budibase/types"
 import { DEFAULT_BB_DATASOURCE_ID } from "../../../constants"
-import { objectStore } from "@budibase/backend-core"
+import { objectStore, db, context } from "@budibase/backend-core"
+import * as uuid from "uuid"
 
 const BUCKET = "prod-budi-app-assets"
 const FILE_NAME = "file/thing.jpg"
+const DEV_APPID = "abc_dev_123"
+const PROD_APPID = "abc_123"
 
 jest.mock("@budibase/backend-core", () => {
   const actual = jest.requireActual("@budibase/backend-core")
   return {
     ...actual,
+    context: {
+      ...actual.context,
+      getAppId: jest.fn(),
+    },
     objectStore: {
       deleteFiles: jest.fn(),
       ObjectStoreBuckets: actual.objectStore.ObjectStoreBuckets,
     },
     db: {
-      isProdAppID: () => jest.fn(() => false),
+      isProdAppID: jest.fn(),
-      dbExists: () => jest.fn(() => false),
+      getProdAppID: jest.fn(),
+      dbExists: jest.fn(),
     },
   }
 })
@@ -27,12 +35,18 @@ const mockedDeleteFiles = objectStore.deleteFiles as jest.MockedFunction<
 
 const rowGenerators: [
   string,
-  FieldType.ATTACHMENT_SINGLE | FieldType.ATTACHMENTS,
+  (
+    | FieldType.ATTACHMENT_SINGLE
+    | FieldType.ATTACHMENTS
+    | FieldType.SIGNATURE_SINGLE
+  ),
+  string,
   (fileKey?: string) => Row
 ][] = [
   [
     "row with a attachment list column",
     FieldType.ATTACHMENTS,
+    "attach",
     function rowWithAttachments(fileKey: string = FILE_NAME): Row {
       return {
         attach: [
@@ -48,6 +62,7 @@ const rowGenerators: [
   [
     "row with a single attachment column",
     FieldType.ATTACHMENT_SINGLE,
+    "attach",
     function rowWithAttachments(fileKey: string = FILE_NAME): Row {
       return {
         attach: {
@@ -58,11 +73,25 @@ const rowGenerators: [
       }
     },
   ],
+  [
+    "row with a single signature column",
+    FieldType.SIGNATURE_SINGLE,
+    "signature",
+    function rowWithSignature(): Row {
+      return {
+        signature: {
+          size: 1,
+          extension: "png",
+          key: `${uuid.v4()}.png`,
+        },
+      }
+    },
+  ],
 ]
 
 describe.each(rowGenerators)(
   "attachment cleanup",
-  (_, attachmentFieldType, rowGenerator) => {
+  (_, attachmentFieldType, colKey, rowGenerator) => {
     function tableGenerator(): Table {
       return {
         name: "table",
@@ -75,97 +104,158 @@ describe.each(rowGenerators)(
             type: attachmentFieldType,
             constraints: {},
           },
+          signature: {
+            name: "signature",
+            type: FieldType.SIGNATURE_SINGLE,
+            constraints: {},
+          },
         },
       }
     }
 
+    const getRowKeys = (row: any, col: string) => {
+      return Array.isArray(row[col])
+        ? row[col].map((entry: any) => entry.key)
+        : [row[col]?.key]
+    }
+
     beforeEach(() => {
       mockedDeleteFiles.mockClear()
+      jest.resetAllMocks()
+
+      jest.spyOn(context, "getAppId").mockReturnValue(DEV_APPID)
+      jest.spyOn(db, "isProdAppID").mockReturnValue(false)
+      jest.spyOn(db, "getProdAppID").mockReturnValue(PROD_APPID)
+      jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(false))
     })
 
-    it("should be able to cleanup a table update", async () => {
+    // Ignore calls to prune attachments when app is in production.
+    it(`${attachmentFieldType} - should not attempt to delete attachments/signatures if a published app exists`, async () => {
+      jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(true))
       const originalTable = tableGenerator()
-      delete originalTable.schema["attach"]
+      delete originalTable.schema[colKey]
       await AttachmentCleanup.tableUpdate(originalTable, [rowGenerator()], {
         oldTable: tableGenerator(),
       })
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
-    })
-
-    it("should be able to cleanup a table deletion", async () => {
-      await AttachmentCleanup.tableDelete(tableGenerator(), [rowGenerator()])
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
-    })
-
-    it("should handle table column renaming", async () => {
-      const updatedTable = tableGenerator()
-      updatedTable.schema.attach2 = updatedTable.schema.attach
-      delete updatedTable.schema.attach
-      await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
-        oldTable: tableGenerator(),
-        rename: { old: "attach", updated: "attach2" },
-      })
       expect(mockedDeleteFiles).not.toHaveBeenCalled()
     })
 
-    it("shouldn't cleanup if no table changes", async () => {
+    it(`${attachmentFieldType} - should be able to cleanup a table update`, async () => {
+      const originalTable = tableGenerator()
+      delete originalTable.schema[colKey]
+      const targetRow = rowGenerator()
+
+      await AttachmentCleanup.tableUpdate(originalTable, [targetRow], {
+        oldTable: tableGenerator(),
+      })
+
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
+    })
+
+    it(`${attachmentFieldType} - should be able to cleanup a table deletion`, async () => {
+      const targetRow = rowGenerator()
+      await AttachmentCleanup.tableDelete(tableGenerator(), [targetRow])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
+    })
+
+    it(`${attachmentFieldType} - should handle table column renaming`, async () => {
+      const updatedTable = tableGenerator()
+      updatedTable.schema.col2 = updatedTable.schema[colKey]
+      delete updatedTable.schema.attach
+      await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
+        oldTable: tableGenerator(),
+        rename: { old: colKey, updated: "col2" },
+      })
+      expect(mockedDeleteFiles).not.toHaveBeenCalled()
+    })
+
+    it(`${attachmentFieldType} - shouldn't cleanup if no table changes`, async () => {
       await AttachmentCleanup.tableUpdate(tableGenerator(), [rowGenerator()], {
         oldTable: tableGenerator(),
       })
       expect(mockedDeleteFiles).not.toHaveBeenCalled()
     })
 
-    it("should handle row updates", async () => {
+    it(`${attachmentFieldType} - should handle row updates`, async () => {
       const updatedRow = rowGenerator()
-      delete updatedRow.attach
+      delete updatedRow[colKey]
+
+      const targetRow = rowGenerator()
       await AttachmentCleanup.rowUpdate(tableGenerator(), {
         row: updatedRow,
-        oldRow: rowGenerator(),
+        oldRow: targetRow,
       })
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
+
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
     })
 
-    it("should handle row deletion", async () => {
+    it(`${attachmentFieldType} - should handle row deletion`, async () => {
-      await AttachmentCleanup.rowDelete(tableGenerator(), [rowGenerator()])
+      const targetRow = rowGenerator()
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
+      await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
     })
 
-    it("should handle row deletion and not throw when attachments are undefined", async () => {
+    it(`${attachmentFieldType} - should handle row deletion, prune signature`, async () => {
+      const targetRow = rowGenerator()
+      await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
+    })
+
+    it(`${attachmentFieldType} - should handle row deletion and not throw when attachments are undefined`, async () => {
       await AttachmentCleanup.rowDelete(tableGenerator(), [
         {
-          multipleAttachments: undefined,
+          [colKey]: undefined,
         },
       ])
     })
 
-    it("shouldn't cleanup attachments if row not updated", async () => {
+    it(`${attachmentFieldType} - shouldn't cleanup attachments if row not updated`, async () => {
+      const targetRow = rowGenerator()
       await AttachmentCleanup.rowUpdate(tableGenerator(), {
-        row: rowGenerator(),
+        row: targetRow,
-        oldRow: rowGenerator(),
+        oldRow: targetRow,
       })
       expect(mockedDeleteFiles).not.toHaveBeenCalled()
     })
 
-    it("should be able to cleanup a column and not throw when attachments are undefined", async () => {
+    it(`${attachmentFieldType} - should be able to cleanup a column and not throw when attachments are undefined`, async () => {
       const originalTable = tableGenerator()
-      delete originalTable.schema["attach"]
+      delete originalTable.schema[colKey]
+      const row1 = rowGenerator("file 1")
+      const row2 = rowGenerator("file 2")
       await AttachmentCleanup.tableUpdate(
         originalTable,
-        [rowGenerator("file 1"), { attach: undefined }, rowGenerator("file 2")],
+        [row1, { [colKey]: undefined }, row2],
         {
           oldTable: tableGenerator(),
         }
       )
+      const expectedKeys = [row1, row2].reduce((acc: string[], row) => {
+        acc = [...acc, ...getRowKeys(row, colKey)]
+        return acc
+      }, [])
       expect(mockedDeleteFiles).toHaveBeenCalledTimes(1)
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, expectedKeys)
-        "file 1",
-        "file 2",
-      ])
     })
 
-    it("should be able to cleanup a column and not throw when ALL attachments are undefined", async () => {
+    it(`${attachmentFieldType} - should be able to cleanup a column and not throw when ALL attachments are undefined`, async () => {
       const originalTable = tableGenerator()
-      delete originalTable.schema["attach"]
+      delete originalTable.schema[colKey]
       await AttachmentCleanup.tableUpdate(
         originalTable,
         [{}, { attach: undefined }],

packages/server/src/utilities/schema.ts

@@ -151,7 +151,8 @@ export function parse(rows: Rows, schema: TableSchema): Rows {
         parsedRow[columnName] = parsedValue?._id
       } else if (
         (columnType === FieldType.ATTACHMENTS ||
-          columnType === FieldType.ATTACHMENT_SINGLE) &&
+          columnType === FieldType.ATTACHMENT_SINGLE ||
+          columnType === FieldType.SIGNATURE_SINGLE) &&
         typeof columnData === "string"
       ) {
         parsedRow[columnName] = parseCsvExport(columnData)

packages/shared-core/src/table.ts

@@ -15,6 +15,7 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
   [FieldType.ARRAY]: false,
   [FieldType.ATTACHMENTS]: false,
   [FieldType.ATTACHMENT_SINGLE]: false,
+  [FieldType.SIGNATURE_SINGLE]: false,
   [FieldType.LINK]: false,
   [FieldType.JSON]: false,
   [FieldType.BB_REFERENCE]: false,
@@ -33,10 +34,10 @@ const allowSortColumnByType: Record<FieldType, boolean> = {
   [FieldType.BIGINT]: true,
   [FieldType.BOOLEAN]: true,
   [FieldType.JSON]: true,
-
   [FieldType.FORMULA]: false,
   [FieldType.ATTACHMENTS]: false,
   [FieldType.ATTACHMENT_SINGLE]: false,
+  [FieldType.SIGNATURE_SINGLE]: false,
   [FieldType.ARRAY]: false,
   [FieldType.LINK]: false,
   [FieldType.BB_REFERENCE]: false,

packages/types/src/documents/app/datasource.ts

@@ -46,6 +46,7 @@ export interface DynamicVariable {
 export interface RestConfig {
   url: string
   rejectUnauthorized: boolean
+  downloadImages?: boolean
   defaultHeaders: {
     [key: string]: any
   }

packages/types/src/documents/app/row.ts

@@ -93,6 +93,11 @@ export enum FieldType {
    * type is found. The column will contain the contents of any barcode scanned.
    */
   BARCODEQR = "barcodeqr",
+  /**
+   * a JSON type, called Signature within Budibase. This type functions much the same as ATTACHMENTS but restricted
+   * only to signatures.
+   */
+  SIGNATURE_SINGLE = "signature_single",
   /**
    * a string type, this allows representing very large integers, but they are held/managed within Budibase as
    * strings. When stored in external databases Budibase will attempt to use a real big integer type and depend

yarn.lock

@@ -11540,10 +11540,10 @@ google-p12-pem@^4.0.0:
   dependencies:
     node-forge "^1.3.1"
 
-google-spreadsheet@4.1.2:
+"google-spreadsheet@npm:@budibase/google-spreadsheet@4.1.2":
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/google-spreadsheet/-/google-spreadsheet-4.1.2.tgz#92e30fdba7e0d78c55d50731528df7835d58bfee"
+  resolved "https://registry.yarnpkg.com/@budibase/google-spreadsheet/-/google-spreadsheet-4.1.2.tgz#90548ccba2284b3042b08d2974ef3caeaf772ad9"
-  integrity sha512-HFBweDAkOcyC2qO9kmWESKbNuOcn+R7UzZN/tj5LLNxVv8FHmg113u0Ow+yaKwwIOt/NnDtPLuptAhaxTs0FYw==
+  integrity sha512-dxoY3rQGGnuNeZiXhNc9oYPduzU8xnIjWujFwNvaRRv3zWeUV7mj6HE2o/OJOeekPGt7o44B+w6DfkiaoteZgg==
   dependencies:
     axios "^1.4.0"
     lodash "^4.17.21"