diff --git a/ui-v2/app/components/templated-anchor/index.hbs b/ui-v2/app/components/templated-anchor/index.hbs
deleted file mode 100644
index fb5c4b157..000000000
--- a/ui-v2/app/components/templated-anchor/index.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{yield}}
\ No newline at end of file
diff --git a/ui-v2/app/components/templated-anchor/index.js b/ui-v2/app/components/templated-anchor/index.js
deleted file mode 100644
index 9f6ae23a8..000000000
--- a/ui-v2/app/components/templated-anchor/index.js
+++ /dev/null
@@ -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 '';
- },
- }),
-});
diff --git a/ui-v2/app/helpers/render-template.js b/ui-v2/app/helpers/render-template.js
new file mode 100644
index 000000000..8c743a8b8
--- /dev/null
+++ b/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 '';
+});
diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs
index 0b1a373e1..75e86ecae 100644
--- a/ui-v2/app/templates/dc/services/show.hbs
+++ b/ui-v2/app/templates/dc/services/show.hbs
@@ -47,7 +47,15 @@
{{#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}}
+
+ Open Dashboard
+
{{/if}}
diff --git a/ui-v2/tests/integration/components/templated-anchor-test.js b/ui-v2/tests/integration/helpers/render-template-test.js
similarity index 82%
rename from ui-v2/tests/integration/components/templated-anchor-test.js
rename to ui-v2/tests/integration/helpers/render-template-test.js
index 51de3b6de..6136ca7ac 100644
--- a/ui-v2/tests/integration/components/templated-anchor-test.js
+++ b/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) {
- 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);
+ test('it renders', async function(assert) {
+ this.set('template', item.href);
+ this.set('vars', item.vars);
+
+ await render(hbs`{{render-template template vars}}`);
+
+ assert.equal(this.element.textContent.trim(), item.result);
});
});
});