mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
🎨 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
This commit is contained in:
Kevin Ansfield
GitHub
parent
9fcaa3a5ed
commit
a5eeb1865b
11 changed files with 36 additions and 81 deletions
|
|
@ -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')
|
||||
});
|
||||
|
|
@ -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,
|
||||
|
||||
actions: {
|
||||
updateNotificationChange(count) {
|
||||
this.set('updateNotificationCount', count);
|
||||
}
|
||||
},
|
||||
upgradeStatus: service(),
|
||||
|
||||
copyrightYear: computed(function () {
|
||||
let date = new Date();
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
type: attr('string'),
|
||||
key: attr('string'),
|
||||
message: attr('string'),
|
||||
key: attr('string')
|
||||
status: attr('string'),
|
||||
type: attr('string')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
this.get('upgradeNotification').set('content', notification.get('message'));
|
||||
} else {
|
||||
if (notification.get('top') || notification.get('custom')) {
|
||||
this.get('notifications').handleNotification(notification, isDelayed);
|
||||
} else {
|
||||
this.get('upgradeStatus').handleUpgradeNotification(notification);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import Service from '@ember/service';
|
||||
|
||||
export default Service.extend({
|
||||
content: ''
|
||||
});
|
||||
|
|
@ -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);
|
||||
this.get('notifications').showAlert(
|
||||
set(this, 'isRequired', true);
|
||||
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'}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -120,12 +120,12 @@
|
|||
|
||||
/* Upgrade
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-upgrade-notification {
|
||||
color: var(--red);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.gh-upgrade-notification a {
|
||||
color: var(--red);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
{{#if message}}
|
||||
<span>{{gh-format-html message}}</span>
|
||||
{{/if}}
|
||||
|
|
@ -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>');
|
||||
});
|
||||
});
|
||||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue