Merge branch 'master' into budi-8195/unable-to-load-grid-when-using-external-postgres

.eslintrc.json

@@ -55,7 +55,9 @@
           }
         ],
         "no-redeclare": "off",
-        "@typescript-eslint/no-redeclare": "error"
+        "@typescript-eslint/no-redeclare": "error",
+        // have to turn this off to allow function overloading in typescript
+        "no-dupe-class-members": "off"
       }
     },
     {
@@ -88,7 +90,9 @@
         "jest/expect-expect": "off",
         // We do this in some tests where the behaviour of internal tables
         // differs to external, but the API is broadly the same
-        "jest/no-conditional-expect": "off"
+        "jest/no-conditional-expect": "off",
+        // have to turn this off to allow function overloading in typescript
+        "no-dupe-class-members": "off"
       }
     },
     {

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/db/Replication.ts

@@ -1,14 +1,31 @@
 import PouchDB from "pouchdb"
 import { getPouchDB, closePouchDB } from "./couch"
-import { DocumentType } from "../constants"
+import { DocumentType } from "@budibase/types"
+
+enum ReplicationDirection {
+  TO_PRODUCTION = "toProduction",
+  TO_DEV = "toDev",
+}
 
 class Replication {
   source: PouchDB.Database
   target: PouchDB.Database
+  direction: ReplicationDirection | undefined
 
   constructor({ source, target }: { source: string; target: string }) {
     this.source = getPouchDB(source)
     this.target = getPouchDB(target)
+    if (
+      source.startsWith(DocumentType.APP_DEV) &&
+      target.startsWith(DocumentType.APP)
+    ) {
+      this.direction = ReplicationDirection.TO_PRODUCTION
+    } else if (
+      source.startsWith(DocumentType.APP) &&
+      target.startsWith(DocumentType.APP_DEV)
+    ) {
+      this.direction = ReplicationDirection.TO_DEV
+    }
   }
 
   async close() {
@@ -40,12 +57,18 @@ class Replication {
     }
 
     const filter = opts.filter
+    const direction = this.direction
+    const toDev = direction === ReplicationDirection.TO_DEV
     delete opts.filter
 
     return {
       ...opts,
       filter: (doc: any, params: any) => {
-        if (doc._id && doc._id.startsWith(DocumentType.AUTOMATION_LOG)) {
+        // don't sync design documents
+        if (toDev && doc._id?.startsWith("_design")) {
+          return false
+        }
+        if (doc._id?.startsWith(DocumentType.AUTOMATION_LOG)) {
           return false
         }
         if (doc._id === DocumentType.APP_METADATA) {

packages/backend-core/src/db/couch/DatabaseImpl.ts

@@ -12,6 +12,7 @@ import {
   isDocument,
   RowResponse,
   RowValue,
+  SQLiteDefinition,
   SqlQueryBinding,
 } from "@budibase/types"
 import { getCouchInfo } from "./connections"
@@ -21,6 +22,8 @@ import { ReadStream, WriteStream } from "fs"
 import { newid } from "../../docIds/newid"
 import { SQLITE_DESIGN_DOC_ID } from "../../constants"
 import { DDInstrumentedDatabase } from "../instrumentation"
+import { checkSlashesInUrl } from "../../helpers"
+import env from "../../environment"
 
 const DATABASE_NOT_FOUND = "Database does not exist."
 
@@ -281,25 +284,61 @@ export class DatabaseImpl implements Database {
     })
   }
 
+  async _sqlQuery<T>(
+    url: string,
+    method: "POST" | "GET",
+    body?: Record<string, any>
+  ): Promise<T> {
+    url = checkSlashesInUrl(`${this.couchInfo.sqlUrl}/${url}`)
+    const args: { url: string; method: string; cookie: string; body?: any } = {
+      url,
+      method,
+      cookie: this.couchInfo.cookie,
+    }
+    if (body) {
+      args.body = body
+    }
+    return this.performCall(() => {
+      return async () => {
+        const response = await directCouchUrlCall(args)
+        const json = await response.json()
+        if (response.status > 300) {
+          throw json
+        }
+        return json as T
+      }
+    })
+  }
+
   async sql<T extends Document>(
     sql: string,
     parameters?: SqlQueryBinding
   ): Promise<T[]> {
     const dbName = this.name
     const url = `/${dbName}/${SQLITE_DESIGN_DOC_ID}`
-    const response = await directCouchUrlCall({
+    return await this._sqlQuery<T[]>(url, "POST", {
-      url: `${this.couchInfo.sqlUrl}/${url}`,
+      query: sql,
-      method: "POST",
+      args: parameters,
-      cookie: this.couchInfo.cookie,
-      body: {
-        query: sql,
-        args: parameters,
-      },
     })
-    if (response.status > 300) {
+  }
-      throw new Error(await response.text())
+
+  // checks design document is accurate (cleans up tables)
+  // this will check the design document and remove anything from
+  // disk which is not supposed to be there
+  async sqlDiskCleanup(): Promise<void> {
+    const dbName = this.name
+    const url = `/${dbName}/_cleanup`
+    return await this._sqlQuery<void>(url, "POST")
+  }
+
+  // removes a document from sqlite
+  async sqlPurgeDocument(docIds: string[] | string): Promise<void> {
+    if (!Array.isArray(docIds)) {
+      docIds = [docIds]
     }
-    return (await response.json()) as T[]
+    const dbName = this.name
+    const url = `/${dbName}/_purge`
+    return await this._sqlQuery<void>(url, "POST", { docs: docIds })
   }
 
   async query<T extends Document>(
@@ -314,6 +353,17 @@ export class DatabaseImpl implements Database {
 
   async destroy() {
     try {
+      if (env.SQS_SEARCH_ENABLE) {
+        // delete the design document, then run the cleanup operation
+        try {
+          const definition = await this.get<SQLiteDefinition>(
+            SQLITE_DESIGN_DOC_ID
+          )
+          await this.remove(SQLITE_DESIGN_DOC_ID, definition._rev)
+        } finally {
+          await this.sqlDiskCleanup()
+        }
+      }
       return await this.nano().db.destroy(this.name)
     } catch (err: any) {
       // didn't exist, don't worry

packages/backend-core/src/db/couch/utils.ts

@@ -21,7 +21,7 @@ export async function directCouchUrlCall({
   url: string
   cookie: string
   method: string
-  body?: any
+  body?: Record<string, any>
 }) {
   const params: any = {
     method: method,

packages/backend-core/src/db/instrumentation.ts

@@ -56,12 +56,17 @@ export class DDInstrumentedDatabase implements Database {
     })
   }
 
+  remove(idOrDoc: Document): Promise<DocumentDestroyResponse>
+  remove(idOrDoc: string, rev?: string): Promise<DocumentDestroyResponse>
   remove(
-    id: string | Document,
+    idOrDoc: string | Document,
-    rev?: string | undefined
+    rev?: string
   ): Promise<DocumentDestroyResponse> {
     return tracer.trace("db.remove", span => {
-      span?.addTags({ db_name: this.name, doc_id: id })
+      span?.addTags({ db_name: this.name, doc_id: idOrDoc })
+      const isDocument = typeof idOrDoc === "object"
+      const id = isDocument ? idOrDoc._id! : idOrDoc
+      rev = isDocument ? idOrDoc._rev : rev
       return this.db.remove(id, rev)
     })
   }
@@ -160,4 +165,18 @@ export class DDInstrumentedDatabase implements Database {
       return this.db.sql(sql, parameters)
     })
   }
+
+  sqlPurgeDocument(docIds: string[] | string): Promise<void> {
+    return tracer.trace("db.sqlPurgeDocument", span => {
+      span?.addTags({ db_name: this.name })
+      return this.db.sqlPurgeDocument(docIds)
+    })
+  }
+
+  sqlDiskCleanup(): Promise<void> {
+    return tracer.trace("db.sqlDiskCleanup", span => {
+      span?.addTags({ db_name: this.name })
+      return this.db.sqlDiskCleanup()
+    })
+  }
 }

packages/backend-core/src/environment.ts

@@ -109,6 +109,7 @@ const environment = {
   API_ENCRYPTION_KEY: getAPIEncryptionKey(),
   COUCH_DB_URL: process.env.COUCH_DB_URL || "http://localhost:4005",
   COUCH_DB_SQL_URL: process.env.COUCH_DB_SQL_URL || "http://localhost:4006",
+  SQS_SEARCH_ENABLE: process.env.SQS_SEARCH_ENABLE,
   COUCH_DB_USERNAME: process.env.COUCH_DB_USER,
   COUCH_DB_PASSWORD: process.env.COUCH_DB_PASSWORD,
   GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,

packages/backend-core/src/users/db.ts

@@ -492,7 +492,7 @@ export class UserDB {
 
     await platform.users.removeUser(dbUser)
 
-    await db.remove(userId, dbUser._rev)
+    await db.remove(userId, dbUser._rev!)
 
     const creatorsToDelete = (await isCreator(dbUser)) ? 1 : 0
     await UserDB.quotas.removeUsers(1, creatorsToDelete)

packages/bbui/src/Actions/click_outside.js

@@ -71,8 +71,8 @@ const handleMouseDown = e => {
 
   // Clear any previous listeners in case of multiple down events, and register
   // a single mouse up listener
-  document.removeEventListener("mouseup", handleMouseUp)
+  document.removeEventListener("click", handleMouseUp)
-  document.addEventListener("mouseup", handleMouseUp, true)
+  document.addEventListener("click", handleMouseUp, true)
 }
 
 // Global singleton listeners for our events

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/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -9,7 +9,7 @@
   import TestDataModal from "./TestDataModal.svelte"
   import { flip } from "svelte/animate"
   import { fly } from "svelte/transition"
-  import { Icon, notifications, Modal } from "@budibase/bbui"
+  import { Icon, notifications, Modal, Toggle } from "@budibase/bbui"
   import { ActionStepID } from "constants/backend/automations"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
 
@@ -73,6 +73,16 @@
         Test details
       </div>
     </div>
+    <div class="setting-spacing">
+      <Toggle
+        text={automation.disabled ? "Paused" : "Activated"}
+        on:change={automationStore.actions.toggleDisabled(
+          automation._id,
+          automation.disabled
+        )}
+        value={!automation.disabled}
+      />
+    </div>
   </div>
 </div>
 <div class="canvas" on:scroll={handleScroll}>

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -61,6 +61,7 @@
         selected={automation._id === selectedAutomationId}
         on:click={() => selectAutomation(automation._id)}
         selectedBy={$userSelectedResourceMap[automation._id]}
+        disabled={automation.disabled}
       >
         <EditAutomationPopover {automation} />
       </NavItem>

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -39,6 +39,15 @@
     >Duplicate</MenuItem
   >
   <MenuItem icon="Edit" on:click={updateAutomationDialog.show}>Edit</MenuItem>
+  <MenuItem
+    icon={automation.disabled ? "CheckmarkCircle" : "Cancel"}
+    on:click={automationStore.actions.toggleDisabled(
+      automation._id,
+      automation.disabled
+    )}
+  >
+    {automation.disabled ? "Activate" : "Pause"}
+  </MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 

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/NavItem.svelte

@@ -25,6 +25,7 @@
   export let selectedBy = null
   export let compact = false
   export let hovering = false
+  export let disabled = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -74,6 +75,7 @@
   class:scrollable
   class:highlighted
   class:selectedBy
+  class:disabled
   on:dragend
   on:dragstart
   on:dragover
@@ -165,6 +167,9 @@
     --avatars-background: var(--spectrum-global-color-gray-300);
     color: var(--ink);
   }
+  .nav-item.disabled span {
+    color: var(--spectrum-global-color-gray-700);
+  }
   .nav-item:hover,
   .hovering {
     background-color: var(--spectrum-global-color-gray-200);

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/ButtonActionEditor/actions/TriggerAutomation.svelte

@@ -24,7 +24,9 @@
     parameters
   }
   $: automations = $automationStore.automations
-    .filter(a => a.definition.trigger?.stepId === TriggerStepID.APP)
+    .filter(
+      a => a.definition.trigger?.stepId === TriggerStepID.APP && !a.disabled
+    )
     .map(automation => {
       const schema = Object.entries(
         automation.definition.trigger.inputs.fields || {}

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/automations.js

@@ -82,6 +82,7 @@ const automationActions = store => ({
         steps: [],
         trigger,
       },
+      disabled: false,
     }
     const response = await store.actions.save(automation)
     await store.actions.fetch()
@@ -134,6 +135,28 @@ const automationActions = store => ({
     })
     await store.actions.fetch()
   },
+  toggleDisabled: async automationId => {
+    let automation
+    try {
+      automation = store.actions.getDefinition(automationId)
+      if (!automation) {
+        return
+      }
+      automation.disabled = !automation.disabled
+      await store.actions.save(automation)
+      notifications.success(
+        `Automation ${
+          automation.disabled ? "enabled" : "disabled"
+        } successfully`
+      )
+    } catch (error) {
+      notifications.error(
+        `Error ${
+          automation && automation.disabled ? "enabling" : "disabling"
+        } automation`
+      )
+    }
+  },
   updateBlockInputs: async (block, data) => {
     // Create new modified block
     let newBlock = {

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,12 +37,16 @@
 
   let grid
   let gridContext
+  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 = [
     {
@@ -51,8 +55,6 @@
       metadata: { dataSource: table },
     },
   ]
-  $: height = $component.styles?.normal?.height || "408px"
-  $: styles = getSanitisedStyles($component.styles)
 
   // Provide additional data context for live binding eval
   export const getAdditionalDataContext = () => {
@@ -85,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
@@ -129,50 +133,50 @@
     )
   }
 
-  const getSanitisedStyles = styles => {
+  const patchStyles = (styles, minHeight) => {
     return {
       ...styles,
       normal: {
         ...styles?.normal,
-        height: undefined,
+        "min-height": `${minHeight}px`,
       },
     }
   }
 
   onMount(() => {
     gridContext = grid.getContext()
+    gridContext.minHeight.subscribe($height => (minHeight = $height))
   })
 </script>
 
 <div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
-  <span style="--height:{height};">
+  <Grid
-    <Grid
+    bind:this={grid}
-      bind:this={grid}
+    datasource={table}
-      datasource={table}
+    {API}
-      {API}
+    {stripeRows}
-      {stripeRows}
+    {quiet}
-      {quiet}
+    {darkMode}
-      {initialFilter}
+    {initialFilter}
-      {initialSortColumn}
+    {initialSortColumn}
-      {initialSortOrder}
+    {initialSortOrder}
-      {fixedRowHeight}
+    {fixedRowHeight}
-      {columnWhitelist}
+    {columnWhitelist}
-      {schemaOverrides}
+    {schemaOverrides}
-      canAddRows={allowAddRows}
+    canAddRows={allowAddRows}
-      canEditRows={allowEditRows}
+    canEditRows={allowEditRows}
-      canDeleteRows={allowDeleteRows}
+    canDeleteRows={allowDeleteRows}
-      canEditColumns={false}
+    canEditColumns={false}
-      canExpandRows={false}
+    canExpandRows={false}
-      canSaveSchema={false}
+    canSaveSchema={false}
-      canSelectRows={true}
+    canSelectRows={true}
-      showControls={false}
+    showControls={false}
-      notifySuccess={notificationStore.actions.success}
+    notifySuccess={notificationStore.actions.success}
-      notifyError={notificationStore.actions.error}
+    notifyError={notificationStore.actions.error}
-      buttons={enrichedButtons}
+    buttons={enrichedButtons}
-      isCloud={$environmentStore.cloud}
+    isCloud={$environmentStore.cloud}
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
+    on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
+  />
-  </span>
 </div>
 
 <Provider {data} {actions} />
@@ -185,14 +189,9 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     overflow: hidden;
+    height: 410px;
   }
   div.in-builder :global(*) {
     pointer-events: none;
   }
-  span {
-    display: contents;
-  }
-  span :global(.grid) {
-    height: var(--height);
-  }
 </style>

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

@@ -1,6 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import { writable } from "svelte/store"
+  import { writable, derived } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
@@ -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,10 +110,16 @@
     notifySuccess,
     notifyError,
     buttons,
+    darkMode,
     isCloud,
   })
-  $: minHeight =
+
-    Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)
+  // Derive min height and make available in context
+  const minHeight = derived(rowHeight, $height => {
+    const heightForControls = showControls ? ControlsHeight : 0
+    return Padding + SmallRowHeight + $height + heightForControls
+  })
+  context = { ...context, minHeight }
 
   // Set context for children to consume
   setContext("grid", context)
@@ -138,7 +145,7 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{minHeight}px; --controls-height:{ControlsHeight}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
 >
   {#if showControls}
     <div class="controls">

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/controllers/automation.ts

@@ -274,20 +274,28 @@ export async function trigger(ctx: UserCtx) {
 
   let hasCollectStep = sdk.automations.utils.checkForCollectStep(automation)
   if (hasCollectStep && (await features.isSyncAutomationsEnabled())) {
-    const response: AutomationResults = await triggers.externalTrigger(
+    try {
-      automation,
+      const response: AutomationResults = await triggers.externalTrigger(
-      {
+        automation,
-        fields: ctx.request.body.fields,
+        {
-        timeout:
+          fields: ctx.request.body.fields,
-          ctx.request.body.timeout * 1000 || env.AUTOMATION_THREAD_TIMEOUT,
+          timeout:
-      },
+            ctx.request.body.timeout * 1000 || env.AUTOMATION_THREAD_TIMEOUT,
-      { getResponses: true }
+        },
-    )
+        { getResponses: true }
+      )
 
-    let collectedValue = response.steps.find(
+      let collectedValue = response.steps.find(
-      step => step.stepId === AutomationActionStepId.COLLECT
+        step => step.stepId === AutomationActionStepId.COLLECT
-    )
+      )
-    ctx.body = collectedValue?.outputs
+      ctx.body = collectedValue?.outputs
+    } catch (err: any) {
+      if (err.message) {
+        ctx.throw(400, err.message)
+      } else {
+        throw err
+      }
+    }
   } else {
     if (ctx.appId && !dbCore.isProdAppID(ctx.appId)) {
       ctx.throw(400, "Only apps in production support this endpoint")

packages/server/src/api/controllers/table/utils.ts

@@ -33,6 +33,7 @@ import {
 } from "@budibase/types"
 import sdk from "../../../sdk"
 import env from "../../../environment"
+import { runStaticFormulaChecks } from "./bulkFormula"
 
 export async function clearColumns(table: Table, columnNames: string[]) {
   const db = context.getAppDB()
@@ -324,7 +325,7 @@ class TableSaveFunctions {
       user: this.user,
     })
     if (env.SQS_SEARCH_ENABLE) {
-      await sdk.tables.sqs.addTableToSqlite(table)
+      await sdk.tables.sqs.addTable(table)
     }
     return table
   }
@@ -496,5 +497,31 @@ export function setStaticSchemas(datasource: Datasource, table: Table) {
   return table
 }
 
+export async function internalTableCleanup(table: Table, rows?: Row[]) {
+  const db = context.getAppDB()
+  const tableId = table._id!
+  // remove table search index
+  if (!env.isTest() || env.COUCH_DB_URL) {
+    const currentIndexes = await db.getIndexes()
+    const existingIndex = currentIndexes.indexes.find(
+      (existing: any) => existing.name === `search:${tableId}`
+    )
+    if (existingIndex) {
+      await db.deleteIndex(existingIndex)
+    }
+  }
+
+  // has to run after, make sure it has _id
+  await runStaticFormulaChecks(table, {
+    deletion: true,
+  })
+  if (rows) {
+    await AttachmentCleanup.tableDelete(table, rows)
+  }
+  if (env.SQS_SEARCH_ENABLE) {
+    await sdk.tables.sqs.removeTable(table)
+  }
+}
+
 const _TableSaveFunctions = TableSaveFunctions
 export { _TableSaveFunctions as TableSaveFunctions }

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

@@ -206,6 +206,23 @@ describe("/automations", () => {
       expect(res.body.value).toEqual([1, 2, 3])
     })
 
+    it("should throw an error when attempting to trigger a disabled automation", async () => {
+      mocks.licenses.useSyncAutomations()
+      let automation = collectAutomation()
+      automation = await config.createAutomation({
+        ...automation,
+        disabled: true,
+      })
+
+      const res = await request
+        .post(`/api/automations/${automation._id}/trigger`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(400)
+
+      expect(res.body.message).toEqual("Automation is disabled")
+    })
+
     it("triggers an asynchronous automation", async () => {
       let automation = newAutomation()
       automation = await config.createAutomation(automation)

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

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/automations/triggers.ts

@@ -36,10 +36,10 @@ async function queueRelevantRowAutomations(
   await context.doInAppContext(event.appId, async () => {
     let automations = await getAllAutomations()
 
-    // filter down to the correct event type
+    // filter down to the correct event type and enabled automations
     automations = automations.filter(automation => {
       const trigger = automation.definition.trigger
-      return trigger && trigger.event === eventType
+      return trigger && trigger.event === eventType && !automation.disabled
     })
 
     for (let automation of automations) {
@@ -94,6 +94,9 @@ export async function externalTrigger(
   params: { fields: Record<string, any>; timeout?: number },
   { getResponses }: { getResponses?: boolean } = {}
 ): Promise<any> {
+  if (automation.disabled) {
+    throw new Error("Automation is disabled")
+  }
   if (
     automation.definition != null &&
     automation.definition.trigger != null &&

packages/server/src/automations/utils.ts

@@ -196,6 +196,7 @@ export async function enableCronTrigger(appId: any, automation: Automation) {
   if (
     isCronTrigger(automation) &&
     !isRebootTrigger(automation) &&
+    !automation.disabled &&
     trigger?.inputs.cron
   ) {
     const cronExp = trigger.inputs.cron

packages/server/src/integrations/base/sqlTable.ts

@@ -129,6 +129,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/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

@@ -385,6 +385,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/search/sqs.ts

@@ -19,7 +19,7 @@ import {
   sqlOutputProcessing,
 } from "../../../../api/controllers/row/utils"
 import sdk from "../../../index"
-import { context } from "@budibase/backend-core"
+import { context, SQLITE_DESIGN_DOC_ID } from "@budibase/backend-core"
 import {
   CONSTANT_INTERNAL_ROW_COLS,
   SQS_DATASOURCE_INTERNAL,
@@ -195,6 +195,10 @@ export async function search(
     }
   } catch (err: any) {
     const msg = typeof err === "string" ? err : err.message
+    if (err.status === 404 && err.message?.includes(SQLITE_DESIGN_DOC_ID)) {
+      await sdk.tables.sqs.syncDefinition()
+      return search(options, table)
+    }
     throw new Error(`Unable to search by SQL - ${msg}`, { cause: err })
   }
 }

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

@@ -14,7 +14,7 @@ import { makeExternalQuery } from "../../../integrations/base/query"
 import { Format } from "../../../api/controllers/view/exporters"
 import sdk from "../.."
 import { isRelationshipColumn } from "../../../db/utils"
-import { SqlClient, isSQL } from "../../../integrations/utils"
+import { isSQL, SqlClient } from "../../../integrations/utils"
 
 const SQL_CLIENT_SOURCE_MAP: Record<SourceName, SqlClient | undefined> = {
   [SourceName.POSTGRES]: SqlClient.POSTGRES,
@@ -144,6 +144,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)
@@ -160,6 +164,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/index.ts

@@ -10,6 +10,7 @@ import {
 import {
   hasTypeChanged,
   TableSaveFunctions,
+  internalTableCleanup,
 } from "../../../../api/controllers/table/utils"
 import { EventType, updateLinks } from "../../../../db/linkedRows"
 import { cloneDeep } from "lodash/fp"
@@ -21,8 +22,6 @@ import { checkAutoColumns } from "./utils"
 import * as viewsSdk from "../../views"
 import { getRowParams } from "../../../../db/utils"
 import { quotas } from "@budibase/pro"
-import env from "../../../../environment"
-import { AttachmentCleanup } from "../../../../utilities/rowProcessor"
 
 export async function save(
   table: Table,
@@ -128,16 +127,20 @@ export async function destroy(table: Table) {
   const db = context.getAppDB()
   const tableId = table._id!
 
-  // Delete all rows for that table
+  // Delete all rows for that table - we have to retrieve the full rows for
-  const rowsData = await db.allDocs(
+  // attachment cleanup, this may be worth investigating if there is a better
-    getRowParams(tableId, null, {
+  // way - we could delete all rows without the `include_docs` which would be faster
-      include_docs: true,
+  const rows = (
-    })
+    await db.allDocs<Row>(
-  )
+      getRowParams(tableId, null, {
-  await db.bulkDocs(
+        include_docs: true,
-    rowsData.rows.map((row: any) => ({ ...row.doc, _deleted: true }))
+      })
-  )
+    )
-  await quotas.removeRows(rowsData.rows.length, {
+  ).rows.map(data => data.doc!)
+  await db.bulkDocs(rows.map((row: Row) => ({ ...row, _deleted: true })))
+
+  // remove rows from quota
+  await quotas.removeRows(rows.length, {
     tableId,
   })
 
@@ -150,25 +153,8 @@ export async function destroy(table: Table) {
   // don't remove the table itself until very end
   await db.remove(tableId, table._rev)
 
-  // remove table search index
+  // final cleanup, attachments, indexes, SQS
-  if (!env.isTest() || env.COUCH_DB_URL) {
+  await internalTableCleanup(table, rows)
-    const currentIndexes = await db.getIndexes()
-    const existingIndex = currentIndexes.indexes.find(
-      (existing: any) => existing.name === `search:${tableId}`
-    )
-    if (existingIndex) {
-      await db.deleteIndex(existingIndex)
-    }
-  }
-
-  // has to run after, make sure it has _id
-  await runStaticFormulaChecks(table, {
-    deletion: true,
-  })
-  await AttachmentCleanup.tableDelete(
-    table,
-    rowsData.rows.map((row: any) => row.doc)
-  )
 
   return { table }
 }

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

@@ -15,7 +15,9 @@ import {
   generateJunctionTableID,
 } from "../../../../db/utils"
 
-const BASIC_SQLITE_DOC: SQLiteDefinition = {
+type PreSaveSQLiteDefinition = Omit<SQLiteDefinition, "_rev">
+
+const BASIC_SQLITE_DOC: PreSaveSQLiteDefinition = {
   _id: SQLITE_DESIGN_DOC_ID,
   language: "sqlite",
   sql: {
@@ -40,6 +42,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,
@@ -103,7 +106,7 @@ function mapTable(table: Table): SQLiteTables {
 }
 
 // nothing exists, need to iterate though existing tables
-async function buildBaseDefinition(): Promise<SQLiteDefinition> {
+async function buildBaseDefinition(): Promise<PreSaveSQLiteDefinition> {
   const tables = await tablesSdk.getAllInternalTables()
   const definition = cloneDeep(BASIC_SQLITE_DOC)
   for (let table of tables) {
@@ -115,11 +118,17 @@ async function buildBaseDefinition(): Promise<SQLiteDefinition> {
   return definition
 }
 
-export async function addTableToSqlite(table: Table) {
+export async function syncDefinition(): Promise<void> {
   const db = context.getAppDB()
-  let definition: SQLiteDefinition
+  const definition = await buildBaseDefinition()
+  await db.put(definition)
+}
+
+export async function addTable(table: Table) {
+  const db = context.getAppDB()
+  let definition: PreSaveSQLiteDefinition | SQLiteDefinition
   try {
-    definition = await db.get(SQLITE_DESIGN_DOC_ID)
+    definition = await db.get<SQLiteDefinition>(SQLITE_DESIGN_DOC_ID)
   } catch (err) {
     definition = await buildBaseDefinition()
   }
@@ -129,3 +138,22 @@ export async function addTableToSqlite(table: Table) {
   }
   await db.put(definition)
 }
+
+export async function removeTable(table: Table) {
+  const db = context.getAppDB()
+  try {
+    const definition = await db.get<SQLiteDefinition>(SQLITE_DESIGN_DOC_ID)
+    if (definition.sql?.tables?.[table._id!]) {
+      delete definition.sql.tables[table._id!]
+      await db.put(definition)
+      // make sure SQS is cleaned up, tables removed
+      await db.sqlDiskCleanup()
+    }
+  } catch (err: any) {
+    if (err?.status === 404) {
+      return
+    } else {
+      throw err
+    }
+  }
+}