tabbed-instructions: Delete activate_correct_tab.

We no longer have any OS-specific tabs; we can just activate the first
one on the server side.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

web/src/portico/help.ts

@@ -9,8 +9,6 @@ import * as common from "../common.ts";
 import {show_copied_confirmation} from "../copied_tooltip.ts";
 import * as util from "../util.ts";
 
-import {activate_correct_tab} from "./tabbed-instructions.ts";
-
 function register_tabbed_section($tabbed_section: JQuery): void {
     const $li = $tabbed_section.find("ul.nav li");
     const $blocks = $tabbed_section.find(".blocks div");
@@ -66,7 +64,6 @@ function add_copy_to_clipboard_element($codehilite: JQuery): void {
 
 function render_tabbed_sections(): void {
     $(".tabbed-section").each(function () {
-        activate_correct_tab($(this));
         register_tabbed_section($(this));
     });
 

web/src/portico/tabbed-instructions.ts

@@ -1,8 +1,4 @@
-import $ from "jquery";
-
-import * as blueslip from "../blueslip.ts";
 import * as common from "../common.ts";
-import * as util from "../util.ts";
 
 export type UserOS = "android" | "ios" | "mac" | "windows" | "linux";
 
@@ -24,50 +20,3 @@ export function detect_user_os(): UserOS {
     }
     return "mac"; // if unable to determine OS return Mac by default
 }
-
-export function activate_correct_tab($tabbed_section: JQuery): void {
-    const user_os = detect_user_os();
-    const desktop_os = new Set(["mac", "linux", "windows"]);
-    const $li = $tabbed_section.find("ul.nav li");
-    const $blocks = $tabbed_section.find(".blocks div");
-
-    $li.each(function () {
-        const tab_key = this.dataset.tabKey;
-        $(this).removeClass("active");
-        if (tab_key === user_os) {
-            $(this).addClass("active");
-        }
-
-        if (desktop_os.has(user_os) && tab_key === "desktop-web") {
-            $(this).addClass("active");
-        }
-    });
-
-    $blocks.each(function () {
-        const tab_key = this.dataset.tabKey;
-        $(this).removeClass("active");
-        if (tab_key === user_os) {
-            $(this).addClass("active");
-        }
-
-        if (desktop_os.has(user_os) && tab_key === "desktop-web") {
-            $(this).addClass("active");
-        }
-    });
-
-    // if no tab was activated, just activate the first one
-    const $active_list_items = $li.filter(".active");
-    if ($active_list_items.length === 0) {
-        $li.first().addClass("active");
-        const tab_key = util.the($li.first()).dataset.tabKey;
-        if (tab_key) {
-            $blocks.filter("[data-tab-key=" + tab_key + "]").addClass("active");
-        } else {
-            blueslip.error("Tabbed instructions widget has no tabs to activate!");
-        }
-    }
-}
-
-$(".tabbed-section").each(function () {
-    activate_correct_tab($(this));
-});

web/webpack.assets.json

@@ -49,8 +49,7 @@
         "./src/bundles/portico.ts",
         "simplebar/dist/simplebar.css",
         "simplebar",
-        "./src/portico/help.ts",
+        "./src/portico/help.ts"
-        "./src/portico/tabbed-instructions.ts"
     ],
     "landing-page": [
         "./src/bundles/portico.ts",

zerver/lib/markdown/tabbed_sections.py

@@ -29,11 +29,11 @@ NAV_BAR_TEMPLATE = """
 """.strip()
 
 NAV_LIST_ITEM_TEMPLATE = """
-<li data-tab-key="{data_tab_key}" tabindex="0">{label}</li>
+<li class="{class_}" data-tab-key="{data_tab_key}" tabindex="0">{label}</li>
 """.strip()
 
 DIV_TAB_CONTENT_TEMPLATE = """
-<div class="tab-content" data-tab-key="{data_tab_key}" markdown="1">
+<div class="tab-content {class_}" data-tab-key="{data_tab_key}" markdown="1">
 {content}
 </div>
 """.strip()
@@ -177,6 +177,7 @@ def generate_content_blocks(
 
         content = "\n".join(lines[start_index:end_index]).strip()
         tab_content_block = tab_content_template.format(
+            class_="active" if index == 0 else "",
             data_tab_key=tab["tab_key"],
             # This attribute is not used directly in this file here,
             # we need this for the current conversion script in for
@@ -223,15 +224,16 @@ class TabbedSectionsPreprocessor(Preprocessor):
 
     def generate_nav_bar(self, tab_section: dict[str, Any]) -> str:
         li_elements = []
-        for tab in tab_section["tabs"]:
+        for index, tab in enumerate(tab_section["tabs"]):
             tab_key = tab.get("tab_key")
             tab_label = TAB_SECTION_LABELS.get(tab_key)
             if tab_label is None:
                 raise ValueError(
                     f"Tab '{tab_key}' is not present in TAB_SECTION_LABELS in zerver/lib/markdown/tabbed_sections.py"
                 )
+            class_ = "active" if index == 0 else ""
 
-            li = NAV_LIST_ITEM_TEMPLATE.format(data_tab_key=tab_key, label=tab_label)
+            li = NAV_LIST_ITEM_TEMPLATE.format(class_=class_, data_tab_key=tab_key, label=tab_label)
             li_elements.append(li)
 
         return NAV_BAR_TEMPLATE.format(tabs="\n".join(li_elements))

zerver/tests/test_templates.py

@@ -38,11 +38,11 @@ header
 <p>
   <div class="tabbed-section has-tabs" markdown="1">
     <ul class="nav">
-      <li data-tab-key="ios" tabindex="0">iOS</li>
+      <li class="active" data-tab-key="ios" tabindex="0">iOS</li>
-      <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
+      <li class="" data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
     </ul>
     <div class="blocks">
-      <div class="tab-content" data-tab-key="ios" markdown="1"></p>
+      <div class="tab-content active" data-tab-key="ios" markdown="1"></p>
         <p>iOS instructions</p>
       <p></div>
       <div class="tab-content" data-tab-key="desktop-web" markdown="1"></p>
@@ -56,11 +56,11 @@ header
 <p>
   <div class="tabbed-section has-tabs" markdown="1">
     <ul class="nav">
-      <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
+      <li class="active" data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
-      <li data-tab-key="android" tabindex="0">Android</li>
+      <li class="" data-tab-key="android" tabindex="0">Android</li>
     </ul>
     <div class="blocks">
-      <div class="tab-content" data-tab-key="desktop-web" markdown="1"></p>
+      <div class="tab-content active" data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
       <div class="tab-content" data-tab-key="android" markdown="1"></p>
@@ -74,10 +74,10 @@ header
 <p>
   <div class="tabbed-section no-tabs" markdown="1">
     <ul class="nav">
-      <li data-tab-key="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
+      <li class="active" data-tab-key="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
     </ul>
     <div class="blocks">
-      <div class="tab-content" data-tab-key="instructions-for-all-platforms" markdown="1"></p>
+      <div class="tab-content active" data-tab-key="instructions-for-all-platforms" markdown="1"></p>
         <p>Instructions for all platforms</p>
       <p></div>
     </div>