From 8aa6e66be27043775b382ca42140e349aa1e06f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 16:17:26 +0200
Subject: [PATCH 1/6] wip: tree component

---
 packages/bbui/package.json             |  1 +
 packages/bbui/src/Icon/Icon.svelte     |  2 +-
 packages/bbui/src/TreeView/Item.svelte | 32 ++++++++++++++++++++++++++
 packages/bbui/src/TreeView/Tree.svelte | 10 ++++++++
 packages/bbui/src/index.js             |  2 ++
 packages/bbui/yarn.lock                |  5 ++++
 6 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/bbui/src/TreeView/Item.svelte
 create mode 100644 packages/bbui/src/TreeView/Tree.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index f0f67d8b3c..0d14187b9b 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -61,6 +61,7 @@
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/treeview": "^3.0.2",
     "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index ad5faf5ae8..c637b73096 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -5,7 +5,7 @@
 <script>
     export let direction = "n"
     export let name = "Add"
-    export let hidden = false
+    export let hidden = true
     export let s = false
     export let m = false;
     export let l = false;
diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
new file mode 100644
index 0000000000..bc378ecb22
--- /dev/null
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -0,0 +1,32 @@
+<script>
+    export let selected = false;
+    export let open = false;
+    export let title;
+    export let icon;
+</script>
+
+<li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
+    <a class="spectrum-TreeView-itemLink" href="#">
+        {#if $$slots.default}
+            <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Chevron100" />
+            </svg>
+            {#if icon}
+                <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
+                    <use xlink:href="#spectrum-icon-18-{icon}" />
+                </svg>
+            {/if}
+            <span class="spectrum-TreeView-itemLabel">{title}</span>
+            <ul class="spectrum-TreeView">
+                <slot />
+            </ul>
+        {:else}
+            {#if icon}
+                <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
+                    <use xlink:href="#spectrum-icon-18-{icon}" />
+                </svg>
+            {/if}
+            <span class="spectrum-TreeView-itemLabel">{title}</span>
+        {/if}
+    </a>
+</li>
\ No newline at end of file
diff --git a/packages/bbui/src/TreeView/Tree.svelte b/packages/bbui/src/TreeView/Tree.svelte
new file mode 100644
index 0000000000..124ffb46bd
--- /dev/null
+++ b/packages/bbui/src/TreeView/Tree.svelte
@@ -0,0 +1,10 @@
+<script>
+    import "@spectrum-css/treeview/dist/index-vars.css"
+
+    export let quiet = false
+    export let width;
+</script>
+
+<ul class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
+    <slot />
+</ul>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index a84c2b1ad5..328bb812ff 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -41,6 +41,8 @@ export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
 export { default as Tabs } from "./Tabs/Tabs.svelte"
 export { default as Tab } from "./Tabs/Tab.svelte"
+export { default as TreeView } from "./TreeView/Tree.svelte"
+export { default as TreeItem } from "./TreeView/Item.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
 
 // Typography
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 93ee6ebdd7..47d40a8e35 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -500,6 +500,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
   integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
 
+"@spectrum-css/treeview@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.2.tgz#d54d8f17290babb1c885f5d9355e225421beb0d2"
+  integrity sha512-foO7UBJv1JMFaKgDPVt8jBghZSVbqhXR8TaGaxHSnMubv7ygmKkc1AITrWC2STILCn84ju2vchOohMZfW6sYwg==
+
 "@spectrum-css/typography@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"

From fb77d95e34f228f24080316d820bee4f0da7eb34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 16:41:04 +0200
Subject: [PATCH 2/6] implements working TreeView component

---
 packages/bbui/src/TreeView/Item.svelte | 18 ++++++++++--------
 packages/bbui/src/TreeView/Tree.svelte |  5 +++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
index bc378ecb22..4f2a54fa2e 100644
--- a/packages/bbui/src/TreeView/Item.svelte
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -6,8 +6,8 @@
 </script>
 
 <li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
-    <a class="spectrum-TreeView-itemLink" href="#">
-        {#if $$slots.default}
+    {#if $$slots.default}
+        <a class="spectrum-TreeView-itemLink" href="#">
             <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron100" />
             </svg>
@@ -17,16 +17,18 @@
                 </svg>
             {/if}
             <span class="spectrum-TreeView-itemLabel">{title}</span>
-            <ul class="spectrum-TreeView">
-                <slot />
-            </ul>
-        {:else}
+        </a>
+        <ul class="spectrum-TreeView">
+            <slot />
+        </ul>
+    {:else}
+        <a class="spectrum-TreeView-itemLink" href="#">
             {#if icon}
                 <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
                     <use xlink:href="#spectrum-icon-18-{icon}" />
                 </svg>
             {/if}
             <span class="spectrum-TreeView-itemLabel">{title}</span>
-        {/if}
-    </a>
+        </a>
+    {/if}
 </li>
\ No newline at end of file
diff --git a/packages/bbui/src/TreeView/Tree.svelte b/packages/bbui/src/TreeView/Tree.svelte
index 124ffb46bd..5a4e254732 100644
--- a/packages/bbui/src/TreeView/Tree.svelte
+++ b/packages/bbui/src/TreeView/Tree.svelte
@@ -2,9 +2,10 @@
     import "@spectrum-css/treeview/dist/index-vars.css"
 
     export let quiet = false
-    export let width;
+    export let standalone = true
+    export let width = '250px';
 </script>
 
-<ul class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
+<ul class:spectrum-TreeView--standalone={standalone} class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
     <slot />
 </ul>
\ No newline at end of file

From 1f50a970c160426b594e7dc88579269f088af669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 20 Apr 2021 15:57:56 +0200
Subject: [PATCH 3/6] wip: trying to get the new TreeView component to work
 with the  drag-and-drop functionality

---
 packages/bbui/src/Menu/Item.svelte            |   2 +-
 .../NewComponentTree.svelte                   | 139 ++++++++++++++++++
 .../NewPathTree.svelte                        | 114 ++++++++++++++
 3 files changed, 254 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte
 create mode 100644 packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index 58b031fe78..23116a25a0 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -3,7 +3,7 @@
     export let disabled = undefined;
 </script>
 
-<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
+<li on:click|preventDefault class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
     <span class="spectrum-Menu-itemLabel">
         {#if icon}
             <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte
new file mode 100644
index 0000000000..ec7fc1c4b5
--- /dev/null
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte
@@ -0,0 +1,139 @@
+<script>
+    import { store } from "builderStore"
+    import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
+    import { DropEffect, DropPosition } from "./dragDropStore"
+    import NavItem from "components/common/NavItem.svelte"
+    import { TreeView, TreeItem as Item} from '@budibase/bbui'
+  
+    export let components = []
+    export let currentComponent
+    export let dragDropStore
+  
+    const isScreenslot = name => name?.endsWith("screenslot")
+  
+    const selectComponent = component => {
+      store.actions.components.select(component)
+    }
+
+    const dragstart = component => e => {
+    e.dataTransfer.dropEffect = DropEffect.MOVE
+    dragDropStore.actions.dragstart(component)
+  }
+
+  const dragover = (component, index) => e => {
+    const definition = store.actions.components.getDefinition(
+      component._component
+    )
+    const canHaveChildrenButIsEmpty =
+      definition?.hasChildren && !component._children?.length
+
+    e.dataTransfer.dropEffect = DropEffect.COPY
+
+    // how far down the mouse pointer is on the drop target
+    const mousePosition = e.offsetY / e.currentTarget.offsetHeight
+
+    dragDropStore.actions.dragover({
+      component,
+      index,
+      canHaveChildrenButIsEmpty,
+      mousePosition,
+    })
+
+    return false
+  }
+  </script>
+{#each components as component, index (component._id)}
+  {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
+    <div
+      on:drop={dragDropStore.actions.drop}
+      ondragover="return false"
+      ondragenter="return false"
+      class="drop-item" />
+  {/if}
+  <Item
+    draggable
+    on:dragend={dragDropStore.actions.reset}
+    on:dragstart={dragstart(component)}
+    on:dragover={dragover(component, index)}
+    on:drop={dragDropStore.actions.drop}
+    on:click={() => selectComponent(component)} 
+    title={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+    open
+    selected={$store.selectedComponentId === component._id}>
+    {#if component._children}
+        <svelte:self
+        components={component._children}
+        {currentComponent}
+        {dragDropStore}
+        />
+    {/if}
+  </Item>
+  {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
+    <div
+      on:drop={dragDropStore.actions.drop}
+      ondragover="return false"
+      ondragenter="return false"
+      class="drop-item"/>
+  {/if}
+{/each}
+  
+  <!-- <ul>
+    {#each components as component, index (component._id)}
+      <li on:click|stopPropagation={() => selectComponent(component)}>
+        {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
+          <div
+            on:drop={dragDropStore.actions.drop}
+            ondragover="return false"
+            ondragenter="return false"
+            class="drop-item"
+            style="margin-left: {(level + 1) * 16}px" />
+        {/if}
+  
+        <NavItem
+          draggable
+          on:dragend={dragDropStore.actions.reset}
+          on:dragstart={dragstart(component)}
+          on:dragover={dragover(component, index)}
+          on:drop={dragDropStore.actions.drop}
+          text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+          withArrow
+          indentLevel={level + 1}
+          selected={$store.selectedComponentId === component._id}>
+          <ComponentDropdownMenu {component} />
+        </NavItem>
+  
+        {#if component._children}
+          <svelte:self
+            components={component._children}
+            {currentComponent}
+            {onSelect}
+            {dragDropStore}
+            level={level + 1} />
+        {/if}
+  
+        {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
+          <div
+            on:drop={dragDropStore.actions.drop}
+            ondragover="return false"
+            ondragenter="return false"
+            class="drop-item"
+            style="margin-left: {(level + ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) * 16}px" />
+        {/if}
+      </li>
+    {/each}
+  </ul> -->
+  
+  <style>
+    ul {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+    }
+  
+    .drop-item {
+      border-radius: var(--border-radius-m);
+      height: 32px;
+      background: var(--grey-3);
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte
new file mode 100644
index 0000000000..ef5405e109
--- /dev/null
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte
@@ -0,0 +1,114 @@
+<script>
+    import { TreeItem as Item} from '@budibase/bbui'
+    import {
+      store,
+      selectedComponent,
+      currentAsset,
+      screenSearchString,
+    } from "builderStore"
+    import instantiateStore from "./dragDropStore"
+    import ComponentTree from "./NewComponentTree.svelte"
+    import { get } from "svelte/store"
+  
+    const ROUTE_NAME_MAP = {
+      "/": {
+        BASIC: "Home",
+        PUBLIC: "Login",
+      },
+    }
+  
+    const dragDropStore = instantiateStore()
+  
+    export let route
+    export let path
+  
+    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)
+    }
+  
+    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)
+      )
+    }
+  
+    const toggleManuallyOpened = () => {
+      if (get(screenSearchString)) {
+        return
+      }
+      routeManuallyOpened = !routeManuallyOpened
+    }
+  </script>
+
+{#if !noSearchMatch}
+<Item icon="Folder" title={path} open={routeOpened}>
+    {#if routeOpened}
+        {#each filteredScreens as screen (screen.id)}
+            <Item
+            icon="ModernGridView"
+            selected={$store.selectedScreenId === screen.id}
+            open={$store.selectedScreenId === screen.id}
+            on:click={toggleManuallyOpened}
+            title={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
+            on:click={() => changeScreen(screen.id)}>
+                {#if selectedScreen?._id === screen.id}
+                <ComponentTree
+                    components={selectedScreen.props._children}
+                    currentComponent={$selectedComponent}
+                    {dragDropStore} />
+                {/if}
+            </Item>
+        {/each}
+    {/if}
+</Item>
+
+<!-- <NavItem
+  icon="ri-folder-line"
+  text={path}
+  on:click={toggleManuallyOpened}
+  opened={routeOpened}
+  {border}
+  withArrow={route.subpaths} />
+
+    {#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}

From 69823b1d5271d0218d25b9d265424d3a890a99b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 20 Apr 2021 16:44:08 +0200
Subject: [PATCH 4/6] clean up Tree Item component

---
 packages/bbui/src/TreeView/Item.svelte | 32 +++++++++++---------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
index 4f2a54fa2e..1744cd5c8f 100644
--- a/packages/bbui/src/TreeView/Item.svelte
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -5,12 +5,14 @@
     export let icon;
 </script>
 
-<li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
-    {#if $$slots.default}
-        <a class="spectrum-TreeView-itemLink" href="#">
-            <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Chevron100" />
-            </svg>
+<li
+    class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
+        <a on:click class="spectrum-TreeView-itemLink" href="#">
+            {#if $$slots.default}
+                <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Chevron100" />
+                </svg>
+            {/if}
             {#if icon}
                 <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
                     <use xlink:href="#spectrum-icon-18-{icon}" />
@@ -18,17 +20,9 @@
             {/if}
             <span class="spectrum-TreeView-itemLabel">{title}</span>
         </a>
-        <ul class="spectrum-TreeView">
-            <slot />
-        </ul>
-    {:else}
-        <a class="spectrum-TreeView-itemLink" href="#">
-            {#if icon}
-                <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
-                    <use xlink:href="#spectrum-icon-18-{icon}" />
-                </svg>
-            {/if}
-            <span class="spectrum-TreeView-itemLabel">{title}</span>
-        </a>
-    {/if}
+        {#if $$slots.default}
+            <ul class="spectrum-TreeView">
+                <slot />
+            </ul>
+        {/if}
 </li>
\ No newline at end of file

From f970c016c0f1e2adbd0f65e31889293b1bac505b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 20 Apr 2021 16:44:29 +0200
Subject: [PATCH 5/6] remove backend.js artifact

---
 .../builder/src/builderStore/store/backend.js | 362 ------------------
 1 file changed, 362 deletions(-)
 delete mode 100644 packages/builder/src/builderStore/store/backend.js

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
deleted file mode 100644
index 5d0e722650..0000000000
--- a/packages/builder/src/builderStore/store/backend.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import { writable, get } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
-import api from "../api"
-
-const INITIAL_BACKEND_UI_STATE = {
-  tables: [],
-  views: [],
-  users: [],
-  roles: [],
-  datasources: [],
-  queries: [],
-  integrations: {},
-  selectedDatabase: {},
-  selectedTable: {},
-  draftTable: {},
-}
-
-export const getBackendUiStore = () => {
-  const store = writable({ ...INITIAL_BACKEND_UI_STATE })
-
-  store.actions = {
-    reset: () => store.set({ ...INITIAL_BACKEND_UI_STATE }),
-    database: {
-      select: async db => {
-        const tablesResponse = await api.get(`/api/tables`)
-        const tables = await tablesResponse.json()
-        const datasourcesResponse = await api.get(`/api/datasources`)
-        const datasources = await datasourcesResponse.json()
-        const queriesResponse = await api.get(`/api/queries`)
-        const queries = await queriesResponse.json()
-        const integrationsResponse = await api.get("/api/integrations")
-        const integrations = await integrationsResponse.json()
-        const permissionLevels = await store.actions.permissions.fetchLevels()
-
-        store.update(state => {
-          state.selectedDatabase = db
-          state.tables = tables
-          state.datasources = datasources
-          state.queries = queries
-          state.integrations = integrations
-          state.permissionLevels = permissionLevels
-          return state
-        })
-      },
-    },
-    rows: {
-      save: () =>
-        store.update(state => {
-          state.selectedView = state.selectedView
-          return state
-        }),
-      delete: () =>
-        store.update(state => {
-          state.selectedView = state.selectedView
-          return state
-        }),
-      select: row =>
-        store.update(state => {
-          state.selectedRow = row
-          return state
-        }),
-    },
-    datasources: {
-      fetch: async () => {
-        const response = await api.get(`/api/datasources`)
-        const json = await response.json()
-        store.update(state => {
-          state.datasources = json
-          return state
-        })
-        return json
-      },
-      select: async datasourceId => {
-        store.update(state => {
-          state.selectedDatasourceId = datasourceId
-          state.selectedQueryId = null
-          return state
-        })
-      },
-      save: async datasource => {
-        const response = await api.post("/api/datasources", datasource)
-        const json = await response.json()
-        store.update(state => {
-          const currentIdx = state.datasources.findIndex(
-            ds => ds._id === json._id
-          )
-
-          if (currentIdx >= 0) {
-            state.datasources.splice(currentIdx, 1, json)
-          } else {
-            state.datasources.push(json)
-          }
-
-          state.datasources = state.datasources
-          state.selectedDatasourceId = json._id
-          return state
-        })
-        return json
-      },
-      delete: async datasource => {
-        await api.delete(
-          `/api/datasources/${datasource._id}/${datasource._rev}`
-        )
-        store.update(state => {
-          state.datasources = state.datasources.filter(
-            existing => existing._id !== datasource._id
-          )
-          if (datasource._id === state.selectedDatasourceId) {
-            state.selectedDatasourceId = null
-          }
-          return state
-        })
-      },
-    },
-    queries: {
-      fetch: async () => {
-        const response = await api.get(`/api/queries`)
-        const json = await response.json()
-        store.update(state => {
-          state.queries = json
-          return state
-        })
-        return json
-      },
-      save: async (datasourceId, query) => {
-        const integrations = get(store).integrations
-        const dataSource = get(store).datasources.filter(
-          ds => ds._id === datasourceId
-        )
-        // check if readable attribute is found
-        if (dataSource.length !== 0) {
-          const integration = integrations[dataSource[0].source]
-          const readable = integration.query[query.queryVerb].readable
-          if (readable) {
-            query.readable = readable
-          }
-        }
-        query.datasourceId = datasourceId
-        const response = await api.post(`/api/queries`, query)
-        if (response.status !== 200) {
-          throw new Error("Failed saving query.")
-        }
-        const json = await response.json()
-        store.update(state => {
-          const currentIdx = state.queries.findIndex(
-            query => query._id === json._id
-          )
-
-          if (currentIdx >= 0) {
-            state.queries.splice(currentIdx, 1, json)
-          } else {
-            state.queries.push(json)
-          }
-
-          state.queries = state.queries
-          state.selectedQueryId = json._id
-          return state
-        })
-        return json
-      },
-      select: query =>
-        store.update(state => {
-          state.selectedDatasourceId = query.datasourceId
-          state.selectedQueryId = query._id
-          return state
-        }),
-      delete: async query => {
-        await api.delete(`/api/queries/${query._id}/${query._rev}`)
-        store.update(state => {
-          state.queries = state.queries.filter(
-            existing => existing._id !== query._id
-          )
-          if (state.selectedQueryId === query._id) {
-            state.selectedQueryId = null
-          }
-
-          return state
-        })
-      },
-    },
-    tables: {
-      fetch: async () => {
-        const tablesResponse = await api.get(`/api/tables`)
-        const tables = await tablesResponse.json()
-        store.update(state => {
-          state.tables = tables
-          return state
-        })
-      },
-      select: table =>
-        store.update(state => {
-          state.selectedTable = table
-          state.draftTable = cloneDeep(table)
-          state.selectedView = { name: `all_${table._id}` }
-          return state
-        }),
-      save: async table => {
-        const updatedTable = cloneDeep(table)
-        const oldTable = get(store).tables.filter(t => t._id === table._id)[0]
-
-        const fieldNames = []
-        // update any renamed schema keys to reflect their names
-        for (let key of Object.keys(updatedTable.schema)) {
-          // if field name has been seen before remove it
-          if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
-            delete updatedTable.schema[key]
-            continue
-          }
-          const field = updatedTable.schema[key]
-          const oldField = oldTable?.schema[key]
-          // if the type has changed then revert back to the old field
-          if (oldField != null && oldField.type !== field.type) {
-            updatedTable.schema[key] = oldField
-          }
-          // field has been renamed
-          if (field.name && field.name !== key) {
-            updatedTable.schema[field.name] = field
-            updatedTable._rename = { old: key, updated: field.name }
-            delete updatedTable.schema[key]
-          }
-          // finally record this field has been used
-          fieldNames.push(key.toLowerCase())
-        }
-
-        const SAVE_TABLE_URL = `/api/tables`
-        const response = await api.post(SAVE_TABLE_URL, updatedTable)
-        const savedTable = await response.json()
-        await store.actions.tables.fetch()
-        store.actions.tables.select(savedTable)
-        return savedTable
-      },
-      delete: async table => {
-        await api.delete(`/api/tables/${table._id}/${table._rev}`)
-        store.update(state => {
-          state.tables = state.tables.filter(
-            existing => existing._id !== table._id
-          )
-          if (table._id === state.selectedTable._id) {
-            state.selectedTable = {}
-          }
-          return state
-        })
-      },
-      saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
-        store.update(state => {
-          // delete the original if renaming
-          // need to handle if the column had no name, empty string
-          if (originalName || originalName === "") {
-            delete state.draftTable.schema[originalName]
-            state.draftTable._rename = {
-              old: originalName,
-              updated: field.name,
-            }
-          }
-
-          // Optionally set display column
-          if (primaryDisplay) {
-            state.draftTable.primaryDisplay = field.name
-          }
-
-          if (indexes) {
-            state.draftTable.indexes = indexes
-          }
-
-          state.draftTable.schema[field.name] = cloneDeep(field)
-          store.actions.tables.save(state.draftTable)
-          return state
-        })
-      },
-      deleteField: field => {
-        store.update(state => {
-          delete state.draftTable.schema[field.name]
-          store.actions.tables.save(state.draftTable)
-          return state
-        })
-      },
-    },
-    views: {
-      select: view =>
-        store.update(state => {
-          state.selectedView = view
-          state.selectedTable = {}
-          return state
-        }),
-      delete: async view => {
-        await api.delete(`/api/views/${view}`)
-        await store.actions.tables.fetch()
-      },
-      save: async view => {
-        const response = await api.post(`/api/views`, view)
-        const json = await response.json()
-
-        const viewMeta = {
-          name: view.name,
-          ...json,
-        }
-
-        store.update(state => {
-          const viewTable = state.tables.find(
-            table => table._id === view.tableId
-          )
-
-          if (view.originalName) delete viewTable.views[view.originalName]
-          viewTable.views[view.name] = viewMeta
-
-          state.tables = state.tables
-          state.selectedView = viewMeta
-          return state
-        })
-      },
-    },
-    users: {
-      create: user =>
-        store.update(state => {
-          state.users.push(user)
-          state.users = state.users
-          return state
-        }),
-    },
-    roles: {
-      fetch: async () => {
-        const response = await api.get("/api/roles")
-        const roles = await response.json()
-        store.update(state => {
-          state.roles = roles
-          return state
-        })
-      },
-      delete: async role => {
-        const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
-        await store.actions.roles.fetch()
-        return response
-      },
-      save: async role => {
-        const response = await api.post("/api/roles", role)
-        await store.actions.roles.fetch()
-        return response
-      },
-    },
-    permissions: {
-      fetchLevels: async () => {
-        const response = await api.get("/api/permission/levels")
-        const json = await response.json()
-        return json
-      },
-      forResource: async resourceId => {
-        const response = await api.get(`/api/permission/${resourceId}`)
-        const json = await response.json()
-        return json
-      },
-      save: async ({ role, resource, level }) => {
-        const response = await api.post(
-          `/api/permission/${role}/${resource}/${level}`
-        )
-        const json = await response.json()
-        return json
-      },
-    },
-  }
-
-  return store
-}

From 7384e886139d268142201c79d16d530b13d73afc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 21 Apr 2021 13:16:05 +0200
Subject: [PATCH 6/6] remove unused files that were accidentally left

---
 .../NewComponentTree.svelte                   | 139 ------------------
 .../NewPathTree.svelte                        | 114 --------------
 2 files changed, 253 deletions(-)
 delete mode 100644 packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte
 delete mode 100644 packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte
deleted file mode 100644
index ec7fc1c4b5..0000000000
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewComponentTree.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script>
-    import { store } from "builderStore"
-    import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
-    import { DropEffect, DropPosition } from "./dragDropStore"
-    import NavItem from "components/common/NavItem.svelte"
-    import { TreeView, TreeItem as Item} from '@budibase/bbui'
-  
-    export let components = []
-    export let currentComponent
-    export let dragDropStore
-  
-    const isScreenslot = name => name?.endsWith("screenslot")
-  
-    const selectComponent = component => {
-      store.actions.components.select(component)
-    }
-
-    const dragstart = component => e => {
-    e.dataTransfer.dropEffect = DropEffect.MOVE
-    dragDropStore.actions.dragstart(component)
-  }
-
-  const dragover = (component, index) => e => {
-    const definition = store.actions.components.getDefinition(
-      component._component
-    )
-    const canHaveChildrenButIsEmpty =
-      definition?.hasChildren && !component._children?.length
-
-    e.dataTransfer.dropEffect = DropEffect.COPY
-
-    // how far down the mouse pointer is on the drop target
-    const mousePosition = e.offsetY / e.currentTarget.offsetHeight
-
-    dragDropStore.actions.dragover({
-      component,
-      index,
-      canHaveChildrenButIsEmpty,
-      mousePosition,
-    })
-
-    return false
-  }
-  </script>
-{#each components as component, index (component._id)}
-  {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
-    <div
-      on:drop={dragDropStore.actions.drop}
-      ondragover="return false"
-      ondragenter="return false"
-      class="drop-item" />
-  {/if}
-  <Item
-    draggable
-    on:dragend={dragDropStore.actions.reset}
-    on:dragstart={dragstart(component)}
-    on:dragover={dragover(component, index)}
-    on:drop={dragDropStore.actions.drop}
-    on:click={() => selectComponent(component)} 
-    title={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-    open
-    selected={$store.selectedComponentId === component._id}>
-    {#if component._children}
-        <svelte:self
-        components={component._children}
-        {currentComponent}
-        {dragDropStore}
-        />
-    {/if}
-  </Item>
-  {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
-    <div
-      on:drop={dragDropStore.actions.drop}
-      ondragover="return false"
-      ondragenter="return false"
-      class="drop-item"/>
-  {/if}
-{/each}
-  
-  <!-- <ul>
-    {#each components as component, index (component._id)}
-      <li on:click|stopPropagation={() => selectComponent(component)}>
-        {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
-          <div
-            on:drop={dragDropStore.actions.drop}
-            ondragover="return false"
-            ondragenter="return false"
-            class="drop-item"
-            style="margin-left: {(level + 1) * 16}px" />
-        {/if}
-  
-        <NavItem
-          draggable
-          on:dragend={dragDropStore.actions.reset}
-          on:dragstart={dragstart(component)}
-          on:dragover={dragover(component, index)}
-          on:drop={dragDropStore.actions.drop}
-          text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-          withArrow
-          indentLevel={level + 1}
-          selected={$store.selectedComponentId === component._id}>
-          <ComponentDropdownMenu {component} />
-        </NavItem>
-  
-        {#if component._children}
-          <svelte:self
-            components={component._children}
-            {currentComponent}
-            {onSelect}
-            {dragDropStore}
-            level={level + 1} />
-        {/if}
-  
-        {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
-          <div
-            on:drop={dragDropStore.actions.drop}
-            ondragover="return false"
-            ondragenter="return false"
-            class="drop-item"
-            style="margin-left: {(level + ($dragDropStore.dropPosition === DropPosition.INSIDE ? 3 : 1)) * 16}px" />
-        {/if}
-      </li>
-    {/each}
-  </ul> -->
-  
-  <style>
-    ul {
-      list-style: none;
-      padding-left: 0;
-      margin: 0;
-    }
-  
-    .drop-item {
-      border-radius: var(--border-radius-m);
-      height: 32px;
-      background: var(--grey-3);
-    }
-  </style>
-  
\ No newline at end of file
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte
deleted file mode 100644
index ef5405e109..0000000000
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/NewPathTree.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script>
-    import { TreeItem as Item} from '@budibase/bbui'
-    import {
-      store,
-      selectedComponent,
-      currentAsset,
-      screenSearchString,
-    } from "builderStore"
-    import instantiateStore from "./dragDropStore"
-    import ComponentTree from "./NewComponentTree.svelte"
-    import { get } from "svelte/store"
-  
-    const ROUTE_NAME_MAP = {
-      "/": {
-        BASIC: "Home",
-        PUBLIC: "Login",
-      },
-    }
-  
-    const dragDropStore = instantiateStore()
-  
-    export let route
-    export let path
-  
-    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)
-    }
-  
-    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)
-      )
-    }
-  
-    const toggleManuallyOpened = () => {
-      if (get(screenSearchString)) {
-        return
-      }
-      routeManuallyOpened = !routeManuallyOpened
-    }
-  </script>
-
-{#if !noSearchMatch}
-<Item icon="Folder" title={path} open={routeOpened}>
-    {#if routeOpened}
-        {#each filteredScreens as screen (screen.id)}
-            <Item
-            icon="ModernGridView"
-            selected={$store.selectedScreenId === screen.id}
-            open={$store.selectedScreenId === screen.id}
-            on:click={toggleManuallyOpened}
-            title={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
-            on:click={() => changeScreen(screen.id)}>
-                {#if selectedScreen?._id === screen.id}
-                <ComponentTree
-                    components={selectedScreen.props._children}
-                    currentComponent={$selectedComponent}
-                    {dragDropStore} />
-                {/if}
-            </Item>
-        {/each}
-    {/if}
-</Item>
-
-<!-- <NavItem
-  icon="ri-folder-line"
-  text={path}
-  on:click={toggleManuallyOpened}
-  opened={routeOpened}
-  {border}
-  withArrow={route.subpaths} />
-
-    {#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}