team page: Display contributor count per repo.

Fixes #20725.

static/js/portico/team.js

@@ -63,6 +63,8 @@ function get_display_name(contributor) {
 //   - Display full name instead of GitHub username.
 export default function render_tabs() {
     const template = _.template($("#contributors-template").html());
+    const count_template = _.template($("#count-template").html());
+    const total_count_template = _.template($("#total-count-template").html());
     const total_tab_html = contributors_list
         .map((c) => ({
             name: get_display_name(c),
@@ -75,7 +77,10 @@ export default function render_tabs() {
         .map((c) => template(c))
         .join("");
 
-    $("#tab-total").html(total_tab_html);
+    $("#tab-total .contributors-grid").html(total_tab_html);
+    $("#tab-total").prepend(
+        total_count_template({contributor_count: contributors_list.length, tab_name: "total"}),
+    );
 
     for (const repo_name of Object.keys(repo_name_to_tab_name)) {
         const tab_name = repo_name_to_tab_name[repo_name];
@@ -83,12 +88,12 @@ export default function render_tabs() {
             continue;
         }
         // Set as the loading template for now, and load when clicked.
-        $(`#tab-${CSS.escape(tab_name)}`).html($("#loading-template").html());
+        $(`#tab-${CSS.escape(tab_name)} .contributors-grid`).html($("#loading-template").html());
 
         $(`#${CSS.escape(tab_name)}`).on("click", () => {
             if (!loaded_repos.includes(repo_name)) {
-                const html = contributors_list
+                const filtered_by_repo = contributors_list.filter((c) => c[repo_name]);
-                    .filter((c) => c[repo_name])
+                const html = filtered_by_repo
                     .sort((a, b) =>
                         a[repo_name] < b[repo_name] ? 1 : a[repo_name] > b[repo_name] ? -1 : 0,
                     )
@@ -103,7 +108,12 @@ export default function render_tabs() {
                     )
                     .join("");
 
-                $(`#tab-${CSS.escape(tab_name)}`).html(html);
+                $(`#tab-${CSS.escape(tab_name)} .contributors-grid`).html(html);
+                const contributor_count = filtered_by_repo.length;
+                const repo_url = `https://github.com/zulip/${repo_name}`;
+                $(`#tab-${CSS.escape(tab_name)}`).prepend(
+                    count_template({contributor_count, repo_name, repo_url}),
+                );
 
                 loaded_repos.push(repo_name);
             }

static/styles/portico/portico.css

@@ -884,11 +884,14 @@ input#python-zulip-api:checked ~ #tab-python-zulip-api,
 input#zulip-js:checked ~ #tab-zulip-js,
 input#zulipbot:checked ~ #tab-zulipbot,
 input#terminal:checked ~ #tab-terminal {
-    border-top: 1px solid hsl(0, 0%, 93%);
+    display: block;
-    padding-top: 20px;
+
-    display: grid;
+    .contributors-grid {
-    grid-gap: 5px;
+        padding-top: 5px;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        display: grid;
+        grid-gap: 5px;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
 }
 
 .avatar_img {

templates/zerver/team.html

@@ -110,14 +110,30 @@
                     <input id="terminal" type="radio" name="tabs" />
                     <label for="terminal"><i class="fa fa-terminal" aria-hidden="true"></i>&nbsp; Terminal</label>
 
-                    <div id="tab-total" class="contributors"></div>
+                    <div id="tab-total" class="contributors">
-                    <div id="tab-server" class="contributors"></div>
+                        <div class="contributors-grid"></div>
-                    <div id="tab-desktop" class="contributors"></div>
+                    </div>
-                    <div id="tab-mobile" class="contributors"></div>
+                    <div id="tab-server" class="contributors">
-                    <div id="tab-python-zulip-api" class="contributors"></div>
+                        <div class="contributors-grid"></div>
-                    <div id="tab-zulip-js" class="contributors"></div>
+                    </div>
-                    <div id="tab-zulipbot" class="contributors"></div>
+                    <div id="tab-desktop" class="contributors">
-                    <div id="tab-terminal" class="contributors"></div>
+                        <div class="contributors-grid"></div>
+                    </div>
+                    <div id="tab-mobile" class="contributors">
+                        <div class="contributors-grid"></div>
+                    </div>
+                    <div id="tab-python-zulip-api" class="contributors">
+                        <div class="contributors-grid"></div>
+                    </div>
+                    <div id="tab-zulip-js" class="contributors">
+                        <div class="contributors-grid"></div>
+                    </div>
+                    <div id="tab-zulipbot" class="contributors">
+                        <div class="contributors-grid"></div>
+                    </div>
+                    <div id="tab-terminal" class="contributors">
+                        <div class="contributors-grid"></div>
+                    </div>
                 </div>
 
                 <!-- Compiled using lodash -->
@@ -141,6 +157,21 @@
                     </p>
                 </script>
 
+                <script type="text/template" id="total-count-template">
+                    <p class="contributor-count">
+                        <%= contributor_count %> total contributors
+                    </p>
+                </script>
+
+                <script type="text/template" id="count-template">
+                    <p class="contributor-count">
+                        <%= contributor_count %> contributors to
+                        <a href="<%= repo_url %>" target="_blank" rel="noopener noreferrer">
+                            zulip/<%= repo_name %>
+                        </a>
+                    </p>
+                </script>
+
                 <p class="last-updated">
                     Last updated: {{ date }}
                 </p>