Repository: zulip/zulip

Issue:
The `tabbed_instructions.js` variable name `language` is super confusing
As discovered in https://github.com/zulip/zulip/pull/24655#issuecomment-1466799308, the `tabbed_instructions` widget used for both language toggles in our API documentation and app toggles in our Help Center documentation (`git grep 'tab\|mobile'`) misleadingly calls the identifier for the tab `language` in local variables and its interface. We should rename that to something like `tab_key` or `tab_section`, which requires changes both in that file and the `zerver/lib/markdown/tabbed_sections.py` code that generates them. (I see the latter file uses `tab_name` to refer to that, which probably isn't nearly as good as something like `tab_key`.

@andersk FYI in case you want to suggest we delay addressing this, since you may be in the process of rewriting `tabbed_sections.py`?

See `tabbed-instructions.ts` for details.


Discussion:
Hello @zulip/server-api, @zulip/server-refactoring, @zulip/server-user-docs members, this issue was labeled with the "area: refactoring", "area: documentation (user)", "area: documentation (api and integrations)" labels, so you may want to check it out!

<!-- areaLabelAddition -->

hey,  I want to work on this can anyone plz guide me

@imlakshaykumar please read our community guidelines before asking to claim an issue.
Hello! I would like to work on this issue. Are we simply changing all `language` in `zulip/web/src/portico/tabbed-instructions.ts` and all `tab_name` in `zerver/lib/markdown/tabbed_sections.py` into `tab_key`?
@zulipbot claim

Welcome to Zulip, @sivangbagri! We just sent you an invite to collaborate on this repository at https://github.com/zulip/zulip/invitations. Please accept this invite in order to claim this issue and begin a fun, rewarding experience contributing to Zulip!

Here's some tips to get you off to a good start:

- Join me on the [Zulip developers' server](https://chat.zulip.org), to get help, chat about this issue, and meet the other developers.
- [Unwatch this repository](https://help.github.com/articles/unwatching-repositories/), so that you don't get 100 emails a day.

As you work on this issue, you'll also want to refer to the [Zulip code contribution guide](https://zulip.readthedocs.io/en/latest/contributing/index.html), as well as the rest of the developer documentation on that site.

See you on the other side (that is, the pull request side)!

@zulipbot  @timabbott  I have successfully made the PR solving this issue
@sivangbagri You have been unassigned from this issue because you have not made any updates for over 14 days. Please feel free to reclaim the issue if you decide to pick up again. Thanks!

@sivangbagri Your PR title and commit messages are not following our commit guidelines. Please see https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html#commit-messages
I have made all the necessary changes keeping in  mind all the guidelines 
Here is the corresponding PR  https://github.com/zulip/zulip/pull/24760 
@andersk 
@drrosa 
@zulipbot 
@zulipbot claim
@Deekshith-S-Shetty You have been unassigned from this issue because you have not made any updates for over 14 days. Please feel free to reclaim the issue if you decide to pick up again. Thanks!


Resolving patch:
diff --git a/zerver/lib/markdown/tabbed_sections.py b/zerver/lib/markdown/tabbed_sections.py
--- a/zerver/lib/markdown/tabbed_sections.py
+++ b/zerver/lib/markdown/tabbed_sections.py
@@ -27,11 +27,11 @@
 """.strip()
 
 NAV_LIST_ITEM_TEMPLATE = """
-<li data-language="{data_language}" tabindex="0">{label}</li>
+<li data-tab-key="{data_tab_key}" tabindex="0">{label}</li>
 """.strip()
 
 DIV_TAB_CONTENT_TEMPLATE = """
-<div data-language="{data_language}" markdown="1">
+<div data-tab-key="{data_tab_key}" markdown="1">
 {content}
 </div>
 """.strip()
@@ -125,7 +125,7 @@ def run(self, lines: List[str]) -> List[str]:
                 tab_class = "no-tabs"
                 tab_section["tabs"] = [
                     {
-                        "tab_name": "instructions-for-all-platforms",
+                        "tab_key": "instructions-for-all-platforms",
                         "start": tab_section["start_tabs_index"],
                     }
                 ]
@@ -155,7 +155,7 @@ def generate_content_blocks(self, tab_section: Dict[str, Any], lines: List[str])
 
             content = "\n".join(lines[start_index:end_index]).strip()
             tab_content_block = DIV_TAB_CONTENT_TEMPLATE.format(
-                data_language=tab["tab_name"],
+                data_tab_key=tab["tab_key"],
                 # Wrapping the content in two newlines is necessary here.
                 # If we don't do this, the inner Markdown does not get
                 # rendered properly.
@@ -167,14 +167,14 @@ def generate_content_blocks(self, tab_section: Dict[str, Any], lines: List[str])
     def generate_nav_bar(self, tab_section: Dict[str, Any]) -> str:
         li_elements = []
         for tab in tab_section["tabs"]:
-            tab_name = tab.get("tab_name")
-            tab_label = TAB_SECTION_LABELS.get(tab_name)
+            tab_key = tab.get("tab_key")
+            tab_label = TAB_SECTION_LABELS.get(tab_key)
             if tab_label is None:
                 raise ValueError(
-                    f"Tab '{tab_name}' is not present in TAB_SECTION_LABELS in zerver/lib/markdown/tabbed_sections.py"
+                    f"Tab '{tab_key}' is not present in TAB_SECTION_LABELS in zerver/lib/markdown/tabbed_sections.py"
                 )
 
-            li = NAV_LIST_ITEM_TEMPLATE.format(data_language=tab_name, label=tab_label)
+            li = NAV_LIST_ITEM_TEMPLATE.format(data_tab_key=tab_key, label=tab_label)
             li_elements.append(li)
 
         return NAV_BAR_TEMPLATE.format(tabs="\n".join(li_elements))
@@ -189,7 +189,7 @@ def parse_tabs(self, lines: List[str]) -> Optional[Dict[str, Any]]:
             tab_content_match = TAB_CONTENT_REGEX.search(line)
             if tab_content_match:
                 block.setdefault("tabs", [])
-                tab = {"start": index, "tab_name": tab_content_match.group(1)}
+                tab = {"start": index, "tab_key": tab_content_match.group(1)}
                 block["tabs"].append(tab)
 
             end_match = END_TABBED_SECTION_REGEX.search(line)


Test patch:
diff --git a/zerver/tests/test_templates.py b/zerver/tests/test_templates.py
--- a/zerver/tests/test_templates.py
+++ b/zerver/tests/test_templates.py
@@ -38,14 +38,14 @@ def test_markdown_tabbed_sections_extension(self) -> None:
 <p>
   <div class="code-section has-tabs" markdown="1">
     <ul class="nav">
-      <li data-language="ios" tabindex="0">iOS</li>
-      <li data-language="desktop-web" tabindex="0">Desktop/Web</li>
+      <li data-tab-key="ios" tabindex="0">iOS</li>
+      <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
     </ul>
     <div class="blocks">
-      <div data-language="ios" markdown="1"></p>
+      <div data-tab-key="ios" markdown="1"></p>
         <p>iOS instructions</p>
       <p></div>
-      <div data-language="desktop-web" markdown="1"></p>
+      <div data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
     </div>
@@ -56,14 +56,14 @@ def test_markdown_tabbed_sections_extension(self) -> None:
 <p>
   <div class="code-section has-tabs" markdown="1">
     <ul class="nav">
-      <li data-language="desktop-web" tabindex="0">Desktop/Web</li>
-      <li data-language="android" tabindex="0">Android</li>
+      <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
+      <li data-tab-key="android" tabindex="0">Android</li>
     </ul>
     <div class="blocks">
-      <div data-language="desktop-web" markdown="1"></p>
+      <div data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
-      <div data-language="android" markdown="1"></p>
+      <div data-tab-key="android" markdown="1"></p>
         <p>Android instructions</p>
       <p></div>
     </div>
@@ -74,10 +74,10 @@ def test_markdown_tabbed_sections_extension(self) -> None:
 <p>
   <div class="code-section no-tabs" markdown="1">
     <ul class="nav">
-      <li data-language="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
+      <li data-tab-key="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
     </ul>
     <div class="blocks">
-      <div data-language="instructions-for-all-platforms" markdown="1"></p>
+      <div data-tab-key="instructions-for-all-platforms" markdown="1"></p>
         <p>Instructions for all platforms</p>
       <p></div>
     </div>