replace spaces with underscores in screen routes

packages/builder/cypress/integration/createScreen.js

@@ -7,5 +7,15 @@ context("Screen Tests", () => {
 
   it("Should successfully create a screen", () => {
     cy.createScreen("Test Screen", "/test")
+    cy.get(".nav-items-container").within(() => {
+      cy.contains("/test").should("exist")
+    })
+  })
+
+  it("Should update the url", () => {
+    cy.createScreen("Test Screen", "test with spaces")
+    cy.get(".nav-items-container").within(() => {
+      cy.contains("/test_with_spaces").should("exist")
+    })
   })
 })

packages/builder/cypress/support/commands.js

@@ -160,7 +160,5 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
     cy.get("input").eq(1).type(route)
     cy.get(".spectrum-Button--cta").click()
   })
-  cy.get(".nav-items-container").within(() => {
-    cy.contains(route).should("exist")
-  })
+
 })

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -84,6 +84,7 @@
     if (!event.detail.startsWith("/")) {
       route = "/" + event.detail
     }
+    route = route.replaceAll(' ', '_')
   }
 </script>
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -8,6 +8,7 @@
   } from "builderStore/dataBinding"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { capitalise } from "helpers"
+  import { createEventDispatcher } from "svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,11 +18,12 @@
   export let type = ""
   export let value = null
   export let props = {}
-  export let onChange = () => {}
 
   let bindingDrawer
   let anchor
   let valid
+  let dispatch = createEventDispatcher();
+
 
   $: bindableProperties = getBindableProperties(
     $currentAsset,
@@ -53,9 +55,9 @@
     }
 
     if (typeof innerVal === "string") {
-      onChange(replaceBindings(innerVal))
+      dispatch('change', replaceBindings(innerVal))
     } else {
-      onChange(innerVal)
+      dispatch('change', innerVal)
     }
   }
 

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -10,7 +10,11 @@
 
   export let componentInstance
 
-  function setAssetProps(name, value) {
+  function setAssetProps(name, value, parser) {
+    if (parser && typeof parser === 'function') {
+      value = parser(value)
+    }
+
     const selectedAsset = get(currentAsset)
     store.update(state => {
       if (
@@ -28,7 +32,7 @@
 
   const screenSettings = [
     // { key: "description", label: "Description", control: Input },
-    { key: "routing.route", label: "Route", control: Input },
+    { key: "routing.route", label: "Route", control: Input, parser: (val) => val.replaceAll(' ', '_') },
     { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
@@ -43,7 +47,7 @@
         label={def.label}
         key={def.key}
         value={deepGet($currentAsset, def.key)}
-        onChange={val => setAssetProps(def.key, val)}
+        on:change={event => setAssetProps(def.key, event.detail, def.parser)}
       />
     {/each}
   </DetailSummary>