From 96f1b6342db475803f32d1010c3c777d5bf047e9 Mon Sep 17 00:00:00 2001
From: Vijay Kandy <vkandy@users.noreply.github.com>
Date: Fri, 15 Jul 2016 16:58:35 -0600
Subject: [PATCH] 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                                    |  1 +
 app/components/gh-upgrade-notification.js     | 13 +++++++
 app/routes/application.js                     |  7 +++-
 app/services/upgrade-notification.js          |  5 +++
 app/styles/layouts/about.css                  | 12 +++++++
 app/templates/about.hbs                       |  4 +--
 .../components/gh-upgrade-notification.hbs    |  3 ++
 .../gh-upgrade-notification-test.js           | 36 +++++++++++++++++++
 8 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 app/components/gh-upgrade-notification.js
 create mode 100644 app/services/upgrade-notification.js
 create mode 100644 app/templates/components/gh-upgrade-notification.hbs
 create mode 100644 tests/unit/components/gh-upgrade-notification-test.js

diff --git a/.gitignore b/.gitignore
index 1b3a4d755..e7db80248 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ logs
 results
 
 npm-debug.log
+.nvmrc
 .bowerrc
 .idea/*
 *.iml
diff --git a/app/components/gh-upgrade-notification.js b/app/components/gh-upgrade-notification.js
new file mode 100644
index 000000000..176e2abf8
--- /dev/null
+++ b/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')
+});
diff --git a/app/routes/application.js b/app/routes/application.js
index 4fa748e2a..9539f93a4 100644
--- a/app/routes/application.js
+++ b/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);
+                                }
                             });
                         });
                     }
diff --git a/app/services/upgrade-notification.js b/app/services/upgrade-notification.js
new file mode 100644
index 000000000..f7aa7b1fe
--- /dev/null
+++ b/app/services/upgrade-notification.js
@@ -0,0 +1,5 @@
+import Service from 'ember-service';
+
+export default Service.extend({
+    content: ''
+});
diff --git a/app/styles/layouts/about.css b/app/styles/layouts/about.css
index 57b3b10da..df6e67139 100644
--- a/app/styles/layouts/about.css
+++ b/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
 /* ---------------------------------------------------------- */
 
diff --git a/app/templates/about.hbs b/app/templates/about.hbs
index 02c0c2367..20d95b225 100644
--- a/app/templates/about.hbs
+++ b/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>
diff --git a/app/templates/components/gh-upgrade-notification.hbs b/app/templates/components/gh-upgrade-notification.hbs
new file mode 100644
index 000000000..26001757b
--- /dev/null
+++ b/app/templates/components/gh-upgrade-notification.hbs
@@ -0,0 +1,3 @@
+{{#if message}}
+    <span>{{gh-format-html message}}</span>
+{{/if}}
diff --git a/tests/unit/components/gh-upgrade-notification-test.js b/tests/unit/components/gh-upgrade-notification-test.js
new file mode 100644
index 000000000..c0ef5ab3d
--- /dev/null
+++ b/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>');
+        });
+    }
+);