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

@@ -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, [
             {

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() {},

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),
       });
     }
   },

ui-v2/app/mixins/with-listeners.js

@@ -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);
-  },
-});

ui-v2/tests/unit/mixins/with-listeners-test.js

@@ -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);
-  });
-});