From f9c82e5059ea541e6dfae41c88bbf117af141ac0 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Fri, 17 Sep 2021 11:43:27 +0200
Subject: [PATCH] re-use sanitizeUrl utils method, add / if it's not added
 already

---
 .../design/NavigationPanel/NewScreenModal.svelte      |  3 ++-
 .../PropertiesPanel/ScreenSettingsSection.svelte      | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index ed0c764956..78f5d74e62 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -5,6 +5,7 @@
   import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
   import analytics from "analytics"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
 
   const CONTAINER = "@budibase/standard-components/container"
 
@@ -84,7 +85,7 @@
     if (!event.detail.startsWith("/")) {
       route = "/" + event.detail
     }
-    route = route.replace(/ +/g, "-")
+    route = sanitizeUrl(route)
   }
 </script>
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
index d782d1cd44..97e1e8a2b5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@@ -7,13 +7,17 @@
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
   import { currentAsset, store } from "builderStore"
   import { FrontendTypes } from "constants"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
 
   export let componentInstance
   export let bindings
 
   function setAssetProps(name, value, parser) {
     if (parser && typeof parser === "function") {
+      console.log("before", value)
       value = parser(value)
+      console.log("after", value)
+      console.log("deepGet", deepGet($currentAsset, name))
     }
 
     const selectedAsset = get(currentAsset)
@@ -37,7 +41,12 @@
       key: "routing.route",
       label: "Route",
       control: Input,
-      parser: val => val.replace(/ +/g, "-"),
+      parser: val => {
+        if (!val.startsWith("/")) {
+          val = "/" + val
+        }
+        return sanitizeUrl(val)
+      },
     },
     { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },