mirror of
https://github.com/status-im/consul.git
synced 2025-01-24 20:51:10 +00:00
8986b6ad7b
* 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>
50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import Component from '@ember/component';
|
|
import SlotsMixin from 'block-slots';
|
|
import { inject as service } from '@ember/service';
|
|
import { alias } from '@ember/object/computed';
|
|
import WithListeners from 'consul-ui/mixins/with-listeners';
|
|
// match anything that isn't a [ or ] into multiple groups
|
|
const propRe = /([^[\]])+/g;
|
|
export default Component.extend(WithListeners, SlotsMixin, {
|
|
onreset: function() {},
|
|
onchange: function() {},
|
|
onerror: function() {},
|
|
onsuccess: function() {},
|
|
|
|
data: alias('form.data'),
|
|
item: alias('form.data'),
|
|
// TODO: Could probably alias item
|
|
// or just use data/value instead
|
|
|
|
dom: service('dom'),
|
|
container: service('form'),
|
|
|
|
actions: {
|
|
change: function(e, value, item) {
|
|
let event = this.dom.normalizeEvent(e, value);
|
|
// currently form-components don't deal with deeply nested forms, only top level
|
|
// we therefore grab the end of the nest off here,
|
|
// so role[policy][Rules] will end up as policy[Rules]
|
|
// but also policy[Rules] will end up as Rules
|
|
// for now we look for a [ so we know whether this component is deeply
|
|
// nested or not and we pass the name through as an optional argument to handleEvent
|
|
// once this component handles deeply nested forms this can go
|
|
const matches = [...event.target.name.matchAll(propRe)];
|
|
const prop = matches[matches.length - 1][0];
|
|
let name;
|
|
if (prop.indexOf('[') === -1) {
|
|
name = `${this.type}[${prop}]`;
|
|
} else {
|
|
name = prop;
|
|
}
|
|
const form = this.form;
|
|
try {
|
|
form.handleEvent(event, name);
|
|
this.onchange({ target: this });
|
|
} catch (err) {
|
|
throw err;
|
|
}
|
|
},
|
|
},
|
|
});
|