Merge remote-tracking branch 'origin/master' into feat/pc-ts-conversions-2

.github/workflows/readme-openapi.yml

@@ -20,7 +20,7 @@ jobs:
       - run: yarn --frozen-lockfile
 
       - name: Install OpenAPI pkg
-        run: yarn global add openapi
+        run: yarn global add rdme@8.6.6
 
       - name: update specs
-        run: cd packages/server && yarn specs && openapi specs/openapi.yaml --key=${{ secrets.README_API_KEY }} --id=6728a74f5918b50036c61841
+        run: cd packages/server && yarn specs && rdme openapi specs/openapi.yaml --key=${{ secrets.README_API_KEY }} --id=67c16880add6da002352069a

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,10 +489,12 @@ export async function deleteFolder(
     deleteParams.Delete.Objects.push({ Key: content.Key })
   })
 
-  const deleteResponse = await client.deleteObjects(deleteParams)
+  if (deleteParams.Delete.Objects.length) {
-  // can only empty 1000 items at once
+    const deleteResponse = await client.deleteObjects(deleteParams)
-  if (deleteResponse.Deleted?.length === 1000) {
+    // can only empty 1000 items at once
-    return deleteFolder(bucketName, folder)
+    if (deleteResponse.Deleted?.length === 1000) {
+      return deleteFolder(bucketName, folder)
+    }
   }
 }
 

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

@@ -11,6 +11,7 @@
   export let active = false
   export let inactive = false
   export let hoverable = false
+  export let outlineColor = null
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -29,6 +30,7 @@
   class:spectrum-Label--seafoam={seafoam}
   class:spectrum-Label--active={active}
   class:spectrum-Label--inactive={inactive}
+  style={outlineColor ? `border: 2px solid ${outlineColor}` : ""}
 >
   <slot />
 </span>

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

@@ -28,6 +28,9 @@
     <svg
       on:contextmenu
       on:click
+      on:mouseover
+      on:mouseleave
+      on:focus
       class:hoverable
       class:disabled
       class="spectrum-Icon spectrum-Icon--size{size}"

packages/bbui/src/Layout/Page.svelte

@@ -47,7 +47,7 @@
     overflow-x: hidden;
   }
   .main {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   .content {
     display: flex;

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/builder/src/components/backend/DataTable/formula.js

@@ -2,6 +2,7 @@ import { FieldType } from "@budibase/types"
 import { FIELDS } from "@/constants/backend"
 import { tables } from "@/stores/builder"
 import { get as svelteGet } from "svelte/store"
+import { makeReadableKeyPropSafe } from "@/dataBinding"
 
 // currently supported level of relationship depth (server side)
 const MAX_DEPTH = 1
@@ -26,7 +27,7 @@ export function getBindings({
   if (!table) {
     return bindings
   }
-  for (let [column, schema] of Object.entries(table.schema)) {
+  for (const [column, schema] of Object.entries(table.schema)) {
     const isRelationship = schema.type === FieldType.LINK
     // skip relationships after a certain depth and types which
     // can't bind to
@@ -62,6 +63,10 @@ export function getBindings({
 
     const label = path == null ? column : `${path}.0.${column}`
     const binding = path == null ? `[${column}]` : `[${path}].0.[${column}]`
+    const readableBinding = (path == null ? [column] : [path, "0", column])
+      .map(makeReadableKeyPropSafe)
+      .join(".")
+
     // only supply a description for relationship paths
     const description =
       path == null
@@ -75,7 +80,7 @@ export function getBindings({
       description,
       // don't include path, it messes things up, relationship path
       // will be replaced by the main array binding
-      readableBinding: label,
+      readableBinding,
       runtimeBinding: binding,
       display: {
         name: label,

packages/builder/src/components/common/CodeEditor/validator/hbs.ts

@@ -45,7 +45,10 @@ export function validateHbsTemplate(
     ) {
       const ignoreMissing = options?.ignoreMissing || false
       nodes.forEach(node => {
-        if (isMustacheStatement(node) && isPathExpression(node.path)) {
+        if (
+          (isMustacheStatement(node) || isBlockStatement(node)) &&
+          isPathExpression(node.path)
+        ) {
           const helperName = node.path.original
 
           const from =
@@ -75,21 +78,64 @@ export function validateHbsTemplate(
               message: `Helper "${helperName}" requires a body:\n{{#${helperName} ...}} [body] {{/${helperName}}}`,
             })
             return
+          } else if (!requiresBlock && isBlockStatement(node)) {
+            diagnostics.push({
+              from,
+              to,
+              severity: "error",
+              message: `Helper "${helperName}" should not contain a body.`,
+            })
+            return
           }
 
-          const providedParams = node.params
+          let providedParamsCount = node.params.length
+          if (isBlockStatement(node)) {
+            // Block body counts as a parameter
+            providedParamsCount++
+          }
 
-          if (providedParams.length !== expectedArguments.length) {
+          const optionalArgMatcher = new RegExp(/^\[(.+)\]$/)
+          const optionalArgs = expectedArguments.filter(a =>
+            optionalArgMatcher.test(a)
+          )
+
+          if (
+            !optionalArgs.length &&
+            providedParamsCount !== expectedArguments.length
+          ) {
             diagnostics.push({
               from,
               to,
               severity: "error",
               message: `Helper "${helperName}" expects ${
                 expectedArguments.length
-              } parameters (${expectedArguments.join(", ")}), but got ${
+              } parameters (${expectedArguments.join(
-                providedParams.length
+                ", "
-              }.`,
+              )}), but got ${providedParamsCount}.`,
             })
+          } else if (optionalArgs.length) {
+            const maxArgs = expectedArguments.length
+            const minArgs = maxArgs - optionalArgs.length
+            if (
+              minArgs > providedParamsCount ||
+              maxArgs < providedParamsCount
+            ) {
+              const parameters = expectedArguments
+                .map(a => {
+                  const test = optionalArgMatcher.exec(a)
+                  if (!test?.[1]) {
+                    return a
+                  }
+                  return `${test[1]} (optional)`
+                })
+                .join(", ")
+              diagnostics.push({
+                from,
+                to,
+                severity: "error",
+                message: `Helper "${helperName}" expects between ${minArgs} to ${expectedArguments.length} parameters (${parameters}), but got ${providedParamsCount}.`,
+              })
+            }
           }
         }
 

packages/builder/src/components/common/CodeEditor/validator/tests/hbs.spec.ts

@@ -2,7 +2,7 @@ import { validateHbsTemplate } from "../hbs"
 import { CodeValidator } from "@/types"
 
 describe("hbs validator", () => {
-  it("validate empty strings", () => {
+  it("validates empty strings", () => {
     const text = ""
     const validators = {}
 
@@ -10,7 +10,7 @@ describe("hbs validator", () => {
     expect(result).toHaveLength(0)
   })
 
-  it("validate strings without hbs expressions", () => {
+  it("validates strings without hbs expressions", () => {
     const text = "first line\nand another one"
     const validators = {}
 
@@ -23,7 +23,7 @@ describe("hbs validator", () => {
       fieldName: {},
     }
 
-    it("validate valid expressions", () => {
+    it("validates valid expressions", () => {
       const text = "{{ fieldName }}"
 
       const result = validateHbsTemplate(text, validators)
@@ -98,45 +98,193 @@ describe("hbs validator", () => {
   })
 
   describe("expressions with parameters", () => {
-    const validators: CodeValidator = {
+    describe("basic expression", () => {
-      helperFunction: {
+      const validators: CodeValidator = {
-        arguments: ["a", "b", "c"],
+        helperFunction: {
-      },
+          arguments: ["a", "b", "c"],
-    }
+        },
+      }
 
-    it("validate valid params", () => {
+      it("validates valid params", () => {
-      const text = "{{ helperFunction 1 99 'a' }}"
+        const text = "{{ helperFunction 1 99 'a' }}"
 
-      const result = validateHbsTemplate(text, validators)
+        const result = validateHbsTemplate(text, validators)
-      expect(result).toHaveLength(0)
+        expect(result).toHaveLength(0)
+      })
+
+      it("throws on too few params", () => {
+        const text = "{{ helperFunction 100 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 1.`,
+            severity: "error",
+            to: 24,
+          },
+        ])
+      })
+
+      it("throws on too many params", () => {
+        const text = "{{ helperFunction  1 99 'a' 100 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 4.`,
+            severity: "error",
+            to: 34,
+          },
+        ])
+      })
     })
 
-    it("throws on too few params", () => {
+    describe("body expressions", () => {
-      const text = "{{ helperFunction 100 }}"
+      const validators: CodeValidator = {
-
+        bodyFunction: {
-      const result = validateHbsTemplate(text, validators)
+          arguments: ["a", "b", "c"],
-      expect(result).toEqual([
+          requiresBlock: true,
-        {
-          from: 0,
-          message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 1.`,
-          severity: "error",
-          to: 24,
         },
-      ])
+        nonBodyFunction: {
+          arguments: ["a", "b"],
+        },
+      }
+
+      it("validates valid params", () => {
+        const text = "{{#bodyFunction 1 99  }}body{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toHaveLength(0)
+      })
+
+      it("validates empty bodies", () => {
+        const text = "{{#bodyFunction 1 99  }}{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toHaveLength(0)
+      })
+
+      it("validates too little parameters", () => {
+        const text = "{{#bodyFunction 1 }}{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "bodyFunction" expects 3 parameters (a, b, c), but got 2.`,
+            severity: "error",
+            to: 37,
+          },
+        ])
+      })
+
+      it("validates too many parameters", () => {
+        const text = "{{#bodyFunction 1 99 'a' 0 }}{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "bodyFunction" expects 3 parameters (a, b, c), but got 5.`,
+            severity: "error",
+            to: 46,
+          },
+        ])
+      })
+
+      it("validates non-supported body usages", () => {
+        const text = "{{#nonBodyFunction 1 99}}{{/nonBodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "nonBodyFunction" should not contain a body.`,
+            severity: "error",
+            to: 45,
+          },
+        ])
+      })
     })
 
-    it("throws on too many params", () => {
+    describe("optional parameters", () => {
-      const text = "{{ helperFunction  1 99 'a' 100 }}"
+      it("supports empty parameters", () => {
+        const validators: CodeValidator = {
+          helperFunction: {
+            arguments: ["a", "b", "[c]"],
+          },
+        }
+        const text = "{{ helperFunction 1 99 }}"
 
-      const result = validateHbsTemplate(text, validators)
+        const result = validateHbsTemplate(text, validators)
-      expect(result).toEqual([
+        expect(result).toHaveLength(0)
-        {
+      })
-          from: 0,
+
-          message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 4.`,
+      it("supports valid parameters", () => {
-          severity: "error",
+        const validators: CodeValidator = {
-          to: 34,
+          helperFunction: {
-        },
+            arguments: ["a", "b", "[c]"],
-      ])
+          },
+        }
+        const text = "{{ helperFunction 1 99 'a' }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toHaveLength(0)
+      })
+
+      it("returns a valid message on missing parameters", () => {
+        const validators: CodeValidator = {
+          helperFunction: {
+            arguments: ["a", "b", "[c]"],
+          },
+        }
+        const text = "{{ helperFunction 1 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects between 2 to 3 parameters (a, b, c (optional)), but got 1.`,
+            severity: "error",
+            to: 22,
+          },
+        ])
+      })
+
+      it("returns a valid message on too many parameters", () => {
+        const validators: CodeValidator = {
+          helperFunction: {
+            arguments: ["a", "b", "[c]"],
+          },
+        }
+        const text = "{{ helperFunction 1 2 3 4 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects between 2 to 3 parameters (a, b, c (optional)), but got 4.`,
+            severity: "error",
+            to: 28,
+          },
+        ])
+      })
     })
   })
+
+  it("validates wrong hbs code", () => {
+    const text = "{{#fieldName}}{{/wrong}}"
+
+    const result = validateHbsTemplate(text, {})
+    expect(result).toEqual([
+      {
+        from: 0,
+        message: `The handlebars code is not valid:\nfieldName doesn't match wrong - 1:3`,
+        severity: "error",
+        to: text.length,
+      },
+    ])
+  })
 })

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,18 +234,31 @@
   on:mouseenter={stopHidingPopover}
   on:mouseleave={hidePopover}
 >
-  <div class="binding-popover" class:helper={hoverTarget.helper}>
+  {#if hoverTarget}
-    {#if hoverTarget.description}
+    <div
-      <div>
+      class="binding-popover"
-        <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      class:has-code={hoverTarget.type !== "binding"}
-        {@html hoverTarget.description}
+    >
-      </div>
+      {#if hoverTarget.description}
-    {/if}
+        <div>
-    {#if hoverTarget.code}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html hoverTarget.description}
-      <pre>{@html hoverTarget.code}</pre>
+        </div>
-    {/if}
+      {/if}
-  </div>
+      {#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 {
-      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" />
-          <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/builder/src/dataBinding.js

@@ -373,6 +373,18 @@ const getContextBindings = (asset, componentId) => {
     .flat()
 }
 
+export const makeReadableKeyPropSafe = key => {
+  if (!key.includes(" ")) {
+    return key
+  }
+
+  if (new RegExp(/^\[(.+)\]$/).test(key.test)) {
+    return key
+  }
+
+  return `[${key}]`
+}
+
 /**
  * Generates a set of bindings for a given component context
  */
@@ -457,11 +469,11 @@ const generateComponentContextBindings = (asset, componentContext) => {
       const runtimeBinding = `${safeComponentId}.${safeKey}`
 
       // Optionally use a prefix with readable bindings
-      let readableBinding = component._instanceName
+      let readableBinding = makeReadableKeyPropSafe(component._instanceName)
       if (readablePrefix) {
         readableBinding += `.${readablePrefix}`
       }
-      readableBinding += `.${fieldSchema.name || key}`
+      readableBinding += `.${makeReadableKeyPropSafe(fieldSchema.name || key)}`
 
       // Determine which category this binding belongs in
       const bindingCategory = getComponentBindingCategory(
@@ -473,7 +485,7 @@ const generateComponentContextBindings = (asset, componentContext) => {
       bindings.push({
         type: "context",
         runtimeBinding,
-        readableBinding: `${readableBinding}`,
+        readableBinding,
         // Field schema and provider are required to construct relationship
         // datasource options, based on bindable properties
         fieldSchema,
@@ -1354,13 +1366,14 @@ const bindingReplacement = (
   }
   // work from longest to shortest
   const convertFromProps = bindableProperties
+    // TODO check whitespaces
     .map(el => el[convertFrom])
     .sort((a, b) => {
       return b.length - a.length
     })
   const boundValues = textWithBindings.match(regex) || []
   let result = textWithBindings
-  for (let boundValue of boundValues) {
+  for (const boundValue of boundValues) {
     let newBoundValue = boundValue
     // we use a search string, where any time we replace something we blank it out
     // in the search, working from longest to shortest so always use best match first

packages/builder/src/pages/builder/app/[application]/_components/BuilderGroupPopover.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { helpers } from "@budibase/shared-core"
+
+  export let groups = []
+  function tooltip(groups) {
+    const sortedNames = groups
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(group => group.name)
+    return `Member of ${helpers.lists.punctuateList(sortedNames)}`
+  }
+</script>
+
+<div class="icon">
+  <Icon
+    name="Info"
+    size="XS"
+    color="grey"
+    hoverable
+    tooltip={tooltip(groups)}
+    tooltipPosition="top"
+  />
+</div>
+
+<style>
+  .icon {
+    height: auto;
+    display: flex;
+    justify-content: center;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -37,6 +37,7 @@
   import { emailValidator } from "@/helpers/validation"
   import { fly } from "svelte/transition"
   import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import BuilderGroupPopover from "./BuilderGroupPopover.svelte"
 
   let query = null
   let loaded = false
@@ -197,12 +198,19 @@
       return
     }
     const update = await users.get(user._id)
+    const newRoles = {
+      ...update.roles,
+      [prodAppId]: role,
+    }
+    // make sure no undefined/null roles (during removal)
+    for (let [appId, role] of Object.entries(newRoles)) {
+      if (!role) {
+        delete newRoles[appId]
+      }
+    }
     await users.save({
       ...update,
-      roles: {
+      roles: newRoles,
-        ...update.roles,
-        [prodAppId]: role,
-      },
     })
     await searchUsers(query, $builderStore.builderSidePanel, loaded)
   }
@@ -539,6 +547,10 @@
       creationAccessType = Constants.Roles.CREATOR
     }
   }
+
+  const itemCountText = (word, count) => {
+    return `${count} ${word}${count !== 1 ? "s" : ""}`
+  }
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
@@ -701,13 +713,11 @@
                 >
                   <div class="details">
                     <GroupIcon {group} size="S" />
-                    <div>
+                    <div class="group-name">
                       {group.name}
                     </div>
                     <div class="auth-entity-meta">
-                      {`${group.users?.length} user${
+                      {itemCountText("user", group.users?.length)}
-                        group.users?.length != 1 ? "s" : ""
-                      }`}
                     </div>
                   </div>
                   <div class="auth-entity-access">
@@ -741,16 +751,33 @@
                 <div class="auth-entity-access-title">Access</div>
               </div>
               {#each allUsers as user}
+                {@const userGroups = sdk.users.getUserAppGroups(
+                  $appStore.appId,
+                  user,
+                  $groups
+                )}
                 <div class="auth-entity">
                   <div class="details">
-                    <div class="user-email" title={user.email}>
+                    <div class="user-groups">
-                      {user.email}
+                      <div class="user-email" title={user.email}>
+                        {user.email}
+                      </div>
+                      {#if userGroups.length}
+                        <div class="group-info">
+                          <div class="auth-entity-meta">
+                            {itemCountText("group", userGroups.length)}
+                          </div>
+                          <BuilderGroupPopover groups={userGroups} />
+                        </div>
+                      {/if}
                     </div>
                   </div>
                   <div class="auth-entity-access" class:muted={user.group}>
                     <RoleSelect
                       footer={getRoleFooter(user)}
-                      placeholder={false}
+                      placeholder={userGroups?.length
+                        ? "Controlled by group"
+                        : false}
                       value={parseRole(user)}
                       allowRemove={user.role && !user.group}
                       allowPublic={false}
@@ -915,6 +942,7 @@
     color: var(--spectrum-global-color-gray-600);
     font-size: 12px;
     white-space: nowrap;
+    text-align: end;
   }
 
   .auth-entity-access {
@@ -931,7 +959,7 @@
 
   .auth-entity,
   .auth-entity-header {
-    padding: 0px var(--spacing-xl);
+    padding: 0 var(--spacing-xl);
   }
 
   .auth-entity,
@@ -946,15 +974,17 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-m);
-    color: var(--spectrum-global-color-gray-900);
     overflow: hidden;
+    width: 100%;
   }
 
-  .auth-entity .user-email {
+  .auth-entity .user-email,
-    text-overflow: ellipsis;
+  .group-name {
-    white-space: nowrap;
+    flex: 1 1 0;
+    min-width: 0;
     overflow: hidden;
-    color: var(--spectrum-global-color-gray-900);
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   #builder-side-panel-container {
@@ -1048,4 +1078,23 @@
   .alert {
     padding: 0 var(--spacing-xl);
   }
+
+  .user-groups {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    width: 100%;
+    min-width: 0;
+  }
+
+  .group-info {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xs);
+    justify-content: end;
+    width: 60px;
+    flex: 0 0 auto;
+  }
 </style>

packages/builder/src/pages/builder/portal/users/users/[userId].svelte

@@ -98,7 +98,9 @@
   $: privileged = sdk.users.isAdminOrGlobalBuilder(user)
   $: nameLabel = getNameLabel(user)
   $: filteredGroups = getFilteredGroups(internalGroups, searchTerm)
-  $: availableApps = getAvailableApps($appsStore.apps, privileged, user?.roles)
+  $: availableApps = user
+    ? getApps(user, sdk.users.userAppAccessList(user, $groups || []))
+    : []
   $: userGroups = $groups.filter(x => {
     return x.users?.find(y => {
       return y._id === userId
@@ -107,23 +109,19 @@
   $: globalRole = users.getUserRole(user)
   $: isTenantOwner = tenantOwner?.email && tenantOwner.email === user?.email
 
-  const getAvailableApps = (appList, privileged, roles) => {
+  const getApps = (user, appIds) => {
-    let availableApps = appList.slice()
+    let availableApps = $appsStore.apps
-    if (!privileged) {
+      .slice()
-      availableApps = availableApps.filter(x => {
+      .filter(app =>
-        let roleKeys = Object.keys(roles || {})
+        appIds.find(id => id === appsStore.getProdAppID(app.devId))
-        return roleKeys.concat(user?.builder?.apps).find(y => {
+      )
-          return x.appId === appsStore.extractAppId(y)
-        })
-      })
-    }
     return availableApps.map(app => {
       const prodAppId = appsStore.getProdAppID(app.devId)
       return {
         name: app.name,
         devId: app.devId,
         icon: app.icon,
-        role: getRole(prodAppId, roles),
+        role: getRole(prodAppId, user),
       }
     })
   }
@@ -136,7 +134,7 @@
     return groups.filter(group => group.name?.toLowerCase().includes(search))
   }
 
-  const getRole = (prodAppId, roles) => {
+  const getRole = (prodAppId, user) => {
     if (privileged) {
       return Constants.Roles.ADMIN
     }
@@ -145,7 +143,21 @@
       return Constants.Roles.CREATOR
     }
 
-    return roles[prodAppId]
+    if (user?.roles[prodAppId]) {
+      return user.roles[prodAppId]
+    }
+
+    // check if access via group for creator
+    const foundGroup = $groups?.find(
+      group => group.roles[prodAppId] || group.builder?.apps[prodAppId]
+    )
+    if (foundGroup.builder?.apps[prodAppId]) {
+      return Constants.Roles.CREATOR
+    }
+    // can't tell how groups will control role
+    if (foundGroup.roles[prodAppId]) {
+      return Constants.Roles.GROUP
+    }
   }
 
   const getNameLabel = user => {

packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte

@@ -15,7 +15,9 @@
   }
 </script>
 
-{#if value === Constants.Roles.CREATOR}
+{#if value === Constants.Roles.GROUP}
+  Controlled by group
+{:else if value === Constants.Roles.CREATOR}
   Can edit
 {:else}
   <StatusLight

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -128,7 +128,7 @@
           $auth.user?.email === user.email
             ? false
             : true,
-        apps: [...new Set(Object.keys(user.roles))],
+        apps: sdk.users.userAppAccessList(user, $groups),
         access: role.sortOrder,
       }
     })

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({
-    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
+  // Get the proper string representation of the value
-  $: selectedValue = multiselect
+  $: realValue = fieldState?.value
-    ? flatten(fieldState?.value) ?? []
+  $: selectedValue = parseSelectedValue(realValue, multiselect)
-    : flatten(fieldState?.value)?.[0]
+  $: selectedIDs = getSelectedIDs(selectedValue)
-  $: component = multiselect ? CoreMultiselect : CoreSelect
-  $: primaryDisplay = primaryDisplay || tableDefinition?.primaryDisplay
 
-  let optionsObj: OptionsObjType = {}
+  // If writable, we use a fetch to load options
-  const debouncedFetchRows = Utils.debounce(fetchRows, 250)
+  $: linkedTableId = fieldSchema?.tableId
+  $: writable = !disabled && !readonly
+  $: fetch = createFetch(writable, datasourceType, filter, linkedTableId)
 
-  $: {
+  // Attempt to determine the primary display field to use
-    if (primaryDisplay && fieldState && !optionsObj) {
+  $: tableDefinition = $fetch?.definition
-      // Persist the initial values as options, allowing them to be present in the dropdown,
+  $: primaryDisplayField = primaryDisplay || tableDefinition?.primaryDisplay
-      // even if they are not in the inital fetch results
+
-      let valueAsSafeArray = fieldState.value || []
+  // Build our options map
-      if (!Array.isArray(valueAsSafeArray)) {
+  $: rows = $fetch?.rows || []
-        valueAsSafeArray = [fieldState.value]
+  $: processOptions(realValue, rows, primaryDisplayField)
-      }
+
-      optionsObj = valueAsSafeArray.reduce(
+  // 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
-          accumulator: OptionObj,
+  $: missingIDs = selectedIDs.filter(id => !optionsMap[id])
-          value: { _id: string; primaryDisplay: any }
+  $: loadMissingOptions(missingIDs, linkedTableId, primaryDisplayField)
-        ) => {
+
-          // fieldState has to be an array of strings to be valid for an update
+  // Convert our options map into an array for display
-          // therefore we cannot guarantee value will be an object
+  $: updateOptions(optionsMap)
-          // https://linear.app/budibase/issue/BUDI-7577/refactor-the-relationshipfield-component-to-have-better-support-for
+  $: !open && sortOptions()
-          if (!value._id) {
+
-            return accumulator
+  // 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,
+            type: datasourceType,
-            [primaryDisplay]: value.primaryDisplay,
+            tableId: InternalTable.USER_METADATA,
           }
-          return accumulator
+    return fetchData({
-        },
+      API,
-        {}
+      datasource,
-      )
+      options: {
-    }
+        filter,
-  }
+        limit: writable ? 100 : 1,
-
+      },
-  $: 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,
-        },
-      ],
     })
   }
 
-  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}
+      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/constants.ts

@@ -106,6 +106,7 @@ export const Roles = {
   PUBLIC: "PUBLIC",
   BUILDER: "BUILDER",
   CREATOR: "CREATOR",
+  GROUP: "GROUP",
 }
 
 export const EventPublishType = {

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/pro

@@ -1 +1 @@
-Subproject commit e3843dd4eaced68ae063355b77df200dbc789c98
+Subproject commit b28dbd549284cf450be7f25ad85aadf614d08f0b

packages/server/package.json

@@ -156,6 +156,7 @@
     "@types/pouchdb": "6.4.2",
     "@types/server-destroy": "1.0.1",
     "@types/supertest": "2.0.14",
+    "@types/swagger-jsdoc": "^6.0.4",
     "@types/tar": "6.1.5",
     "@types/tmp": "0.2.6",
     "@types/uuid": "8.3.4",

packages/server/specs/generate.ts

@@ -4,11 +4,11 @@ import { examples, schemas } from "./resources"
 import * as parameters from "./parameters"
 import * as security from "./security"
 
-const swaggerJsdoc = require("swagger-jsdoc")
+import swaggerJsdoc from "swagger-jsdoc"
 
 const VARIABLES = {}
 
-const options = {
+const opts: swaggerJsdoc.Options = {
   definition: {
     openapi: "3.0.0",
     info: {
@@ -58,30 +58,27 @@ const options = {
 }
 
 function writeFile(output: any, filename: string) {
-  try {
+  const path = join(__dirname, filename)
-    const path = join(__dirname, filename)
+  let spec = output
-    let spec = output
+  if (filename.endsWith("json")) {
-    if (filename.endsWith("json")) {
+    spec = JSON.stringify(output, null, 2)
-      spec = JSON.stringify(output, null, 2)
-    }
-    // input the static variables
-    for (let [key, replacement] of Object.entries(VARIABLES)) {
-      spec = spec.replace(new RegExp(`{${key}}`, "g"), replacement)
-    }
-    writeFileSync(path, spec)
-    console.log(`Wrote spec to ${path}`)
-    return path
-  } catch (err) {
-    console.error("Error writing spec file", err)
   }
+  // input the static variables
+  for (let [key, replacement] of Object.entries(VARIABLES)) {
+    spec = spec.replace(new RegExp(`{${key}}`, "g"), replacement)
+  }
+  writeFileSync(path, spec)
+  console.log(`Wrote spec to ${path}`)
+  return path
+}
+
+export function spec() {
+  return swaggerJsdoc({ ...opts, format: ".json" })
 }
 
 export function run() {
-  const outputJSON = swaggerJsdoc(options)
+  writeFile(swaggerJsdoc({ ...opts, format: ".json" }), "openapi.json")
-  options.format = ".yaml"
+  return writeFile(swaggerJsdoc({ ...opts, format: ".yaml" }), "openapi.yaml")
-  const outputYAML = swaggerJsdoc(options)
-  writeFile(outputJSON, "openapi.json")
-  return writeFile(outputYAML, "openapi.yaml")
 }
 
 if (require.main === module) {

packages/server/specs/resources/error.ts

@@ -0,0 +1,21 @@
+import { object } from "./utils"
+import Resource from "./utils/Resource"
+
+const errorSchema = object({
+  status: {
+    type: "number",
+    description: "The HTTP status code of the error.",
+  },
+  message: {
+    type: "string",
+    description: "A descriptive message about the error.",
+  },
+})
+
+export default new Resource()
+  .setExamples({
+    error: {},
+  })
+  .setSchemas({
+    error: errorSchema,
+  })

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

@@ -9,6 +9,7 @@ import {
 const DISABLED_EXTERNAL_INTEGRATIONS = [
   SourceName.AIRTABLE,
   SourceName.BUDIBASE,
+  SourceName.ARANGODB,
 ]
 
 export async function fetch(ctx: UserCtx<void, FetchIntegrationsResponse>) {

packages/server/src/api/controllers/public/users.ts

@@ -48,7 +48,7 @@ function getUser(ctx: UserCtx, userId?: string) {
   if (userId) {
     ctx.params = { userId }
   } else if (!ctx.params?.userId) {
-    throw "No user ID provided for getting"
+    throw new Error("No user ID provided for getting")
   }
   return readGlobalUser(ctx)
 }

packages/server/src/api/controllers/view/exporters.ts

@@ -26,7 +26,7 @@ export function csv(
       headers.map(header => {
         const val = row[header]
         if (typeof val === "object" && !(val instanceof Date)) {
-          return `"${JSON.stringify(val).replace(/"/g, "'")}"`
+          return `"${escapeCsvString(JSON.stringify(val))}"`
         }
         if (val !== undefined) {
           return `"${escapeCsvString(val.toString())}"`

packages/server/src/api/routes/public/index.ts

@@ -12,6 +12,7 @@ import { paramResource, paramSubResource } from "../../../middleware/resourceId"
 import { PermissionLevel, PermissionType } from "@budibase/types"
 import { CtxFn } from "./utils/Endpoint"
 import mapperMiddleware from "./middleware/mapper"
+import testErrorHandling from "./middleware/testErrorHandling"
 import env from "../../../environment"
 import { middleware, redis } from "@budibase/backend-core"
 import { SelectableDatabase } from "@budibase/backend-core/src/redis/utils"
@@ -144,6 +145,10 @@ function applyRoutes(
   // add the output mapper middleware
   addMiddleware(endpoints.read, mapperMiddleware, { output: true })
   addMiddleware(endpoints.write, mapperMiddleware, { output: true })
+  if (env.isTest()) {
+    addMiddleware(endpoints.read, testErrorHandling())
+    addMiddleware(endpoints.write, testErrorHandling())
+  }
   addToRouter(endpoints.read)
   addToRouter(endpoints.write)
 }

packages/server/src/api/routes/public/middleware/testErrorHandling.ts

@@ -0,0 +1,28 @@
+import { Ctx } from "@budibase/types"
+import environment from "../../../../environment"
+
+export default () => {
+  if (!environment.isTest()) {
+    throw new Error("This middleware is only for testing")
+  }
+
+  return async (ctx: Ctx, next: any) => {
+    try {
+      await next()
+    } catch (err: any) {
+      if (!ctx.headers["x-budibase-include-stacktrace"]) {
+        throw err
+      }
+
+      const status = err.status || err.statusCode || 500
+
+      let error = err
+      while (error.cause) {
+        error = error.cause
+      }
+
+      ctx.status = status
+      ctx.body = { status, message: error.message, stack: error.stack }
+    }
+  }
+}

packages/server/src/api/routes/public/tests/compare.spec.ts

@@ -2,184 +2,174 @@ import jestOpenAPI from "jest-openapi"
 import { run as generateSchema } from "../../../../../specs/generate"
 import * as setup from "../../tests/utilities"
 import { generateMakeRequest } from "./utils"
-import { Table, App, Row, User } from "@budibase/types"
+import { Table, App, Row } from "@budibase/types"
+import nock from "nock"
+import environment from "../../../../environment"
 
 const yamlPath = generateSchema()
 jestOpenAPI(yamlPath!)
 
-let config = setup.getConfig()
+describe("compare", () => {
-let apiKey: string, table: Table, app: App, makeRequest: any
+  let config = setup.getConfig()
+  let apiKey: string, table: Table, app: App, makeRequest: any
 
-beforeAll(async () => {
+  beforeAll(async () => {
-  app = await config.init()
+    app = await config.init()
-  table = await config.upsertTable()
-  apiKey = await config.generateApiKey()
-  makeRequest = generateMakeRequest(apiKey)
-})
-
-afterAll(setup.afterAll)
-
-describe("check the applications endpoints", () => {
-  it("should allow retrieving applications through search", async () => {
-    const res = await makeRequest("post", "/applications/search")
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow creating an application", async () => {
-    const res = await makeRequest(
-      "post",
-      "/applications",
-      {
-        name: "new App",
-      },
-      null
-    )
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow updating an application", async () => {
-    const app = config.getApp()
-    const appId = config.getAppId()
-    const res = await makeRequest(
-      "put",
-      `/applications/${appId}`,
-      {
-        ...app,
-        name: "updated app name",
-      },
-      appId
-    )
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow retrieving an application", async () => {
-    const res = await makeRequest("get", `/applications/${config.getAppId()}`)
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow deleting an application", async () => {
-    const res = await makeRequest(
-      "delete",
-      `/applications/${config.getAppId()}`
-    )
-    expect(res).toSatisfyApiSpec()
-  })
-})
-
-describe("check the tables endpoints", () => {
-  it("should allow retrieving tables through search", async () => {
-    await config.createApp("new app 1")
     table = await config.upsertTable()
-    const res = await makeRequest("post", "/tables/search")
+    apiKey = await config.generateApiKey()
-    expect(res).toSatisfyApiSpec()
+    makeRequest = generateMakeRequest(apiKey)
   })
 
-  it("should allow creating a table", async () => {
+  afterAll(setup.afterAll)
-    const res = await makeRequest("post", "/tables", {
+
-      name: "table name",
+  beforeEach(() => {
-      primaryDisplay: "column1",
+    nock.cleanAll()
-      schema: {
+  })
-        column1: {
+
-          type: "string",
+  describe("check the applications endpoints", () => {
-          constraints: {},
+    it("should allow retrieving applications through search", async () => {
+      const res = await makeRequest("post", "/applications/search")
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow creating an application", async () => {
+      const res = await makeRequest(
+        "post",
+        "/applications",
+        {
+          name: "new App",
         },
-      },
+        null
+      )
+      expect(res).toSatisfyApiSpec()
     })
-    expect(res).toSatisfyApiSpec()
-  })
 
-  it("should allow updating a table", async () => {
+    it("should allow updating an application", async () => {
-    const updated = { ...table, _rev: undefined, name: "new name" }
+      const app = config.getApp()
-    const res = await makeRequest("put", `/tables/${table._id}`, updated)
+      const appId = config.getAppId()
-    expect(res).toSatisfyApiSpec()
+      const res = await makeRequest(
-  })
+        "put",
-
+        `/applications/${appId}`,
-  it("should allow retrieving a table", async () => {
+        {
-    const res = await makeRequest("get", `/tables/${table._id}`)
+          ...app,
-    expect(res).toSatisfyApiSpec()
+          name: "updated app name",
-  })
+        },
-
+        appId
-  it("should allow deleting a table", async () => {
+      )
-    const res = await makeRequest("delete", `/tables/${table._id}`)
+      expect(res).toSatisfyApiSpec()
-    expect(res).toSatisfyApiSpec()
-  })
-})
-
-describe("check the rows endpoints", () => {
-  let row: Row
-  it("should allow retrieving rows through search", async () => {
-    table = await config.upsertTable()
-    const res = await makeRequest("post", `/tables/${table._id}/rows/search`, {
-      query: {},
     })
-    expect(res).toSatisfyApiSpec()
-  })
 
-  it("should allow creating a row", async () => {
+    it("should allow retrieving an application", async () => {
-    const res = await makeRequest("post", `/tables/${table._id}/rows`, {
+      const res = await makeRequest("get", `/applications/${config.getAppId()}`)
-      name: "test row",
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow deleting an application", async () => {
+      nock(environment.WORKER_URL!)
+        .delete(`/api/global/roles/${config.getProdAppId()}`)
+        .reply(200, {})
+
+      const res = await makeRequest(
+        "delete",
+        `/applications/${config.getAppId()}`
+      )
+      expect(res).toSatisfyApiSpec()
     })
-    expect(res).toSatisfyApiSpec()
-    row = res.body.data
   })
 
-  it("should allow updating a row", async () => {
+  describe("check the tables endpoints", () => {
-    const res = await makeRequest(
+    it("should allow retrieving tables through search", async () => {
-      "put",
+      await config.createApp("new app 1")
-      `/tables/${table._id}/rows/${row._id}`,
+      table = await config.upsertTable()
-      {
+      const res = await makeRequest("post", "/tables/search")
-        name: "test row updated",
+      expect(res).toSatisfyApiSpec()
-      }
+    })
-    )
+
-    expect(res).toSatisfyApiSpec()
+    it("should allow creating a table", async () => {
+      const res = await makeRequest("post", "/tables", {
+        name: "table name",
+        primaryDisplay: "column1",
+        schema: {
+          column1: {
+            type: "string",
+            constraints: {},
+          },
+        },
+      })
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow updating a table", async () => {
+      const updated = { ...table, _rev: undefined, name: "new name" }
+      const res = await makeRequest("put", `/tables/${table._id}`, updated)
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow retrieving a table", async () => {
+      const res = await makeRequest("get", `/tables/${table._id}`)
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow deleting a table", async () => {
+      const res = await makeRequest("delete", `/tables/${table._id}`)
+      expect(res).toSatisfyApiSpec()
+    })
   })
 
-  it("should allow retrieving a row", async () => {
+  describe("check the rows endpoints", () => {
-    const res = await makeRequest("get", `/tables/${table._id}/rows/${row._id}`)
+    let row: Row
-    expect(res).toSatisfyApiSpec()
+    it("should allow retrieving rows through search", async () => {
+      table = await config.upsertTable()
+      const res = await makeRequest(
+        "post",
+        `/tables/${table._id}/rows/search`,
+        {
+          query: {},
+        }
+      )
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow creating a row", async () => {
+      const res = await makeRequest("post", `/tables/${table._id}/rows`, {
+        name: "test row",
+      })
+      expect(res).toSatisfyApiSpec()
+      row = res.body.data
+    })
+
+    it("should allow updating a row", async () => {
+      const res = await makeRequest(
+        "put",
+        `/tables/${table._id}/rows/${row._id}`,
+        {
+          name: "test row updated",
+        }
+      )
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow retrieving a row", async () => {
+      const res = await makeRequest(
+        "get",
+        `/tables/${table._id}/rows/${row._id}`
+      )
+      expect(res).toSatisfyApiSpec()
+    })
+
+    it("should allow deleting a row", async () => {
+      const res = await makeRequest(
+        "delete",
+        `/tables/${table._id}/rows/${row._id}`
+      )
+      expect(res).toSatisfyApiSpec()
+    })
   })
 
-  it("should allow deleting a row", async () => {
+  describe("check the queries endpoints", () => {
-    const res = await makeRequest(
+    it("should allow retrieving queries through search", async () => {
-      "delete",
+      const res = await makeRequest("post", "/queries/search")
-      `/tables/${table._id}/rows/${row._id}`
+      expect(res).toSatisfyApiSpec()
-    )
+    })
-    expect(res).toSatisfyApiSpec()
-  })
-})
-
-describe("check the users endpoints", () => {
-  let user: User
-  it("should allow retrieving users through search", async () => {
-    user = await config.createUser()
-    const res = await makeRequest("post", "/users/search")
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow creating a user", async () => {
-    const res = await makeRequest("post", "/users")
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow updating a user", async () => {
-    const res = await makeRequest("put", `/users/${user._id}`)
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow retrieving a user", async () => {
-    const res = await makeRequest("get", `/users/${user._id}`)
-    expect(res).toSatisfyApiSpec()
-  })
-
-  it("should allow deleting a user", async () => {
-    const res = await makeRequest("delete", `/users/${user._id}`)
-    expect(res).toSatisfyApiSpec()
-  })
-})
-
-describe("check the queries endpoints", () => {
-  it("should allow retrieving queries through search", async () => {
-    const res = await makeRequest("post", "/queries/search")
-    expect(res).toSatisfyApiSpec()
   })
 })

packages/server/src/api/routes/public/tests/users.spec.ts

@@ -1,132 +1,143 @@
 import * as setup from "../../tests/utilities"
-import { generateMakeRequest, MakeRequestResponse } from "./utils"
 import { User } from "@budibase/types"
-import { mocks } from "@budibase/backend-core/tests"
+import { generator, mocks } from "@budibase/backend-core/tests"
+import nock from "nock"
+import TestConfiguration from "../../../../tests/utilities/TestConfiguration"
+import { mockWorkerUserAPI } from "./utils"
 
-import * as workerRequests from "../../../../utilities/workerRequests"
+describe("public users API", () => {
+  const config = new TestConfiguration()
+  let globalUser: User
 
-const mockedWorkerReq = jest.mocked(workerRequests)
+  beforeAll(async () => {
-
+    await config.init()
-let config = setup.getConfig()
-let apiKey: string, globalUser: User, makeRequest: MakeRequestResponse
-
-beforeAll(async () => {
-  await config.init()
-  globalUser = await config.globalUser()
-  apiKey = await config.generateApiKey(globalUser._id)
-  makeRequest = generateMakeRequest(apiKey)
-  mockedWorkerReq.readGlobalUser.mockImplementation(() =>
-    Promise.resolve(globalUser)
-  )
-})
-
-afterAll(setup.afterAll)
-
-function base() {
-  return {
-    tenantId: config.getTenantId(),
-    firstName: "Test",
-    lastName: "Test",
-  }
-}
-
-function updateMock() {
-  mockedWorkerReq.readGlobalUser.mockImplementation(ctx => ctx.request.body)
-}
-
-describe("check user endpoints", () => {
-  it("should not allow a user to update their own roles", async () => {
-    const res = await makeRequest("put", `/users/${globalUser._id}`, {
-      ...globalUser,
-      roles: {
-        app_1: "ADMIN",
-      },
-    })
-    expect(
-      mockedWorkerReq.saveGlobalUser.mock.lastCall?.[0].body.data.roles["app_1"]
-    ).toBeUndefined()
-    expect(res.status).toBe(200)
-    expect(res.body.data.roles["app_1"]).toBeUndefined()
   })
 
-  it("should not allow a user to delete themselves", async () => {
+  afterAll(setup.afterAll)
-    const res = await makeRequest("delete", `/users/${globalUser._id}`)
+
-    expect(res.status).toBe(405)
+  beforeEach(async () => {
-    expect(mockedWorkerReq.deleteGlobalUser.mock.lastCall).toBeUndefined()
+    globalUser = await config.globalUser()
-  })
+
-})
+    nock.cleanAll()
-
+    mockWorkerUserAPI(globalUser)
-describe("no user role update in free", () => {
+  })
-  beforeAll(() => {
+
-    updateMock()
+  describe("read", () => {
-  })
+    it("should allow a user to read themselves", async () => {
-
+      const user = await config.api.user.find(globalUser._id!)
-  it("should not allow 'roles' to be updated", async () => {
+      expect(user._id).toBe(globalUser._id)
-    const res = await makeRequest("post", "/users", {
+    })
-      ...base(),
+
-      roles: { app_a: "BASIC" },
+    it("should allow a user to read another user", async () => {
-    })
+      const otherUser = await config.api.public.user.create({
-    expect(res.status).toBe(200)
+        email: generator.email({ domain: "example.com" }),
-    expect(res.body.data.roles["app_a"]).toBeUndefined()
+        roles: {},
-    expect(res.body.message).toBeDefined()
+      })
-  })
+      const user = await config.withUser(globalUser, () =>
-
+        config.api.public.user.find(otherUser._id!)
-  it("should not allow 'admin' to be updated", async () => {
+      )
-    const res = await makeRequest("post", "/users", {
+      expect(user._id).toBe(otherUser._id)
-      ...base(),
+    })
-      admin: { global: true },
+  })
-    })
+
-    expect(res.status).toBe(200)
+  describe("create", () => {
-    expect(res.body.data.admin).toBeUndefined()
+    it("can successfully create a new user", async () => {
-    expect(res.body.message).toBeDefined()
+      const email = generator.email({ domain: "example.com" })
-  })
+      const newUser = await config.api.public.user.create({
-
+        email,
-  it("should not allow 'builder' to be updated", async () => {
+        roles: {},
-    const res = await makeRequest("post", "/users", {
+      })
-      ...base(),
+      expect(newUser.email).toBe(email)
-      builder: { global: true },
+      expect(newUser._id).toBeDefined()
-    })
+    })
-    expect(res.status).toBe(200)
+
-    expect(res.body.data.builder).toBeUndefined()
+    describe("role creation on free tier", () => {
-    expect(res.body.message).toBeDefined()
+      it("should not allow 'roles' to be updated", async () => {
-  })
+        const newUser = await config.api.public.user.create({
-})
+          email: generator.email({ domain: "example.com" }),
-
+          roles: { app_a: "BASIC" },
-describe("no user role update in business", () => {
+        })
-  beforeAll(() => {
+        expect(newUser.roles["app_a"]).toBeUndefined()
-    updateMock()
+      })
-    mocks.licenses.useExpandedPublicApi()
+
-  })
+      it("should not allow 'admin' to be updated", async () => {
-
+        const newUser = await config.api.public.user.create({
-  it("should allow 'roles' to be updated", async () => {
+          email: generator.email({ domain: "example.com" }),
-    const res = await makeRequest("post", "/users", {
+          roles: {},
-      ...base(),
+          admin: { global: true },
-      roles: { app_a: "BASIC" },
+        })
-    })
+        expect(newUser.admin).toBeUndefined()
-    expect(res.status).toBe(200)
+      })
-    expect(res.body.data.roles["app_a"]).toBe("BASIC")
+
-    expect(res.body.message).toBeUndefined()
+      it("should not allow 'builder' to be updated", async () => {
-  })
+        const newUser = await config.api.public.user.create({
-
+          email: generator.email({ domain: "example.com" }),
-  it("should allow 'admin' to be updated", async () => {
+          roles: {},
-    mocks.licenses.useExpandedPublicApi()
+          builder: { global: true },
-    const res = await makeRequest("post", "/users", {
+        })
-      ...base(),
+        expect(newUser.builder).toBeUndefined()
-      admin: { global: true },
+      })
-    })
+    })
-    expect(res.status).toBe(200)
+
-    expect(res.body.data.admin.global).toBe(true)
+    describe("role creation on business tier", () => {
-    expect(res.body.message).toBeUndefined()
+      beforeAll(() => {
-  })
+        mocks.licenses.useExpandedPublicApi()
-
+      })
-  it("should allow 'builder' to be updated", async () => {
+
-    mocks.licenses.useExpandedPublicApi()
+      it("should allow 'roles' to be updated", async () => {
-    const res = await makeRequest("post", "/users", {
+        const newUser = await config.api.public.user.create({
-      ...base(),
+          email: generator.email({ domain: "example.com" }),
-      builder: { global: true },
+          roles: { app_a: "BASIC" },
-    })
+        })
-    expect(res.status).toBe(200)
+        expect(newUser.roles["app_a"]).toBe("BASIC")
-    expect(res.body.data.builder.global).toBe(true)
+      })
-    expect(res.body.message).toBeUndefined()
+
+      it("should allow 'admin' to be updated", async () => {
+        const newUser = await config.api.public.user.create({
+          email: generator.email({ domain: "example.com" }),
+          roles: {},
+          admin: { global: true },
+        })
+        expect(newUser.admin?.global).toBe(true)
+      })
+
+      it("should allow 'builder' to be updated", async () => {
+        const newUser = await config.api.public.user.create({
+          email: generator.email({ domain: "example.com" }),
+          roles: {},
+          builder: { global: true },
+        })
+        expect(newUser.builder?.global).toBe(true)
+      })
+    })
+  })
+
+  describe("update", () => {
+    it("can update a user", async () => {
+      const updatedUser = await config.api.public.user.update({
+        ...globalUser,
+        email: `updated-${globalUser.email}`,
+      })
+      expect(updatedUser.email).toBe(`updated-${globalUser.email}`)
+    })
+
+    it("should not allow a user to update their own roles", async () => {
+      await config.withUser(globalUser, () =>
+        config.api.public.user.update({
+          ...globalUser,
+          roles: { app_1: "ADMIN" },
+        })
+      )
+      const updatedUser = await config.api.user.find(globalUser._id!)
+      expect(updatedUser.roles?.app_1).toBeUndefined()
+    })
+  })
+
+  describe("delete", () => {
+    it("should not allow a user to delete themselves", async () => {
+      await config.withUser(globalUser, () =>
+        config.api.public.user.destroy(globalUser._id!, { status: 405 })
+      )
+    })
   })
 })

packages/server/src/api/routes/public/tests/utils.ts

@@ -1,6 +1,10 @@
 import * as setup from "../../tests/utilities"
 import { checkSlashesInUrl } from "../../../../utilities"
 import supertest from "supertest"
+import { User } from "@budibase/types"
+import environment from "../../../../environment"
+import nock from "nock"
+import { generator } from "@budibase/backend-core/tests"
 
 export type HttpMethod = "post" | "get" | "put" | "delete" | "patch"
 
@@ -91,3 +95,43 @@ export function generateMakeRequestWithFormData(
     return res
   }
 }
+
+export function mockWorkerUserAPI(...seedUsers: User[]) {
+  const users: Record<string, User> = {
+    ...seedUsers.reduce((acc, user) => {
+      acc[user._id!] = user
+      return acc
+    }, {} as Record<string, User>),
+  }
+
+  nock(environment.WORKER_URL!)
+    .get(new RegExp(`/api/global/users/.*`))
+    .reply(200, (uri, body) => {
+      const id = uri.split("/").pop()
+      return users[id!]
+    })
+    .persist()
+
+  nock(environment.WORKER_URL!)
+    .post(`/api/global/users`)
+    .reply(200, (uri, body) => {
+      const newUser = body as User
+      if (!newUser._id) {
+        newUser._id = `us_${generator.guid()}`
+      }
+      users[newUser._id!] = newUser
+      return newUser
+    })
+    .persist()
+
+  nock(environment.WORKER_URL!)
+    .put(new RegExp(`/api/global/users/.*`))
+    .reply(200, (uri, body) => {
+      const id = uri.split("/").pop()!
+      const updatedUser = body as User
+      const existingUser = users[id] || {}
+      users[id] = { ...existingUser, ...updatedUser }
+      return users[id]
+    })
+    .persist()
+}

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

@@ -1,18 +1,6 @@
 import { DEFAULT_TABLES } from "../../../db/defaultData/datasource_bb_default"
+import { setEnv } from "../../../environment"
 
-jest.mock("../../../utilities/redis", () => ({
-  init: jest.fn(),
-  getLocksById: () => {
-    return {}
-  },
-  doesUserHaveLock: () => {
-    return true
-  },
-  updateLock: jest.fn(),
-  setDebounce: jest.fn(),
-  checkDebounce: jest.fn(),
-  shutdown: jest.fn(),
-}))
 import { checkBuilderEndpoint } from "./utilities/TestFunctions"
 import * as setup from "./utilities"
 import { AppStatus } from "../../../db/utils"
@@ -27,10 +15,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/server/src/api/routes/tests/environmentVariables.spec.ts

@@ -1,153 +1,106 @@
-const pg = require("pg")
+import { structures } from "./utilities"
-
-jest.mock("pg", () => {
-  return {
-    Client: jest.fn().mockImplementation(() => ({
-      connect: jest.fn(),
-      query: jest.fn().mockImplementation(() => ({ rows: [] })),
-      end: jest.fn().mockImplementation((fn: any) => fn()),
-    })),
-    queryMock: jest.fn().mockImplementation(() => {}),
-    on: jest.fn(),
-  }
-})
-import * as setup from "./utilities"
 import { mocks } from "@budibase/backend-core/tests"
-import { env, events } from "@budibase/backend-core"
+import { setEnv } from "@budibase/backend-core"
-import { QueryPreview } from "@budibase/types"
+import { Datasource } from "@budibase/types"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import {
+  DatabaseName,
+  datasourceDescribe,
+} from "../../../integrations/tests/utils"
 
-const structures = setup.structures
+const describes = datasourceDescribe({ only: [DatabaseName.POSTGRES] })
 
-env._set("ENCRYPTION_KEY", "budibase")
+if (describes.length > 0) {
-mocks.licenses.useEnvironmentVariables()
+  describe.each(describes)("/api/env/variables", ({ dsProvider }) => {
+    const config = new TestConfiguration()
 
-describe("/api/env/variables", () => {
+    let rawDatasource: Datasource
-  let request = setup.getRequest()
+    let restoreEnv: () => void
-  let config = setup.getConfig()
 
-  afterAll(setup.afterAll)
+    beforeAll(async () => {
+      await config.init()
+      restoreEnv = setEnv({ ENCRYPTION_KEY: "budibase" })
+      mocks.licenses.useEnvironmentVariables()
 
-  beforeAll(async () => {
+      const ds = await dsProvider()
-    await config.init()
+      rawDatasource = ds.rawDatasource!
-  })
+    })
 
-  it("should be able check the status of env var API", async () => {
+    afterAll(() => {
-    const res = await request
+      restoreEnv()
-      .get(`/api/env/variables/status`)
+    })
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
 
-    expect(res.body.encryptionKeyAvailable).toEqual(true)
+    beforeEach(async () => {
-  })
+      const { variables } = await config.api.environment.fetch()
-
+      for (const variable of variables) {
-  it("should be able to create an environment variable", async () => {
+        await config.api.environment.destroy(variable)
-    await request
-      .post(`/api/env/variables`)
-      .send(structures.basicEnvironmentVariable("test", "test"))
-      .set(config.defaultHeaders())
-      .expect(200)
-  })
-
-  it("should be able to fetch the 'test' variable name", async () => {
-    const res = await request
-      .get(`/api/env/variables`)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-    expect(res.body.variables.length).toEqual(1)
-    expect(res.body.variables[0]).toEqual("test")
-  })
-
-  it("should be able to update the environment variable 'test'", async () => {
-    const varName = "test"
-    await request
-      .patch(`/api/env/variables/${varName}`)
-      .send(structures.basicEnvironmentVariable("test", "test1"))
-      .set(config.defaultHeaders())
-      .expect(200)
-  })
-
-  it("should be able to delete the environment variable 'test'", async () => {
-    const varName = "test"
-    await request
-      .delete(`/api/env/variables/${varName}`)
-      .set(config.defaultHeaders())
-      .expect(200)
-  })
-
-  it("should create a datasource (using the environment variable) and query", async () => {
-    const datasourceBase = structures.basicDatasource()
-    await request
-      .post(`/api/env/variables`)
-      .send(structures.basicEnvironmentVariable("test", "test"))
-      .set(config.defaultHeaders())
-
-    datasourceBase.datasource.config = {
-      password: "{{ env.test }}",
-    }
-    const response = await request
-      .post(`/api/datasources`)
-      .send(datasourceBase)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-    expect(response.body.datasource._id).toBeDefined()
-
-    const response2 = await request
-      .post(`/api/queries`)
-      .send(structures.basicQuery(response.body.datasource._id))
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-    expect(response2.body._id).toBeDefined()
-  })
-
-  it("should run a query preview and check the mocked results", async () => {
-    const datasourceBase = structures.basicDatasource()
-    await request
-      .post(`/api/env/variables`)
-      .send(structures.basicEnvironmentVariable("test", "test"))
-      .set(config.defaultHeaders())
-
-    datasourceBase.datasource.config = {
-      password: "{{ env.test }}",
-    }
-    const response = await request
-      .post(`/api/datasources`)
-      .send(datasourceBase)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-    expect(response.body.datasource._id).toBeDefined()
-
-    const queryPreview: QueryPreview = {
-      datasourceId: response.body.datasource._id,
-      parameters: [],
-      fields: {},
-      queryVerb: "read",
-      name: response.body.datasource.name,
-      transformer: null,
-      schema: {},
-      readable: true,
-    }
-    const res = await request
-      .post(`/api/queries/preview`)
-      .send(queryPreview)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-    expect(res.body.rows.length).toEqual(0)
-    expect(events.query.previewed).toHaveBeenCalledTimes(1)
-    // API doesn't include config in response
-    delete response.body.datasource.config
-    expect(events.query.previewed).toHaveBeenCalledWith(
-      response.body.datasource,
-      {
-        ...queryPreview,
-        nullDefaultSupport: true,
       }
-    )
+
-    expect(pg.Client).toHaveBeenCalledWith({ password: "test", ssl: undefined })
+      await config.api.environment.create({
+        name: "test",
+        production: rawDatasource.config!.password,
+        development: rawDatasource.config!.password,
+      })
+    })
+
+    it("should be able check the status of env var API", async () => {
+      const { encryptionKeyAvailable } = await config.api.environment.status()
+      expect(encryptionKeyAvailable).toEqual(true)
+    })
+
+    it("should be able to fetch the 'test' variable name", async () => {
+      const { variables } = await config.api.environment.fetch()
+      expect(variables.length).toEqual(1)
+      expect(variables[0]).toEqual("test")
+    })
+
+    it("should be able to update the environment variable 'test'", async () => {
+      await config.api.environment.update("test", {
+        production: "test1",
+        development: "test1",
+      })
+    })
+
+    it("should be able to delete the environment variable 'test'", async () => {
+      await config.api.environment.destroy("test")
+    })
+
+    it("should create a datasource (using the environment variable) and query", async () => {
+      const datasource = await config.api.datasource.create({
+        ...structures.basicDatasource().datasource,
+        config: {
+          ...rawDatasource.config,
+          password: "{{ env.test }}",
+        },
+      })
+
+      const query = await config.api.query.save({
+        ...structures.basicQuery(datasource._id!),
+        fields: { sql: "SELECT 1" },
+      })
+      expect(query._id).toBeDefined()
+    })
+
+    it("should run a query preview and check the mocked results", async () => {
+      const datasource = await config.api.datasource.create({
+        ...structures.basicDatasource().datasource,
+        config: {
+          ...rawDatasource.config,
+          password: "{{ env.test }}",
+        },
+      })
+
+      const query = await config.api.query.save({
+        ...structures.basicQuery(datasource._id!),
+        fields: { sql: "SELECT 1 as id" },
+      })
+
+      const { rows } = await config.api.query.preview({
+        ...query,
+        queryId: query._id!,
+      })
+
+      expect(rows).toEqual([{ id: 1 }])
+    })
   })
-})
+}

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

@@ -2515,15 +2515,14 @@ if (descriptions.length) {
               csvString: exportedValue,
             })
 
-            const stringified = (value: string) =>
+            const stringified = (value: string) => JSON.stringify(value)
-              JSON.stringify(value).replace(/"/g, "'")
 
             const matchingObject = (
               key: string,
               value: any,
               isArray: boolean
             ) => {
-              const objectMatcher = `{'${key}':'${value[key]}'.*?}`
+              const objectMatcher = `{"${key}":"${value[key]}".*?}`
               if (isArray) {
                 return expect.stringMatching(
                   new RegExp(`^\\[${objectMatcher}\\]$`)

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

@@ -6,6 +6,7 @@ import {
   docIds,
   MAX_VALID_DATE,
   MIN_VALID_DATE,
+  setEnv,
   SQLITE_DESIGN_DOC_ID,
   utils,
   withEnv as withCoreEnv,
@@ -43,19 +44,7 @@ import { generator, structures, mocks } from "@budibase/backend-core/tests"
 import { DEFAULT_EMPLOYEE_TABLE_SCHEMA } from "../../../db/defaultData/datasource_bb_default"
 import { generateRowIdField } from "../../../integrations/utils"
 import { cloneDeep } from "lodash/fp"
-
+import { mockChatGPTResponse } from "../../../tests/utilities/mocks/openai"
-jest.mock("@budibase/pro", () => ({
-  ...jest.requireActual("@budibase/pro"),
-  ai: {
-    LargeLanguageModel: {
-      forCurrentTenant: async () => ({
-        llm: {},
-        run: jest.fn(() => `Mock LLM Response`),
-        buildPromptFromAIOperation: jest.fn(),
-      }),
-    },
-  },
-}))
 
 const descriptions = datasourceDescribe({ plus: true })
 
@@ -1896,11 +1885,15 @@ if (descriptions.length) {
               !isInMemory &&
               describe("AI Column", () => {
                 const UNEXISTING_AI_COLUMN = "Real LLM Response"
+                let envCleanup: () => void
 
                 beforeAll(async () => {
                   mocks.licenses.useBudibaseAI()
                   mocks.licenses.useAICustomConfigs()
 
+                  envCleanup = setEnv({ OPENAI_API_KEY: "mock" })
+                  mockChatGPTResponse("Mock LLM Response")
+
                   tableOrViewId = await createTableOrView({
                     product: { name: "product", type: FieldType.STRING },
                     ai: {
@@ -1917,6 +1910,10 @@ if (descriptions.length) {
                   ])
                 })
 
+                afterAll(() => {
+                  envCleanup()
+                })
+
                 describe("equal", () => {
                   it("successfully finds rows based on AI column", async () => {
                     await expectQuery({

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

@@ -1246,10 +1246,7 @@ if (descriptions.length) {
       })
 
       describe.each([
-        [
+        [RowExportFormat.CSV, (val: any) => JSON.stringify(val)],
-          RowExportFormat.CSV,
-          (val: any) => JSON.stringify(val).replace(/"/g, "'"),
-        ],
         [RowExportFormat.JSON, (val: any) => val],
       ])("import validation (%s)", (_, userParser) => {
         const basicSchema: TableSchema = {

packages/server/src/api/routes/tests/utilities/index.ts

@@ -3,44 +3,6 @@ import supertest from "supertest"
 
 export * as structures from "../../../../tests/utilities/structures"
 
-function user() {
-  return {
-    _id: "user",
-    _rev: "rev",
-    createdAt: Date.now(),
-    email: "test@example.com",
-    roles: {},
-    tenantId: "default",
-    status: "active",
-  }
-}
-
-jest.mock("../../../../utilities/workerRequests", () => ({
-  getGlobalUsers: jest.fn(() => {
-    return {
-      _id: "us_uuid1",
-    }
-  }),
-  getGlobalSelf: jest.fn(() => {
-    return {
-      _id: "us_uuid1",
-    }
-  }),
-  allGlobalUsers: jest.fn(() => {
-    return [user()]
-  }),
-  readGlobalUser: jest.fn(() => {
-    return user()
-  }),
-  saveGlobalUser: jest.fn(() => {
-    return { _id: "user", _rev: "rev" }
-  }),
-  deleteGlobalUser: jest.fn(() => {
-    return { message: "deleted user" }
-  }),
-  removeAppFromUserRoles: jest.fn(),
-}))
-
 export function delay(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms))
 }

packages/server/src/automations/tests/steps/bash.spec.ts

@@ -16,6 +16,7 @@ describe("Execute Bash Automations", () => {
       name: "test row",
       description: "test description",
     })
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/createRow.spec.ts

@@ -33,6 +33,7 @@ describe("test the create row action", () => {
       name: "test",
       description: "test",
     }
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/delay.spec.ts

@@ -6,6 +6,7 @@ describe("test the delay logic", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/deleteRow.spec.ts

@@ -13,6 +13,7 @@ describe("test the delete row action", () => {
     await config.init()
     table = await config.api.table.save(basicTable())
     row = await config.api.row.save(table._id!, {})
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/discord.spec.ts

@@ -7,6 +7,7 @@ describe("test the outgoing webhook action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/executeQuery.spec.ts

@@ -26,6 +26,7 @@ if (descriptions.length) {
         const ds = await dsProvider()
         datasource = ds.datasource!
         client = ds.client!
+        await config.api.automation.deleteAll()
       })
 
       beforeEach(async () => {

packages/server/src/automations/tests/steps/executeScript.spec.ts

@@ -13,6 +13,7 @@ describe("Execute Script Automations", () => {
     await config.init()
     table = await config.api.table.save(basicTable())
     await config.api.row.save(table._id!, {})
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/filter.spec.ts

@@ -26,6 +26,7 @@ describe("test the filter logic", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/loop.spec.ts

@@ -22,10 +22,7 @@ describe("Attempt to run a basic loop automation", () => {
   })
 
   beforeEach(async () => {
-    const { automations } = await config.api.automation.fetch()
+    await config.api.automation.deleteAll()
-    for (const automation of automations) {
-      await config.api.automation.delete(automation)
-    }
 
     table = await config.api.table.save(basicTable())
     await config.api.row.save(table._id!, {})

packages/server/src/automations/tests/steps/make.spec.ts

@@ -7,6 +7,7 @@ describe("test the outgoing webhook action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/n8n.spec.ts

@@ -8,6 +8,7 @@ describe("test the outgoing webhook action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/openai.spec.ts

@@ -16,6 +16,7 @@ describe("test the openai action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   beforeEach(() => {

packages/server/src/automations/tests/steps/outgoingWebhook.spec.ts

@@ -8,6 +8,7 @@ describe("test the outgoing webhook action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/queryRows.spec.ts

@@ -21,6 +21,7 @@ describe("Test a query step automation", () => {
     }
     await config.api.row.save(table._id!, row)
     await config.api.row.save(table._id!, row)
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts

@@ -28,6 +28,7 @@ describe("test the outgoing webhook action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/serverLog.spec.ts

@@ -6,6 +6,7 @@ describe("test the server log action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/triggerAutomationRun.spec.ts

@@ -9,6 +9,7 @@ describe("Test triggering an automation from another automation", () => {
   beforeAll(async () => {
     await automation.init()
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(async () => {

packages/server/src/automations/tests/steps/updateRow.spec.ts

@@ -23,6 +23,7 @@ describe("test the update row action", () => {
     await config.init()
     table = await config.createTable()
     row = await config.createRow()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/steps/zapier.spec.ts

@@ -7,6 +7,7 @@ describe("test the outgoing webhook action", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/triggers/appAction.spec.ts

@@ -9,6 +9,8 @@ describe("app action trigger", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
+
     automation = await createAutomationBuilder(config)
       .onAppAction()
       .serverLog({

packages/server/src/automations/tests/triggers/cron.spec.ts

@@ -16,6 +16,7 @@ describe("cron trigger", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
   })
 
   afterAll(() => {

packages/server/src/automations/tests/triggers/rowDeleted.spec.ts

@@ -11,6 +11,7 @@ describe("row deleted trigger", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
     table = await config.api.table.save(basicTable())
     automation = await createAutomationBuilder(config)
       .onRowDeleted({ tableId: table._id! })

packages/server/src/automations/tests/triggers/rowSaved.spec.ts

@@ -11,6 +11,7 @@ describe("row saved trigger", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
     table = await config.api.table.save(basicTable())
     automation = await createAutomationBuilder(config)
       .onRowSaved({ tableId: table._id! })

packages/server/src/automations/tests/triggers/rowUpdated.spec.ts

@@ -11,6 +11,7 @@ describe("row updated trigger", () => {
 
   beforeAll(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
     table = await config.api.table.save(basicTable())
     automation = await createAutomationBuilder(config)
       .onRowUpdated({ tableId: table._id! })

packages/server/src/automations/tests/triggers/webhook.spec.ts

@@ -37,6 +37,7 @@ describe("Webhook trigger test", () => {
 
   beforeEach(async () => {
     await config.init()
+    await config.api.automation.deleteAll()
     table = await config.createTable()
   })
 

packages/server/src/integrations/arangodb.ts

@@ -9,6 +9,11 @@ import {
 
 import { Database, aql } from "arangojs"
 
+/**
+ * @deprecated 3rd March 2025
+ * datasource disabled - this datasource is marked for deprecation and removal
+ */
+
 interface ArangodbConfig {
   url: string
   username: string

packages/server/src/integrations/index.ts

@@ -33,15 +33,17 @@ const DEFINITIONS: Record<SourceName, Integration | undefined> = {
   [SourceName.COUCHDB]: couchdb.schema,
   [SourceName.SQL_SERVER]: sqlServer.schema,
   [SourceName.S3]: s3.schema,
-  [SourceName.AIRTABLE]: airtable.schema,
   [SourceName.MYSQL]: mysql.schema,
-  [SourceName.ARANGODB]: arangodb.schema,
   [SourceName.REST]: rest.schema,
   [SourceName.FIRESTORE]: firebase.schema,
   [SourceName.GOOGLE_SHEETS]: googlesheets.schema,
   [SourceName.REDIS]: redis.schema,
   [SourceName.SNOWFLAKE]: snowflake.schema,
   [SourceName.ORACLE]: oracle.schema,
+  /* deprecated - not available through UI */
+  [SourceName.ARANGODB]: arangodb.schema,
+  [SourceName.AIRTABLE]: airtable.schema,
+  /* un-used */
   [SourceName.BUDIBASE]: undefined,
 }
 
@@ -56,15 +58,17 @@ const INTEGRATIONS: Record<SourceName, IntegrationBaseConstructor | undefined> =
     [SourceName.COUCHDB]: couchdb.integration,
     [SourceName.SQL_SERVER]: sqlServer.integration,
     [SourceName.S3]: s3.integration,
-    [SourceName.AIRTABLE]: airtable.integration,
     [SourceName.MYSQL]: mysql.integration,
-    [SourceName.ARANGODB]: arangodb.integration,
     [SourceName.REST]: rest.integration,
     [SourceName.FIRESTORE]: firebase.integration,
     [SourceName.GOOGLE_SHEETS]: googlesheets.integration,
     [SourceName.REDIS]: redis.integration,
     [SourceName.SNOWFLAKE]: snowflake.integration,
     [SourceName.ORACLE]: oracle.integration,
+    /* deprecated - not available through UI */
+    [SourceName.ARANGODB]: arangodb.integration,
+    [SourceName.AIRTABLE]: airtable.integration,
+    /* un-used */
     [SourceName.BUDIBASE]: undefined,
   }
 

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

@@ -1,76 +0,0 @@
-import { default as AirtableIntegration } from "../airtable"
-
-jest.mock("airtable")
-
-class TestConfiguration {
-  integration: any
-  client: any
-
-  constructor(config: any = {}) {
-    this.integration = new AirtableIntegration.integration(config)
-    this.client = {
-      create: jest.fn(),
-      select: jest.fn(() => ({
-        firstPage: jest.fn(() => []),
-      })),
-      update: jest.fn(),
-      destroy: jest.fn(),
-    }
-    this.integration.client = () => this.client
-  }
-}
-
-describe("Airtable Integration", () => {
-  let config: any
-
-  beforeEach(() => {
-    config = new TestConfiguration()
-  })
-
-  it("calls the create method with the correct params", async () => {
-    await config.integration.create({
-      table: "test",
-      json: {},
-    })
-    expect(config.client.create).toHaveBeenCalledWith([
-      {
-        fields: {},
-      },
-    ])
-  })
-
-  it("calls the read method with the correct params", async () => {
-    await config.integration.read({
-      table: "test",
-      view: "Grid view",
-    })
-    expect(config.client.select).toHaveBeenCalledWith({
-      maxRecords: 10,
-      view: "Grid view",
-    })
-  })
-
-  it("calls the update method with the correct params", async () => {
-    await config.integration.update({
-      table: "table",
-      id: "123",
-      json: {
-        name: "test",
-      },
-    })
-    expect(config.client.update).toHaveBeenCalledWith([
-      {
-        id: "123",
-        fields: { name: "test" },
-      },
-    ])
-  })
-
-  it("calls the delete method with the correct params", async () => {
-    const ids = [1, 2, 3, 4]
-    await config.integration.delete({
-      ids,
-    })
-    expect(config.client.destroy).toHaveBeenCalledWith(ids)
-  })
-})

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

@@ -1,38 +0,0 @@
-import { default as ArangoDBIntegration } from "../arangodb"
-
-jest.mock("arangojs")
-
-class TestConfiguration {
-  integration: any
-
-  constructor(config: any = {}) {
-    this.integration = new ArangoDBIntegration.integration(config)
-  }
-}
-
-describe("ArangoDB Integration", () => {
-  let config: any
-
-  beforeEach(() => {
-    config = new TestConfiguration()
-  })
-
-  it("calls the create method with the correct params", async () => {
-    const body = {
-      json: "Hello",
-    }
-
-    await config.integration.create(body)
-    expect(config.integration.client.query).toHaveBeenCalledWith(
-      `INSERT Hello INTO collection RETURN NEW`
-    )
-  })
-
-  it("calls the read method with the correct params", async () => {
-    const query = {
-      sql: `test`,
-    }
-    await config.integration.read(query)
-    expect(config.integration.client.query).toHaveBeenCalledWith(query.sql)
-  })
-})

packages/server/src/tests/utilities/TestConfiguration.ts

@@ -67,6 +67,7 @@ import {
   View,
   Webhook,
   WithRequired,
+  DevInfo,
 } from "@budibase/types"
 
 import API from "./api"
@@ -248,7 +249,7 @@ export default class TestConfiguration {
     }
   }
 
-  async withUser(user: User, f: () => Promise<void>) {
+  async withUser<T>(user: User, f: () => Promise<T>): Promise<T> {
     const oldUser = this.user
     this.user = user
     try {
@@ -469,7 +470,10 @@ export default class TestConfiguration {
     }
   }
 
-  defaultHeaders(extras = {}, prodApp = false) {
+  defaultHeaders(
+    extras: Record<string, string | string[]> = {},
+    prodApp = false
+  ) {
     const tenantId = this.getTenantId()
     const user = this.getUser()
     const authObj: AuthToken = {
@@ -498,10 +502,13 @@ export default class TestConfiguration {
     }
   }
 
-  publicHeaders({ prodApp = true } = {}) {
+  publicHeaders({
+    prodApp = true,
+    extras = {},
+  }: { prodApp?: boolean; extras?: Record<string, string | string[]> } = {}) {
     const appId = prodApp ? this.prodAppId : this.appId
 
-    const headers: any = {
+    const headers: Record<string, string> = {
       Accept: "application/json",
       Cookie: "",
     }
@@ -514,6 +521,7 @@ export default class TestConfiguration {
     return {
       ...headers,
       ...this.temporaryHeaders,
+      ...extras,
     }
   }
 
@@ -577,17 +585,17 @@ export default class TestConfiguration {
     }
     const db = tenancy.getTenantDB(this.getTenantId())
     const id = dbCore.generateDevInfoID(userId)
-    let devInfo: any
+    const devInfo = await db.tryGet<DevInfo>(id)
-    try {
+    if (devInfo && devInfo.apiKey) {
-      devInfo = await db.get(id)
+      return devInfo.apiKey
-    } catch (err) {
-      devInfo = { _id: id, userId }
     }
-    devInfo.apiKey = encryption.encrypt(
+
+    const apiKey = encryption.encrypt(
       `${this.getTenantId()}${dbCore.SEPARATOR}${newid()}`
     )
-    await db.put(devInfo)
+    const newDevInfo: DevInfo = { _id: id, userId, apiKey }
-    return devInfo.apiKey
+    await db.put(newDevInfo)
+    return apiKey
   }
 
   // APP

packages/server/src/tests/utilities/api/automation.ts

@@ -133,4 +133,11 @@ export class AutomationAPI extends TestAPI {
       }
     )
   }
+
+  deleteAll = async (expectations?: Expectations): Promise<void> => {
+    const { automations } = await this.fetch()
+    await Promise.all(
+      automations.map(automation => this.delete(automation, expectations))
+    )
+  }
 }

packages/server/src/tests/utilities/api/base.ts

@@ -1,8 +1,12 @@
+import jestOpenAPI from "jest-openapi"
+import { spec } from "../../../../specs/generate"
 import TestConfiguration from "../TestConfiguration"
 import request, { SuperTest, Test, Response } from "supertest"
 import { ReadStream } from "fs"
 import { getServer } from "../../../app"
 
+jestOpenAPI(spec() as any)
+
 type Headers = Record<string, string | string[] | undefined>
 type Method = "get" | "post" | "put" | "patch" | "delete"
 
@@ -46,6 +50,7 @@ export interface RequestOpts {
 export abstract class TestAPI {
   config: TestConfiguration
   request: SuperTest<Test>
+  prefix = ""
 
   constructor(config: TestConfiguration) {
     this.config = config
@@ -53,26 +58,26 @@ export abstract class TestAPI {
   }
 
   protected _get = async <T>(url: string, opts?: RequestOpts): Promise<T> => {
-    return await this._request<T>("get", url, opts)
+    return await this._request<T>("get", `${this.prefix}${url}`, opts)
   }
 
   protected _post = async <T>(url: string, opts?: RequestOpts): Promise<T> => {
-    return await this._request<T>("post", url, opts)
+    return await this._request<T>("post", `${this.prefix}${url}`, opts)
   }
 
   protected _put = async <T>(url: string, opts?: RequestOpts): Promise<T> => {
-    return await this._request<T>("put", url, opts)
+    return await this._request<T>("put", `${this.prefix}${url}`, opts)
   }
 
   protected _patch = async <T>(url: string, opts?: RequestOpts): Promise<T> => {
-    return await this._request<T>("patch", url, opts)
+    return await this._request<T>("patch", `${this.prefix}${url}`, opts)
   }
 
   protected _delete = async <T>(
     url: string,
     opts?: RequestOpts
   ): Promise<T> => {
-    return await this._request<T>("delete", url, opts)
+    return await this._request<T>("delete", `${this.prefix}${url}`, opts)
   }
 
   protected _requestRaw = async (
@@ -88,7 +93,6 @@ export abstract class TestAPI {
       fields = {},
       files = {},
       expectations,
-      publicUser = false,
     } = opts || {}
     const { status = 200 } = expectations || {}
     const expectHeaders = expectations?.headers || {}
@@ -97,7 +101,7 @@ export abstract class TestAPI {
       expectHeaders["Content-Type"] = /^application\/json/
     }
 
-    let queryParams = []
+    let queryParams: string[] = []
     for (const [key, value] of Object.entries(query)) {
       if (value) {
         queryParams.push(`${key}=${value}`)
@@ -107,18 +111,10 @@ export abstract class TestAPI {
       url += `?${queryParams.join("&")}`
     }
 
-    const headersFn = publicUser
-      ? (_extras = {}) =>
-          this.config.publicHeaders.bind(this.config)({
-            prodApp: opts?.useProdApp,
-          })
-      : (extras = {}) =>
-          this.config.defaultHeaders.bind(this.config)(extras, opts?.useProdApp)
-
     const app = getServer()
     let req = request(app)[method](url)
     req = req.set(
-      headersFn({
+      await this.getHeaders(opts, {
         "x-budibase-include-stacktrace": "true",
       })
     )
@@ -167,10 +163,18 @@ export abstract class TestAPI {
     }
   }
 
-  protected _checkResponse = (
+  protected async getHeaders(
-    response: Response,
+    opts?: RequestOpts,
-    expectations?: Expectations
+    extras?: Record<string, string | string[]>
-  ) => {
+  ): Promise<Record<string, string | string[]>> {
+    if (opts?.publicUser) {
+      return this.config.publicHeaders({ prodApp: opts?.useProdApp, extras })
+    } else {
+      return this.config.defaultHeaders(extras, opts?.useProdApp)
+    }
+  }
+
+  protected _checkResponse(response: Response, expectations?: Expectations) {
     const { status = 200 } = expectations || {}
 
     if (response.status !== status) {
@@ -236,3 +240,34 @@ export abstract class TestAPI {
     ).body
   }
 }
+
+export abstract class PublicAPI extends TestAPI {
+  prefix = "/api/public/v1"
+
+  protected async getHeaders(
+    opts?: RequestOpts,
+    extras?: Record<string, string | string[]>
+  ): Promise<Record<string, string | string[]>> {
+    const apiKey = await this.config.generateApiKey()
+
+    const headers: Record<string, string | string[]> = {
+      Accept: "application/json",
+      Host: this.config.tenantHost(),
+      "x-budibase-api-key": apiKey,
+      "x-budibase-app-id": this.config.getAppId(),
+      ...extras,
+    }
+
+    return headers
+  }
+
+  protected _checkResponse(response: Response, expectations?: Expectations) {
+    const checked = super._checkResponse(response, expectations)
+    if (checked.status >= 200 && checked.status < 300) {
+      // We don't seem to have documented our errors yet, so for the time being
+      // we'll only do the schema check for successful responses.
+      expect(checked).toSatisfyApiSpec()
+    }
+    return checked
+  }
+}

packages/server/src/tests/utilities/api/environment.ts

@@ -0,0 +1,51 @@
+import { Expectations, TestAPI } from "./base"
+import {
+  CreateEnvironmentVariableRequest,
+  CreateEnvironmentVariableResponse,
+  GetEnvironmentVariablesResponse,
+  StatusEnvironmentVariableResponse,
+  UpdateEnvironmentVariableRequest,
+} from "@budibase/types"
+
+export class EnvironmentAPI extends TestAPI {
+  create = async (
+    body: CreateEnvironmentVariableRequest,
+    expectations?: Expectations
+  ) => {
+    return await this._post<CreateEnvironmentVariableResponse>(
+      `/api/env/variables`,
+      { body, expectations }
+    )
+  }
+
+  status = async (expectations?: Expectations) => {
+    return await this._get<StatusEnvironmentVariableResponse>(
+      `/api/env/variables/status`,
+      { expectations }
+    )
+  }
+
+  fetch = async (expectations?: Expectations) => {
+    return await this._get<GetEnvironmentVariablesResponse>(
+      `/api/env/variables`,
+      { expectations }
+    )
+  }
+
+  update = async (
+    varName: string,
+    body: UpdateEnvironmentVariableRequest,
+    expectations?: Expectations
+  ) => {
+    return await this._patch<void>(`/api/env/variables/${varName}`, {
+      body,
+      expectations,
+    })
+  }
+
+  destroy = async (varName: string, expectations?: Expectations) => {
+    return await this._delete<void>(`/api/env/variables/${varName}`, {
+      expectations,
+    })
+  }
+}

packages/server/src/tests/utilities/api/index.ts

@@ -17,6 +17,8 @@ import { RowActionAPI } from "./rowAction"
 import { AutomationAPI } from "./automation"
 import { PluginAPI } from "./plugin"
 import { WebhookAPI } from "./webhook"
+import { EnvironmentAPI } from "./environment"
+import { UserPublicAPI } from "./public/user"
 
 export default class API {
   application: ApplicationAPI
@@ -24,6 +26,7 @@ export default class API {
   automation: AutomationAPI
   backup: BackupAPI
   datasource: DatasourceAPI
+  environment: EnvironmentAPI
   legacyView: LegacyViewAPI
   permission: PermissionAPI
   plugin: PluginAPI
@@ -38,12 +41,17 @@ export default class API {
   viewV2: ViewV2API
   webhook: WebhookAPI
 
+  public: {
+    user: UserPublicAPI
+  }
+
   constructor(config: TestConfiguration) {
     this.application = new ApplicationAPI(config)
     this.attachment = new AttachmentAPI(config)
     this.automation = new AutomationAPI(config)
     this.backup = new BackupAPI(config)
     this.datasource = new DatasourceAPI(config)
+    this.environment = new EnvironmentAPI(config)
     this.legacyView = new LegacyViewAPI(config)
     this.permission = new PermissionAPI(config)
     this.plugin = new PluginAPI(config)
@@ -57,5 +65,8 @@ export default class API {
     this.user = new UserAPI(config)
     this.viewV2 = new ViewV2API(config)
     this.webhook = new WebhookAPI(config)
+    this.public = {
+      user: new UserPublicAPI(config),
+    }
   }
 }

packages/server/src/tests/utilities/api/public/user.ts

@@ -0,0 +1,34 @@
+import { UnsavedUser, User } from "@budibase/types"
+import { Expectations, PublicAPI } from "../base"
+
+export class UserPublicAPI extends PublicAPI {
+  find = async (id: string, expectations?: Expectations): Promise<User> => {
+    const response = await this._get<{ data: User }>(`/users/${id}`, {
+      expectations,
+    })
+    return response.data
+  }
+
+  update = async (user: User, expectations?: Expectations): Promise<User> => {
+    const response = await this._put<{ data: User }>(`/users/${user._id}`, {
+      body: user,
+      expectations,
+    })
+    return response.data
+  }
+
+  destroy = async (id: string, expectations?: Expectations): Promise<void> => {
+    return await this._delete(`/users/${id}`, { expectations })
+  }
+
+  create = async (
+    user: UnsavedUser,
+    expectations?: Expectations
+  ): Promise<User> => {
+    const response = await this._post<{ data: User }>("/users", {
+      body: user,
+      expectations,
+    })
+    return response.data
+  }
+}

packages/server/src/tests/utilities/structures.ts

@@ -37,6 +37,7 @@ import {
   DeepPartial,
   FilterCondition,
   AutomationTriggerResult,
+  CreateEnvironmentVariableRequest,
 } from "@budibase/types"
 import { LoopInput } from "../../definitions/automations"
 import { merge } from "lodash"
@@ -574,7 +575,7 @@ export function basicEnvironmentVariable(
   name: string,
   prod: string,
   dev?: string
-) {
+): CreateEnvironmentVariableRequest {
   return {
     name,
     production: prod,

packages/server/src/utilities/schema.ts

@@ -270,6 +270,7 @@ function parseJsonExport<T>(value: any) {
   if (typeof value !== "string") {
     return value
   }
+
   try {
     const parsed = JSON.parse(value)
 
@@ -278,12 +279,17 @@ function parseJsonExport<T>(value: any) {
     if (
       e.message.startsWith("Expected property name or '}' in JSON at position ")
     ) {
-      // This was probably converted as CSV and it has single quotes instead of double ones
+      // In order to store JSON within CSVs what we used to do is replace double
+      // quotes with single quotes. This results in invalid JSON, so the line
+      // below is a workaround to parse it. However, this method of storing JSON
+      // was never valid, and we don't do it anymore. However, people may have
+      // exported data and stored it, hoping to be able to restore it later, so
+      // we leave this in place to support that.
       const parsed = JSON.parse(value.replace(/'/g, '"'))
       return parsed as T
     }
 
-    // It is no a valid JSON
+    // It is not valid JSON
     throw e
   }
 }

packages/shared-core/src/helpers/index.ts

@@ -6,3 +6,4 @@ export * as cron from "./cron"
 export * as schema from "./schema"
 export * as views from "./views"
 export * as roles from "./roles"
+export * as lists from "./lists"

packages/shared-core/src/helpers/lists.ts

@@ -0,0 +1,6 @@
+export function punctuateList(list: string[]) {
+  if (list.length === 0) return ""
+  if (list.length === 1) return list[0]
+  if (list.length === 2) return list.join(" and ")
+  return list.slice(0, -1).join(", ") + " and " + list[list.length - 1]
+}

packages/shared-core/src/sdk/documents/users.ts

@@ -4,6 +4,7 @@ import {
   SEPARATOR,
   User,
   InternalTable,
+  UserGroup,
 } from "@budibase/types"
 import { getProdAppID } from "./applications"
 import * as _ from "lodash/fp"
@@ -129,3 +130,30 @@ export function containsUserID(value: string | undefined): boolean {
   }
   return value.includes(`${DocumentType.USER}${SEPARATOR}`)
 }
+
+export function getUserGroups(user: User, groups?: UserGroup[]) {
+  return (
+    groups?.filter(group => group.users?.find(u => u._id === user._id)) || []
+  )
+}
+
+export function getUserAppGroups(
+  appId: string,
+  user: User,
+  groups?: UserGroup[]
+) {
+  const prodAppId = getProdAppID(appId)
+  const userGroups = getUserGroups(user, groups)
+  return userGroups.filter(group =>
+    Object.keys(group.roles || {}).find(app => app === prodAppId)
+  )
+}
+
+export function userAppAccessList(user: User, groups?: UserGroup[]) {
+  const userGroups = getUserGroups(user, groups)
+  const userGroupApps = userGroups.flatMap(userGroup =>
+    Object.keys(userGroup.roles || {})
+  )
+  const fullList = [...Object.keys(user.roles), ...userGroupApps]
+  return [...new Set(fullList)]
+}

packages/string-templates/scripts/gen-collection-info.ts

@@ -17,7 +17,6 @@ type BudibaseAnnotation = Annotation & {
 
 type Helper = {
   args: string[]
-  numArgs: number
   example?: string
   description: string
   requiresBlock?: boolean
@@ -34,15 +33,13 @@ const outputJSON: Manifest = {}
 const ADDED_HELPERS = {
   date: {
     date: {
-      args: ["datetime", "format"],
+      args: ["[datetime]", "[format]", "[options]"],
-      numArgs: 2,
       example: '{{date now "DD-MM-YYYY" "America/New_York" }} -> 21-01-2021',
       description:
         "Format a date using moment.js date formatting - the timezone is optional and uses the tz database.",
     },
     duration: {
       args: ["time", "durationType"],
-      numArgs: 2,
       example: '{{duration 8 "seconds"}} -> a few seconds',
       description:
         "Produce a humanized duration left/until given an amount of time and the type of time measurement.",
@@ -53,7 +50,6 @@ const ADDED_HELPERS = {
 function fixSpecialCases(name: string, obj: Helper) {
   if (name === "ifNth") {
     obj.args = ["a", "b", "options"]
-    obj.numArgs = 3
   }
   if (name === "eachIndex") {
     obj.description = "Iterates the array, listing an item and the index of it."
@@ -163,7 +159,6 @@ function run() {
         .map(tag => tag.description!.replace(/`/g, "").split(" ")[0].trim())
       collectionInfo[name] = fixSpecialCases(name, {
         args,
-        numArgs: args.length,
         example: jsDocInfo.example || undefined,
         description: jsDocInfo.description,
         requiresBlock: jsDocInfo.acceptsBlock && !jsDocInfo.acceptsInline,

packages/string-templates/src/helpers/date.ts

@@ -71,7 +71,7 @@ function getContext(thisArg: any, locals: any, options: any) {
 function initialConfig(str: any, pattern: any, options?: any) {
   if (isOptions(pattern)) {
     options = pattern
-    pattern = null
+    pattern = DEFAULT_FORMAT
   }
 
   if (isOptions(str)) {
@@ -93,13 +93,15 @@ function setLocale(this: any, str: any, pattern: any, options?: any) {
   dayjs.locale(opts.lang || opts.language)
 }
 
+const DEFAULT_FORMAT = "MMMM DD, YYYY"
+
 export const date = (str: any, pattern: any, options: any) => {
   const config = initialConfig(str, pattern, options)
 
   // if no args are passed, return a formatted date
   if (config.str == null && config.pattern == null) {
     dayjs.locale("en")
-    return dayjs().format("MMMM DD, YYYY")
+    return dayjs().format(DEFAULT_FORMAT)
   }
 
   setLocale(config.str, config.pattern, config.options)

packages/string-templates/src/manifest.json

@@ -4,7 +4,6 @@
       "args": [
         "a"
       ],
-      "numArgs": 1,
       "example": "{{ abs 12012.1000 }} -> 12012.1",
       "description": "<p>Return the magnitude of <code>a</code>.</p>\n",
       "requiresBlock": false
@@ -14,7 +13,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ add 1 2 }} -> 3",
       "description": "<p>Return the sum of <code>a</code> plus <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -23,7 +21,6 @@
       "args": [
         "array"
       ],
-      "numArgs": 1,
       "example": "{{ avg 1 2 3 4 5 }} -> 3",
       "description": "<p>Returns the average of all numbers in the given array.</p>\n",
       "requiresBlock": false
@@ -32,7 +29,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{ ceil 1.2 }} -> 2",
       "description": "<p>Get the <code>Math.ceil()</code> of the given value.</p>\n",
       "requiresBlock": false
@@ -42,7 +38,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ divide 10 5 }} -> 2",
       "description": "<p>Divide <code>a</code> by <code>b</code></p>\n",
       "requiresBlock": false
@@ -51,7 +46,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{ floor 1.2 }} -> 1",
       "description": "<p>Get the <code>Math.floor()</code> of the given value.</p>\n",
       "requiresBlock": false
@@ -61,7 +55,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ subtract 10 5 }} -> 5",
       "description": "<p>Return the product of <code>a</code> minus <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -71,7 +64,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ modulo 10 5 }} -> 0",
       "description": "<p>Get the remainder of a division operation.</p>\n",
       "requiresBlock": false
@@ -81,7 +73,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ multiply 10 5 }} -> 50",
       "description": "<p>Multiply number <code>a</code> by number <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -91,7 +82,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ plus 10 5 }} -> 15",
       "description": "<p>Add <code>a</code> by <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -101,7 +91,6 @@
         "min",
         "max"
       ],
-      "numArgs": 2,
       "example": "{{ random 0 20 }} -> 10",
       "description": "<p>Generate a random number between two values</p>\n",
       "requiresBlock": false
@@ -111,7 +100,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ remainder 10 6 }} -> 4",
       "description": "<p>Get the remainder when <code>a</code> is divided by <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -120,7 +108,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "example": "{{ round 10.3 }} -> 10",
       "description": "<p>Round the given number.</p>\n",
       "requiresBlock": false
@@ -130,7 +117,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ subtract 10 5 }} -> 5",
       "description": "<p>Return the product of <code>a</code> minus <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -139,7 +125,6 @@
       "args": [
         "array"
       ],
-      "numArgs": 1,
       "example": "{{ sum [1, 2, 3] }} -> 6",
       "description": "<p>Returns the sum of all numbers in the given array.</p>\n",
       "requiresBlock": false
@@ -151,7 +136,6 @@
         "array",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{ after ['a', 'b', 'c', 'd'] 2}} -> ['c', 'd']",
       "description": "<p>Returns all of the items in an array after the specified index. Opposite of <a href=\"#before\">before</a>.</p>\n",
       "requiresBlock": false
@@ -160,7 +144,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{ arrayify 'foo' }} -> ['foo']",
       "description": "<p>Cast the given <code>value</code> to an array.</p>\n",
       "requiresBlock": false
@@ -170,7 +153,6 @@
         "array",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{ before ['a', 'b', 'c', 'd'] 3}} -> ['a', 'b']",
       "description": "<p>Return all of the items in the collection before the specified count. Opposite of <a href=\"#after\">after</a>.</p>\n",
       "requiresBlock": false
@@ -180,7 +162,6 @@
         "array",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#eachIndex [1, 2, 3]}} {{item}} is {{index}} {{/eachIndex}} -> ' 1 is 0  2 is 1  3 is 2 '",
       "description": "<p>Iterates the array, listing an item and the index of it.</p>\n",
       "requiresBlock": true
@@ -191,7 +172,6 @@
         "value",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#filter [1, 2, 3] 2}}2 Found{{else}}2 not found{{/filter}} -> 2 Found",
       "description": "<p>Block helper that filters the given array and renders the block for values that evaluate to <code>true</code>, otherwise the inverse block is returned.</p>\n",
       "requiresBlock": true
@@ -201,7 +181,6 @@
         "array",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{first [1, 2, 3, 4] 2}} -> 1,2",
       "description": "<p>Returns the first item, or first <code>n</code> items of an array.</p>\n",
       "requiresBlock": false
@@ -211,7 +190,6 @@
         "array",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#forEach [{ 'name': 'John' }] }} {{ name }} {{/forEach}} -> ' John '",
       "description": "<p>Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block: - <code>index</code> - <code>total</code> - <code>isFirst</code> - <code>isLast</code> Also, <code>@index</code> is exposed as a private variable, and additional private variables may be defined as hash arguments.</p>\n",
       "requiresBlock": true
@@ -222,7 +200,6 @@
         "value",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#inArray [1, 2, 3] 2}} 2 exists {{else}} 2 does not exist {{/inArray}} -> ' 2 exists '",
       "description": "<p>Block helper that renders the block if an array has the given <code>value</code>. Optionally specify an inverse block to render when the array does not have the given value.</p>\n",
       "requiresBlock": true
@@ -231,7 +208,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{isArray [1, 2]}} -> true",
       "description": "<p>Returns true if <code>value</code> is an es5 array.</p>\n",
       "requiresBlock": false
@@ -241,7 +217,6 @@
         "array",
         "idx"
       ],
-      "numArgs": 2,
       "example": "{{itemAt [1, 2, 3] 1}} -> 2",
       "description": "<p>Returns the item from <code>array</code> at index <code>idx</code>.</p>\n",
       "requiresBlock": false
@@ -251,7 +226,6 @@
         "array",
         "separator"
       ],
-      "numArgs": 2,
       "example": "{{join [1, 2, 3]}} -> 1, 2, 3",
       "description": "<p>Join all elements of array into a string, optionally using a given separator.</p>\n",
       "requiresBlock": false
@@ -261,7 +235,6 @@
         "value",
         "length"
       ],
-      "numArgs": 2,
       "example": "{{equalsLength [1, 2, 3] 3}} -> true",
       "description": "<p>Returns true if the the length of the given <code>value</code> is equal to the given <code>length</code>. Can be used as a block or inline helper.</p>\n",
       "requiresBlock": false
@@ -271,7 +244,6 @@
         "value",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{last [1, 2, 3]}} -> 3",
       "description": "<p>Returns the last item, or last <code>n</code> items of an array or string. Opposite of <a href=\"#first\">first</a>.</p>\n",
       "requiresBlock": false
@@ -280,7 +252,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{length [1, 2, 3]}} -> 3",
       "description": "<p>Returns the length of the given string or array.</p>\n",
       "requiresBlock": false
@@ -290,7 +261,6 @@
         "value",
         "length"
       ],
-      "numArgs": 2,
       "example": "{{equalsLength [1, 2, 3] 3}} -> true",
       "description": "<p>Returns true if the the length of the given <code>value</code> is equal to the given <code>length</code>. Can be used as a block or inline helper.</p>\n",
       "requiresBlock": false
@@ -300,7 +270,6 @@
         "array",
         "fn"
       ],
-      "numArgs": 2,
       "example": "{{map [1, 2, 3] double}} -> [2, 4, 6]",
       "description": "<p>Returns a new array, created by calling <code>function</code> on each element of the given <code>array</code>. For example,</p>\n",
       "requiresBlock": false
@@ -310,7 +279,6 @@
         "collection",
         "prop"
       ],
-      "numArgs": 2,
       "example": "{{pluck [{ 'name': 'Bob' }] 'name' }} -> ['Bob']",
       "description": "<p>Map over the given object or array or objects and create an array of values from the given <code>prop</code>. Dot-notation may be used (as a string) to get nested properties.</p>\n",
       "requiresBlock": false
@@ -319,7 +287,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{reverse [1, 2, 3]}} -> [3, 2, 1]",
       "description": "<p>Reverse the elements in an array, or the characters in a string.</p>\n",
       "requiresBlock": false
@@ -330,7 +297,6 @@
         "iter",
         "provided"
       ],
-      "numArgs": 3,
       "example": "{{#some [1, \"b\", 3] isString}} string found {{else}} No string found {{/some}} -> ' string found '",
       "description": "<p>Block helper that returns the block if the callback returns true for some value in the given array.</p>\n",
       "requiresBlock": true
@@ -340,7 +306,6 @@
         "array",
         "key"
       ],
-      "numArgs": 2,
       "example": "{{ sort ['b', 'a', 'c'] }} -> ['a', 'b', 'c']",
       "description": "<p>Sort the given <code>array</code>. If an array of objects is passed, you may optionally pass a <code>key</code> to sort on as the second argument. You may alternatively pass a sorting function as the second argument.</p>\n",
       "requiresBlock": false
@@ -350,7 +315,6 @@
         "array",
         "props"
       ],
-      "numArgs": 2,
       "example": "{{ sortBy [{'a': 'zzz'}, {'a': 'aaa'}] 'a' }} -> [{'a':'aaa'},{'a':'zzz'}]",
       "description": "<p>Sort an <code>array</code>. If an array of objects is passed, you may optionally pass a <code>key</code> to sort on as the second argument. You may alternatively pass a sorting function as the second argument.</p>\n",
       "requiresBlock": false
@@ -361,7 +325,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withAfter [1, 2, 3] 1 }} {{this}} {{/withAfter}} -> ' 2  3 '",
       "description": "<p>Use the items in the array <em>after</em> the specified index as context inside a block. Opposite of <a href=\"#withBefore\">withBefore</a>.</p>\n",
       "requiresBlock": true
@@ -372,7 +335,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withBefore [1, 2, 3] 2 }} {{this}} {{/withBefore}} -> ' 1 '",
       "description": "<p>Use the items in the array <em>before</em> the specified index as context inside a block. Opposite of <a href=\"#withAfter\">withAfter</a>.</p>\n",
       "requiresBlock": true
@@ -383,7 +345,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withFirst [1, 2, 3] }}{{this}}{{/withFirst}} -> 1",
       "description": "<p>Use the first item in a collection inside a handlebars block expression. Opposite of <a href=\"#withLast\">withLast</a>.</p>\n",
       "requiresBlock": true
@@ -394,7 +355,6 @@
         "size",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withGroup [1, 2, 3, 4] 2}}{{#each this}}{{.}}{{/each}}<br>{{/withGroup}} -> 12<br>34<br>",
       "description": "<p>Block helper that groups array elements by given group <code>size</code>.</p>\n",
       "requiresBlock": true
@@ -405,7 +365,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withLast [1, 2, 3, 4]}}{{this}}{{/withLast}} -> 4",
       "description": "<p>Use the last item or <code>n</code> items in an array as context inside a block. Opposite of <a href=\"#withFirst\">withFirst</a>.</p>\n",
       "requiresBlock": true
@@ -416,7 +375,6 @@
         "prop",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withSort ['b', 'a', 'c']}}{{this}}{{/withSort}} -> abc",
       "description": "<p>Block helper that sorts a collection and exposes the sorted collection as context inside the block.</p>\n",
       "requiresBlock": true
@@ -426,7 +384,6 @@
         "array",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#each (unique ['a', 'a', 'c', 'b', 'e', 'e']) }}{{.}}{{/each}} -> acbe",
       "description": "<p>Block helper that return an array with all duplicate values removed. Best used along with a <a href=\"#each\">each</a> helper.</p>\n",
       "requiresBlock": true
@@ -437,7 +394,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "example": "{{ bytes 1386 1 }} -> 1.4 kB",
       "description": "<p>Format a number to it&#39;s equivalent in bytes. If a string is passed, it&#39;s length will be formatted and returned. <strong>Examples:</strong> - <code>&#39;foo&#39; =&gt; 3 B</code> - <code>13661855 =&gt; 13.66 MB</code> - <code>825399 =&gt; 825.39 kB</code> - <code>1396 =&gt; 1.4 kB</code></p>\n",
       "requiresBlock": false
@@ -446,7 +402,6 @@
       "args": [
         "num"
       ],
-      "numArgs": 1,
       "example": "{{ addCommas 1000000 }} -> 1,000,000",
       "description": "<p>Add commas to numbers</p>\n",
       "requiresBlock": false
@@ -455,7 +410,6 @@
       "args": [
         "num"
       ],
-      "numArgs": 1,
       "example": "{{ phoneNumber 8005551212 }} -> (800) 555-1212",
       "description": "<p>Convert a string or number to a formatted phone number.</p>\n",
       "requiresBlock": false
@@ -465,7 +419,6 @@
         "number",
         "precision"
       ],
-      "numArgs": 2,
       "example": "{{ toAbbr 10123 2 }} -> 10.12k",
       "description": "<p>Abbreviate numbers to the given number of <code>precision</code>. This for general numbers, not size in bytes.</p>\n",
       "requiresBlock": false
@@ -475,7 +428,6 @@
         "number",
         "fractionDigits"
       ],
-      "numArgs": 2,
       "example": "{{ toExponential 10123 2 }} -> 1.01e+4",
       "description": "<p>Returns a string representing the given number in exponential notation.</p>\n",
       "requiresBlock": false
@@ -485,7 +437,6 @@
         "number",
         "digits"
       ],
-      "numArgs": 2,
       "example": "{{ toFixed 1.1234 2 }} -> 1.12",
       "description": "<p>Formats the given number using fixed-point notation.</p>\n",
       "requiresBlock": false
@@ -494,7 +445,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "description": "<p>Convert input to a float.</p>\n",
       "requiresBlock": false
     },
@@ -502,7 +452,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "description": "<p>Convert input to an integer.</p>\n",
       "requiresBlock": false
     },
@@ -511,7 +460,6 @@
         "number",
         "precision"
       ],
-      "numArgs": 2,
       "example": "{{toPrecision '1.1234' 2}} -> 1.1",
       "description": "<p>Returns a string representing the <code>Number</code> object to the specified precision.</p>\n",
       "requiresBlock": false
@@ -522,7 +470,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ encodeURI 'https://myurl?Hello There' }} -> https%3A%2F%2Fmyurl%3FHello%20There",
       "description": "<p>Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character.</p>\n",
       "requiresBlock": false
@@ -531,7 +478,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ escape 'https://myurl?Hello+There' }} -> https%3A%2F%2Fmyurl%3FHello%2BThere",
       "description": "<p>Escape the given string by replacing characters with escape sequences. Useful for allowing the string to be used in a URL, etc.</p>\n",
       "requiresBlock": false
@@ -540,7 +486,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ decodeURI 'https://myurl?Hello%20There' }} -> https://myurl?Hello There",
       "description": "<p>Decode a Uniform Resource Identifier (URI) component.</p>\n",
       "requiresBlock": false
@@ -550,7 +495,6 @@
         "base",
         "href"
       ],
-      "numArgs": 2,
       "example": "{{ urlResolve 'https://myurl' '/api/test' }} -> https://myurl/api/test",
       "description": "<p>Take a base URL, and a href URL, and resolve them as a browser would for an anchor tag.</p>\n",
       "requiresBlock": false
@@ -559,7 +503,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ urlParse 'https://myurl/api/test' }}",
       "description": "<p>Parses a <code>url</code> string into an object.</p>\n",
       "requiresBlock": false
@@ -568,7 +511,6 @@
       "args": [
         "url"
       ],
-      "numArgs": 1,
       "example": "{{ stripQuerystring 'https://myurl/api/test?foo=bar' }} -> 'https://myurl/api/test'",
       "description": "<p>Strip the query string from the given <code>url</code>.</p>\n",
       "requiresBlock": false
@@ -577,7 +519,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ stripProtocol 'https://myurl/api/test' }} -> '//myurl/api/test'",
       "description": "<p>Strip protocol from a <code>url</code>. Useful for displaying media that may have an &#39;http&#39; protocol on secure connections.</p>\n",
       "requiresBlock": false
@@ -589,7 +530,6 @@
         "str",
         "suffix"
       ],
-      "numArgs": 2,
       "example": "{{append 'index' '.html'}} -> index.html",
       "description": "<p>Append the specified <code>suffix</code> to the given string.</p>\n",
       "requiresBlock": false
@@ -598,7 +538,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{camelcase 'foo bar baz'}} ->  fooBarBaz",
       "description": "<p>camelCase the characters in the given <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -607,7 +546,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{capitalize 'foo bar baz'}} ->  Foo bar baz",
       "description": "<p>Capitalize the first word in a sentence.</p>\n",
       "requiresBlock": false
@@ -616,7 +554,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ capitalizeAll 'foo bar baz'}} ->  Foo Bar Baz",
       "description": "<p>Capitalize all words in a string.</p>\n",
       "requiresBlock": false
@@ -626,7 +563,6 @@
         "str",
         "spaces"
       ],
-      "numArgs": 2,
       "example": "{{ center 'test' 1}} -> ' test '",
       "description": "<p>Center a string using non-breaking spaces</p>\n",
       "requiresBlock": false
@@ -635,7 +571,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{ chop ' ABC '}} -> ABC",
       "description": "<p>Like trim, but removes both extraneous whitespace <strong>and non-word characters</strong> from the beginning and end of a string.</p>\n",
       "requiresBlock": false
@@ -644,7 +579,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{dashcase 'a-b-c d_e'}} -> a-b-c-d-e",
       "description": "<p>dash-case the characters in <code>string</code>. Replaces non-word characters and periods with hyphens.</p>\n",
       "requiresBlock": false
@@ -653,7 +587,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{dotcase 'a-b-c d_e'}} -> a.b.c.d.e",
       "description": "<p>dot.case the characters in <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -662,7 +595,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{downcase 'aBcDeF'}} -> abcdef",
       "description": "<p>Lowercase all of the characters in the given string. Alias for <a href=\"#lowercase\">lowercase</a>.</p>\n",
       "requiresBlock": false
@@ -672,7 +604,6 @@
         "str",
         "length"
       ],
-      "numArgs": 2,
       "example": "{{ellipsis 'foo bar baz' 7}} -> foo bar…",
       "description": "<p>Truncates a string to the specified <code>length</code>, and appends it with an elipsis, <code>…</code>.</p>\n",
       "requiresBlock": false
@@ -681,7 +612,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{hyphenate 'foo bar baz qux'}} -> foo-bar-baz-qux",
       "description": "<p>Replace spaces in a string with hyphens.</p>\n",
       "requiresBlock": false
@@ -690,7 +620,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{isString 'foo'}} -> true",
       "description": "<p>Return true if <code>value</code> is a string.</p>\n",
       "requiresBlock": false
@@ -699,7 +628,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{lowercase 'Foo BAR baZ'}} -> foo bar baz",
       "description": "<p>Lowercase all characters in the given string.</p>\n",
       "requiresBlock": false
@@ -709,7 +637,6 @@
         "str",
         "substring"
       ],
-      "numArgs": 2,
       "example": "{{occurrences 'foo bar foo bar baz' 'foo'}} -> 2",
       "description": "<p>Return the number of occurrences of <code>substring</code> within the given <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -718,7 +645,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{pascalcase 'foo bar baz'}} -> FooBarBaz",
       "description": "<p>PascalCase the characters in <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -727,7 +653,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{pathcase 'a-b-c d_e'}} -> a/b/c/d/e",
       "description": "<p>path/case the characters in <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -736,7 +661,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{plusify 'foo bar baz'}} -> foo+bar+baz",
       "description": "<p>Replace spaces in the given string with pluses.</p>\n",
       "requiresBlock": false
@@ -746,7 +670,6 @@
         "str",
         "prefix"
       ],
-      "numArgs": 2,
       "example": "{{prepend 'bar' 'foo-'}} -> foo-bar",
       "description": "<p>Prepends the given <code>string</code> with the specified <code>prefix</code>.</p>\n",
       "requiresBlock": false
@@ -756,7 +679,6 @@
         "str",
         "substring"
       ],
-      "numArgs": 2,
       "example": "{{remove 'a b a b a b' 'a '}} -> b b b",
       "description": "<p>Remove all occurrences of <code>substring</code> from the given <code>str</code>.</p>\n",
       "requiresBlock": false
@@ -766,7 +688,6 @@
         "str",
         "substring"
       ],
-      "numArgs": 2,
       "example": "{{removeFirst 'a b a b a b' 'a'}} -> ' b a b a b'",
       "description": "<p>Remove the first occurrence of <code>substring</code> from the given <code>str</code>.</p>\n",
       "requiresBlock": false
@@ -777,7 +698,6 @@
         "a",
         "b"
       ],
-      "numArgs": 3,
       "example": "{{replace 'a b a b a b' 'a' 'z'}} -> z b z b z b",
       "description": "<p>Replace all occurrences of substring <code>a</code> with substring <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -788,7 +708,6 @@
         "a",
         "b"
       ],
-      "numArgs": 3,
       "example": "{{replaceFirst 'a b a b a b' 'a' 'z'}} -> z b a b a b",
       "description": "<p>Replace the first occurrence of substring <code>a</code> with substring <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -797,7 +716,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{sentence 'hello world. goodbye world.'}} -> Hello world. Goodbye world.",
       "description": "<p>Sentence case the given string</p>\n",
       "requiresBlock": false
@@ -806,7 +724,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{snakecase 'a-b-c d_e'}} -> a_b_c_d_e",
       "description": "<p>snake_case the characters in the given <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -815,7 +732,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{split 'a,b,c'}} -> ['a', 'b', 'c']",
       "description": "<p>Split <code>string</code> by the given <code>character</code>.</p>\n",
       "requiresBlock": false
@@ -826,7 +742,6 @@
         "testString",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#startsWith 'Goodbye' 'Hello, world!'}}Yep{{else}}Nope{{/startsWith}} -> Nope",
       "description": "<p>Tests whether a string begins with the given prefix.</p>\n",
       "requiresBlock": true
@@ -835,7 +750,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{titleize 'this is title case' }} -> This Is Title Case",
       "description": "<p>Title case the given string.</p>\n",
       "requiresBlock": false
@@ -844,7 +758,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{trim '  ABC  ' }} -> ABC",
       "description": "<p>Removes extraneous whitespace from the beginning and end of a string.</p>\n",
       "requiresBlock": false
@@ -853,7 +766,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{trimLeft '  ABC ' }} -> 'ABC '",
       "description": "<p>Removes extraneous whitespace from the beginning of a string.</p>\n",
       "requiresBlock": false
@@ -862,7 +774,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{trimRight '  ABC ' }} ->  '  ABC'",
       "description": "<p>Removes extraneous whitespace from the end of a string.</p>\n",
       "requiresBlock": false
@@ -873,7 +784,6 @@
         "limit",
         "suffix"
       ],
-      "numArgs": 3,
       "example": "{{truncate 'foo bar baz' 7 }} -> foo bar",
       "description": "<p>Truncate a string to the specified <code>length</code>. Also see <a href=\"#ellipsis\">ellipsis</a>.</p>\n",
       "requiresBlock": false
@@ -884,7 +794,6 @@
         "limit",
         "suffix"
       ],
-      "numArgs": 3,
       "example": "{{truncateWords 'foo bar baz' 1 }} -> foo…",
       "description": "<p>Truncate a string to have the specified number of words. Also see <a href=\"#truncate\">truncate</a>.</p>\n",
       "requiresBlock": false
@@ -893,7 +802,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{upcase 'aBcDef'}} -> ABCDEF",
       "description": "<p>Uppercase all of the characters in the given string. Alias for <a href=\"#uppercase\">uppercase</a>.</p>\n",
       "requiresBlock": false
@@ -903,7 +811,6 @@
         "str",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{uppercase 'aBcDef'}} -> ABCDEF",
       "description": "<p>Uppercase all of the characters in the given string. If used as a block helper it will uppercase the entire block. This helper does not support inverse blocks.</p>\n",
       "requiresBlock": false
@@ -912,7 +819,6 @@
       "args": [
         "num"
       ],
-      "numArgs": 1,
       "example": "{{lorem 11}} -> Lorem ipsum",
       "description": "<p>Takes a number and returns that many charaters of Lorem Ipsum</p>\n",
       "requiresBlock": false
@@ -925,7 +831,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#and great magnificent}}both{{else}}no{{/and}} -> no",
       "description": "<p>Helper that renders the block if <strong>both</strong> of the given values are truthy. If an inverse block is specified it will be rendered when falsy. Works as a block helper, inline helper or subexpression.</p>\n",
       "requiresBlock": true
@@ -937,7 +842,6 @@
         "b",
         "options"
       ],
-      "numArgs": 4,
       "example": "{{compare 10 '<' 5 }} -> false",
       "description": "<p>Render a block when a comparison of the first and third arguments returns true. The second argument is the [arithemetic operator][operators] to use. You may also optionally specify an inverse block to render when falsy.</p>\n",
       "requiresBlock": false
@@ -949,7 +853,6 @@
         "[startIndex=0]",
         "options"
       ],
-      "numArgs": 4,
       "example": "{{#contains ['a', 'b', 'c'] 'd'}} This will not be rendered. {{else}} This will be rendered. {{/contains}} -> ' This will be rendered. '",
       "description": "<p>Block helper that renders the block if <code>collection</code> has the given <code>value</code>, using strict equality (<code>===</code>) for comparison, otherwise the inverse block is rendered (if specified). If a <code>startIndex</code> is specified and is negative, it is used as the offset from the end of the collection.</p>\n",
       "requiresBlock": true
@@ -959,7 +862,6 @@
         "value",
         "defaultValue"
       ],
-      "numArgs": 2,
       "example": "{{default null null 'default'}} -> default",
       "description": "<p>Returns the first value that is not undefined, otherwise the &#39;default&#39; value is returned.</p>\n",
       "requiresBlock": false
@@ -970,7 +872,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#eq 3 3}}equal{{else}}not equal{{/eq}} -> equal",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -981,7 +882,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#gt 4 3}} greater than{{else}} not greater than{{/gt}} -> ' greater than'",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>greater than</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -992,7 +892,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#gte 4 3}} greater than or equal{{else}} not greater than{{/gte}} -> ' greater than or equal'",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>greater than or equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -1003,7 +902,6 @@
         "pattern",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#has 'foobar' 'foo'}}has it{{else}}doesn't{{/has}} -> has it",
       "description": "<p>Block helper that renders a block if <code>value</code> has <code>pattern</code>. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1013,7 +911,6 @@
         "val",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{isFalsey '' }} -> true",
       "description": "<p>Returns true if the given <code>value</code> is falsey. Uses the [falsey][] library for comparisons. Please see that library for more information or to report bugs with this helper.</p>\n",
       "requiresBlock": false
@@ -1023,7 +920,6 @@
         "val",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{isTruthy '12' }} -> true",
       "description": "<p>Returns true if the given <code>value</code> is truthy. Uses the [falsey][] library for comparisons. Please see that library for more information or to report bugs with this helper.</p>\n",
       "requiresBlock": false
@@ -1033,7 +929,6 @@
         "number",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#ifEven 2}} even {{else}} odd {{/ifEven}} -> ' even '",
       "description": "<p>Return true if the given value is an even number.</p>\n",
       "requiresBlock": true
@@ -1044,7 +939,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#ifNth 2 10}}remainder{{else}}no remainder{{/ifNth}} -> remainder",
       "description": "<p>Conditionally renders a block if the remainder is zero when <code>b</code> operand is divided by <code>a</code>. If an inverse block is specified it will be rendered when the remainder is <strong>not zero</strong>.</p>\n",
       "requiresBlock": true
@@ -1054,7 +948,6 @@
         "value",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#ifOdd 3}}odd{{else}}even{{/ifOdd}} -> odd",
       "description": "<p>Block helper that renders a block if <code>value</code> is <strong>an odd number</strong>. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1065,7 +958,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#is 3 3}} is {{else}} is not {{/is}} -> ' is '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. Similar to <a href=\"#eq\">eq</a> but does not do strict equality.</p>\n",
       "requiresBlock": true
@@ -1076,7 +968,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#isnt 3 3}} isnt {{else}} is {{/isnt}} -> ' is '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>not equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. Similar to <a href=\"#unlesseq\">unlessEq</a> but does not use strict equality for comparisons.</p>\n",
       "requiresBlock": true
@@ -1086,7 +977,6 @@
         "context",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#lt 2 3}} less than {{else}} more than or equal {{/lt}} -> ' less than '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>less than</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -1097,7 +987,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#lte 2 3}} less than or equal {{else}} more than {{/lte}} -> ' less than or equal '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>less than or equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -1108,7 +997,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#neither null null}}both falsey{{else}}both not falsey{{/neither}} -> both falsey",
       "description": "<p>Block helper that renders a block if <strong>neither of</strong> the given values are truthy. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1118,7 +1006,6 @@
         "val",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#not undefined }}falsey{{else}}not falsey{{/not}} -> falsey",
       "description": "<p>Returns true if <code>val</code> is falsey. Works as a block or inline helper.</p>\n",
       "requiresBlock": true
@@ -1128,7 +1015,6 @@
         "arguments",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#or 1 2 undefined }} at least one truthy {{else}} all falsey {{/or}} -> ' at least one truthy '",
       "description": "<p>Block helper that renders a block if <strong>any of</strong> the given values is truthy. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1139,7 +1025,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessEq 2 1 }} not equal {{else}} equal {{/unlessEq}} -> ' not equal '",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is equal to <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1150,7 +1035,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessGt 20 1 }} not greater than {{else}} greater than {{/unlessGt}} -> ' greater than '",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is greater than <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1161,7 +1045,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessLt 20 1 }}greater than or equal{{else}}less than{{/unlessLt}} -> greater than or equal",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is less than <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1172,7 +1055,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessGteq 20 1 }} less than {{else}}greater than or equal to{{/unlessGteq}} -> greater than or equal to",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is greater than or equal to <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1183,7 +1065,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessLteq 20 1 }} greater than {{else}} less than or equal to {{/unlessLteq}} -> ' greater than '",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is less than or equal to <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1194,7 +1075,6 @@
       "args": [
         "objects"
       ],
-      "numArgs": 1,
       "description": "<p>Extend the context with the properties of other objects. A shallow merge is performed to avoid mutating the context.</p>\n",
       "requiresBlock": false
     },
@@ -1203,7 +1083,6 @@
         "context",
         "options"
       ],
-      "numArgs": 2,
       "description": "<p>Block helper that iterates over the properties of an object, exposing each key and value on the context.</p>\n",
       "requiresBlock": true
     },
@@ -1212,7 +1091,6 @@
         "obj",
         "options"
       ],
-      "numArgs": 2,
       "description": "<p>Block helper that iterates over the <strong>own</strong> properties of an object, exposing each key and value on the context.</p>\n",
       "requiresBlock": true
     },
@@ -1220,7 +1098,6 @@
       "args": [
         "prop"
       ],
-      "numArgs": 1,
       "description": "<p>Take arguments and, if they are string or number, convert them to a dot-delineated object property path.</p>\n",
       "requiresBlock": false
     },
@@ -1230,7 +1107,6 @@
         "context",
         "options"
       ],
-      "numArgs": 3,
       "description": "<p>Use property paths (<code>a.b.c</code>) to get a value or nested value from the context. Works as a regular helper or block helper.</p>\n",
       "requiresBlock": true
     },
@@ -1239,7 +1115,6 @@
         "prop",
         "context"
       ],
-      "numArgs": 2,
       "description": "<p>Use property paths (<code>a.b.c</code>) to get an object from the context. Differs from the <code>get</code> helper in that this helper will return the actual object, including the given property key. Also, this helper does not work as a block helper.</p>\n",
       "requiresBlock": false
     },
@@ -1248,7 +1123,6 @@
         "key",
         "context"
       ],
-      "numArgs": 2,
       "description": "<p>Return true if <code>key</code> is an own, enumerable property of the given <code>context</code> object.</p>\n",
       "requiresBlock": false
     },
@@ -1256,7 +1130,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "description": "<p>Return true if <code>value</code> is an object.</p>\n",
       "requiresBlock": false
     },
@@ -1264,7 +1137,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "description": "<p>Parses the given string using <code>JSON.parse</code>.</p>\n",
       "requiresBlock": true
     },
@@ -1272,7 +1144,6 @@
       "args": [
         "obj"
       ],
-      "numArgs": 1,
       "description": "<p>Stringify an object using <code>JSON.stringify</code>.</p>\n",
       "requiresBlock": false
     },
@@ -1281,7 +1152,6 @@
         "object",
         "objects"
       ],
-      "numArgs": 2,
       "description": "<p>Deeply merge the properties of the given <code>objects</code> with the context object.</p>\n",
       "requiresBlock": false
     },
@@ -1289,7 +1159,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "description": "<p>Parses the given string using <code>JSON.parse</code>.</p>\n",
       "requiresBlock": true
     },
@@ -1299,7 +1168,6 @@
         "context",
         "options"
       ],
-      "numArgs": 3,
       "description": "<p>Pick properties from the context object.</p>\n",
       "requiresBlock": true
     },
@@ -1307,7 +1175,6 @@
       "args": [
         "obj"
       ],
-      "numArgs": 1,
       "description": "<p>Stringify an object using <code>JSON.stringify</code>.</p>\n",
       "requiresBlock": false
     }
@@ -1317,7 +1184,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{toRegex 'foo'}} -> /foo/",
       "description": "<p>Convert the given string to a regular expression.</p>\n",
       "requiresBlock": false
@@ -1326,7 +1192,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{test 'foobar' (toRegex 'foo')}} -> true",
       "description": "<p>Returns true if the given <code>str</code> matches the given regex. A regex can be passed on the context, or using the <a href=\"#toregex\">toRegex</a> helper as a subexpression.</p>\n",
       "requiresBlock": false
@@ -1335,7 +1200,6 @@
   "uuid": {
     "uuid": {
       "args": [],
-      "numArgs": 0,
       "example": "{{ uuid }} -> f34ebc66-93bd-4f7c-b79b-92b5569138bc",
       "description": "<p>Generates a UUID, using the V4 method (identical to the browser crypto.randomUUID function).</p>\n",
       "requiresBlock": false
@@ -1344,10 +1208,10 @@
   "date": {
     "date": {
       "args": [
-        "datetime",
+        "[datetime]",
-        "format"
+        "[format]",
+        "[options]"
       ],
-      "numArgs": 2,
       "example": "{{date now \"DD-MM-YYYY\" \"America/New_York\" }} -> 21-01-2021",
       "description": "<p>Format a date using moment.js date formatting - the timezone is optional and uses the tz database.</p>\n"
     },
@@ -1356,7 +1220,6 @@
         "time",
         "durationType"
       ],
-      "numArgs": 2,
       "example": "{{duration 8 \"seconds\"}} -> a few seconds",
       "description": "<p>Produce a humanized duration left/until given an amount of time and the type of time measurement.</p>\n"
     }

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