From 9301406bcd957b43c3e773419cf3135362bd2a22 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 21 Oct 2021 16:24:58 +0100
Subject: [PATCH] enable collapsible nodes in component tree

---
 .../ComponentNavigationTree/ComponentTree.svelte  | 15 ++++++++++++++-
 .../src/api/controllers/row/ExternalRequest.ts    |  6 +++++-
 packages/server/src/integrations/base/sql.ts      |  8 +++++++-
 packages/server/src/integrations/utils.ts         |  5 ++++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
index c89de55796..910ffc18f8 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/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}
diff --git a/packages/server/src/api/controllers/row/ExternalRequest.ts b/packages/server/src/api/controllers/row/ExternalRequest.ts
index 1129a9eda2..c58364af07 100644
--- a/packages/server/src/api/controllers/row/ExternalRequest.ts
+++ b/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")
diff --git a/packages/server/src/integrations/base/sql.ts b/packages/server/src/integrations/base/sql.ts
index 5a67f05830..316e20e352 100644
--- a/packages/server/src/integrations/base/sql.ts
+++ b/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(
diff --git a/packages/server/src/integrations/utils.ts b/packages/server/src/integrations/utils.ts
index 45addef839..07e4e950f8 100644
--- a/packages/server/src/integrations/utils.ts
+++ b/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) {