adds working routing for clicking on components

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
@@ -17,7 +18,6 @@
   export let onMoveUpComponent
   export let onMoveDownComponent
   export let onCopyComponent
-  export let ids = []
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
@@ -31,14 +31,21 @@
     }
   }
 
-  const selectComponent = (ids, component) => {
+  const selectComponent = component => {
+    // Set current component
     store.selectComponent(component)
+
+    // Get ID path
+    const path = store.getPathToComponent(component)
+
+    // Go to correct URL
+    $goto(`./:page/:screen/${path}`)
   }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => selectComponent(ids, component)}>
+    <li on:click|stopPropagation={() => selectComponent(component)}>
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}

packages/builder/src/components/userInterface/PageLayout.svelte

@@ -71,6 +71,7 @@
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
     <ComponentsHierarchyChildren
+      thisComponent={_layout.component.props}
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo}
       onDeleteComponent={confirmDeleteComponent}

packages/builder/src/components/userInterface/PagesList.svelte

@@ -24,7 +24,7 @@
 
   const changePage = id => {
     store.setCurrentPage(id)
-    $goto(`./${id}`)
+    $goto(`./${id}/page-layout`)
   }
 </script>