From a2d8f143e945ea744cc18c3e93e5b01550afcd7c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 17 May 2022 13:32:16 +0100
Subject: [PATCH] Highlighted child components of selected component

---
 .../src/components/common/NavItem.svelte       | 11 ++++++++---
 .../navigation/ComponentTree.svelte            | 18 +++++++++++++++++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index e7b9b33471..5b8c416260 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -15,6 +15,7 @@
   export let iconColor
   export let scrollable = false
   export let color
+  export let highlighted = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -46,6 +47,8 @@
   class:border
   class:selected
   class:withActions
+  class:scrollable
+  class:highlighted
   style={`padding-left: calc(${indentLevel * 14}px)`}
   {draggable}
   on:dragend
@@ -55,7 +58,6 @@
   on:click={onClick}
   ondragover="return false"
   ondragenter="return false"
-  class:scrollable
 >
   <div class="nav-item-content" bind:this={contentRef}>
     {#if withArrow}
@@ -112,12 +114,15 @@
     justify-content: center;
     align-items: flex-start;
   }
+  .nav-item.highlighted {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
   .nav-item.selected {
-    background-color: var(--grey-2);
+    background-color: var(--spectrum-global-color-gray-300);
     color: var(--ink);
   }
   .nav-item:hover {
-    background-color: var(--grey-3);
+    background-color: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions {
     visibility: visible;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 0290f72757..fc5e5fb148 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -5,7 +5,13 @@
   import NavItem from "components/common/NavItem.svelte"
   import { capitalise } from "helpers"
   import { notifications } from "@budibase/bbui"
-  import { selectedComponentPath } from "builderStore"
+  import {
+    selectedComponentPath,
+    selectedComponent,
+    selectedScreen,
+  } from "builderStore"
+  import { findComponentPath } from "builderStore/componentUtils"
+  import { get } from "svelte/store"
 
   export let components = []
   export let currentComponent
@@ -87,6 +93,15 @@
     }
     return !closedNodes[component._id]
   }
+
+  const isChildOfSelectedComponent = component => {
+    const selectedComponentId = get(selectedComponent)?._id
+    const selectedScreenId = get(selectedScreen)?.props._id
+    if (!selectedComponentId || selectedComponentId === selectedScreenId) {
+      return false
+    }
+    return findComponentPath($selectedComponent, component._id)?.length > 0
+  }
 </script>
 
 <ul>
@@ -120,6 +135,7 @@
         indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}
         opened={isOpen(component, $selectedComponentPath, closedNodes)}
+        highlighted={isChildOfSelectedComponent(component)}
       >
         <ComponentDropdownMenu {component} />
       </NavItem>