consolidate routing and component selection

packages/builder/src/builderStore/getNewComponentName.js

@@ -2,6 +2,7 @@ import { walkProps } from "./storeUtils"
 import { get_capitalised_name } from "../helpers"
 import { get } from "svelte/store"
 import { allScreens } from "builderStore"
+import { FrontendTypes } from "../constants"
 
 export default function(component, state) {
   const capitalised = get_capitalised_name(
@@ -25,7 +26,7 @@ export default function(component, state) {
   }
 
   // if viewing screen, check current screen for duplicate
-  if (state.currentFrontEndType === "screen") {
+  if (state.currentFrontEndType === FrontendTypes.SCREEN) {
     findMatches(state.currentPreviewItem.props)
   } else {
     // viewing a layout - need to find against all screens

packages/builder/src/builderStore/index.js

@@ -15,15 +15,15 @@ export const currentAsset = derived(store, $store => {
   const layout = $store.layouts
     ? $store.layouts.find(layout => layout._id === $store.currentAssetId)
     : null
-  if (layout) {
+
-    return layout
+  if (layout) return layout
-  }
+
   const screen = $store.screens
     ? $store.screens.find(screen => screen._id === $store.currentAssetId)
     : null
-  if (screen) {
+
-    return screen
+  if (screen) return screen
-  }
+
   return null
 })
 

packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte

@@ -22,12 +22,7 @@
     const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
-      $goto(`./${$store.currentFrontEndType}s/${$store.currentAssetId}/${path}`)
+      $goto(`./${$store.currentAssetId}/${path}`)
-    // if (layout) {
-    //   $goto(`./layouts/${path}`)
-    // } else {
-    //   $goto(`./screens/${$currentAsset.id}/${path}`)
-    // }
   }
 
   const dragstart = component => e => {

packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -42,14 +42,14 @@
   </div>
   <DropdownMenu bind:this={dropdown} {anchor} align="left">
     <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={() => confirmDeleteDialog.show()} />
       <DropdownItem
         icon="ri-pencil-line"
         title="Edit"
         on:click={() => editLayoutNameModal.show()} />
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
     </DropdownContainer>
   </DropdownMenu>
 </div>

packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte

@@ -19,7 +19,7 @@
   const changeScreen = screenId => {
     // select the route
     store.actions.screens.select(screenId)
-    $goto(`./screens/${screenId}`)
+    $goto(`./screen/${screenId}`)
   }
 </script>
 

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

@@ -1,5 +1,6 @@
 <script>
   import { store } from "builderStore"
+  import { FrontendTypes } from "constants"
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -19,7 +20,7 @@
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
-      //use for getting controls for each component property
+      // use for getting controls for each component property
       c => c._component === componentInstance._component
     ) || {}
 
@@ -31,7 +32,7 @@
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
-    $store.currentFrontEndType === "screen"
+    $store.currentFrontEndType === FrontendTypes.SCREEN
   $: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
 
   $: displayName =
@@ -60,14 +61,17 @@
 
   function setAssetProps(name, value) {
     store.update(state => {
-      if (name === "_instanceName" && state.currentFrontEndType === "screen") {
+      if (
-        state.currentPreviewItem.props[name] = value
+        name === "_instanceName" &&
+        state.currentFrontEndType === FrontendTypes.SCREEN
+      ) {
+        state.currentPreviewItem.props._instanceName = value
       } else {
         state.currentPreviewItem[name] = value
       }
-      store.actions.preview.saveSelected()
       return state
     })
+    store.actions.preview.saveSelected()
   }
 
   function getProps(obj, keys) {
@@ -100,15 +104,6 @@
 </div>
 
 <style>
-  .title > div:nth-child(1) {
-    grid-column-start: name;
-    color: var(--ink);
-  }
-
-  .title > div:nth-child(2) {
-    grid-column-start: actions;
-  }
-
   .component-props-container {
     flex: 1 1 auto;
     min-height: 0;

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

@@ -27,7 +27,7 @@
   const onComponentChosen = component => {
     store.actions.components.create(component._component, component.presetProps)
     const path = store.actions.components.findRoute($store.currentComponentInfo)
-    $goto(`./${$store.currentFrontEndType}s/${$store.currentAssetId}/${path}`)
+    $goto(`./${$store.currentAssetId}/${path}`)
     close()
   }
 </script>

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

@@ -1,7 +1,8 @@
 <script>
   import { onMount } from "svelte"
-  import { goto } from "@sveltech/routify"
+  import { goto, params, url } from "@sveltech/routify"
   import { store, currentAsset } from "builderStore"
+  import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
   import Layout from "components/userInterface/Layout.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
@@ -11,17 +12,17 @@
   const tabs = [
     {
       title: "Screens",
-      key: "screens",
+      key: "screen",
     },
     {
       title: "Layouts",
-      key: "layouts",
+      key: "layout",
     },
   ]
 
   let modal
   let routes = {}
-  let tab = "screens"
+  let tab = $params.assetType
 
   function navigate({ detail }) {
     if (!detail) return
@@ -35,7 +36,7 @@
 
 <div class="title">
   <Switcher headings={tabs} bind:value={tab} on:change={navigate}>
-    {#if tab === 'screens'}
+    {#if tab === FrontendTypes.SCREEN}
       <i
         on:click={modal.show}
         data-cy="new-screen"
@@ -48,7 +49,7 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === 'layouts'}
+    {:else if tab === FrontendTypes.LAYOUT}
       <i
         on:click={modal.show}
         data-cy="new-layout"

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

@@ -18,7 +18,7 @@
 
   const selectLayout = () => {
     store.actions.layouts.select(layout._id)
-    $goto(`./layouts/${layout._id}`)
+    $goto(`./layout/${layout._id}`)
   }
 </script>
 
@@ -27,13 +27,13 @@
   icon="ri-layout-3-line"
   text={layout.name}
   withArrow
-  selected={$store.currentComponentInfo?._id === layout.props._id}
+  selected={$store.currentComponentInfo?._id === layout.props?._id}
   opened={$store.currentAssetId === layout._id}
   on:click={selectLayout}>
   <LayoutDropdownMenu {layout} />
 </NavItem>
 
-{#if $store.currentAssetId === layout._id && layout.props._children}
+{#if $store.currentAssetId === layout._id && layout.props?._children}
   <ComponentTree
     components={layout.props._children}
     currentComponent={$store.currentComponentInfo}

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

@@ -5,11 +5,9 @@
   export let value
 </script>
 
-<div>
+<Select bind:value extraThin secondary on:change>
-  <Select bind:value extraThin secondary on:change>
+  <option value="">Choose an option</option>
-    <option value="">Choose an option</option>
+  {#each $store.layouts as layout}
-    {#each $store.layouts as layout}
+    <option value={layout._id}>{layout.name}</option>
-      <option value={layout._id}>{layout.name}</option>
+  {/each}
-    {/each}
+</Select>
-  </Select>
-</div>

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

@@ -85,7 +85,7 @@
       })
     }
 
-    $goto(`./screens/${createdScreen._id}`)
+    $goto(`./screen/${createdScreen._id}`)
   }
 
   const routeNameExists = route => {

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

@@ -1,5 +1,6 @@
 <script>
   import { isEmpty } from "lodash/fp"
+  import { FrontendTypes } from "constants"
   import PropertyControl from "./PropertyControl.svelte"
   import LayoutSelect from "./LayoutSelect.svelte"
   import Input from "./PropertyPanelControls/Input.svelte"
@@ -63,7 +64,7 @@
       lookForDuplicate(layout.props)
     }
     // if viewing screen, check current screen for duplicate
-    if ($store.currentFrontEndType === "screen") {
+    if ($store.currentFrontEndType === FrontendTypes.SCREEN) {
       lookForDuplicate($store.currentPreviewItem.props)
     } else {
       // need to dedupe against all screens

packages/builder/src/pages/[application]/data/_layout.svelte

@@ -2,7 +2,7 @@
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
 </script>
 
-<!-- routify:options index=1 -->
+<!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
     <TableNavigator />

packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte

@@ -1,33 +1,40 @@
 <script>
   import { params, leftover, goto } from "@sveltech/routify"
+  import { FrontendTypes } from "constants"
   import { store, allScreens } from "builderStore"
 
   // Get any leftover params not caught by Routifys params store.
   const componentIds = $leftover.split("/").filter(id => id !== "")
 
-  const currentLayoutId = decodeURI($params.layout)
+  const currentAssetId = decodeURI($params.asset)
-  const validLayout = $store.layouts.some(layout => layout._id === currentLayoutId)
 
-  if (!validLayout) {
+  let assetList
-    const firstLayoutId = $store.layouts[0]?._id
+  let actions
-    store.actions.layouts.select($params.layout)
+
-    $goto(`./${firstLayoutId}`)
+  // Determine screens or layouts based on the URL
+  if ($params.assetType === FrontendTypes.SCREEN) {
+    assetList = $allScreens
+    actions = store.actions.screens
   } else {
-    // Otherwise proceed to set layout
+    assetList = $store.layouts
-    store.actions.layouts.select($params.layout)
+    actions = store.actions.layouts
-
-    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
-    if ($leftover) {
-      // Get the correct layout children.
-      const layoutChildren = $store.layouts.find(
-        layout =>
-          layout._id === $params.layout ||
-          layout._id === decodeURIComponent($params.layout)
-      ).props._children
-      findComponent(componentIds, layoutChildren)
-    }
   }
 
+  // select the screen or layout in the UI
+  actions.select(currentAssetId)
+
+  // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
+  if ($leftover) {
+    // Get the correct screen children.
+    const assetChildren = assetList.find(
+      asset =>
+        asset._id === $params.asset ||
+        asset._id === decodeURIComponent($params.asset)
+    ).props._children
+    findComponent(componentIds, assetChildren)
+  }
+  // }
+
   // Find Component with ID and continue
   function findComponent(ids, children) {
     // Setup stuff

packages/builder/src/pages/[application]/design/[assetType]/index.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { store, allScreens } from "builderStore"
+  import { FrontendTypes } from "constants"
+  import { goto, params } from "@sveltech/routify"
+
+  // Go to first layout
+  if ($params.assetType === FrontendTypes.LAYOUT) {
+    $goto(`../${$store.layouts[0]?._id}`)
+  } 
+
+  // Go to first screen
+  if ($params.assetType === FrontendTypes.SCREEN) {
+    $goto(`../${$allScreens[0]?._id}`)
+  } 
+</script>
+
+<!-- routify:options index=false -->

packages/builder/src/pages/[application]/design/index.svelte

@@ -1,6 +1,8 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../screens")
+  import { FrontendTypes } from "constants"
+
+  $goto(`../${FrontendTypes.SCREEN}`)
 </script>
 
-<!-- routify:options index=false -->
+<!-- routify:options index=1 -->

packages/builder/src/pages/[application]/design/layouts/index.svelte

@@ -1,9 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { goto } from "@sveltech/routify"
-
-  // Go to first layout
-  $goto(`../${$store.layouts[0]?._id}`)
-</script>
-
-<!-- routify:options index=false -->

packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte

@@ -1,59 +0,0 @@
-<script>
-  import { params, leftover, goto } from "@sveltech/routify"
-  import { store, allScreens } from "builderStore"
-
-  // Get any leftover params not caught by Routifys params store.
-  const componentIds = $leftover.split("/").filter(id => id !== "")
-
-  const currentScreenId = decodeURI($params.screen)
-  const validScreen = $allScreens.some(screen => screen._id === currentScreenId)
-
-  if (!validScreen) {
-    // Go to main layout if URL set to invalid screen
-    console.error("Invalid screen", $params.screen)
-    const firstScreenId = $allScreens[0]?._id
-    store.actions.screens.select(firstScreenId)
-    $goto(`./${firstScreenId}`)
-  } else {
-    // Otherwise proceed to set screen
-    store.actions.screens.select(currentScreenId)
-
-    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
-    if ($leftover) {
-      console.log("leftover", $params.screen)
-      // Get the correct screen children.
-      const screenChildren = $allScreens.find(
-        screen =>
-          screen._id === $params.screen ||
-          screen._id === decodeURIComponent($params.screen)
-      ).props._children
-      findComponent(componentIds, screenChildren)
-    }
-  }
-
-  // Find Component with ID and continue
-  function findComponent(ids, children) {
-    // Setup stuff
-    let componentToSelect
-    let currentChildren = children
-
-    // Loop through each ID
-    ids.forEach(id => {
-      // Find ID
-      const component = currentChildren.find(child => child._id === id)
-
-      // If it does not exist, ignore (use last valid route)
-      if (!component) return
-
-      componentToSelect = component
-
-      // Update childrens array to selected components children
-      currentChildren = componentToSelect._children
-    })
-
-    // Select Component!
-    if (componentToSelect) store.actions.components.select(componentToSelect)
-  }
-</script>
-
-<slot />

packages/builder/src/pages/[application]/design/screens/index.svelte

@@ -1,9 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { params, leftover } from "@sveltech/routify"
-  import { allScreens } from "builderStore"
-
-  $goto(`../${$allScreens[0]?._id}`)
-</script>
-
-<!-- routify:options index=false -->

packages/server/src/constants/screens.js

@@ -6,6 +6,7 @@ exports.createHomeScreen = app => ({
   url: "",
   layoutId: BASE_LAYOUT_PROP_IDS.PRIVATE,
   props: {
+    _instanceName: "HomeScreenContainer",
     _id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
     _component: "@budibase/standard-components/container",
     _styles: {
@@ -106,6 +107,7 @@ exports.createLoginScreen = app => ({
   url: "",
   layoutId: BASE_LAYOUT_PROP_IDS.PUBLIC,
   props: {
+    _instanceName: "LoginScreenContainer",
     _id: "5beb4c7b-3c8b-49b2-b8b3-d447dc76dda7",
     _component: "@budibase/standard-components/container",
     _styles: {