ui: Create template-anchor helper and remove component (#8798)

ui-v2/app/components/templated-anchor/index.hbs

@@ -1 +0,0 @@
-{{yield}}

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

@@ -1,76 +0,0 @@
-/*eslint ember/require-return-from-computed: "warn"*/
-// TODO: Remove ^
-
-import Component from '@ember/component';
-import { get, set, computed } from '@ember/object';
-
-const createWeak = function(wm = new WeakMap()) {
-  return {
-    get: function(ref, prop) {
-      let map = wm.get(ref);
-      if (map) {
-        return map[prop];
-      }
-    },
-    set: function(ref, prop, value) {
-      let map = wm.get(ref);
-      if (typeof map === 'undefined') {
-        map = {};
-        wm.set(ref, map);
-      }
-      map[prop] = value;
-      return map[prop];
-    },
-  };
-};
-const weak = createWeak();
-// Covers alpha-capitalized dot separated API keys such as
-// `{{Name}}`, `{{Service.Name}}` etc. but not `{{}}`
-const templateRe = /{{([A-Za-z.0-9_-]+)}}/g;
-export default Component.extend({
-  tagName: 'a',
-  attributeBindings: ['href', 'rel', 'target'],
-  rel: computed({
-    get: function(prop) {
-      return weak.get(this, prop);
-    },
-    set: function(prop, value) {
-      switch (value) {
-        case 'external':
-          value = `${value} noopener noreferrer`;
-          set(this, 'target', '_blank');
-          break;
-      }
-      return weak.set(this, prop, value);
-    },
-  }),
-  vars: computed({
-    get: function(prop) {
-      return weak.get(this, prop);
-    },
-    set: function(prop, value) {
-      weak.set(this, prop, value);
-      set(this, 'href', weak.get(this, 'template'));
-    },
-  }),
-  href: computed({
-    get: function(prop) {
-      return weak.get(this, prop);
-    },
-    set: function(prop, value) {
-      weak.set(this, 'template', value);
-      const vars = weak.get(this, 'vars');
-      if (typeof vars !== 'undefined' && typeof value !== 'undefined') {
-        value = value.replace(templateRe, function(match, group) {
-          try {
-            return encodeURIComponent(get(vars, group) || '');
-          } catch (e) {
-            return '';
-          }
-        });
-        return weak.set(this, prop, value);
-      }
-      return '';
-    },
-  }),
-});

ui-v2/app/helpers/render-template.js

@@ -0,0 +1,18 @@
+import { helper } from '@ember/component/helper';
+import { get } from '@ember/object';
+
+// Covers alpha-capitalized dot separated API keys such as
+// `{{Name}}`, `{{Service.Name}}` etc. but not `{{}}`
+const templateRe = /{{([A-Za-z.0-9_-]+)}}/g;
+export default helper(function renderTemplate([template, vars]) {
+  if (typeof vars !== 'undefined' && typeof template !== 'undefined') {
+    return template.replace(templateRe, function(match, group) {
+      try {
+        return encodeURIComponent(get(vars, group) || '');
+      } catch (e) {
+        return '';
+      }
+    });
+  }
+  return '';
+});

ui-v2/app/templates/dc/services/show.hbs

@@ -47,7 +47,15 @@
   </BlockSlot>
   <BlockSlot @name="actions">
     {{#if urls.service}}
-      {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
+      <a href={{render-template urls.service (hash
+        Datacenter=dc
+        Service=(hash Name=item.Service.Service)
+      )}}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-test-dashboard-anchor>
+        Open Dashboard
+      </a>
     {{/if}}
   </BlockSlot>
   <BlockSlot @name="content">

ui-v2/tests/integration/helpers/render-template-test.js

@@ -1,10 +1,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | templated anchor', function(hooks) {
+module('Integration | Helper | render-template', function(hooks) {
   setupRenderingTest(hooks);
+
   [
     {
       href: 'http://localhost/?={{Name}}/{{ID}}',
@@ -93,14 +94,13 @@ 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', async function(assert) {
-      this.set('item', item);
+      this.set('template', item.href);
-      await render(hbs`
+      this.set('vars', item.vars);
-          {{#templated-anchor href=item.href vars=item.vars}}
+
-            Dashboard link
+      await render(hbs`{{render-template template vars}}`);
-          {{/templated-anchor}}
+
-        `);
+      assert.equal(this.element.textContent.trim(), item.result);
-      assert.equal(this.element.querySelector('a').getAttribute('href'), item.result);
     });
   });
 });