[DEPRECATIONS] Remove deprecations raised with Ember 1.13 (#311)

Add `ember-cli-deprecation-workflow` to silence known deprecations.

Also update default to Ember 1.13.

The remaining deprecations are mostly linked to `Ember.View`.

Author: cyril-sf

addon/components/color-picker-dropdown.js

@@ -35,7 +35,7 @@ export default Ember.Component.extend(BodyEventListenerMixin, ColorPickerMixin,
   colorRows: Ember.computed(function() {
     return Ember.A();
   }),
-  setCustomColorObserver: Ember.on('init', Ember.observer(function() {
+  setCustomColorObserver: Ember.on('init', Ember.observer('selectedColor', 'colorRows', function() {
     var selectedColor;
     selectedColor = this.get('selectedColor');
     selectedColor = this.colorToHex(selectedColor);
@@ -45,7 +45,7 @@ export default Ember.Component.extend(BodyEventListenerMixin, ColorPickerMixin,
       return this.set('customColor', '');
     }
     return this.set('customColor', selectedColor);
-  }, 'selectedColor', 'colorRows')),
+  })),
   /**
    * This is the formatted string of the input color, for which a hashtag "#"
    * is automatically added if it is not present.

addon/components/multi-select-component.js

@@ -22,9 +22,9 @@ export default SelectComponent.extend({
   // the input field, which is always visible. This helps reducing one tab
   // step to navigate back to the previous component
   tabindex: -1,
-  values: Ember.computed(function(key, value) {
-    var selections, valuePath;
-    if (arguments.length === 2) {
+  values: Ember.computed('selections.[]', {
+    set(key, value) {
+      var selections, valuePath;
       if (!value) {
         return;
       }
@@ -33,7 +33,9 @@ export default SelectComponent.extend({
         return value.contains(Ember.get(item, valuePath));
       })));
       return value;
-    } else {
+    },
+    get() {
+      var selections, valuePath;
       valuePath = this.get('optionValuePath');
       selections = this.get('selections');
       if (valuePath) {
@@ -42,7 +44,7 @@ export default SelectComponent.extend({
         return selections;
       }
     }
-  }).property('selections.[]'),
+  }),
   selectionItemView: MultiSelectOptionView,
 
   // Invisible span used to make sure there is a good amount of room for either
@@ -98,7 +100,7 @@ export default SelectComponent.extend({
 
   // uses single select's "selection" value - adds it to selections and
   // then clears the selection value so that it can be re-selected
-  selectionDidChange: Ember.observer(function() {
+  selectionDidChange: Ember.observer('selection', 'selections.[]', function() {
     var selection, selections;
     selections = this.get('selections');
     selection = this.get('selection');
@@ -109,7 +111,7 @@ export default SelectComponent.extend({
     if (!Ember.isEmpty(selection) && !selections.contains(selection)) {
       return selections.pushObject(selection);
     }
-  }, 'selection', 'selections.[]'),
+  }),
   focusTextField: function() {
     var ref;
     return (ref = this.$('.ember-text-field')) != null ? ref.focus() : void 0;

addon/components/select-component.js

@@ -162,7 +162,7 @@ export default Ember.Component.extend(
     }
     return this._super();
   },
-  updateDropdownLayout: Ember.observer(function() {
+  updateDropdownLayout: Ember.observer('showDropdown', function() {
     var dropdownButton, dropdownButtonHeight, dropdownButtonOffset, dropdownMargin, dropdownMenu, dropdownMenuBottom, dropdownMenuHeight, dropdownMenuOffset, dropdownMenuWidth, dropupMenuTop;
     if ((this.get('_state') || this.get('state')) !== 'inDOM' || this.get('showDropdown') === false) {
       return;
@@ -202,7 +202,7 @@ export default Ember.Component.extend(
     if (highlightedIndex !== -1 && this.get('shouldEnsureVisible')) {
       Ember.run.schedule('afterRender', () => this.ensureVisible(highlightedIndex));
     }
-  }, 'showDropdown'),
+  }),
   onResizeEnd: function() {
     // We need to put this on the run loop, because the resize event came from
     // the window. Otherwise, we get a warning when used in the tests. You have
@@ -242,12 +242,12 @@ export default Ember.Component.extend(
     });
   }).property('itemView'),
 
-  optionLabelPathChanges: Ember.on('init', Ember.observer(function() {
+  optionLabelPathChanges: Ember.on('init', Ember.observer('selection', 'optionLabelPath', function() {
     var labelPath, path;
     labelPath = this.get('optionLabelPath');
     path = labelPath ? "selection." + labelPath : 'selection';
     return Ember.defineProperty(this, 'selectedLabel', Ember.computed.alias(path));
-  }, 'selection', 'optionLabelPath')),
+  })),
 
   searchView: DebouncedTextComponent.extend({
     placeholder: Ember.computed.alias('selectComponent.placeholder'),
@@ -256,7 +256,7 @@ export default Ember.Component.extend(
     // this in a run loop to wait for the event that triggers the showDropdown
     // to finishes before trying to focus the input. Otherwise, focus when be
     // "stolen" from us.
-    showDropdownDidChange: Ember.observer(function() {
+    showDropdownDidChange: Ember.observer('selectComponent.showDropdown', function() {
       // when closing, don't need to focus the now-hidden search box
       if (this.get('selectComponent.showDropdown')) {
         return Ember.run.schedule('afterRender', this, function() {
@@ -269,7 +269,7 @@ export default Ember.Component.extend(
         this.set('value', '');
         this.get('selectComponent').send('valueChanged', '');
       }
-    }, 'selectComponent.showDropdown'),
+    }),
 
     /**
       Delegates to parent view (The select component) to propagate this data up.
@@ -394,22 +394,25 @@ export default Ember.Component.extend(
   contentIsEmpty: Ember.computed.empty('content'),
   hasNoResults: Ember.computed.and('isLoaded', 'filteredContentIsEmpty'),
 
-  value: Ember.computed(function(key, value) {
-    var selection, valuePath, content;
-    if (arguments.length === 2) {
+  value: Ember.computed('selection', {
+    set(key, value) {
+      var selection, valuePath, content;
       valuePath = this.get('optionValuePath');
       selection = value;
       content = this.get('content');
       if (valuePath && content) {
-        if (typeof content.findProperty === 'function') {
-          selection = content.findProperty(valuePath, value);
+        if (typeof content.findBy === 'function') {
+          selection = content.findBy(valuePath, value);
         } else {
           selection = find(content, matchesProperty(valuePath, value));
         }
       }
       this.set('selection', selection);
       return value;
-    } else {
+
+    },
+    get() {
+      var selection, valuePath;
       valuePath = this.get('optionValuePath');
       selection = this.get('selection');
       if (valuePath) {
@@ -418,7 +421,7 @@ export default Ember.Component.extend(
         return selection;
       }
     }
-  }).property('selection'),
+  }),
 
   didInsertElement: function() {
     this._super();
@@ -463,7 +466,7 @@ export default Ember.Component.extend(
   customFilter: null,
 
   // TODO(Peter): This needs to be rethought
-  setDefaultSelection: Ember.observer(function() {
+  setDefaultSelection: Ember.observer('content.[]', function() {
     var content, defaultPath;
 
     // do not set default selection if selection is defined
@@ -475,10 +478,10 @@ export default Ember.Component.extend(
     if (!(content && defaultPath)) {
       return;
     }
-    return this.set('selection', content.findProperty(defaultPath));
-  }, 'content.[]'),
+    return this.set('selection', content.findBy(defaultPath));
+  }),
 
-  selectableOptionsDidChange: Ember.observer(function() {
+  selectableOptionsDidChange: Ember.observer('selectableOptions.[]', 'showDropdown', function() {
     /*
      * If the dropdown is visible and the selected option is no longer
      * contained in the list of selectableOptions, then force the first
@@ -491,7 +494,7 @@ export default Ember.Component.extend(
         this.set('highlighted', selectableOptions.get('firstObject'));
       }
     }
-  }, 'selectableOptions.[]', 'showDropdown'),
+  }),
 
   /*
    * SELECTION RELATED
@@ -520,23 +523,22 @@ export default Ember.Component.extend(
   shouldEnsureVisible: true,
 
   // The option that is currently highlighted.
-  highlighted: Ember.computed(function(key, value) {
-    let content = this.get('selectableOptions') || Ember.A();
+  highlighted: Ember.computed('selectableOptions.[]', 'highlightedIndex', 'shouldEnsureVisible', {
+    set(key, value) {
+      let content = this.get('selectableOptions') || Ember.A();
+      let index = value ? content.indexOf(value) : -1;
+      this.setHighlightedIndex(
+        index,
+        this.get('shouldEnsureVisible')
+      );
+      return value || [];
 
-    if (arguments.length === 1) {
-      // Getter
+    },
+    get() {
+      let content = this.get('selectableOptions') || Ember.A();
       return content.objectAt(this.get('highlightedIndex'));
     }
-
-    // Setter
-    let index = value ? content.indexOf(value) : -1;
-    this.setHighlightedIndex(
-      index,
-      this.get('shouldEnsureVisible')
-    );
-    return value || [];
-
-  }).property('selectableOptions.[]', 'highlightedIndex', 'shouldEnsureVisible'),
+  }),
 
   setFocus: function() {
     var activeElem, selectComponent;

addon/mixins/popover.js

@@ -42,9 +42,11 @@ export default Ember.Mixin.create(StyleBindingsMixin, BodyEventListener, {
   }).property('contentViewClass'),
   didInsertElement: function() {
     this._super();
-    this.snapToPosition();
-    this.set('visibility', 'visible');
-    return this.set('isShowing', true);
+    Ember.run.schedule('afterRender', this, () => {
+      this.snapToPosition();
+      this.set('visibility', 'visible');
+      this.set('isShowing', true);
+    });
   },
   willDestroyElement: function() {
     this.$().off($.support.transition.end);

addon/views/multi-select-option.js

@@ -6,13 +6,13 @@ export default Ember.View.extend({
   classNames: 'ember-select-search-choice',
   didInsertElement: function() {
     this._super();
-    return this.labelPathDidChange();
+    this.labelPathDidChange();
   },
-  labelPathDidChange: Ember.observer(function() {
+  labelPathDidChange: Ember.observer('content', 'labelPath', function() {
     var labelPath, path;
     labelPath = this.get('labelPath');
     path = labelPath ? "content." + labelPath : 'content';
     Ember.defineProperty(this, 'label', Ember.computed.alias(path));
-    return this.notifyPropertyChange('label');
-  }, 'content', 'labelPath')
+    this.notifyPropertyChange('label');
+  })
 });

addon/views/select-option.js

@@ -14,7 +14,7 @@ export default Ember.View.extend({
   isHighlighted: Ember.computed(function() {
     return this.get('highlighted') === this.get('content');
   }).property('highlighted', 'content'),
-  labelPathDidChange: Ember.on('init', Ember.observer(function() {
+  labelPathDidChange: Ember.on('init', Ember.observer('content', 'labelPath', function() {
     var labelPath, path;
     labelPath = this.get('labelPath');
 
@@ -26,7 +26,7 @@ export default Ember.View.extend({
     // 'context.#{labelPath}'
     Ember.defineProperty(this, 'label', Ember.computed.alias(path));
     return this.notifyPropertyChange('label');
-  }, 'content', 'labelPath')),
+  })),
   processDropDownShown: function() {
     return this.get('selectComponent').send('hideDropdown');
   },

app/templates/color-picker-dropdown.hbs

@@ -1,5 +1,5 @@
 <div class="dropdown open">
-  <div {{bind-attr class=":dropdown-menu :color-picker-dropdown dropdownClass"}}
+  <div class="dropdown-menu color-picker-dropdown {{dropdownClass}}"
     role="menu" aria-labelledby="dLabel">
     {{#each row in colorRows}}
       <div class="color-row clearfix">
@@ -14,11 +14,11 @@
       <hr>
     {{/each}}
       <form {{action "setCustomColor" on="submit"}}
-      {{bind-attr class=":color-picker-custom-form isCustomColorValid:valid:invalid"}}>
+      class="color-picker-custom-form {{if isCustomColorValid 'valid' 'invalid'}}">
         <div class="input-group">
-          <span {{bind-attr class=":input-group-addon
-            :color-picker-custom-preview isCustomColor:active"
-            style="customColorCSS"}} {{action "setCustomColor"}}>
+          <span class="input-group-addon
+            color-picker-custom-preview {{if isCustomColor 'active'}}"
+            style={{customColorCSS}} {{action "setCustomColor"}}>
           </span>
           {{input valueBinding="customColor"
             class="form-control input-sm"

app/templates/font-chooser-item.hbs

@@ -1,3 +1,3 @@
-<div {{bind-attr style="view.style"}}>
+<div style={{view.style}}>
   {{view.label}}
 </div>

app/templates/modal-footer.hbs

@@ -1,6 +1,6 @@
 {{#if confirmText}}
   <button type="button"
-    {{bind-attr class=":btn :btn-primary :btn-confirm isDisabled:disabled" disabled="isDisabled"}}
+    class="btn btn-primary btn-confirm {{if isDisabled 'disabled'}}" disabled={{isDisabled}}
     {{action 'sendConfirm'}}>{{confirmText}}
   </button>
 {{/if}}

app/templates/modal.hbs

@@ -1,4 +1,4 @@
-<div {{bind-attr class=":modal-dialog sizeClass"}} tabindex="-1">
+<div class="modal-dialog {{sizeClass}}" tabindex="-1">
   <div class="modal-content">
     <div class="modal-header {{headerClass}}">
       {{view _headerViewClass}}