4c3fbebefd
* ui: Move components to the new nested structure * Move data-test attribute to the correct HTML element We don't currently rely on this, but was incorrectly placed on the input rather than the label tag * Fix up left over curly bracket components that were causing issues For some reason the combination of: 1. Old style curly bracket components 2. data-test-* attributes 3. Moving to the new component file structure Meant that our data-test-* selectors where no longer being rendered. Whilst this had no effect on the app, it meant our tests suite could no longer select DOM elements in order to assert various things. Moving the old style curly bracket components to the new style XML/Angle bracket format fixes the issue * Update ui-v2/app/templates/dc/nodes/-services.hbs Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com> * Update ui-v2/app/templates/dc/nodes/-services.hbs Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com> Co-authored-by: Greg Hoin <1416421+gregone@users.noreply.github.com>
77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
/*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 '';
|
|
},
|
|
}),
|
|
});
|