Turn on update notifications for Ember admin

Issue #3160
- Use notifications API to display available update notification.
- Remove update_notification handlebars helper as now both the
  check for an available update and the notification handling
  is run from the server's admin controller index method.
- Bind the notification's location property to a css class
  for styling.
- Refactor Ember notifications to better handle notification
  objects.  Move responsibility for css class generation onto
  the notification component.
- Refactor gh-notifications component to take a location argument
  that's used to assign a css class and filter notifications.

ghost/admin/components/gh-notification.js

@@ -1,6 +1,31 @@
 var NotificationComponent = Ember.Component.extend({
     classNames: ['js-bb-notification'],
 
+    typeClass: function () {
+        var classes = '',
+            message = this.get('message'),
+            type,
+            dismissible;
+
+        // Check to see if we're working with a DS.Model or a plain JS object
+        if (typeof message.toJSON === 'function') {
+            type = message.get('type');
+            dismissible = message.get('dismissible');
+        }
+        else {
+            type = message.type;
+            dismissible = message.dismissible;
+        }
+
+        classes += 'notification-' + type;
+
+        if (type === 'success' && dismissible !== false) {
+            classes += ' notification-passive';
+        }
+
+        return classes;
+    }.property(),
+
     didInsertElement: function () {
         var self = this;
 

ghost/admin/components/gh-notifications.js

@@ -1,7 +1,20 @@
 var NotificationsComponent = Ember.Component.extend({
     tagName: 'aside',
     classNames: 'notifications',
-    messages: Ember.computed.alias('notifications')
+    classNameBindings: ['location'],
+
+    messages: Ember.computed.filter('notifications', function (notification) {
+        // If this instance of the notifications component has no location affinity
+        // then it gets all notifications
+        if (!this.get('location')) {
+            return true;
+        }
+
+        var displayLocation = (typeof notification.toJSON === 'function') ?
+            notification.get('location') : notification.location;
+
+        return this.get('location') === displayLocation;
+    })
 });
 
 export default NotificationsComponent;

ghost/admin/models/notification.js

@@ -3,11 +3,7 @@ var Notification = DS.Model.extend({
     location: DS.attr('string'),
     status: DS.attr('string'),
     type: DS.attr('string'),
-    message: DS.attr('string'),
-
-    typeClass: function () {
-        return 'notification-' + this.get('type');
-    }.property('type')
+    message: DS.attr('string')
 });
 
 export default Notification;

ghost/admin/templates/application.hbs

@@ -3,7 +3,8 @@
 {{/unless}}
 
 <main role="main" id="main">
-    {{gh-notifications}}
+    {{gh-notifications location="top"}}
+    {{gh-notifications location="bottom"}}
 
     {{outlet}}
 </main>

ghost/admin/templates/components/gh-notification.hbs

@@ -1,4 +1,4 @@
-<section {{bind-attr class=":js-notification message.typeClass"}}>
+<section {{bind-attr class=":js-notification typeClass"}}>
     <span class="notification-message">
         {{{message.message}}}
     </span>

ghost/admin/utils/notifications.js

@@ -6,11 +6,23 @@ var Notifications = Ember.ArrayProxy.extend({
     timeout: 3000,
 
     pushObject: function (object) {
-        object.typeClass = 'notification-' + object.type;
-        // This should be somewhere else.
-        if (object.type === 'success') {
-            object.typeClass = object.typeClass + ' notification-passive';
+        // object can be either a DS.Model or a plain JS object, so when working with
+        // it, we need to handle both cases.
+
+        // make sure notifications have all the necessary properties set.
+        if (typeof object.toJSON === 'function') {
+            // working with a DS.Model
+
+            if (object.get('location') === '') {
+                object.set('location', 'bottom');
+            }
         }
+        else {
+            if (!object.location) {
+                object.location = 'bottom';
+            }
+        }
+
         this._super(object);
     },
     handleNotification: function (message, delayed) {