/team: Render contributors list in tabs client side.

static/js/portico/landing-page.js

@@ -3,6 +3,8 @@ const ELECTRON_APP_URL_LINUX = "https://github.com/zulip/zulip-electron/releases
 const ELECTRON_APP_URL_MAC = "https://github.com/zulip/zulip-electron/releases/download/v" + ELECTRON_APP_VERSION + "/Zulip-" + ELECTRON_APP_VERSION + ".dmg";
 const ELECTRON_APP_URL_WINDOWS = "https://github.com/zulip/zulip-electron/releases/download/v" + ELECTRON_APP_VERSION + "/Zulip-Web-Setup-" + ELECTRON_APP_VERSION + ".exe";
 
+import render_tabs from './team.js';
+
 // this will either smooth scroll to an anchor where the `name`
 // is the same as the `scroll-to` reference, or to a px height
 // (as specified like `scroll-to='0px'`).
@@ -241,3 +243,9 @@ if (document.readyState === "complete") {
 } else {
     $(load);
 }
+
+$(function () {
+    if (window.location.pathname === '/team/') {
+        render_tabs();
+    }
+});

static/js/portico/team.js

@@ -0,0 +1,57 @@
+// Contributor list is baked into the /team's page template, so we can silent
+// eslint's error.
+/* global contributors_list */
+
+var repos = ['server', 'desktop', 'mobile', 'python-zulip-api', 'zulipbot'];
+
+function contrib_total_commits(contrib) {
+    var commits = 0;
+    repos.forEach(function (repo) {
+        commits += contrib[repo] || 0;
+    });
+    return commits;
+}
+
+// TODO (for v2 of /team contributors):
+//   - Freeze contributions data for legacy repo (ios, android) and include them
+//     in totals tab.
+//   - Lazy-render all but the total tab.
+//   - Make tab header responsive.
+//   - Display full name instead of github username.
+export default function render_tabs() {
+    var template = _.template($('#contributors-template').html());
+
+    var total_tab_html = _.chain(contributors_list)
+        .map(function (c) {
+            return {
+                name: c.name,
+                avatar: c.avatar,
+                commits: contrib_total_commits(c),
+            };
+        })
+        .sortBy('commits')
+        .reverse()
+        .map(function (c) { return template(c); })
+        .value()
+        .join('');
+
+    $('#tab-total').html(total_tab_html);
+
+    _.each(repos, function (repo) {
+        var html = _.chain(contributors_list)
+            .filter(repo)
+            .sortBy(repo)
+            .reverse()
+            .map(function (c) {
+                return template({
+                    name: c.name,
+                    avatar: c.avatar,
+                    commits: c[repo],
+                });
+            })
+            .value()
+            .join('');
+
+        $('#tab-' + repo).html(html);
+    });
+}

static/styles/portico.css

@@ -904,7 +904,41 @@ a.bottom-signup-button {
     margin-bottom: 10px;
 }
 
+.team input {
+    display: none;
+}
+
+.team label {
+    font-size: initial;
+    display: inline-block;
+    padding: 10px;
+    border: 1px solid transparent;
+    margin: 0 0 -1px 0;
+}
+
+.team label:hover {
+    cursor: pointer;
+}
+
+.team input:checked + label {
+    border: 1px solid #eee;
+    border-top: 2px solid yellowgreen;
+    border-bottom-color: #fff;
+}
+
 .contributors {
+    display: none;
+}
+
+/* Activated .contributors */
+input#total:checked ~ #tab-total,
+input#server:checked ~ #tab-server,
+input#desktop:checked ~ #tab-desktop,
+input#mobile:checked ~ #tab-mobile,
+input#python-zulip-api:checked ~ #tab-python-zulip-api,
+input#zulipbot:checked ~ #tab-zulipbot {
+    border-top: 1px solid #eee;
+    padding-top: 20px;
     display: grid;
     grid-gap: 5px;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

templates/zerver/team.html

@@ -10,6 +10,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {% stylesheet 'portico' %}
 {% stylesheet 'landing-page' %}
+<script>
+    var contributors_list = {{ contrib|safe }};
+</script>
 {{ render_bundle('landing-page') }}
 
 {% endblock %}
@@ -127,21 +130,45 @@
                     team have made major contributions to the project.
                 </p>
 
-                <div class="contributors">
+                <input id="total" type="radio" name="tabs" checked>
-                    {% for person in data %}
+                <label for="total"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp; All contributions</label>
+
+                <input id="server" type="radio" name="tabs">
+                <label for="server"><i class="fa fa-server" aria-hidden="true"></i>&nbsp; Zulip server</label>
+
+                <input id="desktop" type="radio" name="tabs">
+                <label for="desktop"><i class="fa fa-desktop" aria-hidden="true"></i>&nbsp; Desktop</label>
+
+                <input id="mobile" type="radio" name="tabs">
+                <label for="mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp; Mobile</label>
+
+                <input id="python-zulip-api" type="radio" name="tabs">
+                <label for="python-zulip-api"><i class="fa fa-code" aria-hidden="true"></i>&nbsp; Python API</label>
+
+                <input id="zulipbot" type="radio" name="tabs">
+                <label for="zulipbot"><i class="fa fa-at" aria-hidden="true"></i>&nbsp; Zulipbot</label>
+
+                <div id="tab-total" class="contributors"></div>
+                <div id="tab-server" class="contributors"></div>
+                <div id="tab-desktop" class="contributors"></div>
+                <div id="tab-mobile" class="contributors"></div>
+                <div id="tab-python-zulip-api" class="contributors"></div>
+                <div id="tab-zulipbot" class="contributors"></div>
+
+                <!-- Compiled using underscore -->
+                <script type="text/template" id="contributors-template">
                     <div class="person">
-                        <a href="https://github.com/{{ person.name }}" target="_blank" class="no-underline">
+                        <a href="https://github.com/<%= name %>" target="_blank" class="no-underline">
                             <div class="avatar">
-                                <img class="avatar_img" src="{{ person.avatar }}" alt="{{ _('Avatar') }}" />
+                                <img class="avatar_img" src="<%= avatar %>" alt="{{ _('Avatar') }}" />
                             </div>
                             <div class='info'>
-                                <b>@{{ person.name }}</b><br />
+                                <b>@<%= name %></b><br />
-                                {{ person.commits }} commits
+                                <%= commits %> commits
                             </div>
                         </a>
                     </div>
-                    {% endfor %}
+                </script>
-                </div>
 
                 <p class="last-updated">
                     Statistic last updated: {{ date }}

tools/check-templates

@@ -46,6 +46,8 @@ def check_html_templates(templates, all_dups):
         lambda fn: ('casperjs' not in fn),
         templates)
     templates = sorted(list(templates))
+    # Use of underscore templates <%= %>.
+    templates.remove('templates/zerver/team.html')
 
     template_id_dict = build_id_dict(templates)
     # TODO: Clean up these cases of duplicate ids in the code

zerver/tests/test_docs.py

@@ -166,11 +166,9 @@ class AboutPageTest(ZulipTestCase):
             subprocess.check_call([update_script, '--use-fixture'])  # nocoverage
 
     def test_endpoint(self) -> None:
+        """ We can't check the contributors list since it is rendered client-side """
         result = self.client_get('/team/')
-        self.assert_in_success_response(
+        self.assert_in_success_response(['Our amazing community'], result)
-            ['Our amazing community', 'commits', '@timabbott'],
-            result
-        )
 
     def test_split_by(self) -> None:
         """Utility function primarily used in authors page"""