Fix issue with URL <-> state binding in design section preventing navigating to roles with no screens in them

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

@@ -1,110 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { get } from "svelte/store"
-  import { params, leftover, goto } from "@sveltech/routify"
-  import { FrontendTypes } from "constants"
-  import { store, allScreens, currentAsset } from "builderStore"
-  import { findComponent, findComponentPath } from "builderStore/storeUtils"
-
-  let initialised = false
-
-  // Cache previous values so we don't update the URL more than necessary
-  let previousType
-  let previousAsset
-  let previousComponentId
-
-  // Hydrate state from query param on mount
-  onMount(() => {
-    const assetId = decodeURI($params.asset)
-    let assetList
-    let actions
-
-    // Determine screens or layouts based on the URL
-    if ($params.assetType === FrontendTypes.SCREEN) {
-      assetList = $allScreens
-      actions = store.actions.screens
-    } else {
-      assetList = $store.layouts
-      actions = store.actions.layouts
-    }
-
-    // Find and select the current asset
-    const asset = assetList.find(asset => asset._id === assetId)
-    if (asset) {
-      actions.select(assetId)
-
-      // Select the component ID if one is present in the URL
-      const selectedComponentId = $leftover.split("/").pop()
-      if (selectedComponentId) {
-        const component = findComponent(asset.props, selectedComponentId)
-        if (component) {
-          store.actions.components.select(component)
-        }
-      }
-    }
-
-    initialised = true
-  })
-
-  // Updates the route params in the URL to the specified values
-  const updateParams = (assetType, asset, componentId) => {
-    // Wait until the initial state rehydration to avoid a wasted update
-    if (!initialised) {
-      return
-    }
-
-    // Check we have different params than last invocation
-    if (
-      assetType === previousType &&
-      asset === previousAsset &&
-      componentId === previousComponentId
-    ) {
-      return
-    } else {
-      previousType = assetType
-      previousAsset = asset
-      previousComponentId = componentId
-    }
-
-    // Extract current URL params
-    const currentParams = get(params)
-    const currentLeftover = get(leftover)
-    const paramAssetType = currentParams.assetType
-    const paramAssetId = currentParams.asset
-    const paramComponentId = currentLeftover.split("/").pop()
-
-    // Only update params if the params actually changed
-    if (
-      assetType !== paramAssetType ||
-      asset?._id !== paramAssetId ||
-      componentId !== paramComponentId
-    ) {
-      // Build and navigate to a valid URL
-      let url = "../../"
-      if ([FrontendTypes.SCREEN, FrontendTypes.LAYOUT].includes(assetType)) {
-        url += `${assetType}`
-        if (asset?._id) {
-          url += `/${asset._id}`
-          if (componentId) {
-            const componentPath = findComponentPath(asset.props, componentId)
-            const componentURL = componentPath
-              .slice(1)
-              .map(comp => comp._id)
-              .join("/")
-            url += `/${componentURL}`
-          }
-        }
-      }
-      $goto(url)
-    }
-  }
-
-  // Automatically keep URL up to date with state
-  $: updateParams(
-    $store.currentFrontEndType,
-    $currentAsset,
-    $store.selectedComponentId
-  )
-</script>
-
-<slot />

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

@@ -1,21 +1,135 @@
 <script>
   import {
     store,
-    backendUiStore,
     currentAsset,
     selectedComponent,
+    allScreens,
   } from "builderStore"
-  import { onMount } from "svelte"
   import CurrentItemPreview from "components/design/AppPreview"
   import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte"
   import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte"
   import FrontendNavigatePane from "components/design/NavigationPanel/FrontendNavigatePane.svelte"
+  import { goto, leftover, params } from "@sveltech/routify"
+  import { FrontendTypes } from "constants"
+  import { findComponent, findComponentPath } from "builderStore/storeUtils"
+  import { get } from "svelte/store"
 
-  onMount(async () => {
+  // Cache previous values so we don't update the URL more than necessary
-    if ($store.appInstance && !$backendUiStore.database) {
+  let previousType
-      backendUiStore.actions.database.select($store.appInstance)
+  let previousAsset
+  let previousComponentId
+
+  // Hydrate state from URL params
+  $: hydrateStateFromURL($params, $leftover)
+
+  // Keep URL in sync with state
+  $: updateURLFromState(
+    $store.currentFrontEndType,
+    $currentAsset,
+    $store.selectedComponentId
+  )
+
+  const hydrateStateFromURL = (params, leftover) => {
+    // Do nothing if no asset type, as that means we've left the page
+    if (!params.assetType) {
+      return
+    }
+
+    const state = get(store)
+    const selectedAsset = get(currentAsset)
+
+    // Hydrate asset type
+    let assetType = params.assetType
+    if (![FrontendTypes.LAYOUT, FrontendTypes.SCREEN].includes(assetType)) {
+      assetType = FrontendTypes.SCREEN
+    }
+    if (assetType !== state.currentFrontEndType) {
+      store.update(state => {
+        state.currentFrontEndType = assetType
+        return state
+      })
+    }
+
+    // Hydrate asset
+    const assetId = decodeURI(params.asset)
+    let asset
+    if (assetId) {
+      let assetList
+      let actions
+
+      // Determine screens or layouts based on the URL
+      if (assetType === FrontendTypes.SCREEN) {
+        assetList = get(allScreens)
+        actions = store.actions.screens
+      } else {
+        assetList = state.layouts
+        actions = store.actions.layouts
+      }
+
+      // Find and select the current asset
+      asset = assetList.find(asset => asset._id === assetId)
+      if (asset && asset._id !== selectedAsset?._id) {
+        actions.select(assetId)
+      }
+    }
+
+    // Hydrate component ID if one is present in the URL
+    const selectedComponentId = leftover.split("/").pop()
+    if (asset && selectedComponentId) {
+      const component = findComponent(asset.props, selectedComponentId)
+      if (component && component._id !== state.selectedComponentId) {
+        store.actions.components.select(component)
+      }
+    }
+  }
+
+  // Updates the route params in the URL to the specified values
+  const updateURLFromState = (assetType, asset, componentId) => {
+    // Check we have different params than last invocation
+    if (
+      assetType === previousType &&
+      asset === previousAsset &&
+      componentId === previousComponentId
+    ) {
+      return
+    } else {
+      previousType = assetType
+      previousAsset = asset
+      previousComponentId = componentId
     }
-  })
+
+    // Extract current URL params
+    const currentParams = get(params)
+    const currentLeftover = get(leftover)
+    const paramAssetType = currentParams.assetType
+    const paramAssetId = currentParams.asset
+    const paramComponentId = currentLeftover.split("/").pop()
+
+    // Only update params if the params actually changed
+    if (
+      assetType !== paramAssetType ||
+      asset?._id !== paramAssetId ||
+      componentId !== paramComponentId
+    ) {
+      // Build and navigate to a valid URL
+      let url = "../"
+      if ([FrontendTypes.SCREEN, FrontendTypes.LAYOUT].includes(assetType)) {
+        url += `${assetType}`
+        if (asset?._id) {
+          url += `/${asset._id}`
+          if (componentId) {
+            const componentPath = findComponentPath(asset.props, componentId)
+            const componentURL = componentPath
+              .slice(1)
+              .map(comp => comp._id)
+              .join("/")
+            url += `/${componentURL}`
+          }
+        }
+      }
+      $goto(url)
+    }
+  }
 </script>
 
 <!-- routify:options index=1 -->

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

@@ -1,45 +1,51 @@
 <script>
-  import { onMount } from "svelte"
+  import { get } from "svelte/store"
-  import { goto } from "@sveltech/routify"
+  import { store, allScreens, selectedAccessRole } from "builderStore"
-  import { store, allScreens } from "builderStore"
   import { FrontendTypes } from "constants"
   import { params } from "@sveltech/routify"
 
-  onMount(() => {
+  $: selectValidAsset($params.assetType)
-    let id
 
-    // Get valid asset type
+  // If we ever land on this index page we want to correctly update state
-    let assetType = $params.assetType
+  // to select a valid asset. The layout page will in turn update the URL
-    if (![FrontendTypes.LAYOUT, FrontendTypes.SCREEN].includes(assetType)) {
+  // to reflect state.
-      assetType = FrontendTypes.SCREEN
+  const selectValidAsset = assetType => {
-    }
+    let id
+    const state = get(store)
+    const screens = get(allScreens)
+    const role = get(selectedAccessRole)
 
-    // Get ID or first correct asset type
+    // Get ID or first correct asset type and select it
     if (assetType === FrontendTypes.LAYOUT) {
       if (
-        $store.selectedLayoutId &&
+        state.selectedLayoutId &&
-        $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
+        state.layouts.find(layout => layout._id === state.selectedLayoutId)
       ) {
-        id = $store.selectedLayoutId
+        id = state.selectedLayoutId
       } else {
-        id = $store.layouts[0]?._id
+        id = state.layouts[0]?._id
+      }
+      if (id) {
+        store.actions.layouts.select(id)
       }
     } else if (assetType === FrontendTypes.SCREEN) {
       if (
-        $store.selectedScreenId &&
+        state.selectedScreenId &&
-        $allScreens.find(screen => screen._id === $store.selectedScreenId)
+        screens.find(screen => screen._id === state.selectedScreenId)
       ) {
-        id = $store.selectedScreenId
+        id = state.selectedScreenId
       } else {
-        id = $allScreens[0]?._id
+        // Select the first screen matching the selected role ID
+        const filteredScreens = screens.filter(screen => {
+          return screen.routing?.roleId === role
+        })
+        id = filteredScreens[0]?._id
+      }
+      if (id) {
+        store.actions.screens.select(id)
       }
     }
-
+  }
-    // Send correct URL which will then update state
-    if (id) {
-      $goto(`../../${assetType}/${id}`)
-    }
-  })
 </script>
 
 <!-- routify:options index=false -->