ui: Allow ${} interpolation for template URLs (see #11328)

hashicorp · Oct 21, 2021 · bf8f439 · bf8f439
1 parent eef56f2
commit bf8f439
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 2 deletions.
diff --git a/ui-v2/app/components/templated-anchor/index.js b/ui-v2/app/components/templated-anchor/index.js
@@ -24,9 +24,17 @@ const createWeak = function(wm = new WeakMap()) {
   };
 };
 const weak = createWeak();
+// regexp that matches {{item.Name}} or ${item.Name}
+// what this regex does
+// (?:\$|\{)            - Match either $ or {
+// \{                   - Match {
+// ([a-z.0-9_-]+)       - Capturing group
+// (?:(?<=\$\{[^{]+)    - Use a positive lookbehind to assert that ${ was matched previously
+//   |\}            )   - or match a }
+// \}                   - Match }
 // Covers alpha-capitalized dot separated API keys such as
 // `{{Name}}`, `{{Service.Name}}` etc. but not `{{}}`
-const templateRe = /{{([A-Za-z.0-9_-]+)}}/g;
+const templateRe = /(?:\$|\{)\{([a-z.0-9_-]+)(?:(?<=\$\{[^{]+)|\})\}/gi;
 export default Component.extend({
   tagName: 'a',
   attributeBindings: ['href', 'rel', 'target'],

diff --git a/ui-v2/tests/integration/components/templated-anchor-test.js b/ui-v2/tests/integration/components/templated-anchor-test.js
@@ -93,7 +93,135 @@ module('Integration | Component | templated anchor', function(hooks) {
       result: 'http://localhost/?=%23Na%2Fme',
     },
   ].forEach(item => {
-    test(`it renders ${item.href}`, async function(assert) {
+    test('it renders {{}} style interpolation`', async function(assert) {
+      this.set('item', item);
+      await render(hbs`
+          {{#templated-anchor href=item.href vars=item.vars}}
+            Dashboard link
+          {{/templated-anchor}}
+        `);
+      assert.equal(this.element.querySelector('a').getAttribute('href'), item.result);
+    });
+  });
+
+  [
+    {
+      href: 'http://localhost/?=${Name}/${ID}',
+      vars: {
+        Name: 'name',
+        ID: 'id',
+      },
+      result: 'http://localhost/?=name/id',
+    },
+    {
+      href: 'http://localhost/?=${Name}/${ID}',
+      vars: {
+        Name: '{{Name}}',
+        ID: '{{ID}}',
+      },
+      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
+    },
+    {
+      href: 'http://localhost/?=${deep.Name}/${deep.ID}',
+      vars: {
+        deep: {
+          Name: '{{Name}}',
+          ID: '{{ID}}',
+        },
+      },
+      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
+    },
+    {
+      href: 'http://localhost/?=${}/${}',
+      vars: {
+        Name: 'name',
+        ID: 'id',
+      },
+      // If you don't pass actual variables then nothing
+      // gets replaced and nothing is URL encoded
+      result: 'http://localhost/?=${}/${}',
+    },
+    {
+      href: 'http://localhost/?=${Service_Name}/${Meta-Key}',
+      vars: {
+        Service_Name: 'name',
+        ['Meta-Key']: 'id',
+      },
+      result: 'http://localhost/?=name/id',
+    },
+    {
+      href: 'http://localhost/?=${Service_Name}/${Meta-Key}',
+      vars: {
+        WrongPropertyName: 'name',
+        ['Meta-Key']: 'id',
+      },
+      result: 'http://localhost/?=/id',
+    },
+    {
+      href: 'http://localhost/?=${.Name}',
+      vars: {
+        ['.Name']: 'name',
+      },
+      result: 'http://localhost/?=',
+    },
+    {
+      href: 'http://localhost/?=${.}',
+      vars: {
+        ['.']: 'name',
+      },
+      result: 'http://localhost/?=',
+    },
+    {
+      href: 'http://localhost/?=${deep..Name}',
+      vars: {
+        deep: {
+          Name: 'Name',
+          ID: 'ID',
+        },
+      },
+      result: 'http://localhost/?=',
+    },
+    {
+      href: 'http://localhost/?=${deep.Name}',
+      vars: {
+        deep: {
+          Name: '#Na/me',
+          ID: 'ID',
+        },
+      },
+      result: 'http://localhost/?=%23Na%2Fme',
+    },
+  ].forEach(item => {
+    test('it renders ${} style interpolation', async function(assert) {
+      this.set('item', item);
+      await render(hbs`
+          {{#templated-anchor href=item.href vars=item.vars}}
+            Dashboard link
+          {{/templated-anchor}}
+        `);
+      assert.equal(this.element.querySelector('a').getAttribute('href'), item.result);
+    });
+  });
+
+  [
+    {
+      href: 'http://localhost/?=${Name}/{{ID}}',
+      vars: {
+        Name: 'name',
+        ID: 'id',
+      },
+      result: 'http://localhost/?=name/id',
+    },
+    {
+      href: 'http://localhost/?=${Name}}/{{ID}',
+      vars: {
+        Name: 'name',
+        ID: 'id',
+      },
+      result: 'http://localhost/?=name}/{{ID}',
+    },
+  ].forEach(item => {
+    test('it renders both styles of interpolation when used together', async function(assert) {
       this.set('item', item);
       await render(hbs`
           {{#templated-anchor href=item.href vars=item.vars}}