From e909ff584af0b8b9b168f04a8a623d36a9487e8c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Mar 2021 19:06:25 +0000
Subject: [PATCH 1/6] Make screens searchable and make routes collapsible

---
 packages/builder/src/builderStore/index.js    |  3 +-
 .../ComponentNavigationTree/PathTree.svelte   | 92 +++++++++++++------
 .../ComponentNavigationTree/index.svelte      |  2 +-
 .../FrontendNavigatePane.svelte               | 15 ++-
 4 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 2e9ec1166c..8b0cde8658 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -2,7 +2,6 @@ import { getFrontendStore } from "./store/frontend"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation"
 import { getHostingStore } from "./store/hosting"
-
 import { getThemeStore } from "./store/theme"
 import { derived, writable } from "svelte/store"
 import analytics from "analytics"
@@ -66,3 +65,5 @@ export const initialise = async () => {
     console.log(err)
   }
 }
+
+export const screenSearchString = writable(null)
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index c9e9d27958..9a4b02a4f1 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -1,8 +1,11 @@
 <script>
-  import { goto } from "@sveltech/routify"
-  import { store, selectedComponent, currentAsset } from "builderStore"
+  import {
+    store,
+    selectedComponent,
+    currentAsset,
+    screenSearchString,
+  } from "builderStore"
   import instantiateStore from "./dragDropStore"
-
   import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
@@ -21,38 +24,67 @@
   export let indent
   export let border
 
+  let routeManuallyOpened = false
   $: selectedScreen = $currentAsset
+  $: allScreens = getAllScreens(route)
+  $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString)
+  $: hasSearchMatch = $screenSearchString && filteredScreens.length > 0
+  $: noSearchMatch = $screenSearchString && !filteredScreens.length
+  $: routeSelected = route.subpaths[selectedScreen.routing.route] !== undefined
+  $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
   const changeScreen = screenId => {
     store.actions.screens.select(screenId)
+
+    // Reset manually opened flag every time a new screen is selected
+    routeManuallyOpened = false
+  }
+
+  const getAllScreens = route => {
+    let screens = []
+    Object.entries(route.subpaths).forEach(([route, subpath]) => {
+      Object.entries(subpath.screens).forEach(([role, id]) => {
+        screens.push({ id, route, role })
+      })
+    })
+    return screens
+  }
+
+  const getFilteredScreens = (screens, searchString) => {
+    return screens.filter(
+      screen => !searchString || screen.route.includes(searchString)
+    )
   }
 </script>
 
-<NavItem
-  icon="ri-folder-line"
-  text={path}
-  opened={true}
-  {border}
-  withArrow={route.subpaths} />
+{#if !noSearchMatch}
+  <NavItem
+    icon="ri-folder-line"
+    text={path}
+    on:click={() => (routeManuallyOpened = !routeManuallyOpened)}
+    opened={routeOpened}
+    {border}
+    withArrow={route.subpaths} />
 
-{#each Object.entries(route.subpaths) as [url, subpath]}
-  {#each Object.entries(subpath.screens) as [role, screenId]}
-    <NavItem
-      icon="ri-artboard-2-line"
-      indentLevel={indent || 1}
-      selected={$store.selectedScreenId === screenId}
-      opened={$store.selectedScreenId === screenId}
-      text={ROUTE_NAME_MAP[url]?.[role] || url}
-      withArrow={route.subpaths}
-      on:click={() => changeScreen(screenId)}>
-      <ScreenDropdownMenu {screenId} />
-    </NavItem>
-    {#if selectedScreen?._id === screenId}
-      <ComponentTree
-        level={1}
-        components={selectedScreen.props._children}
-        currentComponent={$selectedComponent}
-        {dragDropStore} />
-    {/if}
-  {/each}
-{/each}
+  {#if routeOpened}
+    {#each filteredScreens as screen (screen.id)}
+      <NavItem
+        icon="ri-artboard-2-line"
+        indentLevel={indent || 1}
+        selected={$store.selectedScreenId === screen.id}
+        opened={$store.selectedScreenId === screen.id}
+        text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
+        withArrow={route.subpaths}
+        on:click={() => changeScreen(screen.id)}>
+        <ScreenDropdownMenu screenId={screen.id} />
+      </NavItem>
+      {#if selectedScreen?._id === screen.id}
+        <ComponentTree
+          level={1}
+          components={selectedScreen.props._children}
+          currentComponent={$selectedComponent}
+          {dragDropStore} />
+      {/if}
+    {/each}
+  {/if}
+{/if}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
index 720b18f8f9..65425a5b9f 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <div class="root">
-  {#each paths as path, idx}
+  {#each paths as path, idx (path)}
     <PathTree border={idx > 0} {path} route={routes[path]} />
   {/each}
 
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 147f32bb3e..2fcd4ebf1e 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -1,19 +1,19 @@
 <script>
   import { onMount } from "svelte"
-  import { goto, params, url } from "@sveltech/routify"
+  import { goto, params } from "@sveltech/routify"
   import {
     store,
     allScreens,
-    currentAsset,
     backendUiStore,
     selectedAccessRole,
+    screenSearchString,
   } from "builderStore"
   import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select } from "@budibase/bbui"
+  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -85,6 +85,10 @@
             <option value={role._id}>{role.name}</option>
           {/each}
         </Select>
+        <Input
+          extraThin
+          label="Search Screens"
+          bind:value={$screenSearchString} />
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -127,6 +131,11 @@
   }
 
   .role-select {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
     margin-bottom: var(--spacing-m);
+    gap: var(--spacing-m);
   }
 </style>

From d68ee14ed3b1e1dad090c081eac1a584c6e3c467 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Mar 2021 19:06:37 +0000
Subject: [PATCH 2/6] Add placeholder to screen search

---
 .../design/NavigationPanel/FrontendNavigatePane.svelte           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 2fcd4ebf1e..a64bf9f0ee 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -87,6 +87,7 @@
         </Select>
         <Input
           extraThin
+          placeholder="Enter a route to search"
           label="Search Screens"
           bind:value={$screenSearchString} />
       </div>

From ff5aba19f7032d86bb4d4bf7ba0328b3e21f262e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Mar 2021 19:09:41 +0000
Subject: [PATCH 3/6] Fix crash when searching screens and selecting layouts

---
 .../NavigationPanel/ComponentNavigationTree/PathTree.svelte    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index 9a4b02a4f1..09e8948407 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -30,7 +30,8 @@
   $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString)
   $: hasSearchMatch = $screenSearchString && filteredScreens.length > 0
   $: noSearchMatch = $screenSearchString && !filteredScreens.length
-  $: routeSelected = route.subpaths[selectedScreen.routing.route] !== undefined
+  $: routeSelected =
+    route.subpaths[selectedScreen?.routing?.route] !== undefined
   $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
   const changeScreen = screenId => {

From c8466bc1cf3021a60ef629a0bd9b5feb476a10ff Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 10 Mar 2021 10:35:16 +0000
Subject: [PATCH 4/6] Ignore click actions when a screen search string exists

---
 .../ComponentNavigationTree/PathTree.svelte            | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index 09e8948407..ad1b54d700 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -9,6 +9,7 @@
   import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
+  import { get } from "svelte/store"
 
   const ROUTE_NAME_MAP = {
     "/": {
@@ -56,13 +57,20 @@
       screen => !searchString || screen.route.includes(searchString)
     )
   }
+
+  const toggleManuallyOpened = () => {
+    if (get(screenSearchString)) {
+      return
+    }
+    routeManuallyOpened = !routeManuallyOpened
+  }
 </script>
 
 {#if !noSearchMatch}
   <NavItem
     icon="ri-folder-line"
     text={path}
-    on:click={() => (routeManuallyOpened = !routeManuallyOpened)}
+    on:click={toggleManuallyOpened}
     opened={routeOpened}
     {border}
     withArrow={route.subpaths} />

From 768b03fc8a85a80d18279fb4d6edbc0c178e2df8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 10 Mar 2021 10:35:49 +0000
Subject: [PATCH 5/6] Don't close folders when selecting a new screen

---
 .../NavigationPanel/ComponentNavigationTree/PathTree.svelte    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index ad1b54d700..5f98a2b9ed 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -37,9 +37,6 @@
 
   const changeScreen = screenId => {
     store.actions.screens.select(screenId)
-
-    // Reset manually opened flag every time a new screen is selected
-    routeManuallyOpened = false
   }
 
   const getAllScreens = route => {

From 8820edd1bcf342a7fd36588c27e24e5c7c68c84a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Mar 2021 15:53:31 +0000
Subject: [PATCH 6/6] Add clear icon to screen search field

---
 .../FrontendNavigatePane.svelte               | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index a64bf9f0ee..e235e3b254 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -85,11 +85,16 @@
             <option value={role._id}>{role.name}</option>
           {/each}
         </Select>
-        <Input
-          extraThin
-          placeholder="Enter a route to search"
-          label="Search Screens"
-          bind:value={$screenSearchString} />
+        <div class="search-screens">
+          <Input
+            extraThin
+            placeholder="Enter a route to search"
+            label="Search Screens"
+            bind:value={$screenSearchString} />
+          <i
+            class="ri-close-line"
+            on:click={() => ($screenSearchString = null)} />
+        </div>
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -139,4 +144,23 @@
     margin-bottom: var(--spacing-m);
     gap: var(--spacing-m);
   }
+
+  .search-screens {
+    position: relative;
+  }
+  .search-screens i {
+    right: 2px;
+    bottom: 2px;
+    position: absolute;
+    box-sizing: border-box;
+    padding: var(--spacing-s);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 14px;
+    line-height: 15px;
+    top: auto;
+  }
 </style>