ui: URL encodes any varaibles interpolated into the template... (#5766)

Encodes any variables passed in to be used for template interpolation, but importantly nothing else in the URL apart from the variables themselves. 'Generally' service names are reasonably URL safe, but we know of usecases using at least /s in service names.

ui-v2/app/components/templated-anchor.js

@@ -60,7 +60,7 @@ export default Component.extend({
       if (typeof vars !== 'undefined' && typeof value !== 'undefined') {
         value = value.replace(templateRe, function(match, group) {
           try {
-            return get(vars, group) || '';
+            return encodeURIComponent(get(vars, group) || '');
           } catch (e) {
             return '';
           }

ui-v2/tests/integration/components/templated-anchor-test.js

@@ -21,7 +21,7 @@ test('it renders', function(assert) {
         Name: '{{Name}}',
         ID: '{{ID}}',
       },
-      result: 'http://localhost/?={{Name}}/{{ID}}',
+      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
     },
     {
       href: 'http://localhost/?={{deep.Name}}/{{deep.ID}}',
@@ -31,7 +31,7 @@ test('it renders', function(assert) {
           ID: '{{ID}}',
         },
       },
-      result: 'http://localhost/?={{Name}}/{{ID}}',
+      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
     },
     {
       href: 'http://localhost/?={{}}/{{}}',
@@ -39,6 +39,8 @@ test('it renders', function(assert) {
         Name: 'name',
         ID: 'id',
       },
+      // If you don't pass actual variables then nothing
+      // gets replaced and nothing is URL encoded
       result: 'http://localhost/?={{}}/{{}}',
     },
     {
@@ -81,6 +83,16 @@ test('it renders', function(assert) {
       },
       result: 'http://localhost/?=',
     },
+    {
+      href: 'http://localhost/?={{deep.Name}}',
+      vars: {
+        deep: {
+          Name: '#Na/me',
+          ID: 'ID',
+        },
+      },
+      result: 'http://localhost/?=%23Na%2Fme',
+    },
   ].forEach(item => {
     this.set('item', item);
     this.render(hbs`