Merge remote-tracking branch 'origin/master' into feature/form-screen-template

hosting/couchdb/Dockerfile

@@ -1,4 +1,101 @@
-FROM couchdb:3.2.1
+# Modified from https://github.com/apache/couchdb-docker/blob/main/3.3.3/Dockerfile
+#
+# Everything in this `base` image is adapted from the official `couchdb` image's
+# Dockerfile. Only modifications related to upgrading from Debian bullseye to
+# bookworm have been included. The `runner` image contains Budibase's
+# customisations to the image, e.g. adding Clouseau.
+FROM node:20-slim AS base
+
+# Add CouchDB user account to make sure the IDs are assigned consistently
+RUN groupadd -g 5984 -r couchdb && useradd -u 5984 -d /opt/couchdb -g couchdb couchdb
+
+# be sure GPG and apt-transport-https are available and functional
+RUN set -ex; \
+    apt-get update; \
+    apt-get install -y --no-install-recommends \
+        apt-transport-https \
+        ca-certificates \
+        dirmngr \
+        gnupg \
+     ; \
+    rm -rf /var/lib/apt/lists/*
+
+# grab tini for signal handling and zombie reaping
+# see https://github.com/apache/couchdb-docker/pull/28#discussion_r141112407
+RUN set -eux; \
+    apt-get update; \
+    apt-get install -y --no-install-recommends tini; \
+    rm -rf /var/lib/apt/lists/*; \
+    tini --version
+
+# http://docs.couchdb.org/en/latest/install/unix.html#installing-the-apache-couchdb-packages
+ENV GPG_COUCH_KEY \
+# gpg: rsa8192 205-01-19 The Apache Software Foundation (Package repository signing key) <root@apache.org>
+    390EF70BB1EA12B2773962950EE62FB37A00258D
+RUN set -eux; \
+    apt-get update; \
+    apt-get install -y curl; \
+    export GNUPGHOME="$(mktemp -d)"; \
+    curl -fL -o keys.asc https://couchdb.apache.org/repo/keys.asc; \
+    gpg --batch --import keys.asc; \
+    gpg --batch --export "${GPG_COUCH_KEY}" > /usr/share/keyrings/couchdb-archive-keyring.gpg; \
+    command -v gpgconf && gpgconf --kill all || :; \
+    rm -rf "$GNUPGHOME"; \
+    apt-key list; \
+    apt purge -y --autoremove curl; \
+    rm -rf /var/lib/apt/lists/*
+
+ENV COUCHDB_VERSION 3.3.3
+
+RUN . /etc/os-release; \
+    echo "deb [signed-by=/usr/share/keyrings/couchdb-archive-keyring.gpg] https://apache.jfrog.io/artifactory/couchdb-deb/ ${VERSION_CODENAME} main" | \
+        tee /etc/apt/sources.list.d/couchdb.list >/dev/null
+
+# https://github.com/apache/couchdb-pkg/blob/master/debian/README.Debian
+RUN set -eux; \
+    apt-get update; \
+    \
+    echo "couchdb couchdb/mode select none" | debconf-set-selections; \
+# we DO want recommends this time
+    DEBIAN_FRONTEND=noninteractive apt-get install -y --allow-downgrades --allow-remove-essential --allow-change-held-packages \
+            couchdb="$COUCHDB_VERSION"~bookworm \
+    ; \
+# Undo symlinks to /var/log and /var/lib
+    rmdir /var/lib/couchdb /var/log/couchdb; \
+    rm /opt/couchdb/data /opt/couchdb/var/log; \
+    mkdir -p /opt/couchdb/data /opt/couchdb/var/log; \
+    chown couchdb:couchdb /opt/couchdb/data /opt/couchdb/var/log; \
+    chmod 777 /opt/couchdb/data /opt/couchdb/var/log; \
+# Remove file that sets logging to a file
+    rm /opt/couchdb/etc/default.d/10-filelog.ini; \
+# Check we own everything in /opt/couchdb. Matches the command in dockerfile_entrypoint.sh
+    find /opt/couchdb \! \( -user couchdb -group couchdb \) -exec chown -f couchdb:couchdb '{}' +; \
+# Setup directories and permissions for config. Technically these could be 555 and 444 respectively
+# but we keep them as 755 and 644 for consistency with CouchDB defaults and the dockerfile_entrypoint.sh.
+    find /opt/couchdb/etc -type d ! -perm 0755 -exec chmod -f 0755 '{}' +; \
+    find /opt/couchdb/etc -type f ! -perm 0644 -exec chmod -f 0644 '{}' +; \
+# only local.d needs to be writable for the docker_entrypoint.sh
+    chmod -f 0777 /opt/couchdb/etc/local.d; \
+# apt clean-up
+    rm -rf /var/lib/apt/lists/*;
+
+# Add configuration
+COPY --chown=couchdb:couchdb couch/10-docker-default.ini /opt/couchdb/etc/default.d/
+# COPY --chown=couchdb:couchdb vm.args /opt/couchdb/etc/
+
+COPY docker-entrypoint.sh /usr/local/bin
+RUN ln -s usr/local/bin/docker-entrypoint.sh /docker-entrypoint.sh # backwards compat
+ENTRYPOINT ["tini", "--", "/docker-entrypoint.sh"]
+
+VOLUME /opt/couchdb/data
+
+# 5984: Main CouchDB endpoint
+# 4369: Erlang portmap daemon (epmd)
+# 9100: CouchDB cluster communication port
+EXPOSE 5984 4369 9100
+CMD ["/opt/couchdb/bin/couchdb"]
+
+FROM base as runner
 
 ENV COUCHDB_USER admin
 ENV COUCHDB_PASSWORD admin
@@ -6,9 +103,9 @@ EXPOSE 5984
 
 RUN apt-get update && apt-get install -y --no-install-recommends software-properties-common wget unzip curl && \
     wget -O - https://packages.adoptium.net/artifactory/api/gpg/key/public | apt-key add - && \
-    apt-add-repository 'deb http://security.debian.org/debian-security bullseye-security/updates main' && \
+    apt-add-repository 'deb http://security.debian.org/debian-security bookworm-security/updates main' && \
     apt-add-repository 'deb http://archive.debian.org/debian stretch-backports main' && \
-    apt-add-repository 'deb https://packages.adoptium.net/artifactory/deb bullseye main' && \
+    apt-add-repository 'deb https://packages.adoptium.net/artifactory/deb bookworm main' && \
     apt-get update && apt-get install -y --no-install-recommends temurin-8-jdk && \
     rm -rf /var/lib/apt/lists/
 

hosting/couchdb/clouseau/clouseau.ini

@@ -4,7 +4,7 @@
 name=clouseau@127.0.0.1
 
 ; set this to the same distributed Erlang cookie used by the CouchDB nodes
-cookie=monster
+cookie=COUCHDB_ERLANG_COOKIE
 
 ; the path where you would like to store the search index files
 dir=DATA_DIR/search

hosting/couchdb/couch/10-docker-default.ini

@@ -0,0 +1,8 @@
+; CouchDB Configuration Settings
+
+; Custom settings should be made in this file. They will override settings
+; in default.ini, but unlike changes made to default.ini, this file won't be
+; overwritten on server upgrade.
+
+[chttpd]
+bind_address = any

hosting/couchdb/couch/vm.args

@@ -12,7 +12,7 @@
 
 # erlang cookie for clouseau security
 -name couchdb@127.0.0.1
--setcookie monster
+-setcookie COUCHDB_ERLANG_COOKIE
 
 # Ensure that the Erlang VM listens on a known port
 -kernel inet_dist_listen_min 9100

hosting/couchdb/docker-entrypoint.sh

@@ -0,0 +1,122 @@
+#!/bin/bash
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not
+# use this file except in compliance with the License. You may obtain a copy of
+# the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations under
+# the License.
+
+set -e
+
+# first arg is `-something` or `+something`
+if [ "${1#-}" != "$1" ] || [ "${1#+}" != "$1" ]; then
+	set -- /opt/couchdb/bin/couchdb "$@"
+fi
+
+# first arg is the bare word `couchdb`
+if [ "$1" = 'couchdb' ]; then
+	shift
+	set -- /opt/couchdb/bin/couchdb "$@"
+fi
+
+if [ "$1" = '/opt/couchdb/bin/couchdb' ]; then
+	# this is where runtime configuration changes will be written.
+	# we need to explicitly touch it here in case /opt/couchdb/etc has
+	# been mounted as an external volume, in which case it won't exist.
+	# If running as the couchdb user (i.e. container starts as root),
+	# write permissions will be granted below.
+	touch /opt/couchdb/etc/local.d/docker.ini
+
+	# if user is root, assume running under the couchdb user (default)
+	# and ensure it is able to access files and directories that may be mounted externally
+	if [ "$(id -u)" = '0' ]; then
+		# Check that we own everything in /opt/couchdb and fix if necessary. We also
+		# add the `-f` flag in all the following invocations because there may be
+		# cases where some of these ownership and permissions issues are non-fatal
+		# (e.g. a config file owned by root with o+r is actually fine), and we don't
+		# to be too aggressive about crashing here ...
+		find /opt/couchdb \! \( -user couchdb -group couchdb \) -exec chown -f couchdb:couchdb '{}' +
+
+		# Ensure that data files have the correct permissions. We were previously
+		# preventing any access to these files outside of couchdb:couchdb, but it
+		# turns out that CouchDB itself does not set such restrictive permissions
+		# when it creates the files. The approach taken here ensures that the
+		# contents of the datadir have the same permissions as they had when they
+		# were initially created. This should minimize any startup delay.
+		find /opt/couchdb/data -type d ! -perm 0755 -exec chmod -f 0755 '{}' +
+		find /opt/couchdb/data -type f ! -perm 0644 -exec chmod -f 0644 '{}' +
+
+		# Do the same thing for configuration files and directories. Technically
+		# CouchDB only needs read access to the configuration files as all online
+		# changes will be applied to the "docker.ini" file below, but we set 644
+		# for the sake of consistency.
+		find /opt/couchdb/etc -type d ! -perm 0755 -exec chmod -f 0755 '{}' +
+		find /opt/couchdb/etc -type f ! -perm 0644 -exec chmod -f 0644 '{}' +
+	fi
+
+	if [ ! -z "$NODENAME" ] && ! grep "couchdb@" /opt/couchdb/etc/vm.args; then
+		echo "-name couchdb@$NODENAME" >> /opt/couchdb/etc/vm.args
+	fi
+
+	if [ "$COUCHDB_USER" ] && [ "$COUCHDB_PASSWORD" ]; then
+		# Create admin only if not already present
+		if ! grep -Pzoqr "\[admins\]\n$COUCHDB_USER =" /opt/couchdb/etc/local.d/*.ini /opt/couchdb/etc/local.ini; then
+			printf "\n[admins]\n%s = %s\n" "$COUCHDB_USER" "$COUCHDB_PASSWORD" >> /opt/couchdb/etc/local.d/docker.ini
+		fi
+	fi
+
+	if [ "$COUCHDB_SECRET" ]; then
+		# Set secret only if not already present
+		if ! grep -Pzoqr "\[chttpd_auth\]\nsecret =" /opt/couchdb/etc/local.d/*.ini /opt/couchdb/etc/local.ini; then
+			printf "\n[chttpd_auth]\nsecret = %s\n" "$COUCHDB_SECRET" >> /opt/couchdb/etc/local.d/docker.ini
+		fi
+	fi
+
+	if [ "$COUCHDB_ERLANG_COOKIE" ]; then
+		cookieFile='/opt/couchdb/.erlang.cookie'
+		if [ -e "$cookieFile" ]; then
+			if [ "$(cat "$cookieFile" 2>/dev/null)" != "$COUCHDB_ERLANG_COOKIE" ]; then
+				echo >&2
+				echo >&2 "warning: $cookieFile contents do not match COUCHDB_ERLANG_COOKIE"
+				echo >&2
+			fi
+		else
+			echo "$COUCHDB_ERLANG_COOKIE" > "$cookieFile"
+		fi
+		chown couchdb:couchdb "$cookieFile"
+		chmod 600 "$cookieFile"
+	fi
+
+	if [ "$(id -u)" = '0' ]; then
+		chown -f couchdb:couchdb /opt/couchdb/etc/local.d/docker.ini || true
+	fi
+
+	# if we don't find an [admins] section followed by a non-comment, display a warning
+        if ! grep -Pzoqr '\[admins\]\n[^;]\w+' /opt/couchdb/etc/default.d/*.ini /opt/couchdb/etc/local.d/*.ini /opt/couchdb/etc/local.ini; then
+		# The - option suppresses leading tabs but *not* spaces. :)
+		cat >&2 <<-'EOWARN'
+*************************************************************
+ERROR: CouchDB 3.0+ will no longer run in "Admin Party"
+       mode. You *MUST* specify an admin user and
+       password, either via your own .ini file mapped
+       into the container at /opt/couchdb/etc/local.ini
+       or inside /opt/couchdb/etc/local.d, or with
+       "-e COUCHDB_USER=admin -e COUCHDB_PASSWORD=password"
+       to set it via "docker run".
+*************************************************************
+EOWARN
+		exit 1
+	fi
+
+	if [ "$(id -u)" = '0' ]; then
+		export HOME=$(echo ~couchdb)
+		exec setpriv --reuid=couchdb --regid=couchdb --clear-groups "$@"
+	fi
+fi
+
+exec "$@"

hosting/couchdb/runner.sh

@@ -1,6 +1,7 @@
 #!/bin/bash
 
 DATA_DIR=${DATA_DIR:-/data}
+COUCHDB_ERLANG_COOKIE=${COUCHDB_ERLANG_COOKIE:-B9CFC32C-3458-4A86-8448-B3C753991CA7}
 
 mkdir -p ${DATA_DIR}
 mkdir -p ${DATA_DIR}/couch/{dbs,views}
@@ -60,6 +61,9 @@ else
     sed -i "s#DATA_DIR#/data#g" /opt/couchdb/etc/local.ini
 fi
 
+sed -i "s#COUCHDB_ERLANG_COOKIE#${COUCHDB_ERLANG_COOKIE}#g" /opt/couchdb/etc/vm.args
+sed -i "s#COUCHDB_ERLANG_COOKIE#${COUCHDB_ERLANG_COOKIE}#g" /opt/clouseau/clouseau.ini
+
 # Start Clouseau. Budibase won't function correctly without Clouseau running, it
 # powers the search API endpoints which are used to do all sorts, including
 # populating app grids.

hosting/docker-compose.yaml

@@ -98,7 +98,6 @@ services:
   couchdb-service:
     restart: unless-stopped
     image: budibase/couchdb
-    pull_policy: always
     environment:
       - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
       - COUCHDB_USER=${COUCH_DB_USER}

hosting/single/Dockerfile

@@ -3,7 +3,6 @@ FROM node:20-slim as build
 # install node-gyp dependencies
 RUN apt-get update && apt-get install -y --no-install-recommends g++ make python3 jq
 
-
 # copy and install dependencies
 WORKDIR /app
 COPY package.json .
@@ -39,10 +38,9 @@ COPY packages/worker/pm2.config.js packages/worker/pm2.config.js
 COPY packages/string-templates packages/string-templates
 
 
-FROM budibase/couchdb as runner
+FROM budibase/couchdb:v3.3.3 as runner
 ARG TARGETARCH
 ENV TARGETARCH $TARGETARCH
-ENV NODE_MAJOR 20
 #TARGETBUILD can be set to single (for single docker image) or aas (for azure app service)
 # e.g. docker build --build-arg TARGETBUILD=aas ....
 ARG TARGETBUILD=single
@@ -60,10 +58,8 @@ RUN apt install -y software-properties-common apt-transport-https ca-certificate
     && apt install postgresql-client-15 -y \
     && apt remove software-properties-common apt-transport-https gpg -y
 
-# install other dependencies, nodejs, oracle requirements, jdk8, redis, nginx
-WORKDIR /nodejs
-COPY scripts/install-node.sh ./install.sh
-RUN chmod +x install.sh && ./install.sh
+# We use pm2 in order to run multiple node processes in a single container
+RUN npm install --global pm2
 
 # setup nginx
 COPY hosting/single/nginx/nginx.conf /etc/nginx

hosting/single/runner.sh

@@ -97,10 +97,12 @@ fi
 sleep 10
 
 pushd app
-pm2 start -l /dev/stdout --name app "yarn run:docker"
+pm2 start --name app "yarn run:docker"
 popd
 pushd worker
-pm2 start -l /dev/stdout --name worker "yarn run:docker"
+pm2 start --name worker "yarn run:docker"
 popd
 echo "end of runner.sh, sleeping ..."
+
+tail -f $HOME/.pm2/logs/*.log
 sleep infinity

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.19.4",
+  "version": "2.20.8",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

package.json

@@ -22,7 +22,7 @@
     "nx-cloud": "16.0.5",
     "prettier": "2.8.8",
     "prettier-plugin-svelte": "^2.3.0",
-    "svelte": "3.49.0",
+    "svelte": "^4.2.10",
     "svelte-eslint-parser": "^0.33.1",
     "typescript": "5.2.2",
     "yargs": "^17.7.2"

packages/account-portal

@@ -1 +1 @@
-Subproject commit 8c446c4ba385592127fa31755d3b64467b291882
+Subproject commit a851eeacabfaad8bff6e781f5e5a62063cbc31f3

packages/backend-core/src/events/publishers/query.ts

@@ -3,6 +3,7 @@ import {
   Event,
   Datasource,
   Query,
+  QueryPreview,
   QueryCreatedEvent,
   QueryUpdatedEvent,
   QueryDeletedEvent,
@@ -68,9 +69,9 @@ const run = async (count: number, timestamp?: string | number) => {
   await publishEvent(Event.QUERIES_RUN, properties, timestamp)
 }
 
-const previewed = async (datasource: Datasource, query: Query) => {
+const previewed = async (datasource: Datasource, query: QueryPreview) => {
   const properties: QueryPreviewedEvent = {
-    queryId: query._id,
+    queryId: query.queryId,
     datasourceId: datasource._id as string,
     source: datasource.source,
     queryVerb: query.queryVerb,

packages/backend-core/src/installation.ts

@@ -6,6 +6,7 @@ import * as context from "./context"
 import semver from "semver"
 import { bustCache, withCache, TTL, CacheKey } from "./cache/generic"
 import environment from "./environment"
+import { logAlert } from "./logging"
 
 export const getInstall = async (): Promise<Installation> => {
   return withCache(CacheKey.INSTALLATION, TTL.ONE_DAY, getInstallFromDB, {
@@ -80,27 +81,35 @@ export const checkInstallVersion = async (): Promise<void> => {
   const currentVersion = install.version
   const newVersion = environment.VERSION
 
-  if (currentVersion !== newVersion) {
-    const isUpgrade = semver.gt(newVersion, currentVersion)
-    const isDowngrade = semver.lt(newVersion, currentVersion)
+  try {
+    if (currentVersion !== newVersion) {
+      const isUpgrade = semver.gt(newVersion, currentVersion)
+      const isDowngrade = semver.lt(newVersion, currentVersion)
 
-    const success = await updateVersion(newVersion)
+      const success = await updateVersion(newVersion)
 
-    if (success) {
-      await context.doInIdentityContext(
-        {
-          _id: install.installId,
-          type: IdentityType.INSTALLATION,
-        },
-        async () => {
-          if (isUpgrade) {
-            await events.installation.upgraded(currentVersion, newVersion)
-          } else if (isDowngrade) {
-            await events.installation.downgraded(currentVersion, newVersion)
+      if (success) {
+        await context.doInIdentityContext(
+          {
+            _id: install.installId,
+            type: IdentityType.INSTALLATION,
+          },
+          async () => {
+            if (isUpgrade) {
+              await events.installation.upgraded(currentVersion, newVersion)
+            } else if (isDowngrade) {
+              await events.installation.downgraded(currentVersion, newVersion)
+            }
           }
-        }
-      )
-      await events.identification.identifyInstallationGroup(install.installId)
+        )
+        await events.identification.identifyInstallationGroup(install.installId)
+      }
+    }
+  } catch (err: any) {
+    if (err?.message?.includes("Invalid Version")) {
+      logAlert(`Invalid version "${newVersion}" - is it semver?`)
+    } else {
+      logAlert("Failed to retrieve version", err)
     }
   }
 }

packages/backend-core/src/logging/correlation/correlation.ts

@@ -2,11 +2,12 @@ import { Header } from "../../constants"
 
 const correlator = require("correlation-id")
 
-export const setHeader = (headers: any) => {
+export const setHeader = (headers: Record<string, string>) => {
   const correlationId = correlator.getId()
-  if (correlationId) {
-    headers[Header.CORRELATION_ID] = correlationId
+  if (!correlationId) {
+    return
   }
+  headers[Header.CORRELATION_ID] = correlationId
 }
 
 export function getId() {

packages/backend-core/src/middleware/joi-validator.ts

@@ -1,12 +1,12 @@
-import Joi, { ObjectSchema } from "joi"
-import { BBContext } from "@budibase/types"
+import Joi from "joi"
+import { Ctx } from "@budibase/types"
 
 function validate(
   schema: Joi.ObjectSchema | Joi.ArraySchema,
   property: string
 ) {
   // Return a Koa middleware function
-  return (ctx: BBContext, next: any) => {
+  return (ctx: Ctx, next: any) => {
     if (!schema) {
       return next()
     }
@@ -30,7 +30,6 @@ function validate(
     const { error } = schema.validate(params)
     if (error) {
       ctx.throw(400, `Invalid ${property} - ${error.message}`)
-      return
     }
     return next()
   }

packages/backend-core/tests/core/utilities/mocks/licenses.ts

@@ -58,7 +58,7 @@ export const useCloudFree = () => {
 // FEATURES
 
 const useFeature = (feature: Feature) => {
-  const license = cloneDeep(UNLIMITED_LICENSE)
+  const license = cloneDeep(getCachedLicense() || UNLIMITED_LICENSE)
   const opts: UseLicenseOpts = {
     features: [feature],
   }

packages/bbui/package.json

@@ -24,8 +24,7 @@
     "rollup": "^2.45.2",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "svelte": "3.49.0"
+    "rollup-plugin-terser": "^7.0.2"
   },
   "keywords": [
     "svelte"

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -41,6 +41,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
   class="btn-wrap"
   on:mouseover={() => (showTooltip = true)}

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -33,6 +33,8 @@
   setContext("actionMenu", { show, hide })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>

packages/bbui/src/Badge/Badge.svelte

@@ -13,6 +13,8 @@
   export let hoverable = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
   on:click
   class="spectrum-Label"

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -123,6 +123,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={preview}
   class="preview size--{size || 'M'}"
@@ -137,6 +139,8 @@
   />
 </div>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
   <Layout paddingX="XL" paddingY="L">
     <div class="container">

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -15,6 +15,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="property-group-container">
   {#if name}
     <div class="property-group-name" on:click={onHeaderClick}>

packages/bbui/src/FancyForm/FancyField.svelte

@@ -36,6 +36,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={ref}
   class="fancy-field"

packages/bbui/src/Form/Core/Combobox.svelte

@@ -35,6 +35,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="spectrum-InputGroup"
   class:is-focused={open || focus}

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -193,6 +193,8 @@
       aria-required="false"
       aria-haspopup="true"
     >
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         on:click={flatpickr?.open}
         class="spectrum-Textfield spectrum-InputGroup-textfield"
@@ -230,6 +232,7 @@
   </Flatpickr>
 {/key}
 {#if open}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="overlay" on:mousedown|self={flatpickr?.close} />
 {/if}
 

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -137,6 +137,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div class="container" class:compact>
   {#if selectedImage}
     {#if gallery}

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -96,6 +96,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="spectrum-InputGroup">
   <div
     class:is-disabled={disabled || hbsValue.length}

packages/bbui/src/Form/Core/File.svelte

@@ -50,6 +50,8 @@
   on:change={handleFile}
 />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="field">
   {#if value}
     <div class="file-view">

packages/bbui/src/Form/Core/InputDropdown.svelte

@@ -110,6 +110,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"

packages/bbui/src/Form/Core/Picker.svelte

@@ -146,6 +146,7 @@
     <use xlink:href="#spectrum-css-icon-Chevron100" />
   </svg>
 </button>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover
   anchor={customAnchor ? customAnchor : button}
   align={align || "left"}

packages/bbui/src/Form/Core/PickerDropdown.svelte

@@ -104,6 +104,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"

packages/bbui/src/Icon/Icon.svelte

@@ -24,6 +24,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon"
   on:mouseover={() => (showTooltip = true)}

packages/bbui/src/IconPicker/IconPicker.svelte

@@ -58,6 +58,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
   <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
     <div

packages/bbui/src/IconSideNav/IconSideNavItem.svelte

@@ -10,6 +10,8 @@
   let showTooltip = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon-side-nav-item"
   class:active

packages/bbui/src/Input/CopyInput.svelte

@@ -17,6 +17,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div>
   <Input readonly {value} {label} />
   <div class="icon" on:click={() => copyToClipboard(value)}>

packages/bbui/src/Layout/Page.svelte

@@ -43,6 +43,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    overflow-y: scroll !important;
     flex: 1 1 auto;
     overflow-x: hidden;
   }

packages/bbui/src/List/ListItem.svelte

@@ -15,6 +15,8 @@
   $: initials = avatar ? title?.[0] : null
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="list-item" class:hoverable on:click>
   <div class="left">
     {#if icon}

packages/bbui/src/Menu/Item.svelte

@@ -33,6 +33,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <li
   on:click|preventDefault={disabled ? null : onClick}
   class="spectrum-Menu-item"

packages/bbui/src/Modal/CustomContent.svelte

@@ -14,6 +14,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={increment}>
   Click me
   {remaining}

packages/bbui/src/Modal/Modal.svelte

@@ -100,6 +100,7 @@
   -->
   <Portal target=".modal-container">
     {#if visible}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
         <div
           class="background"

packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte

@@ -81,6 +81,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div>
   <div
     class="actions"

packages/bbui/src/Pagination/Pagination.svelte

@@ -10,6 +10,8 @@
   export let hasNextPage = true
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <nav class="spectrum-Pagination spectrum-Pagination--explicit">
   <div
     href="#"

packages/bbui/src/Popover/Popover.svelte

@@ -78,6 +78,7 @@
 </script>
 
 {#if open}
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <Portal {target}>
     <div
       tabindex="0"

packages/bbui/src/ProgressCircle/ProgressCircle.svelte

@@ -40,6 +40,8 @@
   export let overBackground
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   on:click
   class:spectrum-ProgressCircle--indeterminate={value == null}

packages/bbui/src/SideNavigation/Item.svelte

@@ -13,6 +13,8 @@
   export let badge = ""
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
   class="spectrum-SideNav-item"
   class:is-selected={selected}

packages/bbui/src/StatusLight/StatusLight.svelte

@@ -22,6 +22,8 @@
   export let hoverable = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   on:click
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"

packages/bbui/src/Table/InternalRenderer.svelte

@@ -19,6 +19,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click|stopPropagation={onClick}>
   <Icon size="S" name="Copy" />
 </div>

packages/bbui/src/Table/Table.svelte

@@ -303,6 +303,8 @@
 </script>
 
 {#key fields?.length}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="wrapper"
     class:wrapper--quiet={quiet}

packages/bbui/src/Tabs/Tab.svelte

@@ -48,6 +48,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   {id}
   bind:this={tab_internal}

packages/bbui/src/Tooltip/AbsTooltip.svelte

@@ -90,6 +90,7 @@
   onDestroy(hide)
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   bind:this={wrapper}
   class="abs-tooltip"

packages/bbui/src/Tooltip/TooltipWrapper.svelte

@@ -9,6 +9,7 @@
   let showTooltip = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class:container={!!tooltip}>
   <slot />
   {#if tooltip}

packages/bbui/src/Typography/Body.svelte

@@ -20,3 +20,9 @@
 >
   <slot />
 </p>
+
+<style>
+  p {
+    text-wrap: pretty;
+  }
+</style>

packages/bbui/src/Typography/Heading.svelte

@@ -21,4 +21,8 @@
   h1 {
     font-family: var(--font-accent);
   }
+
+  h1 {
+    text-wrap: balance;
+  }
 </style>

packages/builder/package.json

@@ -86,14 +86,13 @@
     "@rollup/plugin-replace": "^5.0.3",
     "@roxi/routify": "2.18.12",
     "@sveltejs/vite-plugin-svelte": "1.4.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/svelte": "^3.2.2",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/svelte": "^4.1.0",
     "babel-jest": "^29.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
     "jsdom": "^21.1.1",
     "ncp": "^2.0.0",
-    "svelte": "^3.49.0",
     "svelte-jester": "^1.3.2",
     "vite": "^4.5.0",
     "vite-plugin-static-copy": "^0.17.0",

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -110,6 +110,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ModalContent
   title="Add automation step"
   confirmText="Save"

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -46,6 +46,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="header" class:scrolling>
   <div class="header-left">
     <UndoRedoControl store={automationHistoryStore} />
@@ -130,6 +132,7 @@
     flex-grow: 1;
     padding: 23px 23px 80px;
     box-sizing: border-box;
+    overflow-x: hidden;
   }
 
   .header.scrolling {

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -103,6 +103,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class={`block ${block.type} hoverable`} class:selected on:click={() => {}}>
   {#if loopBlock}
     <div class="blockSection">

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte

@@ -93,6 +93,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class:typing={typing && !automationNameError}
   class:typing-error={automationNameError}

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -46,6 +46,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ModalContent
   title="Create Automation"
   confirmText="Save"

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -65,6 +65,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root">
   <div class="spacer" />
   {#each fieldsArray as field}

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -757,6 +757,8 @@
   />
 </Modal>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Column"

packages/builder/src/components/backend/DataTable/modals/ExportModal.test.js

@@ -32,6 +32,7 @@ vi.mock("svelte", async () => {
     },
     createEventDispatcher: vi.fn(),
     onDestroy: vi.fn(),
+    tick: vi.fn(),
   }
 })
 

packages/builder/src/components/backend/TableNavigator/ListItem.svelte

@@ -6,6 +6,8 @@
   export let indented
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class:indented class:selected on:click class={className}>
   <i class={icon} />
   <span>{title}</span>

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -237,6 +237,8 @@
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ModalContent
   size="L"
   showCancelButton={false}

packages/builder/src/components/common/DashCard.svelte

@@ -8,6 +8,8 @@
   $: actionDefined = typeof action === "function"
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dash-card">
   <div class="dash-card-header" class:active={actionDefined} on:click={action}>
     <span class="dash-card-title">

packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte

@@ -1,3 +1,5 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dropdown-container" on:click>
   <slot />
 </div>

packages/builder/src/components/common/Dropdowns/DropdownItem.svelte

@@ -5,6 +5,7 @@
   export let disabled = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dropdown-item" class:disabled on:click {...$$restProps}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">

packages/builder/src/components/common/EditableIcon.svelte

@@ -11,6 +11,8 @@
   let modal
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="editable-icon">
   <div class="hover" on:click={modal.show}>
     <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />

packages/builder/src/components/common/Icons/Pencil.svelte

@@ -1,3 +1,5 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <svg
   on:click
   xmlns="http://www.w3.org/2000/svg"

packages/builder/src/components/common/NavHeader.svelte

@@ -39,6 +39,7 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="header" class:search>
   <input
     readonly={!search}

packages/builder/src/components/common/NavItem.svelte

@@ -60,6 +60,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="nav-item"
   class:hovering

packages/builder/src/components/common/bindings/BindingPicker.svelte

@@ -103,6 +103,9 @@
   </Popover>
 </span>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 <Layout noPadding gap="S">
   {#if selectedCategory}
     <div class="sub-section-back">

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -57,6 +57,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
   <Combobox
     {label}

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -60,6 +60,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
   <Input
     {label}

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -125,6 +125,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
   {#if !isValid(value)}
     <Input

packages/builder/src/components/common/bindings/ModalBindableInput.svelte

@@ -35,6 +35,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control">
   <Input
     {label}

packages/builder/src/components/deploy/AppActions.svelte

@@ -149,6 +149,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="action-top-nav">
   <div class="action-buttons">
     {#if updateAvailable && $isOnlyUser}

packages/builder/src/components/design/Panel.svelte

@@ -22,6 +22,8 @@
   $: customTitleContent = $$slots["panel-title-content"]
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="panel"
   class:wide

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -249,6 +249,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 <DrawerContent>
   <Layout noPadding gap="S" slot="sidebar">
     {#if showAvailableActions || !actions?.length}

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte

@@ -94,6 +94,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="button-configuration">
   {#if buttonCount}
     <DraggableList

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte

@@ -85,6 +85,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <DrawerContent>
   <div class="container">
     <Layout noPadding gap="S">

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte

@@ -16,6 +16,7 @@
     <Heading size="XS">{heading}</Heading>
   </div>
 {/if}
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ul class="spectrum-Menu" role="listbox">
   {#each dataSet as data}
     <li

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte

@@ -127,10 +127,14 @@
       }
     })
   $: jsonArrays = bindings
-    .filter(x => x.fieldSchema?.type === "jsonarray")
+    .filter(
+      x =>
+        x.fieldSchema?.type === "jsonarray" ||
+        (x.fieldSchema?.type === "json" && x.fieldSchema?.subtype === "array")
+    )
     .map(binding => {
       const { providerId, readableBinding, runtimeBinding, tableId } = binding
-      const { name, type, prefixKeys } = binding.fieldSchema
+      const { name, type, prefixKeys, subtype } = binding.fieldSchema
       return {
         providerId,
         label: readableBinding,
@@ -138,7 +142,8 @@
         fieldType: type,
         tableId,
         prefixKeys,
-        type: "jsonarray",
+        type: type === "jsonarray" ? "jsonarray" : "queryarray",
+        subtype,
         value: `{{ literal ${runtimeBinding} }}`,
       }
     })

packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte

@@ -80,6 +80,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 <ul
   class="list-wrap"
   use:dndzone={{

packages/builder/src/components/design/settings/controls/FlatButtonGroup/FlatButton.svelte

@@ -8,6 +8,8 @@
   $: useIcon = !!icon
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte

@@ -1,15 +1,25 @@
 <script>
   import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
-  import { FieldTypeToComponentMap } from "../FieldConfiguration/utils"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
-  import { componentStore } from "stores/builder"
+  import { FIELDS } from "constants/backend"
 
   export let item
   export let anchor
 
   const dispatch = createEventDispatcher()
+
+  $: fieldIconLookupMap = buildFieldIconLookupMap(FIELDS)
+
+  const buildFieldIconLookupMap = fields => {
+    let map = {}
+    Object.values(fields).forEach(fieldInfo => {
+      map[fieldInfo.type] = fieldInfo.icon
+    })
+    return map
+  }
+
   const onToggle = item => {
     return e => {
       item.active = e.detail
@@ -24,13 +34,6 @@
         return { ...setting, nested: true }
       })
   }
-
-  const getIcon = () => {
-    const component = `@budibase/standard-components/${
-      FieldTypeToComponentMap[item.columnType]
-    }`
-    return componentStore.getDefinition(component).icon
-  }
 </script>
 
 <div class="list-item-body">
@@ -42,7 +45,7 @@
       on:change
     >
       <div slot="header" class="type-icon">
-        <Icon name={getIcon()} />
+        <Icon name={fieldIconLookupMap[item.columnType]} />
         <span>{item.field}</span>
       </div>
     </EditComponentPopover>

packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte

@@ -116,11 +116,14 @@
   $: pagerText = `Page ${currentPage} of ${totalPages}`
 </script>
 
+a11y-click-events-have-key-events
 <div bind:this={buttonAnchor}>
   <ActionButton on:click={dropdown.show}>
     {displayValue}
   </ActionButton>
 </div>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
   <div class="container">
     <div class="search-area">

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -85,6 +85,16 @@
     activity = newActivity
     dispatch("change", fields)
   }
+
+  function isJsonArray(value) {
+    if (!value || typeof value === "string") {
+      return false
+    }
+    if (value.type === "array") {
+      return true
+    }
+    return value.type === "json" && value.subtype === "array"
+  }
 </script>
 
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
@@ -112,7 +122,9 @@
         bind:value={field.name}
         on:blur={changed}
       />
-      {#if options}
+      {#if isJsonArray(field.value)}
+        <Select readonly={true} value="Array" options={["Array"]} />
+      {:else if options}
         <Select
           bind:value={field.value}
           {compare}

packages/builder/src/components/integration/QueryViewer.svelte

@@ -40,6 +40,7 @@
   let schemaType
 
   let autoSchema = {}
+  let nestedSchemaFields = {}
   let rows = []
   let keys = {}
 
@@ -83,13 +84,14 @@
         return
       }
 
+      nestedSchemaFields = response.nestedSchemaFields
+
       if (Object.keys(newQuery.schema).length === 0) {
         // Assign this to a variable instead of directly to the newQuery.schema so that a user
         // can change the table they're querying and have the schema update until they first
         // edit it
         autoSchema = response.schema
       }
-
       rows = response.rows
 
       notifications.success("Query executed successfully")
@@ -120,6 +122,7 @@
           Object.keys(newQuery.schema).length === 0
             ? autoSchema
             : newQuery.schema,
+        nestedSchemaFields,
       })
 
       notifications.success("Query saved successfully")

packages/builder/src/components/integration/index.svelte

@@ -5,7 +5,6 @@
     Label,
     Input,
     Select,
-    Divider,
     Layout,
     Icon,
     Button,
@@ -124,7 +123,6 @@
         {#each query.fields.steps ?? [] as step, index}
           <div class="block">
             <div class="subblock">
-              <Divider noMargin />
               <div class="blockSection">
                 <div class="block-options">
                   Stage {index + 1}

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -5,6 +5,8 @@
   export let disabled = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="side-nav-item">
   {#if url}
     <a class="text" on:click href={url} class:active class:disabled>

packages/builder/src/components/settings/UserGroupPicker.svelte

@@ -39,6 +39,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
   <Layout gap="S">
     <div class="header">

packages/builder/src/components/start/AppRow.svelte

@@ -38,6 +38,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="app-row"
   on:click={lockedAction || handleDefaultClick}

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -58,6 +58,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
   <div class="scrollable-icons">
     <div class="title-spacing">

packages/builder/src/constants/backend/index.js

@@ -310,6 +310,7 @@ export const BannedSearchTypes = [
   "formula",
   "json",
   "jsonarray",
+  "queryarray",
 ]
 
 export const DatasourceTypes = {

packages/builder/src/dataBinding.js

@@ -425,7 +425,7 @@ const generateComponentContextBindings = (asset, componentContext) => {
       table = info.table
 
       // Determine what to prefix bindings with
-      if (datasource.type === "jsonarray") {
+      if (datasource.type === "jsonarray" || datasource.type === "queryarray") {
         // For JSON arrays, use the array name as the readable prefix
         const split = datasource.label.split(".")
         readablePrefix = split[split.length - 1]
@@ -904,6 +904,19 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
       schema = JSONUtils.getJSONArrayDatasourceSchema(tableSchema, datasource)
     }
 
+    // "queryarray" datasources are arrays inside JSON responses
+    else if (type === "queryarray") {
+      const queries = get(queriesStores).list
+      table = queries.find(query => query._id === datasource.tableId)
+      let tableSchema = table?.schema
+      let nestedSchemaFields = table?.nestedSchemaFields
+      schema = JSONUtils.generateQueryArraySchemas(
+        tableSchema,
+        nestedSchemaFields
+      )
+      schema = JSONUtils.getJSONArrayDatasourceSchema(schema, datasource)
+    }
+
     // Otherwise we assume we're targeting an internal table or a plus
     // datasource, and we can treat it as a table with a schema
     else {

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

@@ -539,6 +539,8 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   transition:fly={{ x: 400, duration: 260 }}
   id="builder-side-panel-container"

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

@@ -24,6 +24,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="preview-overlay"
   transition:fade={{ duration: 260 }}

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

@@ -6,6 +6,8 @@
   export let disabled
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click class:disabled class="option">
   <div class="header">
     <div class="icon">