🎨 Move "Update available" notification to the About screen (#894)

refs https://github.com/TryGhost/Ghost/issues/5071

Upgrade messages are now shown on the About screen rather than as alerts. Notifications that are marked as `top` or `custom` are still shown as alerts to allow for certain upgrade messages to be given more visibility.

- remove old `upgrade-notification` service
- update the `upgrade-status` service:
  - add a `message` property that contains an upgrade notification if any exists
  - add a `handleUpgradeNotification` method that accepts a Notification model instance and extracts the `notification.message` property into a html safe string for use in templates
- when loading server notifications during app boot, pass notifications that aren't marked as `top` or `custom` to the new `handleUpgradeNotification` method
- update the `about.hbs` template to pull the upgrade message from the `upgradeStatus` service

ghost/admin/app/components/gh-upgrade-notification.js

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

ghost/admin/app/controllers/about.js

@@ -1,14 +1,9 @@
 import Controller from '@ember/controller';
 import {computed} from '@ember/object';
+import {inject as service} from '@ember/service';
 
 export default Controller.extend({
-    updateNotificationCount: 0,
+    upgradeStatus: service(),
-
-    actions: {
-        updateNotificationChange(count) {
-            this.set('updateNotificationCount', count);
-        }
-    },
 
     copyrightYear: computed(function () {
         let date = new Date();

ghost/admin/app/models/notification.js

@@ -2,9 +2,10 @@ import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 
 export default Model.extend({
+    custom: attr('boolean'),
     dismissible: attr('boolean'),
-    status: attr('string'),
+    key: attr('string'),
-    type: attr('string'),
     message: attr('string'),
-    key: attr('string')
+    status: attr('string'),
+    type: attr('string')
 });

ghost/admin/app/routes/application.js

@@ -41,7 +41,6 @@ export default Route.extend(ApplicationRouteMixin, ShortcutsRoute, {
     lazyLoader: service(),
     notifications: service(),
     settings: service(),
-    upgradeNotification: service(),
     tour: service(),
     ui: service(),
 
@@ -173,10 +172,10 @@ export default Route.extend(ApplicationRouteMixin, ShortcutsRoute, {
                     if (!user.get('isAuthor') && !user.get('isEditor')) {
                         this.store.findAll('notification', {reload: true}).then((serverNotifications) => {
                             serverNotifications.forEach((notification) => {
-                                if (notification.get('type') === 'upgrade') {
+                                if (notification.get('top') || notification.get('custom')) {
-                                    this.get('upgradeNotification').set('content', notification.get('message'));
-                                } else {
                                     this.get('notifications').handleNotification(notification, isDelayed);
+                                } else {
+                                    this.get('upgradeStatus').handleUpgradeNotification(notification);
                                 }
                             });
                         });

ghost/admin/app/services/upgrade-notification.js

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

ghost/admin/app/services/upgrade-status.js

@@ -1,20 +1,32 @@
 import Service, {inject as service} from '@ember/service';
+import {get, set} from '@ember/object';
+import {htmlSafe} from '@ember/string';
 
 export default Service.extend({
-    isRequired: false,
-
     notifications: service(),
 
+    isRequired: false,
+    message: '',
+
+    // called when notifications are fetched during app boot for notifications
+    // where the `location` is not 'top' and `custom` is false
+    handleUpgradeNotification(notification) {
+        let message = get(notification, 'message');
+        set(this, 'message', htmlSafe(message));
+    },
+
+    // called when a MaintenanceError is encountered
     maintenanceAlert() {
-        this.get('notifications').showAlert(
+        get(this, 'notifications').showAlert(
             'Sorry, Ghost is currently undergoing maintenance, please wait a moment then try again.',
             {type: 'error', key: 'api-error.under-maintenance'}
         );
     },
 
+    // called when a VersionMismatchError is encountered
     requireUpgrade() {
-        this.set('isRequired', true);
+        set(this, 'isRequired', true);
-        this.get('notifications').showAlert(
+        get(this, 'notifications').showAlert(
             'Ghost has been upgraded, please copy any unsaved data and refresh the page to continue.',
             {type: 'error', key: 'api-error.upgrade-required'}
         );

ghost/admin/app/styles/layouts/about.css

@@ -120,12 +120,12 @@
 
 /* Upgrade
 /* ---------------------------------------------------------- */
+
 .gh-upgrade-notification {
-    color: var(--red);
+    padding-top: 1em;
 }
 
 .gh-upgrade-notification a {
-    color: var(--red);
     text-decoration: underline;
 }
 

ghost/admin/app/templates/about.hbs

@@ -3,8 +3,6 @@
         {{inline-svg "ghost-logo" class="gh-logo" alt="Ghost"}}
     </header>
     <section class="view-container">
-        {{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>
@@ -18,6 +16,14 @@
             </div>
         </section>
 
+        {{#if upgradeStatus.message}}
+            <section class="gh-upgrade-notification">
+                <p>
+                    <strong>Update available!</strong> {{upgradeStatus.message}}
+                </p>
+            </section>
+        {{/if}}
+
         <section class="gh-credits">
             <h2>The People Who Made it Possible</h2>
 

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

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

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

@@ -1,31 +0,0 @@
-/* jshint expr:true */
-import {describe, it} from 'mocha';
-import {expect} from 'chai';
-import {setupComponentTest} from 'ember-mocha';
-
-describe('Unit: Component: gh-upgrade-notification', function() {
-    setupComponentTest('gh-upgrade-notification', {
-        unit: true,
-        needs: ['helper:gh-format-html', 'service:upgrade-notification']
-    });
-
-    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>');
-    });
-});

ghost/admin/tests/unit/services/unsplash-test.js

@@ -26,12 +26,6 @@ describe('Unit: Service: unsplash', function() {
         server.shutdown();
     });
 
-    // Replace this with your real tests.
-    it('exists', function() {
-        let service = this.subject();
-        expect(service).to.be.ok;
-    });
-
     it('can load new');
     it('can load next page');