From b9e12b99f6df05f7daa3f785b1329a13e682ed41 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 18 Jun 2020 14:54:31 +0100 Subject: [PATCH] ui: Remove with-listeners mixin (#8142) This mixin was a very thin mixin over the top of our listeners utility, and we have been gradually preferring using the utility straight rather than using the mixin. This commit removes the last places where we still used the mixin, and also potentially the last few places where we continued to use the old API for our listeners utility. --- ui-v2/app/components/child-selector/index.js | 20 +++++++---- ui-v2/app/components/form-component/index.js | 5 ++- ui-v2/app/components/policy-selector/index.js | 4 +-- ui-v2/app/mixins/with-listeners.js | 35 ------------------- .../tests/unit/mixins/with-listeners-test.js | 23 ------------ 5 files changed, 17 insertions(+), 70 deletions(-) delete mode 100644 ui-v2/app/mixins/with-listeners.js delete mode 100644 ui-v2/tests/unit/mixins/with-listeners-test.js diff --git a/ui-v2/app/components/child-selector/index.js b/ui-v2/app/components/child-selector/index.js index b3b498b979..54f1837c26 100644 --- a/ui-v2/app/components/child-selector/index.js +++ b/ui-v2/app/components/child-selector/index.js @@ -3,10 +3,9 @@ import { get, set, computed } from '@ember/object'; import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; -import SlotsMixin from 'block-slots'; -import WithListeners from 'consul-ui/mixins/with-listeners'; +import Slotted from 'block-slots'; -export default Component.extend(SlotsMixin, WithListeners, { +export default Component.extend(Slotted, { onchange: function() {}, tagName: '', @@ -23,10 +22,15 @@ export default Component.extend(SlotsMixin, WithListeners, { init: function() { this._super(...arguments); + this._listeners = this.dom.listeners(); this.searchable = this.container.searchable(this.type); this.form = this.formContainer.form(this.type); this.form.clear({ Datacenter: this.dc, Namespace: this.nspace }); }, + willDestroyElement: function() { + this._super(...arguments); + this._listeners.remove(); + }, options: computed('selectedOptions.[]', 'allOptions.[]', function() { // It's not massively important here that we are defaulting `items` and // losing reference as its just to figure out the diff @@ -44,9 +48,11 @@ export default Component.extend(SlotsMixin, WithListeners, { // TODO: make sure we can either search before things are loaded // or wait until we are loaded, guess power select take care of that return new Promise(resolve => { - const remove = this.listen(this.searchable, 'change', function(e) { - remove(); - resolve(e.target.data); + const remove = this._listeners.add(this.searchable, { + change: e => { + remove(); + resolve(e.target.data); + }, }); this.searchable.search(term); }); @@ -64,7 +70,7 @@ export default Component.extend(SlotsMixin, WithListeners, { // need to be sure that its saved before adding/closing the modal for now // and we don't open the modal on prop change yet item = repo.persist(item); - this.listen(item, { + this._listeners.add(item, { message: e => { this.actions.change.apply(this, [ { diff --git a/ui-v2/app/components/form-component/index.js b/ui-v2/app/components/form-component/index.js index 520cb2148e..ef1c0dc170 100644 --- a/ui-v2/app/components/form-component/index.js +++ b/ui-v2/app/components/form-component/index.js @@ -1,11 +1,10 @@ import Component from '@ember/component'; -import SlotsMixin from 'block-slots'; +import Slotted 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, { +export default Component.extend(Slotted, { tagName: '', onreset: function() {}, onchange: function() {}, diff --git a/ui-v2/app/components/policy-selector/index.js b/ui-v2/app/components/policy-selector/index.js index 52c17dc4dc..04b62f1d68 100644 --- a/ui-v2/app/components/policy-selector/index.js +++ b/ui-v2/app/components/policy-selector/index.js @@ -17,8 +17,8 @@ export default ChildSelectorComponent.extend({ const source = this.source; if (source) { const event = 'save'; - this.listen(source, event, e => { - this.actions[event].bind(this)(...e.data); + this._listeners.add(source, { + save: e => this.actions[event].bind(this)(...e.data), }); } }, diff --git a/ui-v2/app/mixins/with-listeners.js b/ui-v2/app/mixins/with-listeners.js deleted file mode 100644 index f3d09c9d7a..0000000000 --- a/ui-v2/app/mixins/with-listeners.js +++ /dev/null @@ -1,35 +0,0 @@ -import Controller from '@ember/controller'; -import Component from '@ember/component'; -import Mixin from '@ember/object/mixin'; -import { inject as service } from '@ember/service'; - -export default Mixin.create({ - dom: service('dom'), - init: function() { - this._super(...arguments); - this._listeners = this.dom.listeners(); - let teardown = ['willDestroy']; - if (this instanceof Component) { - teardown = ['willDestroyElement']; - } else if (this instanceof Controller) { - if (typeof this.reset === 'function') { - teardown.push('reset'); - } - } - teardown.forEach(method => { - const destroy = this[method]; - this[method] = function() { - if (typeof destroy === 'function') { - destroy.apply(this, arguments); - } - this.removeListeners(); - }; - }); - }, - listen: function(target, event, handler) { - return this._listeners.add(...arguments); - }, - removeListeners: function() { - return this._listeners.remove(...arguments); - }, -}); diff --git a/ui-v2/tests/unit/mixins/with-listeners-test.js b/ui-v2/tests/unit/mixins/with-listeners-test.js deleted file mode 100644 index d62dfce06b..0000000000 --- a/ui-v2/tests/unit/mixins/with-listeners-test.js +++ /dev/null @@ -1,23 +0,0 @@ -import { module } from 'qunit'; -import { setupTest } from 'ember-qunit'; -import test from 'ember-sinon-qunit/test-support/test'; -import Controller from '@ember/controller'; -import Mixin from 'consul-ui/mixins/with-listeners'; - -module('Unit | Mixin | with listeners', function(hooks) { - setupTest(hooks); - - hooks.beforeEach(function() { - this.subject = function() { - const MixedIn = Controller.extend(Mixin); - this.owner.register('test-container:with-listeners-object', MixedIn); - return this.owner.lookup('test-container:with-listeners-object'); - }; - }); - - // Replace this with your real tests. - test('it works', function(assert) { - const subject = this.subject(); - assert.ok(subject); - }); -});