@budibase/frontend-core 3.45.0 → 3.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "v3.45.0",
+  "version": "v3.47.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": "adfff86585b1d393941175f58cbe74f2005616b4"
 }

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

@@ -30,31 +30,64 @@
 
   // Resolved either by this card's action (statusMessage) or elsewhere (poll).
   let isResolved = $derived(!!statusMessage || resolution !== "pending")
+  let expanded = $state(true)
+  let showDetails = $derived(!showApproval || expanded)
+
+  const toggleDetails = () => {
+    expanded = !expanded
+  }
 </script>
 
 <div class="escalation-card" aria-live="polite">
-  <div class="escalation-card-header">
-    <Icon name={isResolved ? "check-circle" : "clock"} size="M" />
-    <span class="escalation-card-title">{title || "Approval required"}</span>
-    {#if showApproval && !isResolved}
-      <span class="escalation-card-badge">Test mode</span>
+  {#if showApproval}
+    <button
+      type="button"
+      class="escalation-card-header escalation-card-toggle"
+      aria-expanded={expanded}
+      aria-label={`${expanded ? "Collapse" : "Expand"} approval details${title ? ` for ${title}` : ""}`}
+      onclick={toggleDetails}
+    >
+      <Icon name={isResolved ? "check-circle" : "clock"} size="M" />
+      <span class="escalation-card-title">{title || "Approval required"}</span>
+      <span class="escalation-card-header-end">
+        {#if !isResolved}
+          <span class="escalation-card-badge">Test mode</span>
+        {/if}
+        <span class="escalation-card-chevron" class:expanded>
+          <Icon name="caret-down" size="S" />
+        </span>
+      </span>
+    </button>
+  {:else}
+    <div class="escalation-card-header">
+      <Icon name={isResolved ? "check-circle" : "clock"} size="M" />
+      <span class="escalation-card-title">{title || "Approval required"}</span>
+    </div>
+  {/if}
+
+  {#if showDetails}
+    {#if summary}
+      <Body size="S" color="var(--spectrum-global-color-gray-700)">
+        {summary}
+      </Body>
     {/if}
-  </div>
 
-  {#if summary}
-    <Body size="S" color="var(--spectrum-global-color-gray-700)">
-      {summary}
-    </Body>
+    {#if isResolved}
+      <Body size="XS" color="var(--spectrum-global-color-gray-600)">
+        {statusMessage || "Response recorded."}
+      </Body>
+    {:else if showApproval}
+      <Body size="XS" color="var(--spectrum-global-color-gray-600)">
+        Approve or reject here to simulate a reviewer response.
+      </Body>
+    {:else}
+      <Body size="XS" color="var(--spectrum-global-color-gray-600)">
+        Awaiting a human response.
+      </Body>
+    {/if}
   {/if}
 
-  {#if isResolved}
-    <Body size="XS" color="var(--spectrum-global-color-gray-600)">
-      {statusMessage || "Response recorded."}
-    </Body>
-  {:else if showApproval}
-    <Body size="XS" color="var(--spectrum-global-color-gray-600)">
-      Approve or reject here to simulate a reviewer response.
-    </Body>
+  {#if showApproval && !isResolved}
     <div class="escalation-card-actions">
       <Button cta disabled={resolving} on:click={() => onApprove?.()}>
         Approve
@@ -63,10 +96,6 @@
         Reject
       </Button>
     </div>
-  {:else}
-    <Body size="XS" color="var(--spectrum-global-color-gray-600)">
-      Awaiting a human response.
-    </Body>
   {/if}
 </div>
 
@@ -89,13 +118,37 @@
     align-items: center;
     gap: var(--spacing-s);
   }
+  .escalation-card-toggle {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+    font: inherit;
+  }
+  .escalation-card-header-end {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    margin-left: auto;
+  }
+  .escalation-card-chevron {
+    display: flex;
+    color: var(--spectrum-global-color-gray-700);
+    transition: transform 130ms ease-in-out;
+  }
+  .escalation-card-chevron.expanded {
+    transform: rotate(180deg);
+  }
   .escalation-card-title {
     font-weight: 600;
     font-size: 14px;
     color: var(--spectrum-global-color-gray-900);
   }
   .escalation-card-badge {
-    margin-left: auto;
     border-radius: 999px;
     border: 1px solid var(--spectrum-global-color-blue-400);
     color: var(--spectrum-global-color-blue-700);

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)
@@ -412,6 +412,10 @@
     }
   })
 
+  // Tool/reasoning toggles mutate the chat DOM; the observer below would
+  // otherwise pin the viewport to the bottom as height changes.
+  let skipAutoScroll = false
+
   const scrollToBottom = async () => {
     await tick()
     if (chatAreaElement) {
@@ -421,6 +425,9 @@
 
   $effect(() => {
     if (messages?.length) {
+      if (skipAutoScroll) {
+        return
+      }
       scrollToBottom()
     }
   })
@@ -495,8 +502,17 @@
     await sendMessage()
   }
 
-  const toggleTool = (toolId: string) => {
-    expandedTools = { ...expandedTools, [toolId]: !expandedTools[toolId] }
+  const toggleExpanded = (id: string) => {
+    const area = chatAreaElement
+    const previousScrollTop = area?.scrollTop ?? 0
+    skipAutoScroll = true
+    expandedTools = { ...expandedTools, [id]: !expandedTools[id] }
+    tick().then(() => {
+      if (area) {
+        area.scrollTop = previousScrollTop
+      }
+      skipAutoScroll = false
+    })
   }
 
   const formatToolOutput = (output: unknown): string =>
@@ -530,7 +546,12 @@
   $effect(() => {
     if (!chatAreaElement) return
 
-    const obs = new MutationObserver(scrollToBottom)
+    const obs = new MutationObserver(() => {
+      if (skipAutoScroll) {
+        return
+      }
+      scrollToBottom()
+    })
     obs.observe(chatAreaElement, {
       childList: true,
       subtree: true,
@@ -543,8 +564,8 @@
   })
 </script>
 
-<div class="chat-area" bind:this={chatAreaElement}>
-  <div class="chatbox">
+<div class="chat-area">
+  <div class="chatbox" bind:this={chatAreaElement}>
     {#if !hasMessages && !isRequestPending}
       <div class="empty-state">
         <div class="empty-state-icon">
@@ -597,35 +618,13 @@
                 interactive={!!reasoningText}
                 expanded={Boolean(expandedTools[reasoningId])}
                 content={reasoningText}
-                ontoggle={() =>
-                  (expandedTools = {
-                    ...expandedTools,
-                    [reasoningId]: !expandedTools[reasoningId],
-                  })}
+                ontoggle={() => toggleExpanded(reasoningId)}
               />
             {/if}
             {#each message.parts ?? [] as part, partIndex}
               {#if isTextUIPart(part)}
                 <MarkdownViewer value={part.text} />
-              {:else if isToolUIPart(part) && isRaisedEscalation(part.output)}
-                {@const card = escalationCardProps(part)}
-                <EscalationCard
-                  title={card.title}
-                  summary={card.summary}
-                  resolution={card.resolution}
-                  statusMessage={card.escalationId
-                    ? resolveMessages[card.escalationId]
-                    : undefined}
-                  showApproval={showInlineApproval}
-                  resolving={!!card.escalationId &&
-                    !!resolvingEscalations[card.escalationId]}
-                  onApprove={() =>
-                    card.escalationId && handleResolve(card.escalationId, true)}
-                  onReject={() =>
-                    card.escalationId &&
-                    handleResolve(card.escalationId, false)}
-                />
-              {:else if isToolUIPart(part)}
+              {:else if isToolUIPart(part) && !isRaisedEscalation(part.output)}
                 {@const rawToolName = getToolName(part)}
                 {@const displayToolName = formatToolName(
                   rawToolName,
@@ -642,7 +641,7 @@
                     class="tool-header"
                     class:tool-header-expanded={expandedTools[toolId]}
                     type="button"
-                    onclick={() => toggleTool(toolId)}
+                    onclick={() => toggleExpanded(toolId)}
                   >
                     <span
                       class="tool-chevron"
@@ -753,6 +752,27 @@
                 </ul>
               </div>
             {/if}
+            {#each message.parts ?? [] as part}
+              {#if isToolUIPart(part) && isRaisedEscalation(part.output)}
+                {@const card = escalationCardProps(part)}
+                <EscalationCard
+                  title={card.title}
+                  summary={card.summary}
+                  resolution={card.resolution}
+                  statusMessage={card.escalationId
+                    ? resolveMessages[card.escalationId]
+                    : undefined}
+                  showApproval={showInlineApproval}
+                  resolving={!!card.escalationId &&
+                    !!resolvingEscalations[card.escalationId]}
+                  onApprove={() =>
+                    card.escalationId && handleResolve(card.escalationId, true)}
+                  onReject={() =>
+                    card.escalationId &&
+                    handleResolve(card.escalationId, false)}
+                />
+              {/if}
+            {/each}
           </div>
         {/if}
       {/if}
@@ -803,7 +823,7 @@
     flex: 1 1 0;
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
+    overflow: hidden;
     min-height: 0;
     font-family: var(--chat-font-sans, var(--font-sans));
     --font-serif: var(--chat-font-sans, var(--font-sans));
@@ -819,7 +839,9 @@
     flex-direction: column;
     gap: 24px;
     width: 100%;
-    flex: 1 1 auto;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow-y: auto;
     padding: 48px 0 24px 0;
   }
 
@@ -868,14 +890,13 @@
   }
 
   .input-wrapper {
-    position: sticky;
-    bottom: 0;
     width: 100%;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     line-height: 1.4;
     gap: 6px;
+    padding-top: 8px;
   }
 
   .input-footer {
@@ -983,7 +1004,9 @@
   }
 
   .tool-part {
-    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
     margin-top: var(--spacing-l);
     margin-bottom: 0;
   }
@@ -1076,22 +1099,17 @@
   }
 
   .tool-details {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: var(--spacing-m);
+    margin-top: var(--spacing-s);
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-s);
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-75);
     border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 6px;
     padding: var(--spacing-m);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    z-index: 1;
     overflow-x: hidden;
     min-width: 0;
   }

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/fetch/UserFetch.ts

@@ -11,7 +11,6 @@ import BaseDataFetch, { DataFetchParams } from "./DataFetch"
 
 interface UserFetchQuery {
   appId?: string
-  workspaceId?: string
   paginated?: boolean
   string?: {
     email: string
@@ -36,6 +35,7 @@ export default class UserFetch extends BaseDataFetch<
     super({
       ...opts,
       datasource: {
+        ...opts.datasource,
         type: "user",
       },
     })
@@ -56,9 +56,14 @@ export default class UserFetch extends BaseDataFetch<
   async getData() {
     const { limit, paginate } = this.options
     const { cursor, query } = get(this.store)
+    const {
+      groupIds,
+      workspaceId: datasourceWorkspaceId,
+      workspaceRoleId,
+    } = this.options.datasource
 
     // Convert old format to new one - we now allow use of the lucene format
-    const { appId, paginated, workspaceId, ...rest } = query
+    const { appId, paginated, ...rest } = query
 
     const finalQuery: SearchFilters = utils.isSupportedUserSearch(rest)
       ? rest
@@ -69,7 +74,9 @@ export default class UserFetch extends BaseDataFetch<
         bookmark: cursor ?? undefined,
         query: finalQuery ?? undefined,
         appId: appId,
-        workspaceId,
+        workspaceId: datasourceWorkspaceId,
+        groupIds,
+        workspaceRoleId,
         paginate: paginated || paginate,
         limit,
       }

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