navbar_alerts: Add button to hide "Server Upgrade" alert for 7 days.

This button will allow users to avoid a distracting red banner across
their screen, while they wait for their sysadmin to do the upgrade
work.

Fixes: #18359

frontend_tests/node_tests/panels.js

@@ -0,0 +1,54 @@
+"use strict";
+
+const {strict: assert} = require("assert");
+
+const {addDays} = require("date-fns");
+
+const {mock_cjs, set_global, zrequire} = require("../zjsunit/namespace");
+const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
+
+mock_cjs("jquery", $);
+
+const ls_container = new Map();
+
+const localStorage = set_global("localStorage", {
+    getItem(key) {
+        return ls_container.get(key);
+    },
+    setItem(key, val) {
+        ls_container.set(key, val);
+    },
+    removeItem(key) {
+        ls_container.delete(key);
+    },
+    clear() {
+        ls_container.clear();
+    },
+});
+
+const {localstorage} = zrequire("localstorage");
+const panels = zrequire("panels");
+
+function test(label, f) {
+    run_test(label, (override) => {
+        localStorage.clear();
+        f(override);
+    });
+}
+
+test("server_upgrade_alert hide_duration_expired", (override) => {
+    const ls = localstorage();
+    const start_time = new Date(1620327447050); // Thursday 06/5/2021 07:02:27 AM (UTC+0)
+
+    override(Date, "now", () => start_time);
+    assert.equal(ls.get("lastUpgradeNagDismissalTime"), undefined);
+    assert.equal(panels.should_show_server_upgrade_notification(ls), true);
+    panels.dismiss_upgrade_nag(ls);
+    assert.equal(panels.should_show_server_upgrade_notification(ls), false);
+
+    override(Date, "now", () => addDays(start_time, 8)); // Friday 14/5/2021 07:02:27 AM (UTC+0)
+    assert.equal(panels.should_show_server_upgrade_notification(ls), true);
+    panels.dismiss_upgrade_nag(ls);
+    assert.equal(panels.should_show_server_upgrade_notification(ls), false);
+});

static/js/panels.js

@@ -1,3 +1,4 @@
+import {addDays} from "date-fns";
 import $ from "jquery";
 
 import {localstorage} from "./localstorage";
@@ -53,6 +54,28 @@ function should_show_notifications(ls) {
     );
 }
 
+export function should_show_server_upgrade_notification(ls) {
+    // We do not show the server upgrade nag for a week after the user
+    // clicked "dismiss".
+    if (!localstorage.supported() || ls.get("lastUpgradeNagDismissalTime") === undefined) {
+        return true;
+    }
+
+    const last_notification_dismissal_time = ls.get("lastUpgradeNagDismissalTime");
+
+    const upgrade_nag_dismissal_duration = addDays(new Date(last_notification_dismissal_time), 7);
+
+    // show the notification only if the time duration is completed.
+    return Date.now() > upgrade_nag_dismissal_duration;
+}
+
+export function dismiss_upgrade_nag(ls) {
+    $(".alert[data-process='server-needs-upgrade'").hide();
+    if (localstorage.supported()) {
+        ls.set("lastUpgradeNagDismissalTime", Date.now());
+    }
+}
+
 export function check_profile_incomplete() {
     if (!page_params.is_admin) {
         return false;
@@ -83,7 +106,9 @@ export function initialize() {
     if (page_params.insecure_desktop_app) {
         open($("[data-process='insecure-desktop-app']"));
     } else if (page_params.server_needs_upgrade) {
-        open($("[data-process='server-needs-upgrade']"));
+        if (should_show_server_upgrade_notification(ls)) {
+            open($("[data-process='server-needs-upgrade']"));
+        }
     } else if (page_params.warn_no_email === true && page_params.is_admin) {
         // if email has not been set up and the user is the admin,
         // display a warning to tell them to set up an email server.
@@ -118,6 +143,12 @@ export function initialize() {
         $(window).trigger("resize");
     });
 
+    $(".dismiss-upgrade-nag").on("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dismiss_upgrade_nag(ls);
+    });
+
     $("#panels").on("click", ".alert .close, .alert .exit", function (e) {
         e.stopPropagation();
         const $process = $(e.target).closest("[data-process]");

templates/zerver/app/navbar_alerts.html

@@ -48,9 +48,14 @@
     <div data-process="server-needs-upgrade" class="alert alert-info red">
         <div data-step="1">
             {{ _("This Zulip server is running an old version and should be upgraded.") }}
-            <a class="alert-link" href="https://zulip.readthedocs.io/en/latest/overview/release-lifecycle.html#upgrade-nag" target="_blank" rel="noopener noreferrer">
-                {{ _("Learn more.") }}
-            </a>
+            <span class="buttons">
+                <a class="alert-link" href="https://zulip.readthedocs.io/en/latest/overview/release-lifecycle.html#upgrade-nag" target="_blank" rel="noopener noreferrer">
+                    {{ _("Learn more") }}
+                </a>
+                &bull;
+                <a class="alert-link dismiss-upgrade-nag" role="button" tabindex=0>{{ _("Dismiss for a week") }}</a>
+            </span>
+
         </div>
         <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
     </div>