UI: Add Zulip version in gear menu.

Currently only enabled in development, since the exact details don't
seem right..

Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in>
Co-Author-By: Aman Agrawal <amanagr@zulip.com>

Implements UI for #8005.

static/images/logo/white-zulip-logo-without-text.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 773.12 773.12" style="enable-background:new 0 0 773.12 773.12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M688.52,150.67L688.52,150.67c0,33.91-15.23,64.04-38.44,82.31L424.79,434.17c-4.18,3.59-9.62-2.19-6.61-7.03
+	l82.64-165.46c2.31-4.63-0.69-10.33-5.44-10.33H174.86c-49.64,0-90.26-45.31-90.26-100.68v0c0-55.37,40.62-100.68,90.26-100.68
+	h423.39C647.9,49.99,688.52,95.3,688.52,150.67z M174.86,723.13h423.39c49.64,0,90.26-45.31,90.26-100.68v0
+	c0-55.37-40.62-100.68-90.26-100.68H277.73c-4.75,0-7.76-5.7-5.44-10.33l82.64-165.46c3.01-4.83-2.42-10.62-6.61-7.03L123.04,540.14
+	c-23.21,18.27-38.44,48.4-38.44,82.31v0C84.6,677.82,125.22,723.13,174.86,723.13z"/>
+</svg>

static/js/about_zulip.js

@@ -0,0 +1,17 @@
+import ClipboardJS from "clipboard";
+import $ from "jquery";
+
+import * as browser_history from "./browser_history";
+import * as overlays from "./overlays";
+
+export function launch() {
+    overlays.open_overlay({
+        name: "about-zulip",
+        overlay: $("#about-zulip"),
+        on_close() {
+            browser_history.exit_overlay();
+        },
+    });
+
+    new ClipboardJS("#about-zulip .fa-copy");
+}

static/js/gear_menu.js

@@ -26,6 +26,7 @@ link:  Help center
 info:  Keyboard shortcuts
 info:  Message formatting
 info:  Search operators
+hash:  About Zulip
 ---
 link:  Desktop & mobile apps
 link:  Integrations
@@ -53,6 +54,7 @@ links:
     #streams
     #settings
     #organization
+    #about-zulip
     #invite
 
 When you click on the links there is a function

static/js/hash_util.js

@@ -227,6 +227,7 @@ export function is_overlay_hash(hash) {
         "keyboard-shortcuts",
         "message-formatting",
         "search-operators",
+        "about-zulip",
     ];
     const main_hash = get_hash_category(hash);
 

static/js/hashchange.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 
+import * as about_zulip from "./about_zulip";
 import * as admin from "./admin";
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
@@ -154,6 +155,7 @@ function do_hashchange_normal(from_reload) {
         case "#streams":
         case "#organization":
         case "#settings":
+        case "#about-zulip":
             blueslip.error("overlay logic skipped for: " + hash);
             break;
     }
@@ -277,6 +279,10 @@ function do_hashchange_overlay(old_hash) {
         info_overlay.show("search-operators");
         return;
     }
+
+    if (base === "about-zulip") {
+        about_zulip.launch();
+    }
 }
 
 function hashchanged(from_reload, e) {

static/styles/app_components.css

@@ -517,3 +517,9 @@ div.overlay {
         font-weight: 600;
     }
 }
+
+.white_zulip_icon_without_text {
+    display: inline-block;
+    background-image: url(../../static/images/logo/white-zulip-logo-without-text.svg);
+    background-size: cover;
+}

static/styles/night_mode.css

@@ -318,6 +318,19 @@ on a dark background, and don't change the dark labels dark either. */
         opacity: 0.2;
     }
 
+    #about-zulip {
+        .about-zulip-version {
+            color: hsl(212, 17%, 81%);
+        }
+    }
+
+    #gear_menu_about_zulip {
+        .white_zulip_icon_without_text {
+            filter: invert(10%) sepia(16%) saturate(175%) hue-rotate(194deg)
+                brightness(99%) contrast(89%);
+        }
+    }
+
     .nav .dropdown-menu::after,
     .popover.bottom .arrow {
         border-bottom-color: hsl(235, 18%, 7%);

static/styles/zulip.css

@@ -699,6 +699,28 @@ li.actual-dropdown-menu i {
     margin-right: 3px;
 }
 
+#gear_menu_about_zulip {
+    .white_zulip_icon_without_text {
+        position: relative;
+        top: 3px;
+        width: 14px;
+        height: 14px;
+        margin-right: 3px;
+        filter: invert(20%) sepia(11%) saturate(0%) hue-rotate(272deg)
+            brightness(20%) contrast(95%);
+    }
+    .about_zulip_text {
+        position: relative;
+        top: 1.4px;
+    }
+
+    :hover {
+        .white_zulip_icon_without_text {
+            filter: none;
+        }
+    }
+}
+
 .settings-dropdown-cog {
     padding: 6px 12px;
 }
@@ -2666,6 +2688,57 @@ select.inline_select_topic_edit {
     display: none;
 }
 
+#about-zulip {
+    .exit {
+        font-size: 1.5rem;
+        font-weight: 600;
+        background-color: transparent;
+        border: none;
+        position: absolute;
+        right: 8px;
+        z-index: 1;
+        color: hsl(0, 0%, 67%);
+    }
+
+    .overlay-content {
+        position: relative;
+        width: 300px;
+        border-radius: 4px;
+    }
+
+    .modal-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .about-zulip-logo {
+        padding-top: 20px;
+        height: 70px;
+    }
+
+    .about-zulip-title {
+        font-weight: 600;
+        padding: 10px;
+    }
+
+    .about-zulip-version {
+        color: hsl(222, 8%, 28%);
+
+        .fa-copy {
+            padding-left: 3px;
+        }
+
+        :hover {
+            cursor: pointer;
+
+            .fa-copy {
+                color: hsl(0, 0%, 0%);
+            }
+        }
+    }
+}
+
 /* This max-width must be synced with message_viewport.is_narrow */
 @media (width < $xl_min) {
     .app-main,

templates/zerver/app/about-zulip.html

@@ -0,0 +1,16 @@
+<div id="about-zulip" class="overlay flex new-style" tabindex="-1" role="dialog" data-overlay="about-zulip"
+  aria-labelledby="about-zulip-label" aria-hidden="true">
+    <div class="overlay-content modal-bg">
+        <button type="button" class="exit" aria-label="{{ _('Close') }}"><span aria-hidden="true">&times;</span></button>
+        <div class="modal-body">
+            <img class="about-zulip-logo" src="/static/images/logo/zulip-icon-128x128.png" alt="" />
+            <div class="about-zulip-title">Zulip</div>
+            <p class="about-zulip-version">
+                {{zulip_version_name}}
+                <i class="fa fa-copy tippy-zulip-tooltip" data-tippy-content="Copy version" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}"></i>
+            </p>
+            <p>
+              Zulip is <a target="_blank" rel="noopener noreferrer" href="https://github.com/zulip/zulip">open-source software</a>.</p>
+        </div>
+    </div>
+</div>

templates/zerver/app/index.html

@@ -173,6 +173,7 @@
     {% include "zerver/app/invite_user.html" %}
     {% include "zerver/app/logout.html" %}
     {% 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>

templates/zerver/app/navbar.html

@@ -104,6 +104,14 @@
                                 </a>
                             </li>
                             {% endif %}
+                            {% if development_environment %}
+                            <li role="presentation" id="gear_menu_about_zulip">
+                                <a href="#about-zulip" role="menuitem" class="menuitem-version">
+                                    <span class="white_zulip_icon_without_text"></span>
+                                    <span class="about_zulip_text">{{ _("About Zulip") }}</span>
+                                </a>
+                            </li>
+                            {% endif %}
                             <li class="divider" role="presentation"></li>
                             <li role="presentation">
                                 <a href="{{ apps_page_url }}" target="_blank" rel="noopener noreferrer" role="menuitem">

tools/test-js-with-node

@@ -35,6 +35,7 @@ USAGE = """
 
 # We do not yet require 100% line coverage for these files:
 EXEMPT_FILES = {
+    "static/js/about_zulip.js",
     "static/js/admin.js",
     "static/js/alert_popup.ts",
     "static/js/archive.js",

zerver/context_processors.py

@@ -49,6 +49,13 @@ def common_context(user: UserProfile) -> Dict[str, Any]:
     }
 
 
+def get_zulip_version_name(zulip_version: str) -> str:
+    if zulip_version.endswith("+git"):
+        return "Zulip " + zulip_version[:-4]
+
+    return "Zulip " + zulip_version
+
+
 def get_realm_from_request(request: HttpRequest) -> Optional[Realm]:
     if hasattr(request, "user") and hasattr(request.user, "realm"):
         return request.user.realm
@@ -135,6 +142,8 @@ def zulip_default_context(request: HttpRequest) -> Dict[str, Any]:
         "request_language": get_language(),
     }
 
+    ZULIP_VERSION_NAME = get_zulip_version_name(ZULIP_VERSION)
+
     context = {
         "root_domain_landing_page": settings.ROOT_DOMAIN_LANDING_PAGE,
         "custom_logo_url": settings.CUSTOM_LOGO_URL,
@@ -160,6 +169,7 @@ def zulip_default_context(request: HttpRequest) -> Dict[str, Any]:
         "password_min_length": settings.PASSWORD_MIN_LENGTH,
         "password_min_guesses": settings.PASSWORD_MIN_GUESSES,
         "zulip_version": ZULIP_VERSION,
+        "zulip_version_name": ZULIP_VERSION_NAME,
         "user_is_authenticated": user_is_authenticated,
         "settings_path": settings_path,
         "secrets_path": secrets_path,

zerver/tests/test_context_processors.py

@@ -0,0 +1,8 @@
+from zerver.context_processors import get_zulip_version_name
+from zerver.lib.test_classes import ZulipTestCase
+
+
+class TestContextProcessors(ZulipTestCase):
+    def test_get_zulip_version_name(self) -> None:
+        self.assertEqual(get_zulip_version_name("4.0-dev+git"), "Zulip 4.0-dev")
+        self.assertEqual(get_zulip_version_name("4.0"), "Zulip 4.0")