Merge branch 'master' into demock-environment-variable-tests

2025-03-03 16:03:05 +00:00 · 2025-03-03 16:03:05 +00:00 · 7a8e676c80
parent 5489cf8c0f da92870b6c
commit 7a8e676c80
55 changed files with 943 additions and 862 deletions
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -94,6 +94,15 @@ export default [
        allowImportExportEverywhere: true,
      },
    },
+
+    plugins: {
+      ...config.plugins,
+      "@typescript-eslint": tseslint.plugin,
+    },
+    rules: {
+      ...config.rules,
+      "@typescript-eslint/consistent-type-imports": "error",
+    },
  })),
  ...tseslint.configs.strict.map(config => ({
    ...config,
--- a/lerna.json
+++ b/lerna.json
@ -1,6 +1,6 @@
 {
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.4.21",
+  "version": "3.4.22",
  "npmClient": "yarn",
  "concurrency": 20,
  "command": {
--- a/packages/backend-core/src/objectStore/objectStore.ts
+++ b/packages/backend-core/src/objectStore/objectStore.ts
@ -478,7 +478,7 @@ export async function deleteFolder(
  if (existingObjectsResponse.Contents?.length === 0) {
    return
  }
-  const deleteParams: any = {
+  const deleteParams: { Bucket: string; Delete: { Objects: any[] } } = {
    Bucket: bucketName,
    Delete: {
      Objects: [],
@ -489,10 +489,12 @@ export async function deleteFolder(
    deleteParams.Delete.Objects.push({ Key: content.Key })
  })

-  const deleteResponse = await client.deleteObjects(deleteParams)
-  // can only empty 1000 items at once
-  if (deleteResponse.Deleted?.length === 1000) {
-    return deleteFolder(bucketName, folder)
+  if (deleteParams.Delete.Objects.length) {
+    const deleteResponse = await client.deleteObjects(deleteParams)
+    // can only empty 1000 items at once
+    if (deleteResponse.Deleted?.length === 1000) {
+      return deleteFolder(bucketName, folder)
+    }
  }
 }

--- a/packages/bbui/src/Actions/position_dropdown.ts
+++ b/packages/bbui/src/Actions/position_dropdown.ts
@ -27,7 +27,7 @@ export type UpdateHandler = (

 interface Opts {
  anchor?: HTMLElement
-  align: PopoverAlignment
+  align: PopoverAlignment | `${PopoverAlignment}`
  maxHeight?: number
  maxWidth?: number
  minWidth?: number
--- a/packages/bbui/src/ClearButton/ClearButton.svelte
+++ b/packages/bbui/src/ClearButton/ClearButton.svelte
@ -1,6 +1,6 @@
-<script>
-  export let small = false
-  export let disabled
+<script lang="ts">
+  export let small: boolean = false
+  export let disabled: boolean = false
 </script>

 <button
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -64,7 +64,7 @@
  import { setContext, createEventDispatcher, onDestroy } from "svelte"
  import { generate } from "shortid"

-  export let title
+  export let title = ""
  export let forceModal = false

  const dispatch = createEventDispatcher()
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@ -1,24 +1,24 @@
-<script>
+<script lang="ts">
  import Field from "./Field.svelte"
  import Checkbox from "./Core/Checkbox.svelte"
  import { createEventDispatcher } from "svelte"

-  export let value = null
-  export let label = null
-  export let labelPosition = "above"
-  export let text = null
-  export let disabled = false
-  export let error = null
-  export let size = "M"
-  export let helpText = null
+  export let value: boolean | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: "above" | "below" = "above"
+  export let text: string | undefined = undefined
+  export let disabled: boolean = false
+  export let error: string | undefined = undefined
+  export let size: "S" | "M" | "L" | "XL" = "M"
+  export let helpText: string | undefined = undefined

  const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<boolean>) => {
    value = e.detail
    dispatch("change", e.detail)
  }
 </script>

 <Field {helpText} {label} {labelPosition} {error}>
-  <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
+  <Checkbox {disabled} {text} {value} {size} on:change={onChange} />
 </Field>
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@ -10,7 +10,7 @@
  export let secondary: boolean = false
  export let overBackground: boolean = false
  export let target: string | undefined = undefined
-  export let download: boolean | undefined = undefined
+  export let download: string | undefined = undefined
  export let disabled: boolean = false
  export let tooltip: string | null = null

--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@ -18,8 +18,9 @@
  import type { KeyboardEventHandler } from "svelte/elements"
  import { PopoverAlignment } from "../constants"

-  export let anchor: HTMLElement
-  export let align: PopoverAlignment = PopoverAlignment.Right
+  export let anchor: HTMLElement | undefined
+  export let align: PopoverAlignment | `${PopoverAlignment}` =
+    PopoverAlignment.Right
  export let portalTarget: string | undefined = undefined
  export let minWidth: number | undefined = undefined
  export let maxWidth: number | undefined = undefined
--- a/packages/bbui/src/SideNavigation/Item.svelte
+++ b/packages/bbui/src/SideNavigation/Item.svelte
@ -1,63 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const multilevel = getContext("sidenav-type")
-  import Badge from "../Badge/Badge.svelte"
-
-  export let href = ""
-  export let external = false
-  export let heading = ""
-  export let icon = ""
-  export let selected = false
-  export let disabled = false
-  export let badge = ""
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<li
-  class="spectrum-SideNav-item"
-  class:is-selected={selected}
-  class:is-disabled={disabled}
-  on:click
->
-  {#if heading}
-    <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
-      {heading}
-    </h2>
-  {/if}
-  <a
-    target={external ? "_blank" : ""}
-    {href}
-    class="spectrum-SideNav-itemLink"
-    aria-current="page"
-  >
-    {#if icon}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    <slot />
-    {#if badge}
-      <div class="badge">
-        <Badge active size="S">{badge}</Badge>
-      </div>
-    {/if}
-  </a>
-
-  {#if multilevel && $$slots.subnav}
-    <ul class="spectrum-SideNav">
-      <slot name="subnav" />
-    </ul>
-  {/if}
-</li>
-
-<style>
-  .badge {
-    margin-left: 10px;
-  }
-</style>
--- a/packages/bbui/src/SideNavigation/Navigation.svelte
+++ b/packages/bbui/src/SideNavigation/Navigation.svelte
@ -1,13 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import "@spectrum-css/sidenav/dist/index-vars.css"
-
-  export let multilevel = false
-  setContext("sidenav-type", multilevel)
-</script>
-
-<nav>
-  <ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
-    <slot />
-  </ul>
-</nav>
--- a/packages/bbui/src/Stores/banner.ts
+++ b/packages/bbui/src/Stores/banner.ts
@ -7,17 +7,26 @@ export const BANNER_TYPES = {
  WARNING: "warning",
 }

+interface BannerConfig {
+  message?: string
+  type?: string
+  extraButtonText?: string
+  extraButtonAction?: () => void
+  onChange?: () => void
+}
+
+interface DefaultConfig {
+  messages: BannerConfig[]
+}
+
 export function createBannerStore() {
-  const DEFAULT_CONFIG = {
+  const DEFAULT_CONFIG: DefaultConfig = {
    messages: [],
  }

-  const banner = writable(DEFAULT_CONFIG)
+  const banner = writable<DefaultConfig>(DEFAULT_CONFIG)

-  const show = async (
-    // eslint-disable-next-line
-    config = { message, type, extraButtonText, extraButtonAction, onChange }
-  ) => {
+  const show = async (config: BannerConfig = {}) => {
    banner.update(store => {
      return {
        ...store,
@ -27,7 +36,7 @@ export function createBannerStore() {
  }

  const showStatus = async () => {
-    const config = {
+    const config: BannerConfig = {
      message: "Some systems are experiencing issues",
      type: BANNER_TYPES.NEGATIVE,
      extraButtonText: "View Status",
@ -37,18 +46,24 @@ export function createBannerStore() {
    await queue([config])
  }

-  const queue = async entries => {
-    const priority = {
+  const queue = async (entries: Array<BannerConfig>) => {
+    const priority: Record<string, number> = {
      [BANNER_TYPES.NEGATIVE]: 0,
      [BANNER_TYPES.WARNING]: 1,
      [BANNER_TYPES.INFO]: 2,
    }
    banner.update(store => {
      const sorted = [...store.messages, ...entries].sort((a, b) => {
-        if (priority[a.type] == priority[b.type]) {
+        if (
+          priority[a.type as keyof typeof priority] ===
+          priority[b.type as keyof typeof priority]
+        ) {
          return 0
        }
-        return priority[a.type] < priority[b.type] ? -1 : 1
+        return priority[a.type as keyof typeof priority] <
+          priority[b.type as keyof typeof priority]
+          ? -1
+          : 1
      })
      return {
        ...store,
--- a/packages/bbui/src/Stores/notifications.ts
+++ b/packages/bbui/src/Stores/notifications.ts
@ -2,9 +2,21 @@ import { writable } from "svelte/store"

 const NOTIFICATION_TIMEOUT = 3000

+interface Notification {
+  id: string
+  type: string
+  message: string
+  icon: string
+  dismissable: boolean
+  action: (() => void) | null
+  actionMessage: string | null
+  wide: boolean
+  dismissTimeout: number
+}
+
 export const createNotificationStore = () => {
-  const timeoutIds = new Set()
-  const _notifications = writable([], () => {
+  const timeoutIds = new Set<ReturnType<typeof setTimeout>>()
+  const _notifications = writable<Notification[]>([], () => {
    return () => {
      // clear all the timers
      timeoutIds.forEach(timeoutId => {
@ -21,7 +33,7 @@ export const createNotificationStore = () => {
  }

  const send = (
-    message,
+    message: string,
    {
      type = "default",
      icon = "",
@ -30,7 +42,15 @@ export const createNotificationStore = () => {
      actionMessage = null,
      wide = false,
      dismissTimeout = NOTIFICATION_TIMEOUT,
-    }
+    }: {
+      type?: string
+      icon?: string
+      autoDismiss?: boolean
+      action?: (() => void) | null
+      actionMessage?: string | null
+      wide?: boolean
+      dismissTimeout?: number
+    } = {}
  ) => {
    if (block) {
      return
@ -60,7 +80,7 @@ export const createNotificationStore = () => {
    }
  }

-  const dismissNotification = id => {
+  const dismissNotification = (id: string) => {
    _notifications.update(state => {
      return state.filter(n => n.id !== id)
    })
@ -71,17 +91,18 @@ export const createNotificationStore = () => {
  return {
    subscribe,
    send,
-    info: msg => send(msg, { type: "info", icon: "Info" }),
-    error: msg =>
+    info: (msg: string) => send(msg, { type: "info", icon: "Info" }),
+    error: (msg: string) =>
      send(msg, { type: "error", icon: "Alert", autoDismiss: false }),
-    warning: msg => send(msg, { type: "warning", icon: "Alert" }),
-    success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }),
+    warning: (msg: string) => send(msg, { type: "warning", icon: "Alert" }),
+    success: (msg: string) =>
+      send(msg, { type: "success", icon: "CheckmarkCircle" }),
    blockNotifications,
    dismiss: dismissNotification,
  }
 }

-function id() {
+function id(): string {
  return "_" + Math.random().toString(36).slice(2, 9)
 }

--- a/packages/bbui/src/Table/ArrayRenderer.svelte
+++ b/packages/bbui/src/Table/ArrayRenderer.svelte
@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/label/dist/index-vars.css"
  import Badge from "../Badge/Badge.svelte"

-  export let value
+  export let value: string | string[]

  const displayLimit = 5

--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
  import Link from "../Link/Link.svelte"

-  export let value
+  export let value: { name: string; url: string; extension: string }[]

  const displayLimit = 5
  $: attachments = value?.slice(0, displayLimit) ?? []
  $: leftover = (value?.length ?? 0) - attachments.length

-  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
-  const isImage = extension => {
-    return imageExtensions.includes(extension?.toLowerCase())
+  const imageExtensions: string[] = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
+  const isImage = (extension: string | undefined): boolean => {
+    return imageExtensions.includes(extension?.toLowerCase() ?? "")
  }
 </script>

--- a/packages/bbui/src/Table/BoldRenderer.svelte
+++ b/packages/bbui/src/Table/BoldRenderer.svelte
@ -1,5 +1,5 @@
-<script>
-  export let value
+<script lang="ts">
+  export let value: string
 </script>

 <div class="bold">{value}</div>
--- a/packages/bbui/src/Table/BooleanRenderer.svelte
+++ b/packages/bbui/src/Table/BooleanRenderer.svelte
@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/checkbox/dist/index-vars.css"

-  export let value
+  export let value: boolean
 </script>

 <label
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import StringRenderer from "./StringRenderer.svelte"
  import BooleanRenderer from "./BooleanRenderer.svelte"
  import DateTimeRenderer from "./DateTimeRenderer.svelte"
@ -8,14 +8,14 @@
  import InternalRenderer from "./InternalRenderer.svelte"
  import { processStringSync } from "@budibase/string-templates"

-  export let row
-  export let schema
-  export let value
-  export let customRenderers = []
-  export let snippets
+  export let row: Record<string, any>
+  export let schema: Record<string, any>
+  export let value: Record<string, any>
+  export let customRenderers: { column: string; component: any }[] = []
+  export let snippets: any

-  let renderer
-  const typeMap = {
+  let renderer: any
+  const typeMap: Record<string, any> = {
    boolean: BooleanRenderer,
    datetime: DateTimeRenderer,
    link: RelationshipRenderer,
@ -33,7 +33,7 @@
  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
  $: cellValue = getCellValue(value, schema.template)

-  const getType = schema => {
+  const getType = (schema: any): string => {
    // Use a string renderer for dates if we use a custom template
    if (schema?.type === "datetime" && schema?.template) {
      return "string"
@ -41,7 +41,7 @@
    return schema?.type || "string"
  }

-  const getCellValue = (value, template) => {
+  const getCellValue = (value: any, template: string | undefined): any => {
    if (!template) {
      return value
    }
--- a/packages/bbui/src/Table/CodeRenderer.svelte
+++ b/packages/bbui/src/Table/CodeRenderer.svelte
@ -1,5 +1,5 @@
-<script>
-  export let value
+<script lang="ts">
+  export let value: string
 </script>

 <code>{value}</code>
--- a/packages/bbui/src/Table/DateTimeRenderer.svelte
+++ b/packages/bbui/src/Table/DateTimeRenderer.svelte
@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
  import dayjs from "dayjs"

-  export let value
-  export let schema
+  export let value: string | Date
+  export let schema: { timeOnly?: boolean; dateOnly?: boolean }

  // adding the 0- will turn a string like 00:00:00 into a valid ISO
  // date, but will make actual ISO dates invalid
  $: time = new Date(`0-${value}`)
-  $: isTimeOnly = !isNaN(time) || schema?.timeOnly
+  $: isTimeOnly = !isNaN(time as any) || schema?.timeOnly
  $: isDateOnly = schema?.dateOnly
  $: format = isTimeOnly
    ? "HH:mm:ss"
--- a/packages/bbui/src/Table/InternalRenderer.svelte
+++ b/packages/bbui/src/Table/InternalRenderer.svelte
@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
  import Icon from "../Icon/Icon.svelte"
  import { copyToClipboard } from "../helpers"
  import { notifications } from "../Stores/notifications"

-  export let value
+  export let value: string

-  const onClick = async e => {
+  const onClick = async (e: MouseEvent): Promise<void> => {
    e.stopPropagation()
    try {
      await copyToClipboard(value)
--- a/packages/bbui/src/Table/RelationshipRenderer.svelte
+++ b/packages/bbui/src/Table/RelationshipRenderer.svelte
@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/label/dist/index-vars.css"
  import { createEventDispatcher } from "svelte"
  import Badge from "../Badge/Badge.svelte"

-  export let row
-  export let value
-  export let schema
+  export let row: { tableId: string; _id: string }
+  export let value: { primaryDisplay?: string }[] | undefined
+  export let schema: { name?: string }

  const dispatch = createEventDispatcher()
  const displayLimit = 5
@ -13,7 +13,7 @@
  $: relationships = value?.slice(0, displayLimit) ?? []
  $: leftover = (value?.length ?? 0) - relationships.length

-  const onClick = e => {
+  const onClick = (e: MouseEvent) => {
    e.stopPropagation()
    dispatch("clickrelationship", {
      tableId: row.tableId,
--- a/packages/bbui/src/Table/SelectEditRenderer.svelte
+++ b/packages/bbui/src/Table/SelectEditRenderer.svelte
@ -1,12 +1,12 @@
-<script>
+<script lang="ts">
  import Checkbox from "../Form/Checkbox.svelte"
  import ActionButton from "../ActionButton/ActionButton.svelte"

-  export let selected
-  export let onEdit
-  export let allowSelectRows = false
-  export let allowEditRows = false
-  export let data
+  export let selected: boolean | undefined
+  export let onEdit: (_e: Event) => void
+  export let allowSelectRows: boolean = false
+  export let allowEditRows: boolean = false
+  export let data: Record<string, any>
 </script>

 <div>
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@ -1,6 +1,6 @@
-<script>
-  export let value
-  export let schema
+<script lang="ts">
+  export let value: string | object
+  export let schema: { capitalise?: boolean }
 </script>

 <div class:capitalise={schema?.capitalise}>
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import { createEventDispatcher } from "svelte"
  import "@spectrum-css/table/dist/index-vars.css"
  import CellRenderer from "./CellRenderer.svelte"
@ -8,6 +8,7 @@
  import Checkbox from "../Form/Checkbox.svelte"

  /**
+   /**
   * The expected schema is our normal couch schemas for our tables.
   * Each field schema can be enriched with a few extra properties to customise
   * the behaviour.
@ -24,42 +25,42 @@
   * borderLeft: show a left border
   * borderRight: show a right border
   */
-  export let data = []
-  export let schema = {}
-  export let showAutoColumns = false
-  export let rowCount = 0
-  export let quiet = false
-  export let loading = false
-  export let allowSelectRows
-  export let allowEditRows = true
-  export let allowEditColumns = true
-  export let allowClickRows = true
-  export let selectedRows = []
-  export let customRenderers = []
-  export let disableSorting = false
-  export let autoSortColumns = true
-  export let compact = false
-  export let customPlaceholder = false
-  export let showHeaderBorder = true
-  export let placeholderText = "No rows found"
-  export let snippets = []
-  export let defaultSortColumn = undefined
-  export let defaultSortOrder = "Ascending"
+  export let data: any[] = []
+  export let schema: Record<string, any> = {}
+  export let showAutoColumns: boolean = false
+  export let rowCount: number = 0
+  export let quiet: boolean = false
+  export let loading: boolean = false
+  export let allowSelectRows: boolean = false
+  export let allowEditRows: boolean = true
+  export let allowEditColumns: boolean = true
+  export let allowClickRows: boolean = true
+  export let selectedRows: any[] = []
+  export let customRenderers: any[] = []
+  export let disableSorting: boolean = false
+  export let autoSortColumns: boolean = true
+  export let compact: boolean = false
+  export let customPlaceholder: boolean = false
+  export let showHeaderBorder: boolean = true
+  export let placeholderText: string = "No rows found"
+  export let snippets: any[] = []
+  export let defaultSortColumn: string | undefined = undefined
+  export let defaultSortOrder: "Ascending" | "Descending" = "Ascending"

  const dispatch = createEventDispatcher()

  // Config
-  const headerHeight = 36
+  const headerHeight: number = 36
  $: rowHeight = compact ? 46 : 55

  // Sorting state
-  let sortColumn
-  let sortOrder
+  let sortColumn: string | undefined
+  let sortOrder: "Ascending" | "Descending" | undefined

  // Table state
-  let height = 0
-  let loaded = false
-  let checkboxStatus = false
+  let height: number = 0
+  let loaded: boolean = false
+  let checkboxStatus: boolean = false

  $: schema = fixSchema(schema)
  $: if (!loading) loaded = true
@ -95,8 +96,8 @@
    }
  }

-  const fixSchema = schema => {
-    let fixedSchema = {}
+  const fixSchema = (schema: Record<string, any>): Record<string, any> => {
+    let fixedSchema: Record<string, any> = {}
    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
      if (typeof fieldSchema === "string") {
        fixedSchema[fieldName] = {
@ -120,7 +121,13 @@
    return fixedSchema
  }

-  const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => {
+  const getVisibleRowCount = (
+    loaded: boolean,
+    height: number,
+    allRows: number,
+    rowCount: number,
+    rowHeight: number
+  ): number => {
    if (!loaded) {
      return rowCount || 0
    }
@ -131,12 +138,12 @@
  }

  const getHeightStyle = (
-    visibleRowCount,
-    rowCount,
-    totalRowCount,
-    rowHeight,
-    loading
-  ) => {
+    visibleRowCount: number,
+    rowCount: number,
+    totalRowCount: number,
+    rowHeight: number,
+    loading: boolean
+  ): string => {
    if (loading) {
      return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
    }
@ -146,7 +153,11 @@
    return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
  }

-  const getGridStyle = (fields, schema, showEditColumn) => {
+  const getGridStyle = (
+    fields: string[],
+    schema: Record<string, any>,
+    showEditColumn: boolean
+  ): string => {
    let style = "grid-template-columns:"
    if (showEditColumn) {
      style += " auto"
@ -163,7 +174,11 @@
    return style
  }

-  const sortRows = (rows, sortColumn, sortOrder) => {
+  const sortRows = (
+    rows: any[],
+    sortColumn: string | undefined,
+    sortOrder: string | undefined
+  ): any[] => {
    sortColumn = sortColumn ?? defaultSortColumn
    sortOrder = sortOrder ?? defaultSortOrder
    if (!sortColumn || !sortOrder || disableSorting) {
@ -180,7 +195,7 @@
    })
  }

-  const sortBy = fieldSchema => {
+  const sortBy = (fieldSchema: Record<string, any>): void => {
    if (fieldSchema.sortable === false) {
      return
    }
@ -193,7 +208,7 @@
    dispatch("sort", { column: sortColumn, order: sortOrder })
  }

-  const getDisplayName = schema => {
+  const getDisplayName = (schema: Record<string, any>): string => {
    let name = schema?.displayName
    if (schema && name === undefined) {
      name = schema.name
@ -201,9 +216,13 @@
    return name || ""
  }

-  const getFields = (schema, showAutoColumns, autoSortColumns) => {
-    let columns = []
-    let autoColumns = []
+  const getFields = (
+    schema: Record<string, any>,
+    showAutoColumns: boolean,
+    autoSortColumns: boolean
+  ): string[] => {
+    let columns: any[] = []
+    let autoColumns: any[] = []
    Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
      if (!field || !fieldSchema) {
        return
@ -235,17 +254,17 @@
      .map(column => column.name)
  }

-  const editColumn = (e, field) => {
+  const editColumn = (e: Event, field: any): void => {
    e.stopPropagation()
    dispatch("editcolumn", field)
  }

-  const editRow = (e, row) => {
+  const editRow = (e: Event, row: any): void => {
    e.stopPropagation()
    dispatch("editrow", cloneDeep(row))
  }

-  const toggleSelectRow = row => {
+  const toggleSelectRow = (row: any): void => {
    if (!allowSelectRows) {
      return
    }
@ -258,7 +277,7 @@
    }
  }

-  const toggleSelectAll = e => {
+  const toggleSelectAll = (e: CustomEvent): void => {
    const select = !!e.detail
    if (select) {
      // Add any rows which are not already in selected rows
@ -278,8 +297,10 @@
    }
  }

-  const computeCellStyles = schema => {
-    let styles = {}
+  const computeCellStyles = (
+    schema: Record<string, any>
+  ): Record<string, string> => {
+    let styles: Record<string, string> = {}
    Object.keys(schema || {}).forEach(field => {
      styles[field] = ""
      if (schema[field].color) {
--- a/packages/bbui/src/Table/index.ts
+++ b/packages/bbui/src/Table/index.ts
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@ -1,28 +1,48 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/tabs/dist/index-vars.css"
  import { writable } from "svelte/store"
  import { onMount, setContext, createEventDispatcher } from "svelte"

-  export let selected
-  export let vertical = false
-  export let noPadding = false
-  // added as a separate option as noPadding is used for vertical padding
-  export let noHorizPadding = false
-  export let quiet = false
-  export let emphasized = false
-  export let onTop = false
-  export let size = "M"
-  export let beforeSwitch = null
+  interface TabInfo {
+    width?: number
+    height?: number
+    left?: number
+    top?: number
+  }

-  let thisSelected = undefined
+  interface TabState {
+    title: string
+    id: string
+    emphasized: boolean
+    info?: TabInfo
+  }
+
+  export let selected: string
+  export let vertical: boolean = false
+  export let noPadding: boolean = false
+  // added as a separate option as noPadding is used for vertical padding
+  export let noHorizPadding: boolean = false
+  export let quiet: boolean = false
+  export let emphasized: boolean = false
+  export let onTop: boolean = false
+  export let size: "S" | "M" | "L" = "M"
+  export let beforeSwitch: ((_title: string) => boolean) | null = null
+
+  let thisSelected: string | undefined = undefined
+  let container: HTMLElement | undefined

  let _id = id()
-  const tab = writable({ title: selected, id: _id, emphasized })
+  const tab = writable<TabState>({ title: selected, id: _id, emphasized })
  setContext("tab", tab)

-  let container
+  let top: string | undefined
+  let left: string | undefined
+  let width: string | undefined
+  let height: string | undefined

-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{
+    select: string
+  }>()

  $: {
    if (thisSelected !== selected) {
@ -44,29 +64,34 @@
    }
    if ($tab.title !== thisSelected) {
      tab.update(state => {
-        state.title = thisSelected
+        state.title = thisSelected as string
        return state
      })
    }
  }

-  let top, left, width, height
-  $: calculateIndicatorLength($tab)
-  $: calculateIndicatorOffset($tab)
+  $: $tab && calculateIndicatorLength()
+  $: $tab && calculateIndicatorOffset()

  function calculateIndicatorLength() {
    if (!vertical) {
-      width = $tab.info?.width + "px"
+      width = ($tab.info?.width ?? 0) + "px"
    } else {
-      height = $tab.info?.height + 4 + "px"
+      height = ($tab.info?.height ?? 0) + 4 + "px"
    }
  }

  function calculateIndicatorOffset() {
    if (!vertical) {
-      left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
+      left =
+        ($tab.info?.left ?? 0) -
+        (container?.getBoundingClientRect().left ?? 0) +
+        "px"
    } else {
-      top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
+      top =
+        ($tab.info?.top ?? 0) -
+        (container?.getBoundingClientRect().top ?? 0) +
+        "px"
    }
  }

@ -75,7 +100,7 @@
    calculateIndicatorOffset()
  })

-  function id() {
+  function id(): string {
    return "_" + Math.random().toString(36).slice(2, 9)
  }
 </script>
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/tags/dist/index-vars.css"
  import Avatar from "../Avatar/Avatar.svelte"
  import ClearButton from "../ClearButton/ClearButton.svelte"

-  export let icon = ""
-  export let avatar = ""
-  export let invalid = false
-  export let disabled = false
-  export let closable = false
+  export let icon: string = ""
+  export let avatar: string = ""
+  export let invalid: boolean = false
+  export let disabled: boolean = false
+  export let closable: boolean = false
 </script>

 <div
--- a/packages/bbui/src/Tags/Tags.svelte
+++ b/packages/bbui/src/Tags/Tags.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/tags/dist/index-vars.css"
 </script>

--- a/packages/bbui/src/Tooltip/TooltipWrapper.svelte
+++ b/packages/bbui/src/Tooltip/TooltipWrapper.svelte
@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
  import Icon from "../Icon/Icon.svelte"
  import AbsTooltip from "./AbsTooltip.svelte"

-  export let tooltip = ""
-  export let size = "M"
-  export let disabled = true
+  export let tooltip: string = ""
+  export let size: "S" | "M" = "M"
+  export let disabled: boolean = true
 </script>

 <div class:container={!!tooltip}>
--- a/packages/bbui/src/TreeView/Item.svelte
+++ b/packages/bbui/src/TreeView/Item.svelte
@ -1,9 +1,9 @@
-<script>
-  export let selected = false
-  export let open = false
-  export let href = false
-  export let title
-  export let icon
+<script lang="ts">
+  export let selected: boolean = false
+  export let open: boolean = false
+  export let href: string | null = null
+  export let title: string
+  export let icon: string | undefined
 </script>

 <li
--- a/packages/bbui/src/TreeView/Tree.svelte
+++ b/packages/bbui/src/TreeView/Tree.svelte
@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/treeview/dist/index-vars.css"

-  export let quiet = false
-  export let standalone = true
-  export let width = "250px"
+  export let quiet: boolean = false
+  export let standalone: boolean = true
+  export let width: string = "250px"
 </script>

 <ul
--- a/packages/bbui/src/Typography/Code.svelte
+++ b/packages/bbui/src/Typography/Code.svelte
@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/typography/dist/index-vars.css"

  // Sizes
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
 </script>

 <code class="spectrum-Code spectrum-Code--size{size}">
--- a/packages/bbui/src/Typography/Detail.svelte
+++ b/packages/bbui/src/Typography/Detail.svelte
@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/typography/dist/index-vars.css"

-  export let size = "M"
-  export let serif = false
-  export let weight = 600
+  export let size: "S" | "M" | "L" = "M"
+  export let serif: boolean = false
+  export let weight: number | null = null
 </script>

 <p
--- a/packages/bbui/src/index.ts
+++ b/packages/bbui/src/index.ts
@ -65,8 +65,6 @@ export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent, keepOpen } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Notification } from "./Notification/Notification.svelte"
-export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
-export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
 export { default as Tabs } from "./Tabs/Tabs.svelte"
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -27,12 +27,11 @@
  } from "../CodeEditor"
  import BindingSidePanel from "./BindingSidePanel.svelte"
  import EvaluationSidePanel from "./EvaluationSidePanel.svelte"
-  import SnippetSidePanel from "./SnippetSidePanel.svelte"
  import { BindingHelpers } from "./utils"
  import { capitalise } from "@/helpers"
  import { Utils, JsonFormatter } from "@budibase/frontend-core"
  import { licensing } from "@/stores/portal"
-  import { BindingMode, SidePanel } from "@budibase/types"
+  import { BindingMode } from "@budibase/types"
  import type {
    EnrichedBinding,
    Snippet,
@ -44,6 +43,8 @@
  import type { Log } from "@budibase/string-templates"
  import type { CodeValidator } from "@/types"

+  type SidePanel = "Bindings" | "Evaluation"
+
  const dispatch = createEventDispatcher()

  export let bindings: EnrichedBinding[] = []
@ -55,7 +56,7 @@
  export let context = null
  export let snippets: Snippet[] | null = null
  export let autofocusEditor = false
-  export let placeholder = null
+  export let placeholder: string | null = null
  export let showTabBar = true

  let mode: BindingMode
@ -71,14 +72,13 @@
  let expressionError: string | undefined
  let evaluating = false

-  $: useSnippets = allowSnippets && !$licensing.isFreePlan
+  const SidePanelIcons: Record<SidePanel, string> = {
+    Bindings: "FlashOn",
+    Evaluation: "Play",
+  }
+
  $: editorModeOptions = getModeOptions(allowHBS, allowJS)
-  $: sidePanelOptions = getSidePanelOptions(
-    bindings,
-    context,
-    allowSnippets,
-    mode
-  )
+  $: sidePanelOptions = getSidePanelOptions(bindings, context)
  $: enrichedBindings = enrichBindings(bindings, context, snippets)
  $: usingJS = mode === BindingMode.JavaScript
  $: editorMode =
@ -93,7 +93,9 @@
  $: bindingOptions = bindingsToCompletions(enrichedBindings, editorMode)
  $: helperOptions = allowHelpers ? getHelperCompletions(editorMode) : []
  $: snippetsOptions =
-    usingJS && useSnippets && snippets?.length ? snippets : []
+    usingJS && allowSnippets && !$licensing.isFreePlan && snippets?.length
+      ? snippets
+      : []

  $: completions = !usingJS
    ? [hbAutocomplete([...bindingOptions, ...helperOptions])]
@ -137,21 +139,13 @@
    return options
  }

-  const getSidePanelOptions = (
-    bindings: EnrichedBinding[],
-    context: any,
-    useSnippets: boolean,
-    mode: BindingMode | null
-  ) => {
-    let options = []
+  const getSidePanelOptions = (bindings: EnrichedBinding[], context: any) => {
+    let options: SidePanel[] = []
    if (bindings?.length) {
-      options.push(SidePanel.Bindings)
+      options.push("Bindings")
    }
    if (context && Object.keys(context).length > 0) {
-      options.push(SidePanel.Evaluation)
-    }
-    if (useSnippets && mode === BindingMode.JavaScript) {
-      options.push(SidePanel.Snippets)
+      options.push("Evaluation")
    }
    return options
  }
@ -342,14 +336,15 @@
            {/each}
          </div>
          <div class="side-tabs">
-            {#each sidePanelOptions as panel}
+            {#each sidePanelOptions as panelOption}
              <ActionButton
                size="M"
                quiet
-                selected={sidePanel === panel}
-                on:click={() => changeSidePanel(panel)}
+                selected={sidePanel === panelOption}
+                on:click={() => changeSidePanel(panelOption)}
+                tooltip={panelOption}
              >
-                <Icon name={panel} size="S" />
+                <Icon name={SidePanelIcons[panelOption]} size="S" />
              </ActionButton>
            {/each}
          </div>
@ -415,16 +410,19 @@
      </div>
    </div>
    <div class="side" class:visible={!!sidePanel}>
-      {#if sidePanel === SidePanel.Bindings}
+      {#if sidePanel === "Bindings"}
        <BindingSidePanel
          bindings={enrichedBindings}
          {allowHelpers}
+          {allowSnippets}
          {context}
          addHelper={onSelectHelper}
          addBinding={onSelectBinding}
-          mode={editorMode}
+          {addSnippet}
+          {mode}
+          {snippets}
        />
-      {:else if sidePanel === SidePanel.Evaluation}
+      {:else if sidePanel === "Evaluation"}
        <EvaluationSidePanel
          {expressionResult}
          {expressionError}
@ -432,8 +430,6 @@
          {evaluating}
          expression={editorValue ? editorValue : ""}
        />
-      {:else if sidePanel === SidePanel.Snippets}
-        <SnippetSidePanel {addSnippet} {snippets} />
      {/if}
    </div>
  </div>
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@ -1,34 +1,69 @@
-<script>
+<script lang="ts">
  import groupBy from "lodash/fp/groupBy"
  import { convertToJS } from "@budibase/string-templates"
-  import { Input, Layout, Icon, Popover } from "@budibase/bbui"
+  import { licensing } from "@/stores/portal"
+  import {
+    Input,
+    Layout,
+    Icon,
+    Popover,
+    Tags,
+    Tag,
+    Body,
+    Button,
+  } from "@budibase/bbui"
  import { handlebarsCompletions } from "@/constants/completions"
+  import type { EnrichedBinding, Helper, Snippet } from "@budibase/types"
+  import { BindingMode } from "@budibase/types"
+  import { EditorModes } from "../CodeEditor"
+  import CodeEditor from "../CodeEditor/CodeEditor.svelte"

-  export let addHelper
-  export let addBinding
-  export let bindings
-  export let mode
-  export let allowHelpers
+  import SnippetDrawer from "./SnippetDrawer.svelte"
+  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
+
+  export let addHelper: (_helper: Helper, _js?: boolean) => void
+  export let addBinding: (_binding: EnrichedBinding) => void
+  export let addSnippet: (_snippet: Snippet) => void
+  export let bindings: EnrichedBinding[]
+  export let snippets: Snippet[] | null
+  export let mode: BindingMode
+  export let allowHelpers: boolean
+  export let allowSnippets: boolean
  export let context = null

  let search = ""
  let searching = false
-  let popover
-  let popoverAnchor
-  let hoverTarget
+  let popover: Popover
+  let popoverAnchor: HTMLElement | undefined
+  let hoverTarget: {
+    type: "binding" | "helper" | "snippet"
+    code: string
+    description?: string
+  } | null
  let helpers = handlebarsCompletions()
-  let selectedCategory
-  let hideTimeout
+  let selectedCategory: string | null
+  let hideTimeout: ReturnType<typeof setTimeout> | null
+  let snippetDrawer: SnippetDrawer
+  let editableSnippet: Snippet | null

-  $: bindingIcons = bindings?.reduce((acc, ele) => {
+  $: enableSnippets = !$licensing.isFreePlan
+  $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
    if (ele.icon) {
      acc[ele.category] = acc[ele.category] || ele.icon
    }
    return acc
  }, {})
-  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
+  $: categoryIcons = {
+    ...bindingIcons,
+    Helpers: "MagicWand",
+    Snippets: "Code",
+  } as Record<string, string>
  $: categories = Object.entries(groupBy("category", bindings))
-  $: categoryNames = getCategoryNames(categories)
+
+  $: categoryNames = getCategoryNames(
+    categories,
+    allowSnippets && mode === BindingMode.JavaScript
+  )
  $: searchRgx = new RegExp(search, "ig")
  $: filteredCategories = categories
    .map(([name, categoryBindings]) => ({
@ -48,11 +83,22 @@
      (!search ||
        helper.label.match(searchRgx) ||
        helper.description.match(searchRgx)) &&
-      (mode.name !== "javascript" || helper.allowsJs)
+      (mode !== BindingMode.JavaScript || helper.allowsJs)
    )
  })

-  const getHelperExample = (helper, js) => {
+  $: filteredSnippets = getFilteredSnippets(
+    enableSnippets,
+    snippets || [],
+    search
+  )
+
+  function onModeChange(_mode: BindingMode) {
+    selectedCategory = null
+  }
+  $: onModeChange(mode)
+
+  const getHelperExample = (helper: Helper, js: boolean) => {
    let example = helper.example || ""
    if (js) {
      example = convertToJS(example).split("\n")[0].split("= ")[1]
@ -63,37 +109,46 @@
    return example || ""
  }

-  const getCategoryNames = categories => {
-    let names = [...categories.map(cat => cat[0])]
+  const getCategoryNames = (
+    categories: [string, EnrichedBinding[]][],
+    showSnippets: boolean
+  ) => {
+    const names = [...categories.map(cat => cat[0])]
    if (allowHelpers) {
      names.push("Helpers")
    }
+    if (showSnippets) {
+      names.push("Snippets")
+    }
    return names
  }

-  const showBindingPopover = (binding, target) => {
+  const showBindingPopover = (
+    binding: EnrichedBinding,
+    target: HTMLElement
+  ) => {
    if (!context || !binding.value || binding.value === "") {
      return
    }
    stopHidingPopover()
    popoverAnchor = target
    hoverTarget = {
-      helper: false,
+      type: "binding",
      code: binding.valueHTML,
    }
    popover.show()
  }

-  const showHelperPopover = (helper, target) => {
+  const showHelperPopover = (helper: Helper, target: HTMLElement) => {
    stopHidingPopover()
    if (!helper.displayText && helper.description) {
      return
    }
    popoverAnchor = target
    hoverTarget = {
-      helper: true,
+      type: "helper",
      description: helper.description,
-      code: getHelperExample(helper, mode.name === "javascript"),
+      code: getHelperExample(helper, mode === BindingMode.JavaScript),
    }
    popover.show()
  }
@ -101,7 +156,7 @@
  const hidePopover = () => {
    hideTimeout = setTimeout(() => {
      popover.hide()
-      popoverAnchor = null
+      popoverAnchor = undefined
      hoverTarget = null
      hideTimeout = null
    }, 100)
@ -119,11 +174,53 @@
    search = ""
  }

-  const stopSearching = e => {
+  const stopSearching = (e: Event) => {
    e.stopPropagation()
    searching = false
    search = ""
  }
+
+  const getFilteredSnippets = (
+    enableSnippets: boolean,
+    snippets: Snippet[],
+    search: string
+  ) => {
+    if (!enableSnippets || !snippets.length) {
+      return []
+    }
+    if (!search?.length) {
+      return snippets
+    }
+    return snippets.filter(snippet =>
+      snippet.name.toLowerCase().includes(search.toLowerCase())
+    )
+  }
+
+  const showSnippet = (snippet: Snippet, target: HTMLElement) => {
+    stopHidingPopover()
+    if (!snippet.code) {
+      return
+    }
+    popoverAnchor = target
+    hoverTarget = {
+      type: "snippet",
+      code: snippet.code,
+    }
+
+    popover.show()
+  }
+
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+
+  const editSnippet = (e: Event, snippet: Snippet) => {
+    e.preventDefault()
+    e.stopPropagation()
+    editableSnippet = snippet
+    snippetDrawer.show()
+  }
 </script>

 <Popover
@ -137,18 +234,31 @@
  on:mouseenter={stopHidingPopover}
  on:mouseleave={hidePopover}
 >
-  <div class="binding-popover" class:helper={hoverTarget.helper}>
-    {#if hoverTarget.description}
-      <div>
-        <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-        {@html hoverTarget.description}
-      </div>
-    {/if}
-    {#if hoverTarget.code}
-      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-      <pre>{@html hoverTarget.code}</pre>
-    {/if}
-  </div>
+  {#if hoverTarget}
+    <div
+      class="binding-popover"
+      class:has-code={hoverTarget.type !== "binding"}
+    >
+      {#if hoverTarget.description}
+        <div>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html hoverTarget.description}
+        </div>
+      {/if}
+      {#if hoverTarget.code}
+        {#if mode === BindingMode.JavaScript}
+          <CodeEditor
+            value={hoverTarget.code?.trim()}
+            mode={EditorModes.JS}
+            readonly
+          />
+        {:else if mode === BindingMode.Text}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          <pre>{@html hoverTarget.code}</pre>
+        {/if}
+      {/if}
+    </div>
+  {/if}
 </Popover>

 <!-- svelte-ignore a11y-click-events-have-key-events -->
@ -164,6 +274,25 @@
          on:click={() => (selectedCategory = null)}
        />
        {selectedCategory}
+        {#if selectedCategory === "Snippets"}
+          {#if enableSnippets}
+            <div class="add-snippet-button">
+              <Icon
+                size="S"
+                name="Add"
+                hoverable
+                newStyles
+                on:click={createSnippet}
+              />
+            </div>
+          {:else}
+            <div class="title">
+              <Tags>
+                <Tag icon="LockClosed">Premium</Tag>
+              </Tags>
+            </div>
+          {/if}
+        {/if}
      </div>
    {/if}

@ -173,7 +302,7 @@
          <div class="search-input">
            <Input
              placeholder="Search for bindings"
-              autocomplete="off"
+              autocomplete={false}
              bind:value={search}
              autofocus
            />
@ -230,7 +359,8 @@
              {#each category.bindings as binding}
                <li
                  class="binding"
-                  on:mouseenter={e => showBindingPopover(binding, e.target)}
+                  on:mouseenter={e =>
+                    showBindingPopover(binding, e.currentTarget)}
                  on:mouseleave={hidePopover}
                  on:click={() => addBinding(binding)}
                >
@ -264,9 +394,10 @@
              {#each filteredHelpers as helper}
                <li
                  class="binding"
-                  on:mouseenter={e => showHelperPopover(helper, e.target)}
-                  on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                  on:mouseenter={e =>
+                    showHelperPopover(helper, e.currentTarget)}
+                  on:click={() =>
+                    addHelper(helper, mode === BindingMode.JavaScript)}
                >
                  <span class="binding__label">{helper.displayText}</span>
                  <span class="binding__typeWrap">
@ -278,10 +409,48 @@
          </div>
        {/if}
      {/if}
+
+      {#if selectedCategory === "Snippets" || search}
+        <div class="snippet-list">
+          {#if enableSnippets && filteredSnippets.length}
+            {#each filteredSnippets as snippet}
+              <li
+                class="snippet"
+                on:mouseenter={e => showSnippet(snippet, e.currentTarget)}
+                on:mouseleave={hidePopover}
+                on:click={() => addSnippet(snippet)}
+              >
+                {snippet.name}
+                <Icon
+                  name="Edit"
+                  hoverable
+                  newStyles
+                  size="S"
+                  on:click={e => editSnippet(e, snippet)}
+                />
+              </li>
+            {/each}
+          {:else if !search}
+            <div class="upgrade">
+              <Body size="S">
+                Snippets let you create reusable JS functions and values that
+                can all be managed in one place
+              </Body>
+              {#if enableSnippets}
+                <Button cta on:click={createSnippet}>Create snippet</Button>
+              {:else}
+                <UpgradeButton />
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
    {/if}
  </Layout>
 </div>

+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+
 <style>
  .binding-side-panel {
    border-left: var(--border-light);
@ -346,6 +515,7 @@
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
+    justify-content: space-between;
  }
  li.binding .binding__typeWrap {
    flex: 1;
@ -421,7 +591,7 @@
    text-overflow: ellipsis;
    overflow: hidden;
  }
-  .binding-popover.helper pre {
+  .binding-popover.has-code pre {
    color: var(--spectrum-global-color-blue-700);
  }
  .binding-popover pre :global(span) {
@ -433,7 +603,50 @@
    padding: 0;
    margin: 0;
  }
-  .binding-popover.helper :global(code) {
+  .binding-popover.has-code :global(code) {
    font-size: 12px;
  }
+  .binding-popover.has-code :global(.cm-line),
+  .binding-popover.has-code :global(.cm-content) {
+    padding: 0;
+  }
+
+  /* Snippets */
+  .add-snippet-button {
+    margin-left: auto;
+  }
+  .snippet-list {
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+    display: flex;
+    flex-direction: column;
+  }
+  .snippet {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
+    word-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+  }
+  .snippet:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
+
+  /* Upgrade */
+  .upgrade {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .upgrade :global(p) {
+    text-align: center;
+    align-self: center;
+  }
 </style>
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import {
    Button,
    Drawer,
@ -14,19 +14,27 @@
  import { getSequentialName } from "@/helpers/duplicate"
  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
  import { ValidSnippetNameRegex } from "@budibase/shared-core"
+  import type { Snippet } from "@budibase/types"

-  export let snippet
-
-  export const show = () => drawer.show()
+  export const show = () => {
+    if (!snippet) {
+      key = Math.random().toString()
+      // Reset state when creating multiple snippets
+      code = ""
+      name = defaultName
+    }
+    drawer.show()
+  }
  export const hide = () => drawer.hide()
+  export let snippet: Snippet | null

  const firstCharNumberRegex = /^[0-9].*$/

-  let drawer
+  let drawer: Drawer
  let name = ""
  let code = ""
  let loading = false
-  let deleteConfirmationDialog
+  let deleteConfirmationDialog: ConfirmDialog

  $: defaultName = getSequentialName($snippets, "MySnippet", {
    getName: x => x.name,
@ -40,11 +48,11 @@
  const saveSnippet = async () => {
    loading = true
    try {
-      const newSnippet = { name, code: rawJS }
+      const newSnippet: Snippet = { name, code: rawJS || "" }
      await snippets.saveSnippet(newSnippet)
      drawer.hide()
      notifications.success(`Snippet ${newSnippet.name} saved`)
-    } catch (error) {
+    } catch (error: any) {
      notifications.error(error.message || "Error saving snippet")
    }
    loading = false
@ -53,7 +61,9 @@
  const deleteSnippet = async () => {
    loading = true
    try {
-      await snippets.deleteSnippet(snippet.name)
+      if (snippet) {
+        await snippets.deleteSnippet(snippet.name)
+      }
      drawer.hide()
    } catch (error) {
      notifications.error("Error deleting snippet")
@ -61,7 +71,7 @@
    loading = false
  }

-  const validateName = (name, snippets) => {
+  const validateName = (name: string, snippets: Snippet[]) => {
    if (!name?.length) {
      return "Name is required"
    }
@ -108,7 +118,11 @@
        Delete
      </Button>
    {/if}
-    <Button cta on:click={saveSnippet} disabled={!code || loading || nameError}>
+    <Button
+      cta
+      on:click={saveSnippet}
+      disabled={!code || loading || !!nameError}
+    >
      Save
    </Button>
  </svelte:fragment>
@ -124,9 +138,7 @@
        value={code}
        on:change={e => (code = e.detail)}
      >
-        <div slot="tabs">
-          <Input placeholder="Name" />
-        </div>
+        <Input placeholder="Name" />
      </BindingPanel>
    {/key}
  </svelte:fragment>
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@ -1,278 +0,0 @@
-<script>
-  import {
-    Input,
-    Layout,
-    Icon,
-    Popover,
-    Tags,
-    Tag,
-    Body,
-    Button,
-  } from "@budibase/bbui"
-  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
-  import { EditorModes } from "@/components/common/CodeEditor"
-  import SnippetDrawer from "./SnippetDrawer.svelte"
-  import { licensing } from "@/stores/portal"
-  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
-
-  export let addSnippet
-  export let snippets
-
-  let search = ""
-  let searching = false
-  let popover
-  let popoverAnchor
-  let hoveredSnippet
-  let hideTimeout
-  let snippetDrawer
-  let editableSnippet
-
-  $: enableSnippets = !$licensing.isFreePlan
-  $: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
-
-  const getFilteredSnippets = (enableSnippets, snippets, search) => {
-    if (!enableSnippets || !snippets?.length) {
-      return []
-    }
-    if (!search?.length) {
-      return snippets
-    }
-    return snippets.filter(snippet =>
-      snippet.name.toLowerCase().includes(search.toLowerCase())
-    )
-  }
-
-  const showSnippet = (snippet, target) => {
-    stopHidingPopover()
-    popoverAnchor = target
-    hoveredSnippet = snippet
-    popover.show()
-  }
-
-  const hidePopover = () => {
-    hideTimeout = setTimeout(() => {
-      popover.hide()
-      popoverAnchor = null
-      hoveredSnippet = null
-      hideTimeout = null
-    }, 100)
-  }
-
-  const stopHidingPopover = () => {
-    if (hideTimeout) {
-      clearTimeout(hideTimeout)
-      hideTimeout = null
-    }
-  }
-
-  const startSearching = () => {
-    searching = true
-    search = ""
-  }
-
-  const stopSearching = () => {
-    searching = false
-    search = ""
-  }
-
-  const createSnippet = () => {
-    editableSnippet = null
-    snippetDrawer.show()
-  }
-
-  const editSnippet = (e, snippet) => {
-    e.preventDefault()
-    e.stopPropagation()
-    editableSnippet = snippet
-    snippetDrawer.show()
-  }
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="snippet-side-panel">
-  <Layout noPadding gap="S">
-    <div class="header">
-      {#if enableSnippets}
-        {#if searching}
-          <div class="search-input">
-            <Input
-              placeholder="Search for snippets"
-              autocomplete="off"
-              bind:value={search}
-              autofocus
-            />
-          </div>
-          <Icon
-            size="S"
-            name="Close"
-            hoverable
-            newStyles
-            on:click={stopSearching}
-          />
-        {:else}
-          <div class="title">Snippets</div>
-          <Icon
-            size="S"
-            name="Search"
-            hoverable
-            newStyles
-            on:click={startSearching}
-          />
-          <Icon
-            size="S"
-            name="Add"
-            hoverable
-            newStyles
-            on:click={createSnippet}
-          />
-        {/if}
-      {:else}
-        <div class="title">
-          Snippets
-          <Tags>
-            <Tag icon="LockClosed">Premium</Tag>
-          </Tags>
-        </div>
-      {/if}
-    </div>
-    <div class="snippet-list">
-      {#if enableSnippets && filteredSnippets?.length}
-        {#each filteredSnippets as snippet}
-          <div
-            class="snippet"
-            on:mouseenter={e => showSnippet(snippet, e.target)}
-            on:mouseleave={hidePopover}
-            on:click={() => addSnippet(snippet)}
-          >
-            {snippet.name}
-            <Icon
-              name="Edit"
-              hoverable
-              newStyles
-              size="S"
-              on:click={e => editSnippet(e, snippet)}
-            />
-          </div>
-        {/each}
-      {:else}
-        <div class="upgrade">
-          <Body size="S">
-            Snippets let you create reusable JS functions and values that can
-            all be managed in one place
-          </Body>
-          {#if enableSnippets}
-            <Button cta on:click={createSnippet}>Create snippet</Button>
-          {:else}
-            <UpgradeButton />
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Layout>
-</div>
-
-<Popover
-  align="left-outside"
-  bind:this={popover}
-  anchor={popoverAnchor}
-  minWidth={0}
-  maxWidth={480}
-  maxHeight={480}
-  dismissible={false}
-  on:mouseenter={stopHidingPopover}
-  on:mouseleave={hidePopover}
->
-  <div class="snippet-popover">
-    {#key hoveredSnippet}
-      <CodeEditor
-        value={hoveredSnippet.code?.trim()}
-        mode={EditorModes.JS}
-        readonly
-      />
-    {/key}
-  </div>
-</Popover>
-
-<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
-
-<style>
-  .snippet-side-panel {
-    border-left: var(--border-light);
-    height: 100%;
-    overflow: auto;
-  }
-
-  /* Header */
-  .header {
-    height: 53px;
-    padding: 0 var(--spacing-l);
-    display: flex;
-    align-items: center;
-    border-bottom: var(--border-light);
-    position: sticky;
-    top: 0;
-    gap: var(--spacing-m);
-    background: var(--background);
-    z-index: 1;
-  }
-  .header :global(input) {
-    border: none;
-    border-radius: 0;
-    background: none;
-    padding: 0;
-  }
-  .search-input,
-  .title {
-    flex: 1 1 auto;
-  }
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  /* Upgrade */
-  .upgrade {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-l);
-  }
-  .upgrade :global(p) {
-    text-align: center;
-    align-self: center;
-  }
-
-  /* List */
-  .snippet-list {
-    padding: 0 var(--spacing-l);
-    padding-bottom: var(--spacing-l);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-  }
-  .snippet {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-out, color 130ms ease-out,
-      border-color 130ms ease-out;
-    word-wrap: break-word;
-    display: flex;
-    justify-content: space-between;
-  }
-  .snippet:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    cursor: pointer;
-  }
-
-  /* Popover */
-  .snippet-popover {
-    width: 400px;
-  }
-</style>
--- a/packages/builder/src/components/common/bindings/index.js
+++ b/packages/builder/src/components/common/bindings/index.js
@ -8,5 +8,3 @@ export { default as DrawerBindableSlot } from "./DrawerBindableSlot.svelte"
 export { default as EvaluationSidePanel } from "./EvaluationSidePanel.svelte"
 export { default as ModalBindableInput } from "./ModalBindableInput.svelte"
 export { default as ServerBindingPanel } from "./ServerBindingPanel.svelte"
-export { default as SnippetDrawer } from "./SnippetDrawer.svelte"
-export { default as SnippetSidePanel } from "./SnippetSidePanel.svelte"
--- a/packages/builder/src/constants/completions.ts
+++ b/packages/builder/src/constants/completions.ts
@ -1,10 +1,10 @@
 import { getManifest, helpersToRemoveForJs } from "@budibase/string-templates"
+import { Helper } from "@budibase/types"

-export function handlebarsCompletions() {
+export function handlebarsCompletions(): Helper[] {
  const manifest = getManifest()
-
-  return Object.keys(manifest).flatMap(key =>
-    Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
+  return Object.values(manifest).flatMap(helpersObj =>
+    Object.entries(helpersObj).map<Helper>(([helperName, helperConfig]) => ({
      text: helperName,
      path: helperName,
      example: helperConfig.example,
@ -14,6 +14,7 @@ export function handlebarsCompletions() {
      allowsJs:
        !helperConfig.requiresBlock &&
        !helpersToRemoveForJs.includes(helperName),
+      args: helperConfig.args,
    }))
  )
 }
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@ -2,9 +2,7 @@
  import { getContext } from "svelte"
  import { Pagination, ProgressCircle } from "@budibase/bbui"
  import { fetchData, QueryUtils } from "@budibase/frontend-core"
-  import {
-    LogicalOperator,
-    EmptyFilterOption,
+  import type {
    TableSchema,
    SortOrder,
    SearchFilters,
@ -14,6 +12,7 @@
    GroupUserDatasource,
    DataFetchOptions,
  } from "@budibase/types"
+  import { LogicalOperator, EmptyFilterOption } from "@budibase/types"

  type ProviderDatasource = Exclude<
    DataFetchDatasource,
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@ -4,7 +4,7 @@
  import { Utils } from "@budibase/frontend-core"
  import FormBlockWrapper from "./FormBlockWrapper.svelte"
  import { get } from "svelte/store"
-  import { TableSchema, UIDatasource } from "@budibase/types"
+  import type { TableSchema, UIDatasource } from "@budibase/types"

  type Field = { name: string; active: boolean }

--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@ -1,18 +1,15 @@
 <script lang="ts">
  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
-  import { FieldType } from "@budibase/types"
+  import { FieldType, InternalTable } from "@budibase/types"
  import { fetchData, Utils } from "@budibase/frontend-core"
  import { getContext } from "svelte"
  import Field from "./Field.svelte"
  import type {
    SearchFilter,
    RelationshipFieldMetadata,
-    Table,
    Row,
  } from "@budibase/types"

-  const { API } = getContext("sdk")
-
  export let field: string | undefined = undefined
  export let label: string | undefined = undefined
  export let placeholder: any = undefined
@ -20,10 +17,10 @@
  export let readonly: boolean = false
  export let validation: any
  export let autocomplete: boolean = true
-  export let defaultValue: string | undefined = undefined
+  export let defaultValue: string | string[] | undefined = undefined
  export let onChange: any
  export let filter: SearchFilter[]
-  export let datasourceType: "table" | "user" | "groupUser" = "table"
+  export let datasourceType: "table" | "user" = "table"
  export let primaryDisplay: string | undefined = undefined
  export let span: number | undefined = undefined
  export let helpText: string | undefined = undefined
@ -32,191 +29,305 @@
    | FieldType.BB_REFERENCE
    | FieldType.BB_REFERENCE_SINGLE = FieldType.LINK

-  type RelationshipValue = { _id: string; [key: string]: any }
-  type OptionObj = Record<string, RelationshipValue>
-  type OptionsObjType = Record<string, OptionObj>
+  type BasicRelatedRow = { _id: string; primaryDisplay: string }
+  type OptionsMap = Record<string, BasicRelatedRow>

+  const { API } = getContext("sdk")
+
+  // Field state
  let fieldState: any
  let fieldApi: any
  let fieldSchema: RelationshipFieldMetadata | undefined
-  let tableDefinition: Table | null | undefined
-  let searchTerm: any
-  let open: boolean
-  let selectedValue: string[] | string

-  // need a cast version of this for reactivity, components below aren't typed
-  $: castSelectedValue = selectedValue as any
+  // Local UI state
+  let searchTerm: any
+  let open: boolean = false
+
+  // Options state
+  let options: BasicRelatedRow[] = []
+  let optionsMap: OptionsMap = {}
+  let loadingMissingOptions: boolean = false
+
+  // Determine if we can select multiple rows or not
  $: multiselect =
    [FieldType.LINK, FieldType.BB_REFERENCE].includes(type) &&
    fieldSchema?.relationshipType !== "one-to-many"
-  $: linkedTableId = fieldSchema?.tableId!
-  $: fetch = fetchData({
-    API,
-    datasource: {
-      // typing here doesn't seem correct - we have the correct datasourceType options
-      // but when we configure the fetchData, it seems to think only "table" is valid
-      type: datasourceType as any,
-      tableId: linkedTableId,
-    },
-    options: {
-      filter,
-      limit: 100,
-    },
-  })

-  $: tableDefinition = $fetch.definition
-  $: selectedValue = multiselect
-    ? flatten(fieldState?.value) ?? []
-    : flatten(fieldState?.value)?.[0]
-  $: component = multiselect ? CoreMultiselect : CoreSelect
-  $: primaryDisplay = primaryDisplay || tableDefinition?.primaryDisplay
+  // Get the proper string representation of the value
+  $: realValue = fieldState?.value
+  $: selectedValue = parseSelectedValue(realValue, multiselect)
+  $: selectedIDs = getSelectedIDs(selectedValue)

-  let optionsObj: OptionsObjType = {}
-  const debouncedFetchRows = Utils.debounce(fetchRows, 250)
+  // If writable, we use a fetch to load options
+  $: linkedTableId = fieldSchema?.tableId
+  $: writable = !disabled && !readonly
+  $: fetch = createFetch(writable, datasourceType, filter, linkedTableId)

-  $: {
-    if (primaryDisplay && fieldState && !optionsObj) {
-      // Persist the initial values as options, allowing them to be present in the dropdown,
-      // even if they are not in the inital fetch results
-      let valueAsSafeArray = fieldState.value || []
-      if (!Array.isArray(valueAsSafeArray)) {
-        valueAsSafeArray = [fieldState.value]
-      }
-      optionsObj = valueAsSafeArray.reduce(
-        (
-          accumulator: OptionObj,
-          value: { _id: string; primaryDisplay: any }
-        ) => {
-          // fieldState has to be an array of strings to be valid for an update
-          // therefore we cannot guarantee value will be an object
-          // https://linear.app/budibase/issue/BUDI-7577/refactor-the-relationshipfield-component-to-have-better-support-for
-          if (!value._id) {
-            return accumulator
+  // Attempt to determine the primary display field to use
+  $: tableDefinition = $fetch?.definition
+  $: primaryDisplayField = primaryDisplay || tableDefinition?.primaryDisplay
+
+  // Build our options map
+  $: rows = $fetch?.rows || []
+  $: processOptions(realValue, rows, primaryDisplayField)
+
+  // If we ever have a value selected for which we don't have an option, we must
+  // fetch those rows to ensure we can render them as options
+  $: missingIDs = selectedIDs.filter(id => !optionsMap[id])
+  $: loadMissingOptions(missingIDs, linkedTableId, primaryDisplayField)
+
+  // Convert our options map into an array for display
+  $: updateOptions(optionsMap)
+  $: !open && sortOptions()
+
+  // Search for new options when search term changes
+  $: debouncedSearchOptions(searchTerm || "", primaryDisplayField)
+
+  // Ensure backwards compatibility
+  $: enrichedDefaultValue = enrichDefaultValue(defaultValue)
+
+  // We need to cast value to pass it down, as those components aren't typed
+  $: emptyValue = multiselect ? [] : null
+  $: displayValue = missingIDs.length ? emptyValue : (selectedValue as any)
+
+  // Ensures that we flatten any objects so that only the IDs of the selected
+  // rows are passed down. Not sure how this can be an object to begin with?
+  const parseSelectedValue = (
+    value: any,
+    multiselect: boolean
+  ): undefined | string | string[] => {
+    return multiselect ? flatten(value) : flatten(value)[0]
+  }
+
+  // Where applicable, creates the fetch instance to load row options
+  const createFetch = (
+    writable: boolean,
+    dsType: typeof datasourceType,
+    filter: SearchFilter[],
+    linkedTableId?: string
+  ) => {
+    if (!linkedTableId) {
+      return undefined
+    }
+    const datasource =
+      datasourceType === "table"
+        ? {
+            type: datasourceType,
+            tableId: fieldSchema?.tableId!,
          }
-          accumulator[value._id] = {
-            _id: value._id,
-            [primaryDisplay]: value.primaryDisplay,
+        : {
+            type: datasourceType,
+            tableId: InternalTable.USER_METADATA,
          }
-          return accumulator
-        },
-        {}
-      )
-    }
-  }
-
-  $: enrichedOptions = enrichOptions(optionsObj, $fetch.rows)
-  const enrichOptions = (optionsObj: OptionsObjType, fetchResults: Row[]) => {
-    const result = (fetchResults || [])?.reduce((accumulator, row) => {
-      if (!accumulator[row._id!]) {
-        accumulator[row._id!] = row
-      }
-      return accumulator
-    }, optionsObj || {})
-
-    return Object.values(result)
-  }
-  $: {
-    // We don't want to reorder while the dropdown is open, to avoid UX jumps
-    if (!open && primaryDisplay) {
-      enrichedOptions = enrichedOptions.sort((a: OptionObj, b: OptionObj) => {
-        const selectedValues = flatten(fieldState?.value) || []
-
-        const aIsSelected = selectedValues.find(
-          (v: RelationshipValue) => v === a._id
-        )
-        const bIsSelected = selectedValues.find(
-          (v: RelationshipValue) => v === b._id
-        )
-        if (aIsSelected && !bIsSelected) {
-          return -1
-        } else if (!aIsSelected && bIsSelected) {
-          return 1
-        }
-
-        return (a[primaryDisplay] > b[primaryDisplay]) as unknown as number
-      })
-    }
-  }
-
-  $: {
-    if (filter || defaultValue) {
-      forceFetchRows()
-    }
-  }
-  $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
-
-  const forceFetchRows = async () => {
-    // if the filter has changed, then we need to reset the options, clear the selection, and re-fetch
-    optionsObj = {}
-    fieldApi?.setValue([])
-    selectedValue = []
-    debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
-  }
-  async function fetchRows(
-    searchTerm: any,
-    primaryDisplay: string,
-    defaultVal: string | string[]
-  ) {
-    const allRowsFetched =
-      $fetch.loaded &&
-      !Object.keys($fetch.query?.string || {}).length &&
-      !$fetch.hasNextPage
-    // Don't request until we have the primary display or default value has been fetched
-    if (allRowsFetched || !primaryDisplay) {
-      return
-    }
-    // must be an array
-    const defaultValArray: string[] = !defaultVal
-      ? []
-      : !Array.isArray(defaultVal)
-      ? defaultVal.split(",")
-      : defaultVal
-
-    if (
-      defaultVal &&
-      optionsObj &&
-      defaultValArray.some(val => !optionsObj[val])
-    ) {
-      await fetch.update({
-        query: { oneOf: { _id: defaultValArray } },
-      })
-    }
-
-    if (
-      (Array.isArray(selectedValue) &&
-        selectedValue.some(val => !optionsObj[val])) ||
-      (selectedValue && !optionsObj[selectedValue as string])
-    ) {
-      await fetch.update({
-        query: {
-          oneOf: {
-            _id: Array.isArray(selectedValue) ? selectedValue : [selectedValue],
-          },
-        },
-      })
-    }
-
-    // Ensure we match all filters, rather than any
-    // @ts-expect-error this doesn't fit types, but don't want to change it yet
-    const baseFilter: any = (filter || []).filter(x => x.operator !== "allOr")
-    await fetch.update({
-      filter: [
-        ...baseFilter,
-        {
-          // Use a big numeric prefix to avoid clashing with an existing filter
-          field: `999:${primaryDisplay}`,
-          operator: "string",
-          value: searchTerm,
-        },
-      ],
+    return fetchData({
+      API,
+      datasource,
+      options: {
+        filter,
+        limit: writable ? 100 : 1,
+      },
    })
  }

-  const flatten = (values: any | any[]) => {
+  // Small helper to represent the selected value as an array
+  const getSelectedIDs = (
+    selectedValue: undefined | string | string[]
+  ): string[] => {
+    if (!selectedValue) {
+      return []
+    }
+    return Array.isArray(selectedValue) ? selectedValue : [selectedValue]
+  }
+
+  // Builds a map of all available options, in a consistent structure
+  const processOptions = (
+    realValue: any | any[],
+    rows: Row[],
+    primaryDisplay?: string
+  ) => {
+    // First ensure that all options included in the value are present as valid
+    // options. These can be basic related row shapes which already include
+    // a value for primary display
+    if (realValue) {
+      const valueArray = Array.isArray(realValue) ? realValue : [realValue]
+      for (let val of valueArray) {
+        const option = parseOption(val, primaryDisplay)
+        if (option) {
+          optionsMap[option._id] = option
+        }
+      }
+    }
+
+    // Process all rows loaded from our fetch
+    for (let row of rows) {
+      const option = parseOption(row, primaryDisplay)
+      if (option) {
+        optionsMap[option._id] = option
+      }
+    }
+
+    // Reassign to trigger reactivity
+    optionsMap = optionsMap
+  }
+
+  // Parses a row-like structure into a properly shaped option
+  const parseOption = (
+    option: any | BasicRelatedRow | Row,
+    primaryDisplay?: string
+  ): BasicRelatedRow | null => {
+    if (!option || typeof option !== "object" || !option?._id) {
+      return null
+    }
+    // If this is a basic related row shape (_id and PD only) then just use
+    // that
+    if (Object.keys(option).length === 2 && "primaryDisplay" in option) {
+      return {
+        _id: option._id,
+        primaryDisplay: ensureString(option.primaryDisplay),
+      }
+    }
+    // Otherwise use the primary display field specified
+    if (primaryDisplay) {
+      return {
+        _id: option._id,
+        primaryDisplay: ensureString(
+          option[primaryDisplay as keyof typeof option]
+        ),
+      }
+    } else {
+      return {
+        _id: option._id,
+        primaryDisplay: option._id,
+      }
+    }
+  }
+
+  // Loads any rows which are selected and aren't present in the currently
+  // available option set. This is typically only IDs specified as default
+  // values.
+  const loadMissingOptions = async (
+    missingIDs: string[],
+    linkedTableId?: string,
+    primaryDisplay?: string
+  ) => {
+    if (
+      loadingMissingOptions ||
+      !missingIDs.length ||
+      !linkedTableId ||
+      !primaryDisplay
+    ) {
+      return
+    }
+    loadingMissingOptions = true
+    try {
+      const res = await API.searchTable(linkedTableId, {
+        query: {
+          oneOf: {
+            _id: missingIDs,
+          },
+        },
+      })
+      for (let row of res.rows) {
+        const option = parseOption(row, primaryDisplay)
+        if (option) {
+          optionsMap[option._id] = option
+        }
+      }
+
+      // Reassign to trigger reactivity
+      optionsMap = optionsMap
+      updateOptions(optionsMap)
+    } catch (error) {
+      console.error("Error loading missing row IDs", error)
+    } finally {
+      // Ensure we have some sort of option for all IDs
+      for (let id of missingIDs) {
+        if (!optionsMap[id]) {
+          optionsMap[id] = {
+            _id: id,
+            primaryDisplay: id,
+          }
+        }
+      }
+      loadingMissingOptions = false
+    }
+  }
+
+  // Updates the options list to reflect the currently available options
+  const updateOptions = (optionsMap: OptionsMap) => {
+    let newOptions = Object.values(optionsMap)
+
+    // Only override options if the quantity of options changes
+    if (newOptions.length !== options.length) {
+      options = newOptions
+      sortOptions()
+    }
+  }
+
+  // Sorts the options list by selected state, then by primary display
+  const sortOptions = () => {
+    // Create a quick lookup map so we can test whether options are selected
+    const selectedMap: Record<string, boolean> = selectedIDs.reduce(
+      (map, id) => ({ ...map, [id]: true }),
+      {}
+    )
+    options.sort((a, b) => {
+      const aSelected = !!selectedMap[a._id]
+      const bSelected = !!selectedMap[b._id]
+      if (aSelected === bSelected) {
+        return a.primaryDisplay < b.primaryDisplay ? -1 : 1
+      } else {
+        return aSelected ? -1 : 1
+      }
+    })
+  }
+
+  // Util to ensure a value is stringified
+  const ensureString = (val: any): string => {
+    return typeof val === "string" ? val : JSON.stringify(val)
+  }
+
+  // We previously included logic to manually process default value, which
+  // should not be done as it is handled by the core form logic.
+  // This logic included handling a comma separated list of IDs, so for
+  // backwards compatibility we must now unfortunately continue to handle that
+  // at this level.
+  const enrichDefaultValue = (val: any) => {
+    if (!val || typeof val !== "string") {
+      return val
+    }
+    return val.includes(",") ? val.split(",") : val
+  }
+
+  // Searches for new options matching the given term
+  async function searchOptions(searchTerm: string, primaryDisplay?: string) {
+    if (!primaryDisplay) {
+      return
+    }
+
+    // Ensure we match all filters, rather than any
+    let newFilter: any = filter
+    if (searchTerm) {
+      // @ts-expect-error this doesn't fit types, but don't want to change it yet
+      newFilter = (newFilter || []).filter(x => x.operator !== "allOr")
+      newFilter.push({
+        // Use a big numeric prefix to avoid clashing with an existing filter
+        field: `999:${primaryDisplay}`,
+        operator: "string",
+        value: searchTerm,
+      })
+    }
+    await fetch?.update({
+      filter: newFilter,
+    })
+  }
+  const debouncedSearchOptions = Utils.debounce(searchOptions, 250)
+
+  // Flattens an array of row-like objects into a simple array of row IDs
+  const flatten = (values: any | any[]): string[] => {
    if (!values) {
      return []
    }
-
    if (!Array.isArray(values)) {
      values = [values]
    }
@ -226,16 +337,11 @@
    return values
  }

-  const getDisplayName = (row: Row) => {
-    return row?.[primaryDisplay!] || "-"
-  }
-
  const handleChange = (e: any) => {
    let value = e.detail
    if (!multiselect) {
      value = value == null ? [] : [value]
    }
-
    if (
      type === FieldType.BB_REFERENCE_SINGLE &&
      value &&
@ -243,7 +349,6 @@
    ) {
      value = value[0] || null
    }
-
    const changed = fieldApi.setValue(value)
    if (onChange && changed) {
      onChange({
@ -251,12 +356,6 @@
      })
    }
  }
-
-  const loadMore = () => {
-    if (!$fetch.loading) {
-      fetch.nextPage()
-    }
-  }
 </script>

 <Field
@ -265,31 +364,31 @@
  {disabled}
  {readonly}
  {validation}
-  {defaultValue}
  {type}
  {span}
  {helpText}
+  defaultValue={enrichedDefaultValue}
  bind:fieldState
  bind:fieldApi
  bind:fieldSchema
 >
  {#if fieldState}
    <svelte:component
-      this={component}
-      options={enrichedOptions}
-      {autocomplete}
-      value={castSelectedValue}
-      on:change={handleChange}
-      on:loadMore={loadMore}
-      id={fieldState.fieldId}
-      disabled={fieldState.disabled}
-      readonly={fieldState.readonly}
-      getOptionLabel={getDisplayName}
+      this={multiselect ? CoreMultiselect : CoreSelect}
+      value={displayValue}
+      id={fieldState?.fieldId}
+      disabled={fieldState?.disabled}
+      readonly={fieldState?.readonly}
+      loading={!!$fetch?.loading}
+      getOptionLabel={option => option.primaryDisplay}
      getOptionValue={option => option._id}
+      {options}
      {placeholder}
+      {autocomplete}
      bind:searchTerm
-      loading={$fetch.loading}
      bind:open
+      on:change={handleChange}
+      on:loadMore={() => fetch?.nextPage()}
    />
  {/if}
 </Field>
--- a/packages/client/src/components/error-states/ComponentErrorState.svelte
+++ b/packages/client/src/components/error-states/ComponentErrorState.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
  import { getContext } from "svelte"
  import { Icon } from "@budibase/bbui"
-  import { UIComponentError } from "@budibase/types"
+  import type { UIComponentError } from "@budibase/types"
  import ComponentErrorStateCta from "./ComponentErrorStateCTA.svelte"

  export let componentErrors: UIComponentError[] | undefined
--- a/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
+++ b/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
  import { getContext } from "svelte"
-  import { UIComponentError } from "@budibase/types"
+  import type { UIComponentError } from "@budibase/types"

  export let error: UIComponentError | undefined

--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@ -6,7 +6,7 @@
  import { findComponentById } from "@/utils/components.js"
  import { isGridEvent } from "@/utils/grid"
  import { DNDPlaceholderID } from "@/constants"
-  import { Component } from "@budibase/types"
+  import type { Component } from "@budibase/types"

  type ChildCoords = {
    placeholder: boolean
--- a/packages/frontend-core/src/fetch/GroupUserFetch.ts
+++ b/packages/frontend-core/src/fetch/GroupUserFetch.ts
@ -4,7 +4,7 @@ import { GroupUserDatasource, InternalTable } from "@budibase/types"

 interface GroupUserQuery {
  groupId: string
-  emailSearch: string
+  emailSearch?: string
 }

 interface GroupUserDefinition {
--- a/packages/frontend-core/src/fetch/UserFetch.ts
+++ b/packages/frontend-core/src/fetch/UserFetch.ts
@ -9,8 +9,8 @@ import {
 } from "@budibase/types"

 interface UserFetchQuery {
-  appId: string
-  paginated: boolean
+  appId?: string
+  paginated?: boolean
 }

 interface UserDefinition {
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@ -635,6 +635,11 @@ async function unpublishApp(ctx: UserCtx) {
  return result
 }

+async function invalidateAppCache(appId: string) {
+  await cache.app.invalidateAppMetadata(dbCore.getDevAppID(appId))
+  await cache.app.invalidateAppMetadata(dbCore.getProdAppID(appId))
+}
+
 async function destroyApp(ctx: UserCtx) {
  let appId = ctx.params.appId
  appId = dbCore.getProdAppID(appId)
@ -654,17 +659,21 @@ async function destroyApp(ctx: UserCtx) {
  await quotas.removeApp()
  await events.app.deleted(app)

-  if (!env.isTest()) {
+  if (!env.USE_LOCAL_COMPONENT_LIBS) {
    await deleteAppFiles(appId)
  }

  await removeAppFromUserRoles(ctx, appId)
-  await cache.app.invalidateAppMetadata(devAppId)
+  await invalidateAppCache(appId)
  return result
 }

 async function preDestroyApp(ctx: UserCtx) {
-  const { rows } = await getUniqueRows([ctx.params.appId])
+  // invalidate the cache immediately in-case they are leading to
+  // zombie appearing apps
+  const appId = ctx.params.appId
+  await invalidateAppCache(appId)
+  const { rows } = await getUniqueRows([appId])
  ctx.rowCount = rows.length
 }

--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@ -1,4 +1,5 @@
 import { DEFAULT_TABLES } from "../../../db/defaultData/datasource_bb_default"
+import { setEnv } from "../../../environment"

 jest.mock("../../../utilities/redis", () => ({
  init: jest.fn(),
@ -27,10 +28,16 @@ import path from "path"

 describe("/applications", () => {
  let config = setup.getConfig()
-  let app: App
+  let app: App, cleanup: () => void

-  afterAll(setup.afterAll)
-  beforeAll(async () => await config.init())
+  afterAll(() => {
+    setup.afterAll()
+    cleanup()
+  })
+  beforeAll(async () => {
+    cleanup = setEnv({ USE_LOCAL_COMPONENT_LIBS: "0" })
+    await config.init()
+  })

  beforeEach(async () => {
    app = await config.api.application.create({ name: utils.newid() })
--- a/packages/types/src/ui/bindings/binding.ts
+++ b/packages/types/src/ui/bindings/binding.ts
@ -1,7 +1,19 @@
 export interface EnrichedBinding {
+  value: string
+  valueHTML: string
  runtimeBinding: string
  readableBinding: string
  type?: null | string
+  icon?: string
+  category: string
+  display?: { name: string; type: string }
+  fieldSchema?: {
+    name: string
+    tableId: string
+    type: string
+    subtype?: string
+    prefixKeys?: string
+  }
 }

 export enum BindingMode {
--- a/packages/types/src/ui/bindings/helper.ts
+++ b/packages/types/src/ui/bindings/helper.ts
@ -1,6 +1,9 @@
 export interface Helper {
+  label: string
+  displayText: string
  example: string
  description: string
  args: any[]
  requiresBlock?: boolean
+  allowsJs: boolean
 }
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@ -1,4 +1,3 @@
-export * from "./sidepanel"
 export * from "./codeEditor"
 export * from "./errors"

--- a/packages/types/src/ui/components/sidepanel.ts
+++ b/packages/types/src/ui/components/sidepanel.ts
@ -1,5 +0,0 @@
-export enum SidePanel {
-  Bindings = "FlashOn",
-  Evaluation = "Play",
-  Snippets = "Code",
-}