From 2f90d7f431d076995cf66169f14c5cc423d72bf0 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 4 Mar 2024 08:05:50 +0000
Subject: [PATCH 01/20] wip

---
 .../[screenId]/_components/AppPreview.svelte  |  8 ++++
 .../ComponentList/ComponentKeyHandler.svelte  |  4 +-
 .../ComponentList/ComponentTree.svelte        | 12 ++----
 .../componentTreeNodes.js}                    |  9 ++++
 .../builder/src/stores/builder/components.js  | 41 ++++++++++---------
 packages/builder/src/stores/builder/index.js  |  4 +-
 6 files changed, 48 insertions(+), 30 deletions(-)
 rename packages/builder/src/stores/{portal/componentTreeNodesStore.js => builder/componentTreeNodes.js} (76%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index fa126bbc99..ae5866d12e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -10,6 +10,7 @@
     navigationStore,
     selectedScreen,
     hoverStore,
+    componentTreeNodesStore,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -130,6 +131,13 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       componentStore.select(data.id)
+
+      const componentPath = findComponentPath(
+        $selectedScreen?.props,
+        data.id
+      ).map(component => component._id)
+
+      componentTreeNodesStore.expandNodes(componentPath)
     } else if (type === "hover-component") {
       hoverStore.hover(data.id, false)
     } else if (type === "update-prop") {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index f6bbac39a5..df0d361290 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -4,12 +4,12 @@
     selectedScreen,
     componentStore,
     selectedComponent,
+    componentTreeNodesStore
   } from "stores/builder"
   import { findComponent } from "helpers/components"
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
   let confirmDeleteDialog
   let confirmEjectDialog
@@ -66,6 +66,7 @@
       componentTreeNodesStore.expandNode(component._id)
     },
     ["ArrowLeft"]: component => {
+      componentStore.select(component._id)
       componentTreeNodesStore.collapseNode(component._id)
     },
     ["Ctrl+ArrowRight"]: component => {
@@ -83,6 +84,7 @@
       expandChildren(component)
     },
     ["Ctrl+ArrowLeft"]: component => {
+      componentStore.select(component._id)
       componentTreeNodesStore.collapseNode(component._id)
 
       const collapseChildren = component => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index f24235ad07..b8e5720eea 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -7,8 +7,8 @@
     componentStore,
     userSelectedResourceMap,
     selectedComponent,
-    selectedComponentPath,
     hoverStore,
+    componentTreeNodesStore
   } from "stores/builder"
   import {
     findComponentPath,
@@ -17,7 +17,6 @@
   } from "helpers/components"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
-  import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
   export let components = []
   export let level = 0
@@ -64,14 +63,11 @@
     }
   }
 
-  const isOpen = (component, selectedComponentPath, openNodes) => {
+  const isOpen = (component, openNodes) => {
     if (!component?._children?.length) {
       return false
     }
-    if (selectedComponentPath.slice(0, -1).includes(component._id)) {
-      return true
-    }
-    return openNodes[`nodeOpen-${component._id}`]
+    return openNodes[`nodeOpen-${component._id}`] !== false
   }
 
   const isChildOfSelectedComponent = component => {
@@ -90,7 +86,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ul>
   {#each filteredComponents || [] as component, index (component._id)}
-    {@const opened = isOpen(component, $selectedComponentPath, openNodes)}
+    {@const opened = isOpen(component, openNodes)}
     <li
       on:click|stopPropagation={() => {
         componentStore.select(component._id)
diff --git a/packages/builder/src/stores/portal/componentTreeNodesStore.js b/packages/builder/src/stores/builder/componentTreeNodes.js
similarity index 76%
rename from packages/builder/src/stores/portal/componentTreeNodesStore.js
rename to packages/builder/src/stores/builder/componentTreeNodes.js
index a6c07ae03b..f6d3a80c43 100644
--- a/packages/builder/src/stores/portal/componentTreeNodesStore.js
+++ b/packages/builder/src/stores/builder/componentTreeNodes.js
@@ -18,6 +18,14 @@ const expandNode = componentId => {
   })
 }
 
+const expandNodes = componentIds => {
+  baseStore.update(openNodes => {
+    const newNodes = Object.fromEntries(componentIds.map(id => ([`nodeOpen-${id}`, true])))
+
+    return { ...openNodes, ...newNodes };
+  })
+}
+
 const collapseNode = componentId => {
   baseStore.update(openNodes => {
     openNodes[`nodeOpen-${componentId}`] = false
@@ -30,6 +38,7 @@ const store = {
   subscribe: baseStore.subscribe,
   toggleNode,
   expandNode,
+  expandNodes,
   collapseNode,
 }
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index d7572dca60..6dc1a1c96b 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -19,6 +19,7 @@ import {
   appStore,
   previewStore,
   tables,
+  componentTreeNodesStore
 } from "stores/builder/index"
 import { buildFormSchema, getSchemaForDatasource } from "dataBinding"
 import {
@@ -29,7 +30,6 @@ import {
 } from "constants/backend"
 import BudiStore from "./BudiStore"
 import { Utils } from "@budibase/frontend-core"
-import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
 export const INITIAL_COMPONENTS_STATE = {
   components: {},
@@ -653,6 +653,16 @@ export class ComponentStore extends BudiStore {
     this.update(state => {
       state.selectedScreenId = targetScreenId
       state.selectedComponentId = newComponentId
+
+      const targetScreen = get(screenStore).screens.find(screen => screen.id === targetScreenId)
+
+      const componentPathIds = findComponentPath(
+        targetScreen?.props,
+        newComponentId
+      ).map(component => component._id)
+
+      componentTreeNodesStore.expandNodes(componentPathIds)
+
       return state
     })
   }
@@ -680,16 +690,16 @@ export class ComponentStore extends BudiStore {
 
     // If we have siblings above us, choose the sibling or a descendant
     if (index > 0) {
-      // If sibling before us accepts children, select a descendant
+      // If sibling before us accepts children, and is not collapsed, select a descendant
       const previousSibling = parent._children[index - 1]
       if (
         previousSibling._children?.length &&
-        componentTreeNodes[`nodeOpen-${previousSibling._id}`]
+        componentTreeNodes[`nodeOpen-${previousSibling._id}`] !== false
       ) {
         let target = previousSibling
         while (
           target._children?.length &&
-          componentTreeNodes[`nodeOpen-${target._id}`]
+          componentTreeNodes[`nodeOpen-${target._id}`] !== false
         ) {
           target = target._children[target._children.length - 1]
         }
@@ -720,11 +730,11 @@ export class ComponentStore extends BudiStore {
       return navComponentId
     }
 
-    // If we have children, select first child
+    // If we have children, select first child, and the node is not collapsed
     if (
       component._children?.length &&
       (state.selectedComponentId === navComponentId ||
-        componentTreeNodes[`nodeOpen-${component._id}`])
+        componentTreeNodes[`nodeOpen-${component._id}`] !== false)
     ) {
       return component._children[0]._id
     } else if (!parent) {
@@ -784,6 +794,7 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(screen => {
       const componentId = component?._id
       const parent = findComponentParent(screen.props, componentId)
+      const componentTreeNodes = get(componentTreeNodesStore)
 
       // Check we aren't right at the top of the tree
       const index = parent?._children.findIndex(x => x._id === componentId)
@@ -803,7 +814,7 @@ export class ComponentStore extends BudiStore {
         // sibling
         const previousSibling = parent._children[index - 1]
         const definition = this.getDefinition(previousSibling._component)
-        if (definition.hasChildren) {
+        if (definition.hasChildren && componentTreeNodes[`nodeOpen-${previousSibling._id}`] !== false) {
           previousSibling._children.push(originalComponent)
         }
 
@@ -829,6 +840,8 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(screen => {
       const componentId = component?._id
       const parent = findComponentParent(screen.props, componentId)
+      const componentTreeNodes = get(componentTreeNodesStore)
+
 
       // Sanity check parent is found
       if (!parent?._children?.length) {
@@ -852,10 +865,10 @@ export class ComponentStore extends BudiStore {
 
       // Move below the next sibling if we are not the last sibling
       if (index < parent._children.length) {
-        // If the next sibling has children, become the first child
+        // If the next sibling has children, and is not collapsed, become the first child
         const nextSibling = parent._children[index]
         const definition = this.getDefinition(nextSibling._component)
-        if (definition.hasChildren) {
+        if (definition.hasChildren && componentTreeNodes[`nodeOpen-${nextSibling._id}`] !== false) {
           nextSibling._children.splice(0, 0, originalComponent)
         }
 
@@ -1151,13 +1164,3 @@ export const selectedComponent = derived(
     return clone
   }
 )
-
-export const selectedComponentPath = derived(
-  [componentStore, selectedScreen],
-  ([$store, $selectedScreen]) => {
-    return findComponentPath(
-      $selectedScreen?.props,
-      $store.selectedComponentId
-    ).map(component => component._id)
-  }
-)
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index bac9fb8826..ee2c36db38 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -3,7 +3,6 @@ import { appStore } from "./app.js"
 import {
   componentStore,
   selectedComponent,
-  selectedComponentPath,
 } from "./components"
 import { navigationStore } from "./navigation.js"
 import { themeStore } from "./theme.js"
@@ -30,8 +29,10 @@ import { integrations } from "./integrations"
 import { sortedIntegrations } from "./sortedIntegrations"
 import { queries } from "./queries"
 import { flags } from "./flags"
+import componentTreeNodesStore from './componentTreeNodes';
 
 export {
+  componentTreeNodesStore,
   layoutStore,
   appStore,
   componentStore,
@@ -50,7 +51,6 @@ export {
   isOnlyUser,
   deploymentStore,
   selectedComponent,
-  selectedComponentPath,
   tables,
   views,
   viewsV2,

From f1208919eeecf2867f852929cf6d06b1a9ce67e8 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 4 Mar 2024 08:07:15 +0000
Subject: [PATCH 02/20] linting

---
 .../ComponentList/ComponentKeyHandler.svelte    |  2 +-
 .../ComponentList/ComponentTree.svelte          |  2 +-
 .../src/stores/builder/componentTreeNodes.js    |  6 ++++--
 .../builder/src/stores/builder/components.js    | 17 ++++++++++++-----
 packages/builder/src/stores/builder/index.js    |  7 ++-----
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index df0d361290..f25d21721d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -4,7 +4,7 @@
     selectedScreen,
     componentStore,
     selectedComponent,
-    componentTreeNodesStore
+    componentTreeNodesStore,
   } from "stores/builder"
   import { findComponent } from "helpers/components"
   import { goto, isActive } from "@roxi/routify"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index b8e5720eea..6bae359a17 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -8,7 +8,7 @@
     userSelectedResourceMap,
     selectedComponent,
     hoverStore,
-    componentTreeNodesStore
+    componentTreeNodesStore,
   } from "stores/builder"
   import {
     findComponentPath,
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js
index f6d3a80c43..bffb1327b2 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.js
+++ b/packages/builder/src/stores/builder/componentTreeNodes.js
@@ -20,9 +20,11 @@ const expandNode = componentId => {
 
 const expandNodes = componentIds => {
   baseStore.update(openNodes => {
-    const newNodes = Object.fromEntries(componentIds.map(id => ([`nodeOpen-${id}`, true])))
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, true])
+    )
 
-    return { ...openNodes, ...newNodes };
+    return { ...openNodes, ...newNodes }
   })
 }
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 6dc1a1c96b..6bce50a614 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -19,7 +19,7 @@ import {
   appStore,
   previewStore,
   tables,
-  componentTreeNodesStore
+  componentTreeNodesStore,
 } from "stores/builder/index"
 import { buildFormSchema, getSchemaForDatasource } from "dataBinding"
 import {
@@ -654,7 +654,9 @@ export class ComponentStore extends BudiStore {
       state.selectedScreenId = targetScreenId
       state.selectedComponentId = newComponentId
 
-      const targetScreen = get(screenStore).screens.find(screen => screen.id === targetScreenId)
+      const targetScreen = get(screenStore).screens.find(
+        screen => screen.id === targetScreenId
+      )
 
       const componentPathIds = findComponentPath(
         targetScreen?.props,
@@ -814,7 +816,10 @@ export class ComponentStore extends BudiStore {
         // sibling
         const previousSibling = parent._children[index - 1]
         const definition = this.getDefinition(previousSibling._component)
-        if (definition.hasChildren && componentTreeNodes[`nodeOpen-${previousSibling._id}`] !== false) {
+        if (
+          definition.hasChildren &&
+          componentTreeNodes[`nodeOpen-${previousSibling._id}`] !== false
+        ) {
           previousSibling._children.push(originalComponent)
         }
 
@@ -842,7 +847,6 @@ export class ComponentStore extends BudiStore {
       const parent = findComponentParent(screen.props, componentId)
       const componentTreeNodes = get(componentTreeNodesStore)
 
-
       // Sanity check parent is found
       if (!parent?._children?.length) {
         return false
@@ -868,7 +872,10 @@ export class ComponentStore extends BudiStore {
         // If the next sibling has children, and is not collapsed, become the first child
         const nextSibling = parent._children[index]
         const definition = this.getDefinition(nextSibling._component)
-        if (definition.hasChildren && componentTreeNodes[`nodeOpen-${nextSibling._id}`] !== false) {
+        if (
+          definition.hasChildren &&
+          componentTreeNodes[`nodeOpen-${nextSibling._id}`] !== false
+        ) {
           nextSibling._children.splice(0, 0, originalComponent)
         }
 
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index ee2c36db38..98fedd880a 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -1,9 +1,6 @@
 import { layoutStore } from "./layouts.js"
 import { appStore } from "./app.js"
-import {
-  componentStore,
-  selectedComponent,
-} from "./components"
+import { componentStore, selectedComponent } from "./components"
 import { navigationStore } from "./navigation.js"
 import { themeStore } from "./theme.js"
 import { screenStore, selectedScreen, sortedScreens } from "./screens.js"
@@ -29,7 +26,7 @@ import { integrations } from "./integrations"
 import { sortedIntegrations } from "./sortedIntegrations"
 import { queries } from "./queries"
 import { flags } from "./flags"
-import componentTreeNodesStore from './componentTreeNodes';
+import componentTreeNodesStore from "./componentTreeNodes"
 
 export {
   componentTreeNodesStore,

From 7cd0ce371de4b0ec30e5cbd36b18f9850773dbb4 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 4 Mar 2024 08:17:58 +0000
Subject: [PATCH 03/20] wip

---
 .../_components/ComponentList/ComponentTree.svelte     |  2 +-
 packages/builder/src/stores/builder/components.js      | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 6bae359a17..3cacf3c096 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -67,7 +67,7 @@
     if (!component?._children?.length) {
       return false
     }
-    return openNodes[`nodeOpen-${component._id}`] !== false
+    return openNodes[`nodeOpen-${component._id}`]
   }
 
   const isChildOfSelectedComponent = component => {
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 6bce50a614..122b9fd0ff 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -696,12 +696,12 @@ export class ComponentStore extends BudiStore {
       const previousSibling = parent._children[index - 1]
       if (
         previousSibling._children?.length &&
-        componentTreeNodes[`nodeOpen-${previousSibling._id}`] !== false
+        componentTreeNodes[`nodeOpen-${previousSibling._id}`]
       ) {
         let target = previousSibling
         while (
           target._children?.length &&
-          componentTreeNodes[`nodeOpen-${target._id}`] !== false
+          componentTreeNodes[`nodeOpen-${target._id}`]
         ) {
           target = target._children[target._children.length - 1]
         }
@@ -736,7 +736,7 @@ export class ComponentStore extends BudiStore {
     if (
       component._children?.length &&
       (state.selectedComponentId === navComponentId ||
-        componentTreeNodes[`nodeOpen-${component._id}`] !== false)
+        componentTreeNodes[`nodeOpen-${component._id}`])
     ) {
       return component._children[0]._id
     } else if (!parent) {
@@ -818,7 +818,7 @@ export class ComponentStore extends BudiStore {
         const definition = this.getDefinition(previousSibling._component)
         if (
           definition.hasChildren &&
-          componentTreeNodes[`nodeOpen-${previousSibling._id}`] !== false
+          componentTreeNodes[`nodeOpen-${previousSibling._id}`]
         ) {
           previousSibling._children.push(originalComponent)
         }
@@ -874,7 +874,7 @@ export class ComponentStore extends BudiStore {
         const definition = this.getDefinition(nextSibling._component)
         if (
           definition.hasChildren &&
-          componentTreeNodes[`nodeOpen-${nextSibling._id}`] !== false
+          componentTreeNodes[`nodeOpen-${nextSibling._id}`]
         ) {
           nextSibling._children.splice(0, 0, originalComponent)
         }

From 749dab7f6875715b1b98c97a7875b9b573591bcc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Mar 2024 15:00:42 +0000
Subject: [PATCH 04/20] Add paths to builder tsconfig

---
 packages/builder/tsconfig.json | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/builder/tsconfig.json b/packages/builder/tsconfig.json
index b2084dba65..7c9b35bff5 100644
--- a/packages/builder/tsconfig.json
+++ b/packages/builder/tsconfig.json
@@ -4,6 +4,22 @@
     "composite": true,
     "declaration": true,
     "sourceMap": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "assets/*": ["./assets/*"],
+      "components/*": ["./src/components/*"],
+      "pages/*": ["./src/pages/*"],
+      "templates": ["./src/templates"],
+      "templates/*": ["./src/templates/*"],
+      "stores/*": ["./src/stores/*"],
+      "dataBinding": ["./src/dataBinding.js"],
+      "api": ["./src/api.js"],
+      "constants": ["./src/constants"],
+      "constants/*": ["./src/constants/*"],
+      "analytics": ["./src/analytics"],
+      "actions": ["./src/actions"],
+      "helpers": ["./src/helpers"],
+      "helpers/*": ["./src/helpers/*"]
+    }
   }
 }

From 89371c5f5f2224a1c5fd134344163f66a8f2c02f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 14 Mar 2024 13:24:34 +0000
Subject: [PATCH 05/20] remove node collapsing magic string

---
 .../_components/ComponentList/ComponentTree.svelte |  4 ++--
 .../src/stores/builder/componentTreeNodes.js       |  7 +++++++
 packages/builder/src/stores/builder/components.js  | 14 +++++---------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 3cacf3c096..d4d0e9e484 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -63,11 +63,11 @@
     }
   }
 
-  const isOpen = (component, openNodes) => {
+  const isOpen = (component) => {
     if (!component?._children?.length) {
       return false
     }
-    return openNodes[`nodeOpen-${component._id}`]
+    return componentTreeNodesStore.isNodeExpanded(component._id)
   }
 
   const isChildOfSelectedComponent = component => {
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js
index bffb1327b2..d23f6a232f 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.js
+++ b/packages/builder/src/stores/builder/componentTreeNodes.js
@@ -1,3 +1,4 @@
+import { get } from 'svelte/store'
 import { createSessionStorageStore } from "@budibase/frontend-core"
 
 const baseStore = createSessionStorageStore("openNodes", {})
@@ -36,12 +37,18 @@ const collapseNode = componentId => {
   })
 }
 
+const isNodeExpanded = componentId => {
+  const openNodes = get(baseStore);
+  return !!openNodes[`nodeOpen-${componentId}`]
+}
+
 const store = {
   subscribe: baseStore.subscribe,
   toggleNode,
   expandNode,
   expandNodes,
   collapseNode,
+  isNodeExpanded
 }
 
 export default store
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 122b9fd0ff..64699a17c8 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -675,7 +675,6 @@ export class ComponentStore extends BudiStore {
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(x => x._id === componentId)
-    const componentTreeNodes = get(componentTreeNodesStore)
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -696,12 +695,12 @@ export class ComponentStore extends BudiStore {
       const previousSibling = parent._children[index - 1]
       if (
         previousSibling._children?.length &&
-        componentTreeNodes[`nodeOpen-${previousSibling._id}`]
+        componentTreeNodesStore.isNodeExpanded(previousSibling._id)
       ) {
         let target = previousSibling
         while (
           target._children?.length &&
-          componentTreeNodes[`nodeOpen-${target._id}`]
+          componentTreeNodesStore.isNodeExpanded(target._id)
         ) {
           target = target._children[target._children.length - 1]
         }
@@ -723,7 +722,6 @@ export class ComponentStore extends BudiStore {
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(x => x._id === componentId)
-    const componentTreeNodes = get(componentTreeNodesStore)
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -736,7 +734,7 @@ export class ComponentStore extends BudiStore {
     if (
       component._children?.length &&
       (state.selectedComponentId === navComponentId ||
-        componentTreeNodes[`nodeOpen-${component._id}`])
+        componentTreeNodesStore.isNodeExpanded(component._id))
     ) {
       return component._children[0]._id
     } else if (!parent) {
@@ -796,7 +794,6 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(screen => {
       const componentId = component?._id
       const parent = findComponentParent(screen.props, componentId)
-      const componentTreeNodes = get(componentTreeNodesStore)
 
       // Check we aren't right at the top of the tree
       const index = parent?._children.findIndex(x => x._id === componentId)
@@ -818,7 +815,7 @@ export class ComponentStore extends BudiStore {
         const definition = this.getDefinition(previousSibling._component)
         if (
           definition.hasChildren &&
-          componentTreeNodes[`nodeOpen-${previousSibling._id}`]
+          componentTreeNodesStore.isNodeExpanded(previousSibling._id)
         ) {
           previousSibling._children.push(originalComponent)
         }
@@ -845,7 +842,6 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(screen => {
       const componentId = component?._id
       const parent = findComponentParent(screen.props, componentId)
-      const componentTreeNodes = get(componentTreeNodesStore)
 
       // Sanity check parent is found
       if (!parent?._children?.length) {
@@ -874,7 +870,7 @@ export class ComponentStore extends BudiStore {
         const definition = this.getDefinition(nextSibling._component)
         if (
           definition.hasChildren &&
-          componentTreeNodes[`nodeOpen-${nextSibling._id}`]
+          componentTreeNodesStore.isNodeExpanded(nextSibling._id)
         ) {
           nextSibling._children.splice(0, 0, originalComponent)
         }

From d1affc2586a8267fc1398152ab24763e84b5ee1f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 14 Mar 2024 15:21:55 +0000
Subject: [PATCH 06/20] wip

---
 packages/builder/src/helpers/components.js    |  8 ++++
 .../[screenId]/_components/AppPreview.svelte  |  9 +---
 .../ComponentList/ComponentKeyHandler.svelte  | 35 ++++-----------
 .../src/stores/builder/componentTreeNodes.js  | 45 +++++++++++++------
 .../builder/src/stores/builder/components.js  | 13 +-----
 5 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/packages/builder/src/helpers/components.js b/packages/builder/src/helpers/components.js
index 4f4f3ed380..31864d38bb 100644
--- a/packages/builder/src/helpers/components.js
+++ b/packages/builder/src/helpers/components.js
@@ -279,3 +279,11 @@ export const buildContextTreeLookupMap = rootComponent => {
   })
   return map
 }
+
+// Get a flat list of ids for all descendants of a component
+export const getChildIdsForComponent = component => {
+  return [
+    component._id,
+    ...(component?._children ?? []).map(getChildIdsForComponent).flat(1)
+  ]
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 51837b751d..19ad808504 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -130,14 +130,9 @@
       loading = false
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
+      console.log("selecting");
       componentStore.select(data.id)
-
-      const componentPath = findComponentPath(
-        $selectedScreen?.props,
-        data.id
-      ).map(component => component._id)
-
-      componentTreeNodesStore.expandNodes(componentPath)
+      componentTreeNodesStore.makeNodeVisible(data.id)
     } else if (type === "hover-component") {
       hoverStore.hover(data.id, false)
     } else if (type === "update-prop") {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index f25d21721d..b304219a36 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -6,7 +6,7 @@
     selectedComponent,
     componentTreeNodesStore,
   } from "stores/builder"
-  import { findComponent } from "helpers/components"
+  import { findComponent, getChildIdsForComponent } from "helpers/components"
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -63,40 +63,23 @@
       componentStore.selectNext()
     },
     ["ArrowRight"]: component => {
-      componentTreeNodesStore.expandNode(component._id)
+      componentTreeNodesStore.expandNodes([component._id])
     },
     ["ArrowLeft"]: component => {
       componentStore.select(component._id)
-      componentTreeNodesStore.collapseNode(component._id)
+      componentTreeNodesStore.collapseNodes([component._id])
     },
     ["Ctrl+ArrowRight"]: component => {
-      componentTreeNodesStore.expandNode(component._id)
-
-      const expandChildren = component => {
-        const children = component._children ?? []
-
-        children.forEach(child => {
-          componentTreeNodesStore.expandNode(child._id)
-          expandChildren(child)
-        })
-      }
-
-      expandChildren(component)
+      const childIds = getChildIdsForComponent(component)
+      componentTreeNodesStore.expandNodes(childIds)
     },
     ["Ctrl+ArrowLeft"]: component => {
+      // Select the collapsing root component to ensure the currently selected component is hidden
+      // due to this action
       componentStore.select(component._id)
-      componentTreeNodesStore.collapseNode(component._id)
 
-      const collapseChildren = component => {
-        const children = component._children ?? []
-
-        children.forEach(child => {
-          componentTreeNodesStore.collapseNode(child._id)
-          collapseChildren(child)
-        })
-      }
-
-      collapseChildren(component)
+      const childIds = getChildIdsForComponent(component)
+      componentTreeNodesStore.collapseNodes(childIds)
     },
     ["Escape"]: () => {
       if ($isActive(`./:componentId/new`)) {
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js
index d23f6a232f..c64facbbc9 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.js
+++ b/packages/builder/src/stores/builder/componentTreeNodes.js
@@ -1,5 +1,9 @@
 import { get } from 'svelte/store'
 import { createSessionStorageStore } from "@budibase/frontend-core"
+import { selectedScreen as selectedScreenStore } from "./screens"
+import {
+  findComponentPath,
+} from "helpers/components"
 
 const baseStore = createSessionStorageStore("openNodes", {})
 
@@ -11,14 +15,6 @@ const toggleNode = componentId => {
   })
 }
 
-const expandNode = componentId => {
-  baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = true
-
-    return openNodes
-  })
-}
-
 const expandNodes = componentIds => {
   baseStore.update(openNodes => {
     const newNodes = Object.fromEntries(
@@ -29,11 +25,34 @@ const expandNodes = componentIds => {
   })
 }
 
-const collapseNode = componentId => {
+const collapseNodes = componentIds => {
   baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = false
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, false])
+    )
 
-    return openNodes
+    return { ...openNodes, ...newNodes }
+  })
+}
+
+
+// Will ensure all parents of a node are expanded so that it is visible in the tree
+const makeNodeVisible = componentId => {
+  const selectedScreen = get(selectedScreenStore);
+
+  const path = findComponentPath(
+    selectedScreen.props,
+    componentId
+  )
+
+  const componentIds = path.map(component => component._id)
+
+  baseStore.update(openNodes => {
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, true])
+    )
+
+    return { ...openNodes, ...newNodes }
   })
 }
 
@@ -45,9 +64,9 @@ const isNodeExpanded = componentId => {
 const store = {
   subscribe: baseStore.subscribe,
   toggleNode,
-  expandNode,
   expandNodes,
-  collapseNode,
+  makeNodeVisible,
+  collapseNodes,
   isNodeExpanded
 }
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 64699a17c8..78fad6db40 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -654,19 +654,10 @@ export class ComponentStore extends BudiStore {
       state.selectedScreenId = targetScreenId
       state.selectedComponentId = newComponentId
 
-      const targetScreen = get(screenStore).screens.find(
-        screen => screen.id === targetScreenId
-      )
-
-      const componentPathIds = findComponentPath(
-        targetScreen?.props,
-        newComponentId
-      ).map(component => component._id)
-
-      componentTreeNodesStore.expandNodes(componentPathIds)
-
       return state
     })
+
+    componentTreeNodesStore.makeNodeVisible(newComponentId)
   }
 
   getPrevious() {

From 61f2746cf9dbd425166b1200daec8207c1884f9c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 14 Mar 2024 15:51:48 +0000
Subject: [PATCH 07/20] linting

---
 packages/builder/src/helpers/components.js     |  2 +-
 .../[screenId]/_components/AppPreview.svelte   |  1 -
 .../ComponentList/ComponentTree.svelte         |  2 +-
 .../src/stores/builder/componentTreeNodes.js   | 18 ++++++------------
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/helpers/components.js b/packages/builder/src/helpers/components.js
index 31864d38bb..a03ebfdfa7 100644
--- a/packages/builder/src/helpers/components.js
+++ b/packages/builder/src/helpers/components.js
@@ -284,6 +284,6 @@ export const buildContextTreeLookupMap = rootComponent => {
 export const getChildIdsForComponent = component => {
   return [
     component._id,
-    ...(component?._children ?? []).map(getChildIdsForComponent).flat(1)
+    ...(component?._children ?? []).map(getChildIdsForComponent).flat(1),
   ]
 }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 19ad808504..219b47687c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -130,7 +130,6 @@
       loading = false
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
-      console.log("selecting");
       componentStore.select(data.id)
       componentTreeNodesStore.makeNodeVisible(data.id)
     } else if (type === "hover-component") {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index d4d0e9e484..00435eff3e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -63,7 +63,7 @@
     }
   }
 
-  const isOpen = (component) => {
+  const isOpen = component => {
     if (!component?._children?.length) {
       return false
     }
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js
index c64facbbc9..a8e09a2051 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.js
+++ b/packages/builder/src/stores/builder/componentTreeNodes.js
@@ -1,9 +1,7 @@
-import { get } from 'svelte/store'
+import { get } from "svelte/store"
 import { createSessionStorageStore } from "@budibase/frontend-core"
 import { selectedScreen as selectedScreenStore } from "./screens"
-import {
-  findComponentPath,
-} from "helpers/components"
+import { findComponentPath } from "helpers/components"
 
 const baseStore = createSessionStorageStore("openNodes", {})
 
@@ -35,15 +33,11 @@ const collapseNodes = componentIds => {
   })
 }
 
-
 // Will ensure all parents of a node are expanded so that it is visible in the tree
 const makeNodeVisible = componentId => {
-  const selectedScreen = get(selectedScreenStore);
+  const selectedScreen = get(selectedScreenStore)
 
-  const path = findComponentPath(
-    selectedScreen.props,
-    componentId
-  )
+  const path = findComponentPath(selectedScreen.props, componentId)
 
   const componentIds = path.map(component => component._id)
 
@@ -57,7 +51,7 @@ const makeNodeVisible = componentId => {
 }
 
 const isNodeExpanded = componentId => {
-  const openNodes = get(baseStore);
+  const openNodes = get(baseStore)
   return !!openNodes[`nodeOpen-${componentId}`]
 }
 
@@ -67,7 +61,7 @@ const store = {
   expandNodes,
   makeNodeVisible,
   collapseNodes,
-  isNodeExpanded
+  isNodeExpanded,
 }
 
 export default store

From 49c104d762ee1a4c108821c68b29f32143032a73 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 14 Mar 2024 15:57:18 +0000
Subject: [PATCH 08/20] wip

---
 .../_components/ComponentList/ComponentKeyHandler.svelte   | 6 ++++--
 .../_components/ComponentList/ComponentTree.svelte         | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index b304219a36..7e9c113a77 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -66,6 +66,8 @@
       componentTreeNodesStore.expandNodes([component._id])
     },
     ["ArrowLeft"]: component => {
+      // Select the collapsing root component to ensure the currently selected component is not
+      // hidden in a collapsed node
       componentStore.select(component._id)
       componentTreeNodesStore.collapseNodes([component._id])
     },
@@ -74,8 +76,8 @@
       componentTreeNodesStore.expandNodes(childIds)
     },
     ["Ctrl+ArrowLeft"]: component => {
-      // Select the collapsing root component to ensure the currently selected component is hidden
-      // due to this action
+      // Select the collapsing root component to ensure the currently selected component is not
+      // hidden in a collapsed node
       componentStore.select(component._id)
 
       const childIds = getChildIdsForComponent(component)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 00435eff3e..32aa7ce7e9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -79,6 +79,11 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
+  const handleIconClick = (componentId) => {
+    componentStore.select(componentId)
+    componentTreeNodesStore.toggleNode(componentId)
+  }
+
   const hover = hoverStore.hover
 </script>
 
@@ -100,7 +105,7 @@
         on:dragend={dndStore.actions.reset}
         on:dragstart={() => dndStore.actions.dragstart(component)}
         on:dragover={dragover(component, index)}
-        on:iconClick={() => componentTreeNodesStore.toggleNode(component._id)}
+        on:iconClick={() => handleIconClick(component._id)}
         on:drop={onDrop}
         hovering={$hoverStore.componentId === component._id}
         on:mouseenter={() => hover(component._id)}

From 2d488f494c084ca18a964d517d81ff0fb826e3ff Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 14 Mar 2024 15:58:55 +0000
Subject: [PATCH 09/20] linting

---
 .../[screenId]/_components/ComponentList/ComponentTree.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 32aa7ce7e9..0219dc304d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -79,7 +79,7 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
-  const handleIconClick = (componentId) => {
+  const handleIconClick = componentId => {
     componentStore.select(componentId)
     componentTreeNodesStore.toggleNode(componentId)
   }

From 4ae3735302f42947cd76e0c8bc8af7e213ff9163 Mon Sep 17 00:00:00 2001
From: jujumilk3 <jujumilk3@gmail.com>
Date: Fri, 15 Mar 2024 19:50:54 +0900
Subject: [PATCH 10/20] fix typo at helm charts

---
 charts/budibase/README.md   | 2 +-
 charts/budibase/values.yaml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/charts/budibase/README.md b/charts/budibase/README.md
index 342011bdb1..dea7d1dbae 100644
--- a/charts/budibase/README.md
+++ b/charts/budibase/README.md
@@ -140,7 +140,7 @@ $ helm install --create-namespace --namespace budibase budibase . -f values.yaml
 | ingress.className | string | `""` | What ingress class to use. |
 | ingress.enabled | bool | `true` | Whether to create an Ingress resource pointing to the Budibase proxy. |
 | ingress.hosts | list | `[]` | Standard hosts block for the Ingress resource. Defaults to pointing to the Budibase proxy. |
-| nameOverride | string | `""` | Override the name of the deploymen. Defaults to {{ .Chart.Name }}. |
+| nameOverride | string | `""` | Override the name of the deployment. Defaults to {{ .Chart.Name }}. |
 | service.port | int | `10000` | Port to expose on the service. |
 | service.type | string | `"ClusterIP"` | Service type for the service that points to the main Budibase proxy pod. |
 | serviceAccount.annotations | object | `{}` | Annotations to add to the service account |
diff --git a/charts/budibase/values.yaml b/charts/budibase/values.yaml
index 09262df463..19b6c22d6c 100644
--- a/charts/budibase/values.yaml
+++ b/charts/budibase/values.yaml
@@ -1,6 +1,6 @@
 # -- Passed to all pods created by this chart. Should not ordinarily need to be changed.
 imagePullSecrets: []
-# -- Override the name of the deploymen. Defaults to {{ .Chart.Name }}.
+# -- Override the name of the deployment. Defaults to {{ .Chart.Name }}.
 nameOverride: ""
 
 serviceAccount:

From 07234a1c58f121d0614b06822e5348ffbdb5bf67 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 19 Mar 2024 09:49:44 +0000
Subject: [PATCH 11/20] Make paths more generic and add paths for @budibase
 imports

---
 packages/builder/tsconfig.json | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/builder/tsconfig.json b/packages/builder/tsconfig.json
index 7c9b35bff5..be79dfd85c 100644
--- a/packages/builder/tsconfig.json
+++ b/packages/builder/tsconfig.json
@@ -7,19 +7,13 @@
     "baseUrl": ".",
     "paths": {
       "assets/*": ["./assets/*"],
-      "components/*": ["./src/components/*"],
-      "pages/*": ["./src/pages/*"],
-      "templates": ["./src/templates"],
-      "templates/*": ["./src/templates/*"],
-      "stores/*": ["./src/stores/*"],
-      "dataBinding": ["./src/dataBinding.js"],
-      "api": ["./src/api.js"],
-      "constants": ["./src/constants"],
-      "constants/*": ["./src/constants/*"],
-      "analytics": ["./src/analytics"],
-      "actions": ["./src/actions"],
-      "helpers": ["./src/helpers"],
-      "helpers/*": ["./src/helpers/*"]
+      "@budibase/*": [
+        "../*/src/index.ts",
+        "../*/src/index.js",
+        "../*",
+        "../../node_modules/@budibase/*"
+      ],
+      "*": ["./src/*"]
     }
   }
 }

From 400853fdb86de639aacb0d2d9e0d03048d8b05b8 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 19 Mar 2024 11:47:41 +0000
Subject: [PATCH 12/20] Bump version to 2.22.2

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index d191854fac..b0003be838 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.22.1",
+  "version": "2.22.2",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

From 68bc7bbdf53f32a540bb4ce5bf574d9d9df6c066 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 19 Mar 2024 12:52:06 +0000
Subject: [PATCH 13/20] Fixing issue, dis-allow passing HBS statements in as
 query parameters.

---
 .../server/src/api/controllers/query/index.ts | 26 ++++++++++++++-----
 packages/types/src/api/web/query.ts           |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/server/src/api/controllers/query/index.ts b/packages/server/src/api/controllers/query/index.ts
index 3c21537484..234508ef32 100644
--- a/packages/server/src/api/controllers/query/index.ts
+++ b/packages/server/src/api/controllers/query/index.ts
@@ -14,22 +14,36 @@ import {
   SessionCookie,
   JsonFieldSubType,
   QueryResponse,
-  QueryPreview,
   QuerySchema,
   FieldType,
   ExecuteQueryRequest,
   ExecuteQueryResponse,
-  Row,
   QueryParameter,
   PreviewQueryRequest,
   PreviewQueryResponse,
 } from "@budibase/types"
 import { ValidQueryNameRegex, utils as JsonUtils } from "@budibase/shared-core"
+import { findHBSBlocks } from "@budibase/string-templates"
 
 const Runner = new Thread(ThreadType.QUERY, {
   timeoutMs: env.QUERY_THREAD_TIMEOUT,
 })
 
+function validateQueryInputs(parameters: Record<string, string>) {
+  for (let entry of Object.entries(parameters)) {
+    const key = entry[0],
+      value = entry[1]
+    if (typeof value !== "string") {
+      continue
+    }
+    if (findHBSBlocks(value).length !== 0) {
+      throw new Error(
+        `Parameter '${key}' input contains a handlebars binding - this is not allowed.`
+      )
+    }
+  }
+}
+
 export async function fetch(ctx: UserCtx) {
   ctx.body = await sdk.queries.fetch()
 }
@@ -123,10 +137,10 @@ function getAuthConfig(ctx: UserCtx) {
 
 function enrichParameters(
   queryParameters: QueryParameter[],
-  requestParameters: { [key: string]: string } = {}
-): {
-  [key: string]: string
-} {
+  requestParameters: Record<string, string> = {}
+): Record<string, string> {
+  // first check parameters are all valid
+  validateQueryInputs(requestParameters)
   // make sure parameters are fully enriched with defaults
   for (let parameter of queryParameters) {
     if (!requestParameters[parameter.name]) {
diff --git a/packages/types/src/api/web/query.ts b/packages/types/src/api/web/query.ts
index 3959cdea19..66f0248647 100644
--- a/packages/types/src/api/web/query.ts
+++ b/packages/types/src/api/web/query.ts
@@ -11,7 +11,7 @@ export interface PreviewQueryResponse {
 }
 
 export interface ExecuteQueryRequest {
-  parameters?: { [key: string]: string }
+  parameters?: Record<string, string>
   pagination?: any
 }
 

From abdff7d8e68e8d88a406ce2b8a9f8d236a7769c1 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 19 Mar 2024 13:22:43 +0000
Subject: [PATCH 14/20] Adding test case.

---
 .../api/routes/tests/queries/query.seq.spec.ts    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/server/src/api/routes/tests/queries/query.seq.spec.ts b/packages/server/src/api/routes/tests/queries/query.seq.spec.ts
index 4347ed9044..fc90ad4247 100644
--- a/packages/server/src/api/routes/tests/queries/query.seq.spec.ts
+++ b/packages/server/src/api/routes/tests/queries/query.seq.spec.ts
@@ -408,6 +408,21 @@ describe("/queries", () => {
         },
       })
     })
+
+    it("shouldn't allow handlebars to be passed as parameters", async () => {
+      const res = await request
+        .post(`/api/queries/${query._id}`)
+        .send({
+          parameters: {
+            a: "{{ 'test' }}",
+          },
+        })
+        .set(config.defaultHeaders())
+        .expect(400)
+      expect(res.body.message).toEqual(
+        "Parameter 'a' input contains a handlebars binding - this is not allowed."
+      )
+    })
   })
 
   describe("variables", () => {

From 55b9b00771935320a70691bd0005c708e451c0b8 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 19 Mar 2024 14:50:38 +0000
Subject: [PATCH 15/20] PR comments.

---
 packages/server/src/api/controllers/query/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/server/src/api/controllers/query/index.ts b/packages/server/src/api/controllers/query/index.ts
index 234508ef32..0dba20dacd 100644
--- a/packages/server/src/api/controllers/query/index.ts
+++ b/packages/server/src/api/controllers/query/index.ts
@@ -31,8 +31,7 @@ const Runner = new Thread(ThreadType.QUERY, {
 
 function validateQueryInputs(parameters: Record<string, string>) {
   for (let entry of Object.entries(parameters)) {
-    const key = entry[0],
-      value = entry[1]
+    const [key, value] = entry
     if (typeof value !== "string") {
       continue
     }

From b7b8a65a547a1d53afffb6d4c8e344473b8fbb36 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 19 Mar 2024 16:01:00 +0100
Subject: [PATCH 16/20] Don't init DocWritethrough queue on load

---
 .../backend-core/src/cache/docWritethrough.ts | 32 ++++++++++++-------
 .../src/cache/tests/docWritethrough.spec.ts   |  6 ++--
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/backend-core/src/cache/docWritethrough.ts b/packages/backend-core/src/cache/docWritethrough.ts
index 1b129bb26a..05f13a0d91 100644
--- a/packages/backend-core/src/cache/docWritethrough.ts
+++ b/packages/backend-core/src/cache/docWritethrough.ts
@@ -1,6 +1,6 @@
 import { AnyDocument, Database } from "@budibase/types"
 
-import { JobQueue, createQueue } from "../queue"
+import { JobQueue, Queue, createQueue } from "../queue"
 import * as dbUtils from "../db"
 
 interface ProcessDocMessage {
@@ -12,18 +12,26 @@ interface ProcessDocMessage {
 const PERSIST_MAX_ATTEMPTS = 100
 let processor: DocWritethroughProcessor | undefined
 
-export const docWritethroughProcessorQueue = createQueue<ProcessDocMessage>(
-  JobQueue.DOC_WRITETHROUGH_QUEUE,
-  {
-    jobOptions: {
-      attempts: PERSIST_MAX_ATTEMPTS,
-    },
-  }
-)
+export class DocWritethroughProcessor {
+  private static _queue: Queue
+
+  public static get queue() {
+    if (!DocWritethroughProcessor._queue) {
+      DocWritethroughProcessor._queue = createQueue<ProcessDocMessage>(
+        JobQueue.DOC_WRITETHROUGH_QUEUE,
+        {
+          jobOptions: {
+            attempts: PERSIST_MAX_ATTEMPTS,
+          },
+        }
+      )
+    }
+
+    return DocWritethroughProcessor._queue
+  }
 
-class DocWritethroughProcessor {
   init() {
-    docWritethroughProcessorQueue.process(async message => {
+    DocWritethroughProcessor.queue.process(async message => {
       try {
         await this.persistToDb(message.data)
       } catch (err: any) {
@@ -76,7 +84,7 @@ export class DocWritethrough {
   }
 
   async patch(data: Record<string, any>) {
-    await docWritethroughProcessorQueue.add({
+    await DocWritethroughProcessor.queue.add({
       dbName: this.db.name,
       docId: this.docId,
       data,
diff --git a/packages/backend-core/src/cache/tests/docWritethrough.spec.ts b/packages/backend-core/src/cache/tests/docWritethrough.spec.ts
index 1ae85cfd0b..b40338c408 100644
--- a/packages/backend-core/src/cache/tests/docWritethrough.spec.ts
+++ b/packages/backend-core/src/cache/tests/docWritethrough.spec.ts
@@ -6,7 +6,7 @@ import { getDB } from "../../db"
 
 import {
   DocWritethrough,
-  docWritethroughProcessorQueue,
+  DocWritethroughProcessor,
   init,
 } from "../docWritethrough"
 
@@ -15,7 +15,7 @@ import InMemoryQueue from "../../queue/inMemoryQueue"
 const initialTime = Date.now()
 
 async function waitForQueueCompletion() {
-  const queue: InMemoryQueue = docWritethroughProcessorQueue as never
+  const queue: InMemoryQueue = DocWritethroughProcessor.queue as never
   await queue.waitForCompletion()
 }
 
@@ -235,7 +235,7 @@ describe("docWritethrough", () => {
           return acc
         }, {})
       }
-      const queueMessageSpy = jest.spyOn(docWritethroughProcessorQueue, "add")
+      const queueMessageSpy = jest.spyOn(DocWritethroughProcessor.queue, "add")
 
       await config.doInTenant(async () => {
         let patches = await parallelPatch(5)

From ce1dad7edc4da851df5f14a3713e0dec367d8609 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 19 Mar 2024 16:01:41 +0100
Subject: [PATCH 17/20] Fix paths

---
 packages/cli/tsconfig.build.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/cli/tsconfig.build.json b/packages/cli/tsconfig.build.json
index f89ad95c28..e52d886194 100644
--- a/packages/cli/tsconfig.build.json
+++ b/packages/cli/tsconfig.build.json
@@ -11,6 +11,7 @@
     "types": ["node", "jest"],
     "outDir": "dist",
     "skipLibCheck": true,
+    "baseUrl": ".",
     "paths": {
       "@budibase/types": ["../types/src"],
       "@budibase/backend-core": ["../backend-core/src"],

From 7d931e7154a1334a51298987c3c4394c5a78cabe Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 19 Mar 2024 15:12:33 +0000
Subject: [PATCH 18/20] Update multi-step form block default state to fix all
 fields being hidden

---
 .../client/src/components/app/blocks/MultiStepFormblock.svelte   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index 2443aea017..762afc1579 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -75,6 +75,7 @@
       .filter(field => !field.autocolumn)
       .map(field => ({
         name: field.name,
+        active: true,
       }))
   }
 

From a0b7e69af07c01c885e012a9a27cf729ad724f22 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 19 Mar 2024 15:20:06 +0000
Subject: [PATCH 19/20] Bump version to 2.22.3

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index b0003be838..01e56982d5 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.22.2",
+  "version": "2.22.3",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

From 79bba829080e32632271f7c5e199dfc7833af65c Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Tue, 19 Mar 2024 15:45:24 +0000
Subject: [PATCH 20/20] Fix flaky scim test.

---
 .../backend-core/tests/core/utilities/structures/userGroups.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/backend-core/tests/core/utilities/structures/userGroups.ts b/packages/backend-core/tests/core/utilities/structures/userGroups.ts
index 4dc870a00a..4af3f72e51 100644
--- a/packages/backend-core/tests/core/utilities/structures/userGroups.ts
+++ b/packages/backend-core/tests/core/utilities/structures/userGroups.ts
@@ -3,7 +3,7 @@ import { generator } from "./generator"
 
 export function userGroup(): UserGroup {
   return {
-    name: generator.word(),
+    name: generator.guid(),
     icon: generator.word(),
     color: generator.word(),
   }