diff --git a/web/src/navbar_alerts.ts b/web/src/navbar_alerts.ts index aeb70187bc..8f503426e5 100644 --- a/web/src/navbar_alerts.ts +++ b/web/src/navbar_alerts.ts @@ -4,7 +4,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; import render_navbar_alert_wrapper from "../templates/navbar_alerts/navbar_alert_wrapper.hbs"; -import render_server_needs_upgrade_alert_content from "../templates/navbar_alerts/server_needs_upgrade.hbs"; import render_time_zone_update_offer_content from "../templates/navbar_alerts/time_zone_update_offer.hbs"; import * as banners from "./banners.ts"; @@ -71,7 +70,7 @@ export function should_show_bankruptcy_banner(): boolean { return false; } -export function should_show_server_upgrade_notification(ls: LocalStorage): boolean { +export function should_show_server_upgrade_banner(ls: LocalStorage): boolean { // We do not show the server upgrade nag for a week after the user // clicked "dismiss". if (!localstorage.supported() || ls.get("lastUpgradeNagDismissalTime") === undefined) { @@ -104,8 +103,7 @@ export function maybe_toggle_empty_required_profile_fields_banner(): void { } } -export function dismiss_upgrade_nag(ls: LocalStorage): void { - $(".alert[data-process='server-needs-upgrade'").hide(); +export function set_last_upgrade_nag_dismissal_time(ls: LocalStorage): void { if (localstorage.supported()) { ls.set("lastUpgradeNagDismissalTime", Date.now()); } @@ -277,6 +275,28 @@ const ORGANIZATION_PROFILE_INCOMPLETE_BANNER: AlertBanner = { custom_classes: "navbar-alert-banner", }; +const SERVER_NEEDS_UPGRADE_BANNER: AlertBanner = { + process: "server-needs-upgrade", + intent: "danger", + label: $t({ + defaultMessage: "This Zulip server is running an old version and should be upgraded.", + }), + buttons: [ + { + type: "quiet", + label: $t({defaultMessage: "Learn more"}), + custom_classes: "server-upgrade-learn-more", + }, + { + type: "borderless", + label: $t({defaultMessage: "Dismiss for a week"}), + custom_classes: "server-upgrade-nag-dismiss", + }, + ], + close_button: true, + custom_classes: "navbar-alert-banner", +}; + const bankruptcy_banner = (): AlertBanner => { const old_unreads_missing = unread.old_unreads_missing; const unread_msgs_count = unread.get_unread_message_count(); @@ -364,12 +384,8 @@ export function initialize(): void { }), }); } else if (realm.server_needs_upgrade) { - if (should_show_server_upgrade_notification(ls)) { - open({ - data_process: "server-needs-upgrade", - custom_class: "red", - rendered_alert_content_html: render_server_needs_upgrade_alert_content(), - }); + if (should_show_server_upgrade_banner(ls)) { + banners.open(SERVER_NEEDS_UPGRADE_BANNER, $("#navbar_alerts_wrapper")); } } else if (page_params.warn_no_email === true && current_user.is_admin) { // if email has not been set up and the user is the admin, @@ -448,6 +464,24 @@ export function initialize(): void { window.location.hash = "#organization/organization-profile"; }); + $("#navbar_alerts_wrapper").on("click", ".server-upgrade-learn-more", () => { + window.open( + "https://zulip.readthedocs.io/en/latest/overview/release-lifecycle.html#upgrade-nag", + "_blank", + "noopener,noreferrer", + ); + }); + + $("#navbar_alerts_wrapper").on( + "click", + ".server-upgrade-nag-dismiss", + function (this: HTMLElement) { + const $banner = $(this).closest(".banner"); + banners.close($banner); + set_last_upgrade_nag_dismissal_time(ls); + }, + ); + $("#navbar_alerts_wrapper").on( "click", ".alert .close, .alert .exit", diff --git a/web/templates/navbar_alerts/server_needs_upgrade.hbs b/web/templates/navbar_alerts/server_needs_upgrade.hbs deleted file mode 100644 index 3b4d867d01..0000000000 --- a/web/templates/navbar_alerts/server_needs_upgrade.hbs +++ /dev/null @@ -1,10 +0,0 @@ -
- {{t "This Zulip server is running an old version and should be upgraded." }} - - - {{t "Learn more" }} - - • - {{t "Dismiss for a week" }} - -
diff --git a/web/tests/navbar_alerts.test.cjs b/web/tests/navbar_alerts.test.cjs index d0a5d6379d..03450a7a89 100644 --- a/web/tests/navbar_alerts.test.cjs +++ b/web/tests/navbar_alerts.test.cjs @@ -134,20 +134,23 @@ test("is_organization_profile_incomplete", ({override}) => { assert.equal(navbar_alerts.is_organization_profile_incomplete(), false); }); -test("server_upgrade_alert hide_duration_expired", ({override}) => { +test("should_show_server_upgrade_banner", ({override}) => { const ls = localstorage(); - const start_time = 1620327447050; // Thursday 06/5/2021 07:02:27 AM (UTC+0) - override(Date, "now", () => start_time); - assert.equal(ls.get("lastUpgradeNagDismissalTime"), undefined); - assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), true); - navbar_alerts.dismiss_upgrade_nag(ls); - assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), false); + // Set the initial date, which will be set as the last upgrade nag dismissal time. + const start_time = new Date("2024-01-01T10:00:00.000Z"); // Wednesday 1/1/2024 10:00:00 AM (UTC+0) + override(Date, "now", () => start_time.getTime()); + ls.set("lastUpgradeNagDismissalTime", undefined); + assert.equal(navbar_alerts.should_show_server_upgrade_banner(ls), true); + navbar_alerts.set_last_upgrade_nag_dismissal_time(ls); - override(Date, "now", () => addDays(start_time, 8).getTime()); // Friday 14/5/2021 07:02:27 AM (UTC+0) - assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), true); - navbar_alerts.dismiss_upgrade_nag(ls); - assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), false); + // Set the date to <= 7 days from the last upgrade nag dismissal time. + override(Date, "now", () => addDays(start_time, 7).getTime()); // Wednesday 1/8/2024 10:00:00 AM (UTC+0) + assert.equal(navbar_alerts.should_show_server_upgrade_banner(ls), false); + + // Set the date to > 7 days from the last upgrade nag dismissal time. + override(Date, "now", () => addDays(start_time, 8).getTime()); // Thursday 1/9/2024 10:00:00 AM (UTC+0) + assert.equal(navbar_alerts.should_show_server_upgrade_banner(ls), true); }); test("get_demo_organization_deadline_days_remaining", ({override}) => {