Merge pull request #2147 from mslourens/prevent_space_in_url

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,4 @@ 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/ScreenSettingsSection.svelte

@@ -11,7 +11,11 @@
   export let componentInstance
   export let bindings
 
-  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 (
@@ -29,7 +33,12 @@
 
   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 },
   ]
@@ -44,7 +53,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)}
         {bindings}
       />
     {/each}