Added upgrade notification component to About page. (#102)

- Picked some fixes https://github.com/TryGhost/Ghost/pull/5670/files
- Destructured Ember properties
- Removed unused imports and fixed unit test errors.

.gitignore

@@ -12,6 +12,7 @@ logs
 results
 
 npm-debug.log
+.nvmrc
 .bowerrc
 .idea/*
 *.iml

app/components/gh-upgrade-notification.js

@@ -0,0 +1,13 @@
+import Component from 'ember-component';
+import {alias} from 'ember-computed';
+import injectService from 'ember-service/inject';
+
+export default Component.extend({
+    tagName: 'section',
+
+    classNames: ['gh-upgrade-notification'],
+
+    upgradeNotification: injectService('upgrade-notification'),
+
+    message: alias('upgradeNotification.content')
+});

app/routes/application.js

@@ -26,6 +26,7 @@ export default Route.extend(ApplicationRouteMixin, ShortcutsRoute, {
     feature: injectService(),
     dropdown: injectService(),
     notifications: injectService(),
+    upgradeNotification: injectService(),
 
     afterModel(model, transition) {
         this._super(...arguments);
@@ -114,7 +115,11 @@ export default Route.extend(ApplicationRouteMixin, ShortcutsRoute, {
                     if (!user.get('isAuthor') && !user.get('isEditor')) {
                         this.store.findAll('notification', {reload: true}).then((serverNotifications) => {
                             serverNotifications.forEach((notification) => {
-                                this.get('notifications').handleNotification(notification, isDelayed);
+                                if (notification.get('type') === 'upgrade') {
+                                    this.get('upgradeNotification').set('content', notification.get('message'));
+                                } else {
+                                    this.get('notifications').handleNotification(notification, isDelayed);
+                                }
                             });
                         });
                     }

app/services/upgrade-notification.js

@@ -0,0 +1,5 @@
+import Service from 'ember-service';
+
+export default Service.extend({
+    content: ''
+});

app/styles/layouts/about.css

@@ -114,6 +114,18 @@
     opacity: 1;
 }
 
+/* Upgrade
+/* ---------------------------------------------------------- */
+.gh-upgrade-notification {
+    color: var(--red);
+    font-size: 20px;
+}
+
+.gh-upgrade-notification a {
+    color: var(--red);
+    text-decoration: underline;
+}
+
 /* Copyright Info
 /* ---------------------------------------------------------- */
 

app/templates/about.hbs

@@ -5,10 +5,10 @@
     <section class="view-content">
         <header class="gh-about-header">
             <img class="gh-logo" src="{{gh-path 'admin' '/img/ghost-logo.png'}}" alt="Ghost" />
-            {{!-- TODO: fix about notifications --}}
-            {{gh-notifications location="about-upgrade" notify="updateNotificationChange"}}
         </header>
 
+        {{gh-upgrade-notification}}
+
         <section class="gh-env-details">
             <ul class="gh-env-list">
                 <li class="gh-env-list-version"><strong>Version</strong> {{model.version}}</li>

app/templates/components/gh-upgrade-notification.hbs

@@ -0,0 +1,3 @@
+{{#if message}}
+    <span>{{gh-format-html message}}</span>
+{{/if}}

tests/unit/components/gh-upgrade-notification-test.js

@@ -0,0 +1,36 @@
+/* jshint expr:true */
+import {expect} from 'chai';
+import {
+    describeComponent,
+    it
+    }
+from 'ember-mocha';
+
+describeComponent(
+    'gh-upgrade-notification',
+    'GhUpgradeNotificationComponent',
+    {
+        needs: ['helper:gh-format-html']
+    },
+    function() {
+        beforeEach(function() {
+            let upgradeMessage = {'content': 'Ghost 10.02.91 is available! Hot Damn. <a href="http://support.ghost.org/how-to-upgrade/" target="_blank">Click here</a> to upgrade.'};
+            this.subject().set('upgradeNotification', upgradeMessage);
+        });
+
+        it('renders', function() {
+            // creates the component instance
+            let component = this.subject();
+            expect(component._state).to.equal('preRender');
+
+            // renders the component on the page
+            this.render();
+            expect(component._state).to.equal('inDOM');
+
+            expect(this.$().prop('tagName')).to.equal('SECTION');
+            expect(this.$().hasClass('gh-upgrade-notification')).to.be.true;
+            // caja tools sanitize target='_blank' attribute
+            expect(this.$().html()).to.contain('Hot Damn. <a href="http://support.ghost.org/how-to-upgrade/">Click here</a>');
+        });
+    }
+);