From 6126f24acd2e58c36bc8f0240b2a4e7b9c6d1420 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 b3b498b97..54f1837c2 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 520cb2148..ef1c0dc17 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 52c17dc4d..04b62f1d6 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 f3d09c9d7..000000000 --- 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 d62dfce06..000000000 --- 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); - }); -});