FIX: Software update prompt fixes and improvements (#12648)

* Fixes the z-index of the prompt so it is behind the quick access panels
* Adds a dismiss `X` button (made sure the click target of this was quite big)
* Change structure of HTML to address template lint issues
* Fix aria-hidden not returning true/false
* Reload current page instead of navigating to / when clicking on the prompt message

app/assets/javascripts/discourse/app/components/software-update-prompt.js

@@ -2,35 +2,20 @@ import getURL from "discourse-common/lib/get-url";
 import { cancel, later } from "@ember/runloop";
 import discourseComputed, { on } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
-import { not } from "@ember/object/computed";
+import { action } from "@ember/object";
 import { isTesting } from "discourse-common/config/environment";
 
 export default Component.extend({
-  showPrompt: false,
+  tagName: "",
 
-  classNameBindings: ["getClassNames"],
-  attributeBindings: ["isHidden:aria-hidden"],
+  showPrompt: false,
+  _timeoutHandler: null,
 
   @discourseComputed
   rootUrl() {
     return getURL("/");
   },
 
-  isHidden: not("showPrompt"),
-
-  _timeoutHandler: null,
-
-  @discourseComputed("showPrompt")
-  getClassNames(showPrompt) {
-    const classes = ["software-update-prompt"];
-
-    if (showPrompt) {
-      classes.push("require-software-refresh");
-    }
-
-    return classes.join(" ");
-  },
-
   @on("init")
   initSubscribtions() {
     this.messageBus.subscribe("/refresh_client", () => {
@@ -56,11 +41,19 @@ export default Component.extend({
     });
   },
 
-  willDestroyElement() {
-    this._super(...arguments);
+  @action
+  refreshPage() {
+    document.location.reload();
+  },
 
+  @action
+  dismiss() {
+    this.set("showPrompt", false);
+  },
+
+  @on("willDestroyElement")
+  _resetTimeoutHandler() {
     this._timeoutHandler && cancel(this._timeoutHandler);
-
     this._timeoutHandler = null;
   },
 });

app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs

@@ -1,5 +1,9 @@
-<div class="wrap">
-  <a href={{rootUrl}} aria-live="polite">
-    {{d-icon "redo"}} {{html-safe (i18n "software_update_prompt")}}
-  </a>
+<div class="software-update-prompt {{if showPrompt "require-software-refresh"}}">
+  <div class="wrap">
+    <div class="update-prompt-main-content" aria-live="polite">
+      <span role="button" onclick={{action "refreshPage"}} class="update-prompt-message">{{d-icon "redo"}} {{html-safe (i18n "software_update_prompt.message")}}</span>
+      <span class="update-prompt-dismiss"><span aria-label={{i18n "software_update_prompt.dismiss"}} role="button" onclick={{action "dismiss"}}>{{d-icon "times"}}</span></span>
+    </div>
+  </div>
 </div>
+

app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js

@@ -26,14 +26,6 @@ discourseModule(
             "it does not have the class to show the prompt"
           );
 
-          assert.equal(
-            queryAll("div.software-update-prompt")[0].getAttribute(
-              "aria-hidden"
-            ),
-            "",
-            "it does have the aria-hidden attribute"
-          );
-
           publishToMessageBus("/global/asset-version", "somenewversion");
 
           const done = assert.async();

app/assets/stylesheets/common/software-update-prompt.scss

@@ -9,15 +9,37 @@
   visibility: hidden;
   transition: max-height 1s;
   box-shadow: shadow("header");
-  z-index: z("header") + 10;
+  z-index: z("header") - 10;
 
-  a {
-    display: block;
-    padding: 0.5em 0;
+  .update-prompt-main-content {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
   }
 
-  span {
-    text-decoration: underline;
+  .update-prompt-message {
+    cursor: pointer;
+    padding: 0.75em 0;
+    span {
+      text-decoration: underline;
+    }
+  }
+
+  .update-prompt-dismiss {
+    justify-content: flex-end;
+    display: flex;
+    height: 44px;
+    flex: 1;
+
+    span {
+      cursor: pointer;
+      display: inline;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+    }
   }
 
   .d-icon {

config/locales/client.en.yml

@@ -178,7 +178,9 @@ en:
     wizard_required: "Welcome to your new Discourse! Let’s get started with <a href='%{url}' data-auto-route='true'>the setup wizard</a> ✨"
     emails_are_disabled: "All outgoing email has been globally disabled by an administrator. No email notifications of any kind will be sent."
 
-    software_update_prompt: "We've updated this site, <span>please refresh</span>, or you may experience unexpected behavior."
+    software_update_prompt:
+      message: "We've updated this site, <span>please refresh</span>, or you may experience unexpected behavior."
+      dismiss: "Dismiss"
 
     bootstrap_mode_enabled:
       one: "To make launching your new site easier, you are in bootstrap mode. All new users will be granted trust level 1 and have daily email summary emails enabled. This will be automatically turned off when %{count} user has joined."