From 6b5c1ffafabc44a92d3bcb2375aa3a64d9be56be Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Sat, 5 Dec 2020 12:09:58 +0000
Subject: [PATCH] consolidate routing and component selection

---
 .../src/builderStore/getNewComponentName.js   |  3 +-
 packages/builder/src/builderStore/index.js    | 12 ++--
 .../ComponentTree.svelte                      |  7 +--
 .../LayoutDropdownMenu.svelte                 |  8 +--
 .../ComponentNavigationTree/PathTree.svelte   |  2 +-
 .../ComponentPropertiesPanel.svelte           | 23 +++-----
 .../ComponentSelectionList.svelte             |  2 +-
 .../userInterface/FrontendNavigatePane.svelte | 13 ++--
 .../components/userInterface/Layout.svelte    |  6 +-
 .../userInterface/LayoutSelect.svelte         | 14 ++---
 .../userInterface/NewScreenModal.svelte       |  2 +-
 .../userInterface/SettingsView.svelte         |  3 +-
 .../pages/[application]/data/_layout.svelte   |  2 +-
 .../[asset]}/_fallback.svelte                 |  0
 .../[asset]}/_layout.svelte                   | 45 ++++++++------
 .../design/{ => [assetType]}/_layout.svelte   |  0
 .../design/[assetType]/index.svelte           | 17 ++++++
 .../pages/[application]/design/index.svelte   |  6 +-
 .../[application]/design/layouts/index.svelte |  9 ---
 .../design/screens/[screen]/_fallback.svelte  |  0
 .../design/screens/[screen]/_layout.svelte    | 59 -------------------
 .../[application]/design/screens/index.svelte |  9 ---
 packages/server/src/constants/screens.js      |  2 +
 23 files changed, 93 insertions(+), 151 deletions(-)
 rename packages/builder/src/pages/[application]/design/{layouts/[layout] => [assetType]/[asset]}/_fallback.svelte (100%)
 rename packages/builder/src/pages/[application]/design/{layouts/[layout] => [assetType]/[asset]}/_layout.svelte (53%)
 rename packages/builder/src/pages/[application]/design/{ => [assetType]}/_layout.svelte (100%)
 create mode 100644 packages/builder/src/pages/[application]/design/[assetType]/index.svelte
 delete mode 100644 packages/builder/src/pages/[application]/design/layouts/index.svelte
 delete mode 100644 packages/builder/src/pages/[application]/design/screens/[screen]/_fallback.svelte
 delete mode 100644 packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
 delete mode 100644 packages/builder/src/pages/[application]/design/screens/index.svelte

diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js
index 1c156fd9f5..5937eb8823 100644
--- a/packages/builder/src/builderStore/getNewComponentName.js
+++ b/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
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 0475a5c301..91559b585d 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/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
 })
 
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
index 347ce00ed2..b8568cae99 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
+++ b/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}`)
-    // if (layout) {
-    //   $goto(`./layouts/${path}`)
-    // } else {
-    //   $goto(`./screens/${$currentAsset.id}/${path}`)
-    // }
+      $goto(`./${$store.currentAssetId}/${path}`)
   }
 
   const dragstart = component => e => {
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte
index 1767cae54c..79a66e0af4 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/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>
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index cac25c303e..e304ed6d86 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 009596e0f3..eb610f1397 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/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") {
-        state.currentPreviewItem.props[name] = value
+      if (
+        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;
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 9e9cb31c4a..04f154b56e 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/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>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index e3abc42c25..8c634e22f4 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/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"
diff --git a/packages/builder/src/components/userInterface/Layout.svelte b/packages/builder/src/components/userInterface/Layout.svelte
index 184a72828f..8a6ac9cc03 100644
--- a/packages/builder/src/components/userInterface/Layout.svelte
+++ b/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}
diff --git a/packages/builder/src/components/userInterface/LayoutSelect.svelte b/packages/builder/src/components/userInterface/LayoutSelect.svelte
index aa1f2f3df1..71bf7e1163 100644
--- a/packages/builder/src/components/userInterface/LayoutSelect.svelte
+++ b/packages/builder/src/components/userInterface/LayoutSelect.svelte
@@ -5,11 +5,9 @@
   export let value
 </script>
 
-<div>
-  <Select bind:value extraThin secondary on:change>
-    <option value="">Choose an option</option>
-    {#each $store.layouts as layout}
-      <option value={layout._id}>{layout.name}</option>
-    {/each}
-  </Select>
-</div>
+<Select bind:value extraThin secondary on:change>
+  <option value="">Choose an option</option>
+  {#each $store.layouts as layout}
+    <option value={layout._id}>{layout.name}</option>
+  {/each}
+</Select>
diff --git a/packages/builder/src/components/userInterface/NewScreenModal.svelte b/packages/builder/src/components/userInterface/NewScreenModal.svelte
index 6c95987591..05a18adb7f 100644
--- a/packages/builder/src/components/userInterface/NewScreenModal.svelte
+++ b/packages/builder/src/components/userInterface/NewScreenModal.svelte
@@ -85,7 +85,7 @@
       })
     }
 
-    $goto(`./screens/${createdScreen._id}`)
+    $goto(`./screen/${createdScreen._id}`)
   }
 
   const routeNameExists = route => {
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 551d8044bd..e3eed43121 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/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
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 2d76396546..0d43ca9b7b 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/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 />
diff --git a/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_fallback.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte
rename to packages/builder/src/pages/[application]/design/[assetType]/[asset]/_fallback.svelte
diff --git a/packages/builder/src/pages/[application]/design/layouts/[layout]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
similarity index 53%
rename from packages/builder/src/pages/[application]/design/layouts/[layout]/_layout.svelte
rename to packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
index 369793fdb8..ff1a94222f 100644
--- a/packages/builder/src/pages/[application]/design/layouts/[layout]/_layout.svelte
+++ b/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 validLayout = $store.layouts.some(layout => layout._id === currentLayoutId)
+  const currentAssetId = decodeURI($params.asset)
 
-  if (!validLayout) {
-    const firstLayoutId = $store.layouts[0]?._id
-    store.actions.layouts.select($params.layout)
-    $goto(`./${firstLayoutId}`)
+  let assetList
+  let actions
+
+  // 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
-    store.actions.layouts.select($params.layout)
-
-    // 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)
-    }
+    assetList = $store.layouts
+    actions = store.actions.layouts
   }
 
+  // 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
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/design/_layout.svelte
rename to packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/index.svelte b/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
new file mode 100644
index 0000000000..3d2314a0f8
--- /dev/null
+++ b/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 -->
\ No newline at end of file
diff --git a/packages/builder/src/pages/[application]/design/index.svelte b/packages/builder/src/pages/[application]/design/index.svelte
index c7d2be4c86..d2cd9e2ffc 100644
--- a/packages/builder/src/pages/[application]/design/index.svelte
+++ b/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 -->
diff --git a/packages/builder/src/pages/[application]/design/layouts/index.svelte b/packages/builder/src/pages/[application]/design/layouts/index.svelte
deleted file mode 100644
index 44934e3e5c..0000000000
--- a/packages/builder/src/pages/[application]/design/layouts/index.svelte
+++ /dev/null
@@ -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 -->
\ No newline at end of file
diff --git a/packages/builder/src/pages/[application]/design/screens/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/design/screens/[screen]/_fallback.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
deleted file mode 100644
index 7cd5a4b86d..0000000000
--- a/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
+++ /dev/null
@@ -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 />
diff --git a/packages/builder/src/pages/[application]/design/screens/index.svelte b/packages/builder/src/pages/[application]/design/screens/index.svelte
deleted file mode 100644
index 94f65435e3..0000000000
--- a/packages/builder/src/pages/[application]/design/screens/index.svelte
+++ /dev/null
@@ -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 -->
\ No newline at end of file
diff --git a/packages/server/src/constants/screens.js b/packages/server/src/constants/screens.js
index 7b3d969cf8..4f68f9c5e0 100644
--- a/packages/server/src/constants/screens.js
+++ b/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: {