about_zulip: Migrate to handlebars.

This results in moving the `zulip_merge_base` parameter to
page_params, so that it's available to JavaScript.

Since this is technically a tiny overlay, it needs to be initialized
before hashchange.js.

static/js/about_zulip.js

@@ -1,8 +1,11 @@
 import ClipboardJS from "clipboard";
 import $ from "jquery";
 
+import render_about_zulip from "../templates/about_zulip.hbs";
+
 import * as browser_history from "./browser_history";
 import * as overlays from "./overlays";
+import {page_params} from "./page_params";
 
 export function launch() {
     overlays.open_overlay({
@@ -15,3 +18,14 @@ export function launch() {
 
     new ClipboardJS("#about-zulip .fa-copy");
 }
+
+export function initialize() {
+    const rendered_about_zulip = render_about_zulip({
+        zulip_version: page_params.zulip_version,
+        zulip_merge_base: page_params.zulip_merge_base,
+        is_fork:
+            page_params.zulip_merge_base &&
+            page_params.zulip_merge_base !== page_params.zulip_version,
+    });
+    $(".app").append(rendered_about_zulip);
+}

static/js/ui_init.js

@@ -7,6 +7,7 @@ import * as emoji from "../shared/js/emoji";
 import * as fenced_code from "../shared/js/fenced_code";
 import render_edit_content_button from "../templates/edit_content_button.hbs";
 
+import * as about_zulip from "./about_zulip";
 import * as activity from "./activity";
 import * as alert_words from "./alert_words";
 import * as blueslip from "./blueslip";
@@ -518,6 +519,9 @@ export function initialize_everything() {
     settings_panel_menu.initialize();
     settings_sections.initialize();
     settings_toggle.initialize();
+    about_zulip.initialize();
+
+    // All overlays must be initialized before hashchange.js
     hashchange.initialize();
     unread_ui.initialize();
     activity.initialize();

static/templates/about_zulip.hbs

@@ -1,20 +1,20 @@
 <div id="about-zulip" class="overlay flex new-style" tabindex="-1" role="dialog" data-overlay="about-zulip" aria-hidden="true">
     <div class="overlay-content modal-bg">
-        <button type="button" class="exit" aria-label="{{ _('Close') }}"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="exit" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
         <div class="modal-body">
             <div class="about-zulip-logo">
-                <a target="_blank" rel="noopener noreferrer" href="https://zulip.com"><img src="/static/images/logo/zulip-org-logo.svg" alt="{{ _('Zulip') }}" /></a>
+                <a target="_blank" rel="noopener noreferrer" href="https://zulip.com"><img src="/static/images/logo/zulip-org-logo.svg" alt="{{t 'Zulip' }}" /></a>
             </div>
             <p>
                 <strong>Zulip Server</strong>
                 <br />
                 Version {{zulip_version}}
                 <i class="fa fa-copy tippy-zulip-tooltip" data-tippy-content="Copy version" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}"></i>
-                {% if zulip_merge_base and zulip_version != zulip_merge_base %}
+                {{#if is_fork}}
                 <br />
                 Forked from upstream at {{zulip_merge_base}}
                 <i class="fa fa-copy tippy-zulip-tooltip" data-tippy-content="Copy version" data-tippy-placement="right" data-clipboard-text="{{zulip_merge_base}}"></i>
-                {% endif %}
+                {{/if}}
             </p>
             <p>
                 Copyright 2012–2015 Dropbox, Inc., 2015–2021 Kandra Labs, Inc., and contributors.

templates/zerver/app/index.html

@@ -150,7 +150,6 @@
         </form>
     </div>
     {% include "zerver/app/deprecation_notice.html" %}
-    {% include "zerver/app/about-zulip.html" %}
     <div id="user-profile-modal-holder"></div>
     <div id="delete-topic-modal-holder"></div>
     <div class="left-sidebar-modal-holder"></div>

zerver/lib/home.py

@@ -8,6 +8,7 @@ from django.http import HttpRequest
 from django.utils import translation
 from two_factor.utils import default_device
 
+from version import ZULIP_MERGE_BASE
 from zerver.lib.events import do_events_register
 from zerver.lib.i18n import (
     get_and_set_request_language,
@@ -207,6 +208,8 @@ def build_page_params_for_home_page_load(
         # There is no event queue for web_public_visitors since
         # events support for web_public_visitors is not implemented yet.
         no_event_queue=user_profile is None,
+        # Required for about_zulip.hbs
+        zulip_merge_base=ZULIP_MERGE_BASE,
     )
 
     for field_name in register_ret.keys():

zerver/tests/test_home.py

@@ -236,6 +236,7 @@ class HomeTest(ZulipTestCase):
         "webpack_public_path",
         "wildcard_mentions_notify",
         "zulip_feature_level",
+        "zulip_merge_base",
         "zulip_plan_is_not_limited",
         "zulip_version",
     ]

zerver/views/home.py

@@ -8,7 +8,6 @@ from django.shortcuts import redirect, render
 from django.urls import reverse
 from django.utils.cache import patch_cache_control
 
-from version import ZULIP_MERGE_BASE, ZULIP_VERSION
 from zerver.context_processors import get_valid_realm_from_request
 from zerver.decorator import web_public_view, zulip_login_required
 from zerver.forms import ToSForm
@@ -237,8 +236,6 @@ def home_real(request: HttpRequest) -> HttpResponse:
             "is_admin": user_permission_info.is_realm_admin,
             "is_guest": user_permission_info.is_guest,
             "color_scheme": user_permission_info.color_scheme,
-            "zulip_version": ZULIP_VERSION,
-            "zulip_merge_base": ZULIP_MERGE_BASE,
             "navbar_logo_url": navbar_logo_url,
             "show_webathena": user_permission_info.show_webathena,
             "embedded": narrow_stream is not None,