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

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,

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": {

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,12 +489,14 @@ export async function deleteFolder(
     deleteParams.Delete.Objects.push({ Key: content.Key })
   })
 
+  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)
     }
   }
+}
 
 export async function uploadDirectory(
   bucketName: string,

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

packages/bbui/src/ClearButton/ClearButton.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
-  export let small = false
+  export let small: boolean = false
-  export let disabled
+  export let disabled: boolean = false
 </script>
 
 <button

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

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

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
 

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 anchor: HTMLElement | undefined
-  export let align: PopoverAlignment = PopoverAlignment.Right
+  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

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>

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>

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 (
+  const show = async (config: BannerConfig = {}) => {
-    // eslint-disable-next-line
-    config = { message, type, extraButtonText, extraButtonAction, onChange }
-  ) => {
     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 queue = async (entries: Array<BannerConfig>) => {
-    const priority = {
+    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,

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 timeoutIds = new Set<ReturnType<typeof setTimeout>>()
-  const _notifications = writable([], () => {
+  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" }),
+    info: (msg: string) => send(msg, { type: "info", icon: "Info" }),
-    error: msg =>
+    error: (msg: string) =>
       send(msg, { type: "error", icon: "Alert", autoDismiss: false }),
-    warning: msg => send(msg, { type: "warning", icon: "Alert" }),
+    warning: (msg: string) => send(msg, { type: "warning", icon: "Alert" }),
-    success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }),
+    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)
 }
 

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
 

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

packages/bbui/src/Table/BoldRenderer.svelte

@@ -1,5 +1,5 @@
-<script>
+<script lang="ts">
-  export let value
+  export let value: string
 </script>
 
 <div class="bold">{value}</div>

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

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 row: Record<string, any>
-  export let schema
+  export let schema: Record<string, any>
-  export let value
+  export let value: Record<string, any>
-  export let customRenderers = []
+  export let customRenderers: { column: string; component: any }[] = []
-  export let snippets
+  export let snippets: any
 
-  let renderer
+  let renderer: any
-  const typeMap = {
+  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
     }

packages/bbui/src/Table/CodeRenderer.svelte

@@ -1,5 +1,5 @@
-<script>
+<script lang="ts">
-  export let value
+  export let value: string
 </script>
 
 <code>{value}</code>

packages/bbui/src/Table/DateTimeRenderer.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
   import dayjs from "dayjs"
 
-  export let value
+  export let value: string | Date
-  export let schema
+  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"

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)

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 row: { tableId: string; _id: string }
-  export let value
+  export let value: { primaryDisplay?: string }[] | undefined
-  export let schema
+  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,

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

packages/bbui/src/Table/StringRenderer.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
-  export let value
+  export let value: string | object
-  export let schema
+  export let schema: { capitalise?: boolean }
 </script>
 
 <div class:capitalise={schema?.capitalise}>

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"
@@ -7,6 +7,7 @@
   import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
   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
@@ -24,42 +25,42 @@
    * borderLeft: show a left border
    * borderRight: show a right border
    */
-  export let data = []
+  export let data: any[] = []
-  export let schema = {}
+  export let schema: Record<string, any> = {}
-  export let showAutoColumns = false
+  export let showAutoColumns: boolean = false
-  export let rowCount = 0
+  export let rowCount: number = 0
-  export let quiet = false
+  export let quiet: boolean = false
-  export let loading = false
+  export let loading: boolean = false
-  export let allowSelectRows
+  export let allowSelectRows: boolean = false
-  export let allowEditRows = true
+  export let allowEditRows: boolean = true
-  export let allowEditColumns = true
+  export let allowEditColumns: boolean = true
-  export let allowClickRows = true
+  export let allowClickRows: boolean = true
-  export let selectedRows = []
+  export let selectedRows: any[] = []
-  export let customRenderers = []
+  export let customRenderers: any[] = []
-  export let disableSorting = false
+  export let disableSorting: boolean = false
-  export let autoSortColumns = true
+  export let autoSortColumns: boolean = true
-  export let compact = false
+  export let compact: boolean = false
-  export let customPlaceholder = false
+  export let customPlaceholder: boolean = false
-  export let showHeaderBorder = true
+  export let showHeaderBorder: boolean = true
-  export let placeholderText = "No rows found"
+  export let placeholderText: string = "No rows found"
-  export let snippets = []
+  export let snippets: any[] = []
-  export let defaultSortColumn = undefined
+  export let defaultSortColumn: string | undefined = undefined
-  export let defaultSortOrder = "Ascending"
+  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 sortColumn: string | undefined
-  let sortOrder
+  let sortOrder: "Ascending" | "Descending" | undefined
 
   // Table state
-  let height = 0
+  let height: number = 0
-  let loaded = false
+  let loaded: boolean = false
-  let checkboxStatus = false
+  let checkboxStatus: boolean = false
 
   $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
@@ -95,8 +96,8 @@
     }
   }
 
-  const fixSchema = schema => {
+  const fixSchema = (schema: Record<string, any>): Record<string, any> => {
-    let fixedSchema = {}
+    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,
+    visibleRowCount: number,
-    rowCount,
+    rowCount: number,
-    totalRowCount,
+    totalRowCount: number,
-    rowHeight,
+    rowHeight: number,
-    loading
+    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) => {
+  const getFields = (
-    let columns = []
+    schema: Record<string, any>,
-    let autoColumns = []
+    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 => {
+  const computeCellStyles = (
-    let styles = {}
+    schema: Record<string, any>
+  ): Record<string, string> => {
+    let styles: Record<string, string> = {}
     Object.keys(schema || {}).forEach(field => {
       styles[field] = ""
       if (schema[field].color) {

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
+  interface TabInfo {
-  export let vertical = false
+    width?: number
-  export let noPadding = false
+    height?: number
-  // added as a separate option as noPadding is used for vertical padding
+    left?: number
-  export let noHorizPadding = false
+    top?: number
-  export let quiet = false
+  }
-  export let emphasized = false
-  export let onTop = false
-  export let size = "M"
-  export let beforeSwitch = null
 
-  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
+  $: $tab && calculateIndicatorLength()
-  $: calculateIndicatorLength($tab)
+  $: $tab && calculateIndicatorOffset()
-  $: calculateIndicatorOffset($tab)
 
   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>

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 icon: string = ""
-  export let avatar = ""
+  export let avatar: string = ""
-  export let invalid = false
+  export let invalid: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
-  export let closable = false
+  export let closable: boolean = false
 </script>
 
 <div

packages/bbui/src/Tags/Tags.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/tags/dist/index-vars.css"
 </script>
 

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 tooltip: string = ""
-  export let size = "M"
+  export let size: "S" | "M" = "M"
-  export let disabled = true
+  export let disabled: boolean = true
 </script>
 
 <div class:container={!!tooltip}>

packages/bbui/src/TreeView/Item.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
-  export let selected = false
+  export let selected: boolean = false
-  export let open = false
+  export let open: boolean = false
-  export let href = false
+  export let href: string | null = null
-  export let title
+  export let title: string
-  export let icon
+  export let icon: string | undefined
 </script>
 
 <li

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 quiet: boolean = false
-  export let standalone = true
+  export let standalone: boolean = true
-  export let width = "250px"
+  export let width: string = "250px"
 </script>
 
 <ul

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}">

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

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"

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(
+  $: sidePanelOptions = getSidePanelOptions(bindings, context)
-    bindings,
-    context,
-    allowSnippets,
-    mode
-  )
   $: 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 = (
+  const getSidePanelOptions = (bindings: EnrichedBinding[], context: any) => {
-    bindings: EnrichedBinding[],
+    let options: SidePanel[] = []
-    context: any,
-    useSnippets: boolean,
-    mode: BindingMode | null
-  ) => {
-    let options = []
     if (bindings?.length) {
-      options.push(SidePanel.Bindings)
+      options.push("Bindings")
     }
     if (context && Object.keys(context).length > 0) {
-      options.push(SidePanel.Evaluation)
+      options.push("Evaluation")
-    }
-    if (useSnippets && mode === BindingMode.JavaScript) {
-      options.push(SidePanel.Snippets)
     }
     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}
+                selected={sidePanel === panelOption}
-                on:click={() => changeSidePanel(panel)}
+                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>

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
+  import SnippetDrawer from "./SnippetDrawer.svelte"
-  export let addBinding
+  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
-  export let bindings
+
-  export let mode
+  export let addHelper: (_helper: Helper, _js?: boolean) => void
-  export let allowHelpers
+  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 popover: Popover
-  let popoverAnchor
+  let popoverAnchor: HTMLElement | undefined
-  let hoverTarget
+  let hoverTarget: {
+    type: "binding" | "helper" | "snippet"
+    code: string
+    description?: string
+  } | null
   let helpers = handlebarsCompletions()
-  let selectedCategory
+  let selectedCategory: string | null
-  let hideTimeout
+  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 => {
+  const getCategoryNames = (
-    let names = [...categories.map(cat => cat[0])]
+    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,7 +234,11 @@
   on:mouseenter={stopHidingPopover}
   on:mouseleave={hidePopover}
 >
-  <div class="binding-popover" class:helper={hoverTarget.helper}>
+  {#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-->
@@ -145,10 +246,19 @@
         </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:mouseenter={e =>
-                  on:mouseleave={hidePopover}
+                    showHelperPopover(helper, e.currentTarget)}
-                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                  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>

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 = () => {
-
+    if (!snippet) {
-  export const show = () => drawer.show()
+      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 {
+      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>
       </BindingPanel>
     {/key}
   </svelte:fragment>

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>

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"

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.values(manifest).flatMap(helpersObj =>
-  return Object.keys(manifest).flatMap(key =>
+    Object.entries(helpersObj).map<Helper>(([helperName, helperConfig]) => ({
-    Object.entries(manifest[key]).map(([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,
     }))
   )
 }

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 {
+  import type {
-    LogicalOperator,
-    EmptyFilterOption,
     TableSchema,
     SortOrder,
     SearchFilters,
@@ -14,6 +12,7 @@
     GroupUserDatasource,
     DataFetchOptions,
   } from "@budibase/types"
+  import { LogicalOperator, EmptyFilterOption } from "@budibase/types"
 
   type ProviderDatasource = Exclude<
     DataFetchDatasource,

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 }
 

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 BasicRelatedRow = { _id: string; primaryDisplay: string }
-  type OptionObj = Record<string, RelationshipValue>
+  type OptionsMap = Record<string, BasicRelatedRow>
-  type OptionsObjType = Record<string, OptionObj>
 
+  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
+  // Local UI state
-  $: castSelectedValue = selectedValue as any
+  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({
+  // Get the proper string representation of the value
+  $: realValue = fieldState?.value
+  $: selectedValue = parseSelectedValue(realValue, multiselect)
+  $: selectedIDs = getSelectedIDs(selectedValue)
+
+  // If writable, we use a fetch to load options
+  $: linkedTableId = fieldSchema?.tableId
+  $: writable = !disabled && !readonly
+  $: fetch = createFetch(writable, datasourceType, filter, linkedTableId)
+
+  // 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!,
+          }
+        : {
+            type: datasourceType,
+            tableId: InternalTable.USER_METADATA,
+          }
+    return fetchData({
       API,
-    datasource: {
+      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,
+        limit: writable ? 100 : 1,
       },
     })
-
-  $: tableDefinition = $fetch.definition
-  $: selectedValue = multiselect
-    ? flatten(fieldState?.value) ?? []
-    : flatten(fieldState?.value)?.[0]
-  $: component = multiselect ? CoreMultiselect : CoreSelect
-  $: primaryDisplay = primaryDisplay || tableDefinition?.primaryDisplay
-
-  let optionsObj: OptionsObjType = {}
-  const debouncedFetchRows = Utils.debounce(fetchRows, 250)
-
-  $: {
-    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(
+
-        (
+  // Small helper to represent the selected value as an array
-          accumulator: OptionObj,
+  const getSelectedIDs = (
-          value: { _id: string; primaryDisplay: any }
+    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
   ) => {
-          // fieldState has to be an array of strings to be valid for an update
+    // First ensure that all options included in the value are present as valid
-          // therefore we cannot guarantee value will be an object
+    // options. These can be basic related row shapes which already include
-          // https://linear.app/budibase/issue/BUDI-7577/refactor-the-relationshipfield-component-to-have-better-support-for
+    // a value for primary display
-          if (!value._id) {
+    if (realValue) {
-            return accumulator
+      const valueArray = Array.isArray(realValue) ? realValue : [realValue]
+      for (let val of valueArray) {
+        const option = parseOption(val, primaryDisplay)
+        if (option) {
+          optionsMap[option._id] = option
         }
-          accumulator[value._id] = {
-            _id: value._id,
-            [primaryDisplay]: value.primaryDisplay,
-          }
-          return accumulator
-        },
-        {}
-      )
       }
     }
 
-  $: enrichedOptions = enrichOptions(optionsObj, $fetch.rows)
+    // Process all rows loaded from our fetch
-  const enrichOptions = (optionsObj: OptionsObjType, fetchResults: Row[]) => {
+    for (let row of rows) {
-    const result = (fetchResults || [])?.reduce((accumulator, row) => {
+      const option = parseOption(row, primaryDisplay)
-      if (!accumulator[row._id!]) {
+      if (option) {
-        accumulator[row._id!] = row
+        optionsMap[option._id] = option
-      }
-      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
-      })
       }
     }
 
-  $: {
+    // Reassign to trigger reactivity
-    if (filter || defaultValue) {
+    optionsMap = optionsMap
-      forceFetchRows()
   }
-  }
-  $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
 
-  const forceFetchRows = async () => {
+  // Parses a row-like structure into a properly shaped option
-    // if the filter has changed, then we need to reset the options, clear the selection, and re-fetch
+  const parseOption = (
-    optionsObj = {}
+    option: any | BasicRelatedRow | Row,
-    fieldApi?.setValue([])
+    primaryDisplay?: string
-    selectedValue = []
+  ): BasicRelatedRow | null => {
-    debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
+    if (!option || typeof option !== "object" || !option?._id) {
+      return null
     }
-  async function fetchRows(
+    // If this is a basic related row shape (_id and PD only) then just use
-    searchTerm: any,
+    // that
-    primaryDisplay: string,
+    if (Object.keys(option).length === 2 && "primaryDisplay" in option) {
-    defaultVal: string | string[]
+      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
     ) {
-    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
+    loadingMissingOptions = true
-    const defaultValArray: string[] = !defaultVal
+    try {
-      ? []
+      const res = await API.searchTable(linkedTableId, {
-      : !Array.isArray(defaultVal)
+        query: {
-      ? defaultVal.split(",")
+          oneOf: {
-      : defaultVal
+            _id: missingIDs,
+          },
+        },
+      })
+      for (let row of res.rows) {
+        const option = parseOption(row, primaryDisplay)
+        if (option) {
+          optionsMap[option._id] = option
+        }
+      }
 
-    if (
+      // Reassign to trigger reactivity
-      defaultVal &&
+      optionsMap = optionsMap
-      optionsObj &&
+      updateOptions(optionsMap)
-      defaultValArray.some(val => !optionsObj[val])
+    } catch (error) {
-    ) {
+      console.error("Error loading missing row IDs", error)
-      await fetch.update({
+    } finally {
-        query: { oneOf: { _id: defaultValArray } },
+      // 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
+      }
     })
   }
 
-    if (
+  // Util to ensure a value is stringified
-      (Array.isArray(selectedValue) &&
+  const ensureString = (val: any): string => {
-        selectedValue.some(val => !optionsObj[val])) ||
+    return typeof val === "string" ? val : JSON.stringify(val)
-      (selectedValue && !optionsObj[selectedValue as string])
+  }
-    ) {
+
-      await fetch.update({
+  // We previously included logic to manually process default value, which
-        query: {
+  // should not be done as it is handled by the core form logic.
-          oneOf: {
+  // This logic included handling a comma separated list of IDs, so for
-            _id: Array.isArray(selectedValue) ? selectedValue : [selectedValue],
+  // 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
-    const baseFilter: any = (filter || []).filter(x => x.operator !== "allOr")
+      newFilter = (newFilter || []).filter(x => x.operator !== "allOr")
-    await fetch.update({
+      newFilter.push({
-      filter: [
-        ...baseFilter,
-        {
         // 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)
 
-  const flatten = (values: any | any[]) => {
+  // 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}
+      this={multiselect ? CoreMultiselect : CoreSelect}
-      options={enrichedOptions}
+      value={displayValue}
-      {autocomplete}
+      id={fieldState?.fieldId}
-      value={castSelectedValue}
+      disabled={fieldState?.disabled}
-      on:change={handleChange}
+      readonly={fieldState?.readonly}
-      on:loadMore={loadMore}
+      loading={!!$fetch?.loading}
-      id={fieldState.fieldId}
+      getOptionLabel={option => option.primaryDisplay}
-      disabled={fieldState.disabled}
-      readonly={fieldState.readonly}
-      getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
+      {options}
       {placeholder}
+      {autocomplete}
       bind:searchTerm
-      loading={$fetch.loading}
       bind:open
+      on:change={handleChange}
+      on:loadMore={() => fetch?.nextPage()}
     />
   {/if}
 </Field>

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

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
 

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

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 {

packages/frontend-core/src/fetch/UserFetch.ts

@@ -9,8 +9,8 @@ import {
 } from "@budibase/types"
 
 interface UserFetchQuery {
-  appId: string
+  appId?: string
-  paginated: boolean
+  paginated?: boolean
 }
 
 interface UserDefinition {

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
 }
 

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)
+  afterAll(() => {
-  beforeAll(async () => await config.init())
+    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() })

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 {

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
 }

packages/types/src/ui/components/index.ts

@@ -1,4 +1,3 @@
-export * from "./sidepanel"
 export * from "./codeEditor"
 export * from "./errors"
 

packages/types/src/ui/components/sidepanel.ts

@@ -1,5 +0,0 @@
-export enum SidePanel {
-  Bindings = "FlashOn",
-  Evaluation = "Play",
-  Snippets = "Code",
-}