From a17077b25af0216278c7d23242de9cd2a48f0f72 Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Wed, 28 Jul 2021 09:09:37 +0200 Subject: [PATCH 1/5] replace spaces with underscores in screen routes --- packages/builder/cypress/integration/createScreen.js | 10 ++++++++++ packages/builder/cypress/support/commands.js | 4 +--- .../design/NavigationPanel/NewScreenModal.svelte | 1 + .../PropertyControls/PropertyControl.svelte | 8 +++++--- .../PropertiesPanel/ScreenSettingsSection.svelte | 10 +++++++--- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js index 4e166daaec..3595bb44f0 100644 --- a/packages/builder/cypress/integration/createScreen.js +++ b/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") + }) }) }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index d7452284a4..ec28b21d8e 100644 --- a/packages/builder/cypress/support/commands.js +++ b/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") - }) + }) diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index a4c057abba..31842b984e 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -84,6 +84,7 @@ if (!event.detail.startsWith("/")) { route = "/" + event.detail } + route = route.replaceAll(' ', '_') } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 40d579e9c9..900beca5ce 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/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) } } diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte index a153c4fc87..b25964c5e5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte +++ b/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} From 5efc80b859a5874d5b2811054f349756d25c6c1c Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Wed, 28 Jul 2021 10:19:10 +0200 Subject: [PATCH 2/5] fix lint issues --- packages/builder/cypress/support/commands.js | 1 - .../design/NavigationPanel/NewScreenModal.svelte | 2 +- .../PropertyControls/PropertyControl.svelte | 7 +++---- .../design/PropertiesPanel/ScreenSettingsSection.svelte | 9 +++++++-- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ec28b21d8e..261b840577 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -160,5 +160,4 @@ Cypress.Commands.add("createScreen", (screenName, route) => { cy.get("input").eq(1).type(route) cy.get(".spectrum-Button--cta").click() }) - }) diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 31842b984e..96515478ab 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -84,7 +84,7 @@ if (!event.detail.startsWith("/")) { route = "/" + event.detail } - route = route.replaceAll(' ', '_') + route = route.replaceAll(" ", "_") } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 900beca5ce..7629afa40d 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -22,8 +22,7 @@ let bindingDrawer let anchor let valid - let dispatch = createEventDispatcher(); - + let dispatch = createEventDispatcher() $: bindableProperties = getBindableProperties( $currentAsset, @@ -55,9 +54,9 @@ } if (typeof innerVal === "string") { - dispatch('change', replaceBindings(innerVal)) + dispatch("change", replaceBindings(innerVal)) } else { - dispatch('change', innerVal) + dispatch("change", innerVal) } } diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte index b25964c5e5..db8cb1fd61 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte @@ -11,7 +11,7 @@ export let componentInstance function setAssetProps(name, value, parser) { - if (parser && typeof parser === 'function') { + if (parser && typeof parser === "function") { value = parser(value) } @@ -32,7 +32,12 @@ const screenSettings = [ // { key: "description", label: "Description", control: Input }, - { key: "routing.route", label: "Route", control: Input, parser: (val) => val.replaceAll(' ', '_') }, + { + key: "routing.route", + label: "Route", + control: Input, + parser: val => val.replaceAll(" ", "_"), + }, { key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect }, ] From b27c8843c20fb744e3a6f475dafb407baf815d3d Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Wed, 28 Jul 2021 11:30:57 +0200 Subject: [PATCH 3/5] revert change to event dispatcher --- .../PropertyControls/PropertyControl.svelte | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 7629afa40d..40d579e9c9 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -8,7 +8,6 @@ } 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 @@ -18,11 +17,11 @@ 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, @@ -54,9 +53,9 @@ } if (typeof innerVal === "string") { - dispatch("change", replaceBindings(innerVal)) + onChange(replaceBindings(innerVal)) } else { - dispatch("change", innerVal) + onChange(innerVal) } } From 4d7beb4cfc585c78967f4badf8e9132b3b6dabe4 Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Thu, 5 Aug 2021 20:03:54 +0200 Subject: [PATCH 4/5] implement review comments --- .../src/components/design/NavigationPanel/NewScreenModal.svelte | 2 +- .../design/PropertiesPanel/ScreenSettingsSection.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 96515478ab..fb6b1c5ffa 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -84,7 +84,7 @@ if (!event.detail.startsWith("/")) { route = "/" + event.detail } - route = route.replaceAll(" ", "_") + route = route.replaceAll(" ", "-") } diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte index db8cb1fd61..4570a05095 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte @@ -36,7 +36,7 @@ key: "routing.route", label: "Route", control: Input, - parser: val => val.replaceAll(" ", "_"), + parser: val => val.replaceAll(" ", "-"), }, { key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect }, From 5d10d2660dbe87cdcdd2b3aa2a569cba94be8b78 Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Fri, 6 Aug 2021 21:46:44 +0200 Subject: [PATCH 5/5] Fix test --- packages/builder/cypress/integration/createScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js index 3595bb44f0..26c7cdd846 100644 --- a/packages/builder/cypress/integration/createScreen.js +++ b/packages/builder/cypress/integration/createScreen.js @@ -15,7 +15,7 @@ context("Screen Tests", () => { 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") + cy.contains("/test-with-spaces").should("exist") }) }) })