Wired up click-to-refresh upgrade banner

closes https://github.com/TryGhost/Team/issues/2400

- used semver comparison to detect when the app version is less than the content-version header in any API response to toggle `upgradeStatus.requiresRefresh` that is used to conditionally show the upgrade banner
- only works on minors as we don't store the full Ghost patch version in `config.APP.version`

ghost/admin/app/controllers/application.js

@@ -9,6 +9,7 @@ export default class ApplicationController extends Controller {
     @service session;
     @service settings;
     @service ui;
+    @service upgradeStatus;
 
     @inject config;
 

ghost/admin/app/services/ajax.js

@@ -2,6 +2,8 @@ import AjaxService from 'ember-ajax/services/ajax';
 import classic from 'ember-classic-decorator';
 import config from 'ghost-admin/config/environment';
 import moment from 'moment-timezone';
+import semverCoerce from 'semver/functions/coerce';
+import semverLt from 'semver/functions/lt';
 import {AjaxError, isAjaxError, isForbiddenError} from 'ember-ajax/errors';
 import {captureMessage} from '@sentry/ember';
 import {get} from '@ember/object';
@@ -194,6 +196,7 @@ export function isAcceptedResponse(errorOrStatus) {
 @classic
 class ajaxService extends AjaxService {
     @service session;
+    @service upgradeStatus;
 
     @inject config;
 
@@ -296,6 +299,15 @@ class ajaxService extends AjaxService {
     }
 
     handleResponse(status, headers, payload, request) {
+        if (headers['content-version']) {
+            const contentVersion = semverCoerce(headers['content-version']);
+            const appVersion = semverCoerce(config.APP.version);
+
+            if (semverLt(appVersion, contentVersion)) {
+                this.upgradeStatus.refreshRequired = true;
+            }
+        }
+
         if (this.isVersionMismatchError(status, headers, payload)) {
             return new VersionMismatchError(payload);
         } else if (this.isServerUnreachableError(status, headers, payload)) {

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

@@ -2,11 +2,14 @@ import Service, {inject as service} from '@ember/service';
 import classic from 'ember-classic-decorator';
 import {get, set} from '@ember/object';
 import {htmlSafe} from '@ember/template';
+import {tracked} from '@glimmer/tracking';
 
 @classic
 export default class UpgradeStatusService extends Service {
     @service notifications;
 
+    @tracked refreshRequired = false;
+
     isRequired = false;
     message = '';
 

ghost/admin/app/templates/application.hbs

@@ -1,10 +1,13 @@
 <GhApp>
     <GhSkipLink @anchor=".gh-main">Skip to main content</GhSkipLink>
 
-    {{!-- <div class="gh-update-banner">
-        <span>Ghost has been updated! To get access to the latest features, refresh or <a href="#">click here</a>.</span>
-    </div> --}}
-    
+    {{#if this.upgradeStatus.refreshRequired}}
+        <div class="gh-update-banner">
+            {{!-- template-lint-disable no-invalid-link-text --}}
+            <span>Ghost has been updated! To get access to the latest features, refresh or <a href="javascript:window.location.reload(true)">click here</a>.</span>
+        </div>
+    {{/if}}
+
     <GhAlerts />
 
     <div class="gh-viewport {{if this.ui.showMobileMenu 'mobile-menu-expanded'}}">

ghost/admin/package.json

@@ -150,6 +150,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "reframe.js": "4.0.1",
+    "semver": "7.3.8",
     "testem": "3.10.1",
     "top-gh-contribs": "2.0.4",
     "tracked-built-ins": "3.1.1",
@@ -182,4 +183,4 @@
     "path-browserify": "1.0.1",
     "webpack": "5.75.0"
   }
-}
+}

yarn.lock

@@ -19917,7 +19917,6 @@ mocha@^2.5.3:
 
 mock-knex@TryGhost/mock-knex#d8b93b1c20d4820323477f2c60db016ab3e73192:
   version "0.4.12"
-  uid d8b93b1c20d4820323477f2c60db016ab3e73192
   resolved "https://codeload.github.com/TryGhost/mock-knex/tar.gz/d8b93b1c20d4820323477f2c60db016ab3e73192"
   dependencies:
     bluebird "^3.4.1"