enable collapsible nodes in component tree

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte

@@ -11,6 +11,8 @@
   export let level = 0
   export let dragDropStore
 
+  let closedNodes = {}
+
   const selectComponent = component => {
     store.actions.components.select(component)
   }
@@ -51,6 +53,15 @@
       "component"
     return capitalise(type)
   }
+
+  function toggleNodeOpen(componentId) {
+    if (closedNodes[componentId]) {
+      delete closedNodes[componentId]
+    } else {
+      closedNodes[componentId] = true
+    }
+    closedNodes = closedNodes
+  }
 </script>
 
 <ul>
@@ -71,16 +82,18 @@
         on:dragend={dragDropStore.actions.reset}
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
+        on:iconClick={() => toggleNodeOpen(component._id)}
         on:drop={dragDropStore.actions.drop}
         text={getComponentText(component)}
         withArrow
         indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}
+        opened={!closedNodes[component._id] && component?._children?.length}
       >
         <ComponentDropdownMenu {component} />
       </NavItem>
 
-      {#if component._children}
+      {#if component._children && !closedNodes[component._id]}
         <svelte:self
           components={component._children}
           {currentComponent}

packages/server/src/api/controllers/row/ExternalRequest.ts

@@ -37,7 +37,11 @@ interface RunConfig {
 
 module External {
   const { makeExternalQuery } = require("./utils")
-  const { DataSourceOperation, FieldTypes, RelationshipTypes } = require("../../../constants")
+  const {
+    DataSourceOperation,
+    FieldTypes,
+    RelationshipTypes,
+  } = require("../../../constants")
   const { breakExternalTableId, isSQL } = require("../../../integrations/utils")
   const { processObjectSync } = require("@budibase/string-templates")
   const { cloneDeep } = require("lodash/fp")

packages/server/src/integrations/base/sql.ts

@@ -201,7 +201,13 @@ function buildRead(knex: Knex, json: QueryJson, limit: number): KnexQuery {
     [tableName]: query,
   }).select(selectStatement)
   // handle joins
-  return addRelationships(knex, preQuery, selectStatement, tableName, relationships)
+  return addRelationships(
+    knex,
+    preQuery,
+    selectStatement,
+    tableName,
+    relationships
+  )
 }
 
 function buildUpdate(

packages/server/src/integrations/utils.ts

@@ -34,7 +34,10 @@ export function generateRowIdField(keyProps: any[] = []) {
 }
 
 export function isRowId(field: any) {
-  return Array.isArray(field) || (typeof field === "string" && field.match(ROW_ID_REGEX) != null)
+  return (
+    Array.isArray(field) ||
+    (typeof field === "string" && field.match(ROW_ID_REGEX) != null)
+  )
 }
 
 export function convertRowId(field: any) {