Added Ghost update banner for hosted environments (#2381)

app/controllers/application.js

@@ -1,5 +1,5 @@
 import classic from 'ember-classic-decorator';
-import {computed} from '@ember/object';
+import {action, computed} from '@ember/object';
 import {reads} from '@ember/object/computed';
 import {inject as service} from '@ember/service';
 /* eslint-disable ghost/ember/alias-model-in-controller */
@@ -7,15 +7,20 @@ import Controller from '@ember/controller';
 
 @classic
 export default class ApplicationController extends Controller {
+    @service ajax;
     @service billing;
     @service config;
     @service dropdown;
     @service feature;
+    @service ghostPaths;
     @service router;
     @service session;
     @service settings;
     @service ui;
 
+    @reads('config.hostSettings.update.enabled')
+        showUpdateLink;
+
     @reads('config.hostSettings.billing.enabled')
         showBilling;
 
@@ -41,4 +46,20 @@ export default class ApplicationController extends Controller {
         return (router.currentRouteName !== 'error404' || session.isAuthenticated)
                 && !router.currentRouteName.match(/(signin|signup|setup|reset)/);
     }
+
+    @action
+    openUpdateTab() {
+        const updateWindow = window.open('', '_blank');
+
+        updateWindow.document.write('Loading...');
+
+        const updateUrl = new URL(this.config.get('hostSettings.update.url'));
+        const ghostIdentityUrl = this.ghostPaths.url.api('identities');
+
+        this.ajax.request(ghostIdentityUrl).then((response) => {
+            const token = response?.identities?.[0]?.token;
+            updateUrl.searchParams.append('jwt', token);
+            updateWindow.location.href = updateUrl.toString();
+        });
+    }
 }

app/styles/layouts/main.css

@@ -2073,3 +2073,26 @@ section.gh-ds h2 {
         justify-content: center;
     }
 }
+
+.gh-update-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #15171A;
+    color: rgba(255, 255, 255, 0.95);
+    padding: 14px;
+}
+
+.gh-update-banner a {
+    display: inline-block;
+    font-size: 1.4rem;
+    font-weight: 500;
+    text-decoration: underline;
+    color: #fff;
+    transition: all ease-in-out 0.35;
+    margin-left: 12px;
+}
+
+.gh-update-banner a:hover {
+    opacity: 0.9;
+}

app/templates/application.hbs

@@ -1,6 +1,15 @@
 <GhApp>
     <GhSkipLink @anchor=".gh-main">Skip to main content</GhSkipLink>
 
+    {{#if (and this.session.user.isOwnerOnly this.showUpdateLink)}}
+    <aside class="gh-update-banner">
+        <div class="gh-alert-content">
+            Your site is ready for a major update!
+        </div>
+        <a href="#" {{on "click" this.openUpdateTab}}>Update to Ghost 5.0 &rarr;</a>
+    </aside>
+    {{/if}}
+
     <GhAlerts />
 
     <div class="gh-viewport {{if this.ui.showMobileMenu 'mobile-menu-expanded'}}">