FEATURE: Move site updated modal into a less obtrusive prompt (#12577)

FEATURE: Move site updated modal into a less obtrusive prompt (#12577)

This moves the “This site was just updated” modal asking the user if they want to refresh into a subtle prompt that slides down from the header.

Also in this PR I’ve added a helper to publish message bus messages in JS tests. So instead of this:

// Mimic a messagebus message
MessageBus.callbacks
  .filterBy("channel", "/global/asset-version")
  .map((c) => c.func("somenewversion"));

We can have:

publishToMessageBus("/global/asset-version", "somenewversion");
diff --git a/app/assets/javascripts/discourse/app/components/software-update-prompt.js b/app/assets/javascripts/discourse/app/components/software-update-prompt.js
new file mode 100644
index 0000000..c8c91d4
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/software-update-prompt.js
@@ -0,0 +1,56 @@
+import getURL from "discourse-common/lib/get-url";
+import { later } from "@ember/runloop";
+import discourseComputed, { on } from "discourse-common/utils/decorators";
+import Component from "@ember/component";
+
+export default Component.extend({
+  showPrompt: false,
+
+  classNameBindings: ["getClassNames"],
+  attributeBindings: ["isHidden:aria-hidden"],
+
+  @discourseComputed
+  rootUrl() {
+    return getURL("/");
+  },
+
+  @discourseComputed("showPrompt")
+  getClassNames(showPrompt) {
+    let classes = ["software-update-prompt"];
+
+    if (showPrompt) {
+      classes.push("require-software-refresh");
+    }
+
+    return classes.join(" ");
+  },
+
+  @discourseComputed("showPrompt")
+  isHidden(showPrompt) {
+    return !showPrompt;
+  },
+
+  @on("init")
+  initSubscribtions() {
+    let timeout;
+
+    this.messageBus.subscribe("/refresh_client", () => {
+      this.session.requiresRefresh = true;
+    });
+
+    let updatePrompt = this;
+    this.messageBus.subscribe("/global/asset-version", (version) => {
+      if (this.session.assetVersion !== version) {
+        this.session.requiresRefresh = true;
+      }
+
+      if (!timeout && this.session.requiresRefresh) {
+        // Since we can do this transparently for people browsing the forum
+        // hold back the message 24 hours.
+        timeout = later(() => {
+          updatePrompt.set("showPrompt", true);
+        }, 1000 * 60 * 24 * 60);
+      }
+    });
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/initializers/asset-version.js b/app/assets/javascripts/discourse/app/initializers/asset-version.js
deleted file mode 100644
index c9017c6..0000000
--- a/app/assets/javascripts/discourse/app/initializers/asset-version.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import I18n from "I18n";
-import bootbox from "bootbox";
-import { later } from "@ember/runloop";
-
-//  Subscribe to "asset-version" change events via the Message Bus
-export default {
-  name: "asset-version",
-  after: "message-bus",
-
-  initialize(container) {
-    let timeout;
-    const messageBus = container.lookup("message-bus:main");
-    if (!messageBus) {
-      return;
-    }
-
-    let session = container.lookup("session:main");
-    messageBus.subscribe("/refresh_client", () => {
-      session.requiresRefresh = true;
-    });
-
-    messageBus.subscribe("/global/asset-version", function (version) {
-      if (session.assetVersion !== version) {
-        session.requiresRefresh = true;
-      }
-
-      if (!timeout && session.requiresRefresh) {
-        // Since we can do this transparently for people browsing the forum
-        // hold back the message 24 hours.
-        timeout = later(() => {
-          bootbox.confirm(I18n.t("assets_changed_confirm"), function (result) {
-            if (result) {
-              document.location.reload();
-            }
-          });
-        }, 1000 * 60 * 24 * 60);
-      }
-    });
-  },
-};
diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs
index 2f44d80..0d304c5 100644
--- a/app/assets/javascripts/discourse/app/templates/application.hbs
+++ b/app/assets/javascripts/discourse/app/templates/application.hbs
@@ -7,6 +7,7 @@
               toggleMobileView=(route-action "toggleMobileView")
               toggleAnonymous=(route-action "toggleAnonymous")
               logout=(route-action "logout")}}
+{{software-update-prompt id="software-update-prompt"}}
 
 {{plugin-outlet name="below-site-header" tagName="" args=(hash currentPath=router._router.currentPath)}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs b/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs
new file mode 100644
index 0000000..0186225
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs
@@ -0,0 +1,5 @@
+<div class="wrap">
+  <a href={{rootUrl}} aria-live="polite">
+    {{d-icon "redo"}} {{html-safe (i18n "software_update_prompt")}}
+  </a>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js
index f71e250..05131a7 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js
@@ -1,10 +1,10 @@
 import {
   acceptance,
   exists,
+  publishToMessageBus,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import DiscourseURL from "discourse/lib/url";
-import MessageBus from "message-bus-client";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import sinon from "sinon";
 import { test } from "qunit";
@@ -94,19 +94,16 @@ acceptance("Topic Discovery", function (needs) {
       "shows the topic unread"
     );
 
-    // Mimic a messagebus message
-    MessageBus.callbacks.filterBy("channel", "/latest").map((c) =>
-      c.func({
-        message_type: "read",
+    publishToMessageBus("/latest", {
+      message_type: "read",
+      topic_id: 11995,
+      payload: {
+        highest_post_number: 1,
+        last_read_post_number: 2,
+        notification_level: 1,
         topic_id: 11995,
-        payload: {
-          highest_post_number: 1,
-          last_read_post_number: 2,
-          notification_level: 1,
-          topic_id: 11995,
-        },
-      })
-    );
+      },
+    });
 
     await visit("/"); // We're already there, but use this to wait for re-render
 
diff --git a/app/assets/javascripts/discourse/tests/helpers/component-test.js b/app/assets/javascripts/discourse/tests/helpers/component-test.js
index 4486553..e44e71b 100644
--- a/app/assets/javascripts/discourse/tests/helpers/component-test.js
+++ b/app/assets/javascripts/discourse/tests/helpers/component-test.js
@@ -1,4 +1,5 @@
 import { TestModuleForComponent, render } from "@ember/test-helpers";
+import MessageBus from "message-bus-client";
 import EmberObject from "@ember/object";
 import { setupRenderingTest as EmberSetupRenderingTest } from "ember-qunit";
 import Session from "discourse/models/session";
@@ -67,6 +68,9 @@ export default function (name, opts) {
         instantiate: false,
       });
       this.registry.register("capabilities:main", EmberObject);
+      this.registry.register("message-bus:main", MessageBus, {
+        instantiate: false,
+      });
       this.registry.register("site:main", this.site, { instantiate: false });
       this.registry.register("session:main", this.session, {
         instantiate: false,
@@ -80,6 +84,7 @@ export default function (name, opts) {
       this.registry.injection("component", "capabilities", "capabilities:main");
       this.registry.injection("component", "site", "site:main");
       this.registry.injection("component", "session", "session:main");
+      this.registry.injection("component", "messageBus", "message-bus:main");
 
       this.siteSettings = currentSettings();
       store = createStore();
diff --git a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
index 0a6ddd5..8d0d251 100644
--- a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
+++ b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
@@ -1,4 +1,5 @@
 import QUnit, { module } from "qunit";
+import MessageBus from "message-bus-client";
 import {
   clearCache as clearOutletCache,
   resetExtraClasses,
@@ -437,3 +438,9 @@ export function count(selector) {

[... diff too long, it was truncated ...]

GitHub sha: 432b8399

1 Like

This commit appears in #12577 which was approved by eviltrout and awesomerobot. It was merged by martin.