From ccfee49407bb88dc9cbab0070e62383e467b920f Mon Sep 17 00:00:00 2001 From: Riken Shah Date: Sat, 5 Jun 2021 09:16:17 +0000 Subject: [PATCH] navbar_alerts: Replace HTML template with handlebars architecture. This moves this block of HTML templates, which are dynamically rendered with some user data, to be managed by the frontend handlebars template system. This migration involves only displaying active alerts in the DOM, and thus we no longer need navbar_alerts to have display: none by default. --- static/js/navbar_alerts.js | 50 +++++++++--- static/styles/zulip.css | 3 + static/templates/navbar_alerts/bankruptcy.hbs | 12 +++ .../configure_outgoing_email.hbs | 6 ++ .../navbar_alerts/desktop_notifications.hbs | 15 ++++ .../navbar_alerts/insecure_desktop_app.hbs | 7 ++ .../navbar_alerts/navbar_alert_wrapper.hbs | 11 +++ .../navbar_alerts/profile_incomplete.hbs | 7 ++ .../navbar_alerts/server_needs_upgrade.hbs | 10 +++ templates/zerver/app/index.html | 2 +- templates/zerver/app/navbar_alerts.html | 80 ------------------- 11 files changed, 113 insertions(+), 90 deletions(-) create mode 100644 static/templates/navbar_alerts/bankruptcy.hbs create mode 100644 static/templates/navbar_alerts/configure_outgoing_email.hbs create mode 100644 static/templates/navbar_alerts/desktop_notifications.hbs create mode 100644 static/templates/navbar_alerts/insecure_desktop_app.hbs create mode 100644 static/templates/navbar_alerts/navbar_alert_wrapper.hbs create mode 100644 static/templates/navbar_alerts/profile_incomplete.hbs create mode 100644 static/templates/navbar_alerts/server_needs_upgrade.hbs delete mode 100644 templates/zerver/app/navbar_alerts.html diff --git a/static/js/navbar_alerts.js b/static/js/navbar_alerts.js index e184bc0b44..02cff5afee 100644 --- a/static/js/navbar_alerts.js +++ b/static/js/navbar_alerts.js @@ -1,6 +1,14 @@ import {addDays} from "date-fns"; import $ from "jquery"; +import render_bankruptcy_alert_content from "../templates/navbar_alerts/bankruptcy.hbs"; +import render_configure_email_alert_content from "../templates/navbar_alerts/configure_outgoing_email.hbs"; +import render_desktop_notifications_alert_content from "../templates/navbar_alerts/desktop_notifications.hbs"; +import render_insecure_desktop_app_alert_content from "../templates/navbar_alerts/insecure_desktop_app.hbs"; +import render_navbar_alert_wrapper from "../templates/navbar_alerts/navbar_alert_wrapper.hbs"; +import render_profile_incomplete_alert_content from "../templates/navbar_alerts/profile_incomplete.hbs"; +import render_server_needs_upgrade_alert_content from "../templates/navbar_alerts/server_needs_upgrade.hbs"; + import {localstorage} from "./localstorage"; import * as notifications from "./notifications"; import {page_params} from "./page_params"; @@ -95,6 +103,9 @@ export function check_profile_incomplete() { export function show_profile_incomplete(is_profile_incomplete) { if (is_profile_incomplete) { + // Note that this will be a noop unless we'd already displayed + // the notice in this session. This seems OK, given that + // this is meant to be a one-time task for administrators. $("[data-process='profile-incomplete']").show(); } else { $("[data-process='profile-incomplete']").hide(); @@ -104,21 +115,34 @@ export function show_profile_incomplete(is_profile_incomplete) { export function initialize() { const ls = localstorage(); if (page_params.insecure_desktop_app) { - open($("[data-process='insecure-desktop-app']")); + open( + {data_process: "insecure-desktop-app", custom_class: "red"}, + render_insecure_desktop_app_alert_content(), + ); } else if (page_params.server_needs_upgrade) { if (should_show_server_upgrade_notification(ls)) { - open($("[data-process='server-needs-upgrade']")); + open( + {data_process: "server-needs-upgrade", custom_class: "red"}, + render_server_needs_upgrade_alert_content(), + ); } } 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. - open($("[data-process='email-server']")); + open( + {data_process: "email-server", custom_class: "red"}, + render_configure_email_alert_content(), + ); } else if (should_show_notifications(ls)) { - open($("[data-process='notifications']")); + open({data_process: "notifications"}, render_desktop_notifications_alert_content()); } else if (unread_ui.should_display_bankruptcy_banner()) { - open($("[data-process='bankruptcy']")); + const unread_msgs_count = page_params.unread_msgs.count; + open( + {data_process: "bankruptcy", custom_class: "bankruptcy", is_bankruptcy_alert: true}, + render_bankruptcy_alert_content({unread_msgs_count}), + ); } else if (check_profile_incomplete()) { - open($("[data-process='profile-incomplete']")); + open({data_process: "profile-incomplete"}, render_profile_incomplete_alert_content()); } // Configure click handlers. @@ -169,8 +193,16 @@ export function initialize() { }); } -export function open($process) { - $("[data-process]").hide(); - $process.show(); +export function open(args, rendered_alert_content_html) { + const rendered_alert_wrapper_html = $(render_navbar_alert_wrapper(args)); + + // TODO: Use a proper CSS class to access correct outer widget. + rendered_alert_wrapper_html.first().prepend(rendered_alert_content_html); + + // Note: We only support one alert being rendered at a time; as a + // result, we just replace the alert area in the DOM with the + // indicated alert. We do this to avoid bad UX, as it'd look weird + // to have more than one alert visible at a time. + $("#navbar_alerts_wrapper").html(rendered_alert_wrapper_html); $(window).trigger("resize"); } diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 4ae092186e..43f37a6455 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -280,6 +280,9 @@ p.n-margin { position: relative; .alert { + /* Since alerts are only rendered into the DOM when they are first + displayed, display: block is the right default for this setting. */ + display: block; margin: 0; padding-top: 12px; padding-bottom: 12px; diff --git a/static/templates/navbar_alerts/bankruptcy.hbs b/static/templates/navbar_alerts/bankruptcy.hbs new file mode 100644 index 0000000000..df0e312960 --- /dev/null +++ b/static/templates/navbar_alerts/bankruptcy.hbs @@ -0,0 +1,12 @@ +
+ {{#tr}} + Welcome back! You have {unread_msgs_count} unread messages. + Do you want to mark them all as read? + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} + + {{t "Yes, please!" }} + • + {{t "No, I'll catch up." }} + +
diff --git a/static/templates/navbar_alerts/configure_outgoing_email.hbs b/static/templates/navbar_alerts/configure_outgoing_email.hbs new file mode 100644 index 0000000000..6a10adff79 --- /dev/null +++ b/static/templates/navbar_alerts/configure_outgoing_email.hbs @@ -0,0 +1,6 @@ +
+ {{t "Zulip needs to send email to confirm users' addresses and send notifications."}} + + {{t "See how to configure email." }} + +
diff --git a/static/templates/navbar_alerts/desktop_notifications.hbs b/static/templates/navbar_alerts/desktop_notifications.hbs new file mode 100644 index 0000000000..1f05477edd --- /dev/null +++ b/static/templates/navbar_alerts/desktop_notifications.hbs @@ -0,0 +1,15 @@ +
+ {{#tr}}Zulip needs your permission to enable desktop notifications. + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} +
+
+ {{t "We strongly recommend enabling desktop notifications. They help Zulip keep your team connected." }} + + {{t "Enable notifications" }} + • + {{t "Ask me later" }} + • + {{t "Never ask on this computer" }} + +
diff --git a/static/templates/navbar_alerts/insecure_desktop_app.hbs b/static/templates/navbar_alerts/insecure_desktop_app.hbs new file mode 100644 index 0000000000..b612fdfce5 --- /dev/null +++ b/static/templates/navbar_alerts/insecure_desktop_app.hbs @@ -0,0 +1,7 @@ +
+ {{t "You are using an old version of the Zulip desktop app with known security bugs." }} + + {{t "Download the latest version." }} + +
+ diff --git a/static/templates/navbar_alerts/navbar_alert_wrapper.hbs b/static/templates/navbar_alerts/navbar_alert_wrapper.hbs new file mode 100644 index 0000000000..7396a2569a --- /dev/null +++ b/static/templates/navbar_alerts/navbar_alert_wrapper.hbs @@ -0,0 +1,11 @@ +
+ × +
+ +{{#if is_bankruptcy_alert}} + +{{/if}} diff --git a/static/templates/navbar_alerts/profile_incomplete.hbs b/static/templates/navbar_alerts/profile_incomplete.hbs new file mode 100644 index 0000000000..f04c827621 --- /dev/null +++ b/static/templates/navbar_alerts/profile_incomplete.hbs @@ -0,0 +1,7 @@ +
+ {{#tr}} + Complete the organization profile + to brand and explain the purpose of this Zulip organization. + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} +
diff --git a/static/templates/navbar_alerts/server_needs_upgrade.hbs b/static/templates/navbar_alerts/server_needs_upgrade.hbs new file mode 100644 index 0000000000..3b4d867d01 --- /dev/null +++ b/static/templates/navbar_alerts/server_needs_upgrade.hbs @@ -0,0 +1,10 @@ +
+ {{t "This Zulip server is running an old version and should be upgraded." }} + + + {{t "Learn more" }} + + • + {{t "Dismiss for a week" }} + +
diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index a392c2b317..bba61a2cb3 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -49,7 +49,7 @@ {% include "zerver/app/settings_overlay.html" %} -{% include "zerver/app/navbar_alerts.html" %} + {% include "zerver/app/navbar.html" %}
diff --git a/templates/zerver/app/navbar_alerts.html b/templates/zerver/app/navbar_alerts.html deleted file mode 100644 index 692ef46fbb..0000000000 --- a/templates/zerver/app/navbar_alerts.html +++ /dev/null @@ -1,80 +0,0 @@ -