ui: Previously we were passing through 'fake' events, revert to real.. (#5810)

Previously we were creating a fake event and amending the name of the
fake event, this meant that other `event.target` properties weren't
being passed through (in this instance `checked`) this changes the
approach to not use fake events, and allows you to overwrite the name
that the form uses for `handleEvent`
This commit is contained in:
John Cowen 2019-05-08 17:12:16 +01:00 committed by GitHub
parent 2511ad92b9
commit cd382b4180
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 10 deletions

View File

@ -23,16 +23,24 @@ export default Component.extend(WithListeners, SlotsMixin, {
actions: {
change: function(e, value, item) {
let event = get(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];
event = get(this, 'dom').normalizeEvent(
`${get(this, 'type')}[${prop}]`,
event.target.value,
event.target
);
let name;
if (prop.indexOf('[') === -1) {
name = `${get(this, 'type')}[${prop}]`;
} else {
name = prop;
}
const form = get(this, 'form');
try {
form.handleEvent(event);
form.handleEvent(event, name);
this.onchange({ target: this });
} catch (err) {
throw err;

View File

@ -56,9 +56,11 @@ export default function(changeset = defaultChangeset, getFormNameProperty = pars
_children[child.getName()] = child;
return this;
},
handleEvent: function(e) {
handleEvent: function(e, targetName) {
const target = e.target;
const parts = getFormNameProperty(target.name);
// currently we only use targetName in {{form-component}} for handling deeply
// nested forms, once {{form-component}} handles deeply nested forms targetName can go
const parts = getFormNameProperty(targetName || target.name);
// split the form element name from `name[prop]`
const name = parts[0];
const prop = parts[1];

View File

@ -5,6 +5,7 @@ Feature: dc / acls / policies / update: ACL Policy Update
And 1 policy model from yaml
---
ID: policy-id
Datacenters: []
---
And 3 token models
When I visit the policy page for yaml
@ -21,12 +22,16 @@ Feature: dc / acls / policies / update: ACL Policy Update
Description: [Description]
Rules: [Rules]
---
And I click validDatacenters
And I click datacenter
And I submit
Then a PUT request is made to "/v1/acl/policy/policy-id?dc=datacenter" with the body from yaml
---
Name: [Name]
Description: [Description]
Rules: [Rules]
Datacenters:
- datacenter
---
Then the url should be /datacenter/acls/policies
And "[data-notification]" has the "notification-update" class

View File

@ -69,7 +69,7 @@ export default {
policies: create(
policies(visitable, deletable, creatable, clickable, attribute, collection, freetextFilter)
),
policy: create(policy(visitable, submitable, deletable, cancelable, tokenList)),
policy: create(policy(visitable, submitable, deletable, cancelable, clickable, tokenList)),
roles: create(
roles(visitable, deletable, creatable, clickable, attribute, collection, freetextFilter)
),

View File

@ -1,10 +1,12 @@
export default function(visitable, submitable, deletable, cancelable, tokenList) {
export default function(visitable, submitable, deletable, cancelable, clickable, tokenList) {
return {
visit: visitable(['/:dc/acls/policies/:policy', '/:dc/acls/policies/create']),
...submitable({}, 'form > div'),
...cancelable({}, 'form > div'),
...deletable({}, 'form > div'),
tokens: tokenList(),
validDatacenters: clickable('[name="policy[isScoped]"]'),
datacenter: clickable('[name="policy[Datacenters]"]'),
deleteModal: {
resetScope: true,
scope: '[data-test-delete-modal]',