@budibase/frontend-core 3.45.0 → 3.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "v3.45.0",
+  "version": "v3.46.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -17,11 +17,12 @@
     "@budibase/types": "*",
     "ai": "^7.0.77",
     "dayjs": "^1.10.8",
+    "highlight.js": "^11.11.1",
     "lodash": "4.18.1",
     "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
-    "vitest": "^4.1.0"
+    "vitest": "^5.0.0"
   },
-  "gitHead": "39146fbea58fca5022556582a42e57a794fdf8ad"
+  "gitHead": "1444a702ce29cf158b10c31d3f205fc84c463169"
 }

package/src/components/ArrayValueInput.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+  import { tick } from "svelte"
+  import {
+    Icon,
+    Popover,
+    PopoverAlignment,
+    type PopoverAPI,
+  } from "@budibase/bbui"
+
+  interface Props {
+    value?: string[]
+    disabled?: boolean
+    placeholder?: string
+    onchange?: (value: string[]) => void
+  }
+
+  let {
+    value = [],
+    disabled = false,
+    placeholder = "Add values",
+    onchange,
+  }: Props = $props()
+
+  let popover = $state<PopoverAPI>()
+  let anchor = $state<HTMLElement>()
+  let addInput = $state<HTMLInputElement>()
+  let content = $state<HTMLElement>()
+  let draft = $state("")
+  let open = $state(false)
+
+  const show = () => {
+    if (!disabled) {
+      popover?.show()
+    }
+  }
+
+  const onTriggerKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      if (disabled) {
+        return
+      }
+      if (open) {
+        popover?.hide()
+      } else {
+        popover?.show()
+      }
+    }
+  }
+
+  const onPopoverKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      event.stopPropagation()
+      popover?.hide()
+    }
+  }
+
+  const onOpen = async () => {
+    open = true
+    await tick()
+    addInput?.focus()
+  }
+
+  const onClose = () => {
+    open = false
+    const active = document.activeElement
+    if (
+      !active ||
+      active === document.body ||
+      (content && content.contains(active))
+    ) {
+      anchor?.focus()
+    }
+  }
+
+  const displayValue = $derived(
+    value.length ? `(${value.length}) ${value.join(", ")}` : ""
+  )
+
+  const add = () => {
+    const entries = draft
+      .split(",")
+      .map(entry => entry.trim())
+      .filter(Boolean)
+    const next = entries.reduce(
+      (acc, entry) => (acc.includes(entry) ? acc : [...acc, entry]),
+      [...value]
+    )
+    draft = ""
+    if (next.length !== value.length) {
+      onchange?.(next)
+    }
+  }
+
+  const remove = (index: number) => {
+    onchange?.(value.filter((_, i) => i !== index))
+  }
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      add()
+    }
+  }
+</script>
+
+<div
+  bind:this={anchor}
+  class="spectrum-InputGroup array-input"
+  class:is-disabled={disabled}
+  role="button"
+  tabindex={disabled ? -1 : 0}
+  aria-haspopup="dialog"
+  aria-expanded={open}
+  aria-disabled={disabled}
+  onclick={show}
+  onkeydown={onTriggerKeydown}
+>
+  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
+    <input
+      {disabled}
+      readonly
+      type="text"
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+      {placeholder}
+      value={displayValue}
+    />
+  </div>
+  {#if !disabled}
+    <button
+      type="button"
+      class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+      tabindex="-1"
+    >
+      <Icon name="list-bullets" />
+    </button>
+  {/if}
+</div>
+
+<Popover
+  bind:this={popover}
+  {anchor}
+  align={PopoverAlignment.Left}
+  widthMode="fixed-to-anchor"
+  resizable={false}
+  on:open={onOpen}
+  on:close={onClose}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div bind:this={content} class="array-popover" onkeydown={onPopoverKeydown}>
+    {#each value as entry, index}
+      <div class="array-entry">
+        <span class="array-entry-label">{entry}</span>
+        <button
+          type="button"
+          class="array-entry-remove"
+          aria-label="Remove {entry}"
+          onclick={() => remove(index)}
+        >
+          <Icon name="x" size="XS" />
+        </button>
+      </div>
+    {/each}
+    <div class="array-add">
+      <input
+        bind:this={addInput}
+        type="text"
+        class="spectrum-Textfield-input array-add-input"
+        placeholder="Enter value"
+        bind:value={draft}
+        onkeydown={onKeydown}
+        onblur={add}
+      />
+      <button
+        type="button"
+        class="array-entry-remove"
+        aria-label="Add value"
+        onclick={add}
+      >
+        <Icon name="plus" size="XS" />
+      </button>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .array-input {
+    width: 100%;
+    min-width: 0;
+    cursor: pointer;
+  }
+  .array-input .spectrum-Textfield {
+    width: 100%;
+    min-width: 0;
+  }
+  .array-input .spectrum-Textfield-input {
+    pointer-events: none;
+    width: 100%;
+  }
+  .array-input.is-disabled {
+    pointer-events: none;
+  }
+  .array-input:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-blue-400);
+    border-radius: 4px;
+  }
+
+  .array-popover {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-s);
+  }
+  .array-entry,
+  .array-add {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-s);
+    min-height: 28px;
+  }
+  .array-entry-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-left: var(--spacing-xs);
+  }
+  .array-entry-remove {
+    display: flex;
+    padding: 4px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  .array-add-input {
+    flex: 1;
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+    background: var(--spectrum-global-color-gray-50);
+    color: inherit;
+    padding: 4px var(--spacing-s);
+    height: 28px;
+  }
+  .array-add-input:focus {
+    outline: none;
+    border-color: var(--spectrum-global-color-blue-400);
+  }
+</style>

package/src/components/ChangePasswordModal.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import { ModalContent, Body, notifications } from "@budibase/bbui"
-  import PasswordRepeatInput from "./PasswordRepeatInput.svelte"
   import type { APIClient } from "@budibase/frontend-core"
+  import {
+    DEFAULT_PASSWORD_POLICY,
+    resolveTranslationGroup,
+  } from "@budibase/shared-core"
+  import type { PasswordPolicy } from "@budibase/types"
   import { createEventDispatcher } from "svelte"
-  import { resolveTranslationGroup } from "@budibase/shared-core"
+  import PasswordRepeatInput from "./PasswordRepeatInput.svelte"
 
   export let API: APIClient
-  export let passwordMinLength: string | undefined = undefined
+  export let passwordPolicy: PasswordPolicy = DEFAULT_PASSWORD_POLICY
   export let notifySuccess = notifications.success
   export let notifyError = notifications.error
   // Get the default translations for the password modal and derive a type from it.
@@ -55,7 +59,7 @@
   <PasswordRepeatInput
     bind:password
     bind:error
-    minLength={passwordMinLength}
+    policy={passwordPolicy}
     labels={resolvedLabels}
   />
 </ModalContent>

package/src/components/Chatbox/index.svelte

@@ -14,7 +14,7 @@
     EscalationContextDoc,
     EscalationRespondResult,
   } from "@budibase/types"
-  import { EscalateToolResultStatus } from "@budibase/types"
+  import { ApprovalToolResultStatus } from "@budibase/types"
   import { Header } from "@budibase/shared-core"
   import { tick, untrack } from "svelte"
   import { createAPIClient } from "@budibase/frontend-core"
@@ -87,7 +87,7 @@
   // Only a genuinely-raised escalation gets the approval card
   const isRaisedEscalation = (output: unknown) =>
     (output as { status?: string } | undefined)?.status ===
-    EscalateToolResultStatus.PENDING_APPROVAL
+    ApprovalToolResultStatus.PENDING_APPROVAL
 
   // The escalate part's input/output are loosely typed by the AI SDK, so the
   // casts live here rather than cluttering the template.
@@ -326,7 +326,7 @@
           | { status?: string; escalationId?: string }
           | undefined
         if (
-          output?.status === EscalateToolResultStatus.PENDING_APPROVAL &&
+          output?.status === ApprovalToolResultStatus.PENDING_APPROVAL &&
           output.escalationId
         ) {
           ids.push(output.escalationId)

package/src/components/FilterField.svelte

@@ -9,6 +9,7 @@
     Button,
     Select,
   } from "@budibase/bbui"
+  import ArrayValueInput from "./ArrayValueInput.svelte"
 
   import FilterUsers from "./FilterUsers.svelte"
   import { FieldType, ArrayOperator } from "@budibase/types"
@@ -22,10 +23,10 @@
   export let bindings = []
   export let allowBindings = false
   export let schemaFields
-  export let panel
-  export let drawerTitle
-  export let toReadable
-  export let toRuntime
+  export let panel = undefined
+  export let drawerTitle = undefined
+  export let toReadable = undefined
+  export let toRuntime = undefined
   export let evaluationContext = {}
   export let bindingValueType = Constants.FilterValueType.BINDING
   export let useConditionValueControls = false
@@ -82,9 +83,11 @@
     } else {
       return !value
     }
-    return links.every(link =>
-      getSchema(filter)?.constraints?.inclusion?.includes(link)
-    )
+    const inclusion = getSchema(filter)?.constraints?.inclusion
+    if (!inclusion?.length) {
+      return true
+    }
+    return links.every(link => inclusion.includes(link))
   }
 
   const isValidBoolean = value => {
@@ -195,6 +198,12 @@
               value={readableValue}
               on:change={onChange}
             />
+          {:else if filter.type === FieldType.ARRAY && useConditionValueControls && !getFieldOptions(filter.field).length}
+            <ArrayValueInput
+              disabled={filter.noValue}
+              value={Array.isArray(readableValue) ? readableValue : []}
+              onchange={value => onChange({ detail: value })}
+            />
           {:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && (filter.operator === ArrayOperator.ONE_OF || filter.operator === ArrayOperator.NOT_ONE_OF))}
             <Multiselect
               disabled={filter.noValue}
@@ -295,15 +304,17 @@
     border-bottom-right-radius: 0px;
   }
 
+  .field :global(.spectrum-InputGroup.spectrum-Datepicker) {
+    min-width: unset;
+  }
+
   .field-wrap.bindings
     .field
     :global(.spectrum-InputGroup.spectrum-Datepicker) {
-    min-width: unset;
     border-radius: 0px;
   }
 
-  .field-wrap.bindings
-    .field
+  .field
     :global(
       .spectrum-InputGroup.spectrum-Datepicker
         .spectrum-Textfield-input.spectrum-InputGroup-input

package/src/components/PasswordRepeatInput.svelte

@@ -1,18 +1,32 @@
 <script lang="ts">
   import { FancyForm, FancyInput } from "@budibase/bbui"
+  import {
+    DEFAULT_PASSWORD_POLICY,
+    validatePasswordPolicy,
+  } from "@budibase/shared-core"
+  import type { PasswordPolicy } from "@budibase/types"
   import { createValidationStore, requiredValidator } from "../utils/validation"
 
   export let passwordForm: FancyForm | undefined = undefined
   export let password: string
   export let error: string
-  export let minLength = "12"
+  export let policy: PasswordPolicy = DEFAULT_PASSWORD_POLICY
   export let labels: any = {}
 
   const validatePassword = (value: string | undefined) => {
-    if (!value || value.length < parseInt(minLength)) {
+    const result = validatePasswordPolicy({ password: value, policy })
+    if (!result.valid) {
+      if (!value || value.length < policy.minLength) {
+        return (
+          labels?.minLengthText?.replace(
+            "{minLength}",
+            policy.minLength.toString()
+          ) || result.error
+        )
+      }
       return (
-        labels?.minLengthText?.replace("{minLength}", minLength) ||
-        `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
+        result.error ||
+        `Password must contain no more than ${policy.maxLength} characters.`
       )
     }
     return null

package/src/components/index.ts

@@ -6,6 +6,7 @@ export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
 export { default as CoreFilterBuilder } from "./CoreFilterBuilder.svelte"
+export { default as FilterField } from "./FilterField.svelte"
 export { default as FilterUsers } from "./FilterUsers.svelte"
 export { default as ChangePasswordModal } from "./ChangePasswordModal.svelte"
 export { default as ProfileModal } from "./ProfileModal.svelte"

package/src/utils/jsonFormatter.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest"
+import { format } from "./jsonFormatter"
+
+describe("JSON formatter", () => {
+  it("escapes markup in raw string values", () => {
+    const formatted = format("<img src=x onerror=alert(window.xssproof)>")
+
+    expect(formatted).toContain(
+      "&lt;img src=x onerror=alert(window.xssproof)&gt;"
+    )
+    expect(formatted).not.toContain("<img")
+  })
+
+  it("escapes markup in JSON string values and keys", () => {
+    const formatted = format({
+      "<script>": "<img src=x>",
+    })
+
+    expect(formatted).not.toContain("<script>")
+    expect(formatted).not.toContain("<img")
+  })
+
+  it("preserves raw strings without adding JSON quotes", () => {
+    expect(format("hello & goodbye")).toBe(
+      '<span class="json-highlight">hello &amp; goodbye</span>'
+    )
+  })
+
+  it("formats undefined binding results", () => {
+    expect(format(undefined)).toBe(
+      '<span class="json-highlight">undefined</span>'
+    )
+  })
+
+  it("preserves indentation when formatting objects", () => {
+    expect(format({ value: 42 }).replace(/<[^>]*>/g, "")).toBe(
+      "{\n  &quot;value&quot;: 42\n}"
+    )
+  })
+
+  it("highlights numbers with negative exponents as one token", () => {
+    expect(format(1e-7)).toContain('<span class="hljs-number">1e-7</span>')
+  })
+
+  it.each([true, false, null])("highlights the literal %s", value => {
+    const formatted = format(value)
+
+    expect(formatted).toContain('class="hljs-literal"')
+    expect(formatted.replace(/<[^>]*>/g, "")).toBe(String(value))
+  })
+})

package/src/utils/jsonFormatter.ts

@@ -1,71 +1,14 @@
-import { JSONValue } from "@budibase/types"
-
-export type ColorsOptions = {
-  keyColor?: string
-  numberColor?: string
-  stringColor?: string
-  trueColor?: string
-  falseColor?: string
-  nullColor?: string
-}
-
-const defaultColors: ColorsOptions = {
-  keyColor: "dimgray",
-  numberColor: "lightskyblue",
-  stringColor: "lightcoral",
-  trueColor: "lightseagreen",
-  falseColor: "#f66578",
-  nullColor: "cornflowerblue",
-}
-
-const entityMap = {
-  "&": "&",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;",
-  "`": "&#x60;",
-  "=": "&#x3D;",
-}
-
-function escapeHtml(html: string) {
-  return String(html).replace(/[&<>"'`=]/g, function (s) {
-    return entityMap[s as keyof typeof entityMap]
-  })
-}
-
-export function format(json: JSONValue, colorOptions: ColorsOptions = {}) {
-  const valueType = typeof json
-  let jsonString =
-    typeof json === "string" ? json : JSON.stringify(json, null, 2) || valueType
-  let colors = Object.assign({}, defaultColors, colorOptions)
-  jsonString = jsonString
-    .replace(/&/g, "&")
-    .replace(/</g, "<")
-    .replace(/>/g, ">")
-  return jsonString.replace(
-    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+]?\d+)?)/g,
-    (match: string) => {
-      let color = colors.numberColor
-      let style = ""
-      if (/^"/.test(match)) {
-        if (/:$/.test(match)) {
-          color = colors.keyColor
-        } else {
-          color = colors.stringColor
-          match = '"' + escapeHtml(match.substr(1, match.length - 2)) + '"'
-          style = "word-wrap:break-word;white-space:pre-wrap;"
-        }
-      } else {
-        color = /true/.test(match)
-          ? colors.trueColor
-          : /false/.test(match)
-            ? colors.falseColor
-            : /null/.test(match)
-              ? colors.nullColor
-              : color
-      }
-      return `<span style="${style}color:${color}">${match}</span>`
-    }
-  )
+import hljs from "highlight.js/lib/core"
+import jsonLanguage from "highlight.js/lib/languages/json"
+import type { JSONValue } from "@budibase/types"
+
+hljs.registerLanguage("json", jsonLanguage)
+
+export const format = (json: JSONValue | undefined) => {
+  const text =
+    typeof json === "string"
+      ? json
+      : (JSON.stringify(json, null, 2) ?? typeof json)
+  const highlighted = hljs.highlight(text, { language: "json" }).value
+  return `<span class="json-highlight">${highlighted}</span>`
 }