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); }); }); });