Make navset id more robust to collisions (#1359)

Co-authored-by: Barret Schloerke <barret@posit.co>

Author: cpsievert

shiny/ui/_navs.py

@@ -1039,7 +1039,7 @@ def layout(self, nav: Tag, content: Tag) -> TagList:
             tags.span({"class": "navbar-brand"}, self.title),
         )
         if self.collapsible:
-            collapse_id = "navbar-collapse-" + private_random_int(1000, 10000)
+            collapse_id = "navbar-collapse-" + nav_random_int()
             nav_container.append(
                 tags.button(
                     tags.span(class_="navbar-toggler-icon"),
@@ -1289,7 +1289,7 @@ def render_navset(
     selected: Optional[str],
     context: dict[str, Any],
 ) -> tuple[Tag, Tag]:
-    tabsetid = private_random_int(1000, 10000)
+    tabsetid = nav_random_int()
 
     # Separate MetadataNodes from NavSetArgs.
     metadata_args: list[MetadataNode] = []
@@ -1356,6 +1356,10 @@ def navset_title(
     return [title_attrs, tags.span(title)]
 
 
+def nav_random_int() -> str:
+    return private_random_int(1000, 1000000)
+
+
 ##############################################
 # Deprecated
 ##############################################

tests/pytest/test_navs.py

@@ -38,19 +38,19 @@ def test_navset_tab_markup():
 
     assert TagList(x).render()["html"] == textwrap.dedent(
         """\
-        <ul class="nav nav-tabs" data-tabsetid="7311">
+        <ul class="nav nav-tabs" data-tabsetid="886440">
           <li class="nav-item">
-            <a data-bs-toggle="tab" data-toggle="tab" data-value="a" role="tab" class="nav-link active" href="#tab-7311-0">a</a>
+            <a data-bs-toggle="tab" data-toggle="tab" data-value="a" role="tab" class="nav-link active" href="#tab-886440-0">a</a>
           </li>
           <li class="nav-item">
-            <a data-bs-toggle="tab" data-toggle="tab" data-value="b" role="tab" class="nav-link" href="#tab-7311-1">b</a>
+            <a data-bs-toggle="tab" data-toggle="tab" data-value="b" role="tab" class="nav-link" href="#tab-886440-1">b</a>
           </li>
           <li>Some item</li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle " data-bs-toggle="dropdown" data-value="Menu" href="#" role="button">Menu</a>
-            <ul class="dropdown-menu" data-tabsetid="7890">
+            <ul class="dropdown-menu" data-tabsetid="404958">
               <li>
-                <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item" href="#tab-7890-0">c</a>
+                <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item" href="#tab-404958-0">c</a>
               </li>
               <li class="dropdown-divider"></li>
               <li class="dropdown-header">Plain text</li>
@@ -59,10 +59,10 @@ def test_navset_tab_markup():
             </ul>
           </li>
         </ul>
-        <div class="tab-content" data-tabsetid="7311">
-          <div class="tab-pane active" role="tabpanel" data-value="a" id="tab-7311-0">a</div>
-          <div class="tab-pane" role="tabpanel" data-value="b" id="tab-7311-1">b</div>
-          <div class="tab-pane" role="tabpanel" data-value="c" id="tab-7890-0">c</div>
+        <div class="tab-content" data-tabsetid="886440">
+          <div class="tab-pane active" role="tabpanel" data-value="a" id="tab-886440-0">a</div>
+          <div class="tab-pane" role="tabpanel" data-value="b" id="tab-886440-1">b</div>
+          <div class="tab-pane" role="tabpanel" data-value="c" id="tab-404958-0">c</div>
         </div>"""
     )
 
@@ -73,12 +73,12 @@ def test_navset_pill_markup():
 
     assert TagList(x).render()["html"] == textwrap.dedent(
         """\
-        <ul class="nav nav-pills shiny-tab-input" id="navset_pill_id" data-tabsetid="7311">
+        <ul class="nav nav-pills shiny-tab-input" id="navset_pill_id" data-tabsetid="886440">
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" data-value="Menu" href="#" role="button">Menu</a>
-            <ul class="dropdown-menu" data-tabsetid="7890">
+            <ul class="dropdown-menu" data-tabsetid="404958">
               <li>
-                <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item active" href="#tab-7890-0">c</a>
+                <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item active" href="#tab-404958-0">c</a>
               </li>
               <li class="dropdown-divider"></li>
               <li class="dropdown-header">Plain text</li>
@@ -87,12 +87,12 @@ def test_navset_pill_markup():
             </ul>
           </li>
           <li class="nav-item">
-            <a data-bs-toggle="tab" data-toggle="tab" data-value="a" role="tab" class="nav-link" href="#tab-7311-1">a</a>
+            <a data-bs-toggle="tab" data-toggle="tab" data-value="a" role="tab" class="nav-link" href="#tab-886440-1">a</a>
           </li>
         </ul>
-        <div class="tab-content" data-tabsetid="7311">
-          <div class="tab-pane active" role="tabpanel" data-value="c" id="tab-7890-0">c</div>
-          <div class="tab-pane" role="tabpanel" data-value="a" id="tab-7311-1">a</div>
+        <div class="tab-content" data-tabsetid="886440">
+          <div class="tab-pane active" role="tabpanel" data-value="c" id="tab-404958-0">c</div>
+          <div class="tab-pane" role="tabpanel" data-value="a" id="tab-886440-1">a</div>
         </div>"""
     )
 
@@ -110,28 +110,28 @@ def test_navset_card_pill_markup():
         """\
         <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init="">
           <div class="card-header">
-            <ul class="nav nav-pills card-header-pills" data-tabsetid="7311">
+            <ul class="nav nav-pills card-header-pills" data-tabsetid="886440">
               <li class="nav-item">
-                <a data-bs-toggle="tab" data-toggle="tab" data-value="a" role="tab" class="nav-link" href="#tab-7311-0">a</a>
+                <a data-bs-toggle="tab" data-toggle="tab" data-value="a" role="tab" class="nav-link" href="#tab-886440-0">a</a>
               </li>
               <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" data-value="Menu" href="#" role="button">Menu</a>
-                <ul class="dropdown-menu" data-tabsetid="7890">
+                <ul class="dropdown-menu" data-tabsetid="404958">
                   <li>
-                    <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item active" href="#tab-7890-0">c</a>
+                    <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item active" href="#tab-404958-0">c</a>
                   </li>
                 </ul>
               </li>
               <li class="nav-item">
-                <a data-bs-toggle="tab" data-toggle="tab" data-value="b" role="tab" class="nav-link" href="#tab-7311-2">b</a>
+                <a data-bs-toggle="tab" data-toggle="tab" data-value="b" role="tab" class="nav-link" href="#tab-886440-2">b</a>
               </li>
             </ul>
           </div>
           <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
-            <div class="tab-content html-fill-item html-fill-container" data-tabsetid="7311">
-              <div class="tab-pane html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="a" id="tab-7311-0" style="gap:0;padding:0;">a</div>
-              <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="c" id="tab-7890-0" style="gap:0;padding:0;">c</div>
-              <div class="tab-pane html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="b" id="tab-7311-2" style="gap:0;padding:0;">b</div>
+            <div class="tab-content html-fill-item html-fill-container" data-tabsetid="886440">
+              <div class="tab-pane html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="a" id="tab-886440-0" style="gap:0;padding:0;">a</div>
+              <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="c" id="tab-404958-0" style="gap:0;padding:0;">c</div>
+              <div class="tab-pane html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="b" id="tab-886440-2" style="gap:0;padding:0;">b</div>
             </div>
           </div>
           <script data-bslib-card-init="">window.bslib.Card.initializeAllCards();</script>
@@ -152,15 +152,15 @@ def test_navset_bar_markup():
         """\
         <nav class="navbar navbar-expand-md navbar-default">
           <div class="container-fluid">
-            <span class="navbar-brand">Page title</span><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-1663" aria-controls="navbar-collapse-1663" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
-            <div id="navbar-collapse-1663" class="collapse navbar-collapse">
-              <ul class="nav navbar-nav nav-underline" data-tabsetid="7311">
+            <span class="navbar-brand">Page title</span><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-795772" aria-controls="navbar-collapse-795772" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
+            <div id="navbar-collapse-795772" class="collapse navbar-collapse">
+              <ul class="nav navbar-nav nav-underline" data-tabsetid="886440">
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" data-value="Menu" href="#" role="button">Menu</a>
-                  <ul class="dropdown-menu" data-tabsetid="7890">
+                  <ul class="dropdown-menu" data-tabsetid="404958">
                     <li class="dropdown-header">Plain text</li>
                     <li>
-                      <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item active" href="#tab-7890-1">c</a>
+                      <a data-bs-toggle="tab" data-toggle="tab" data-value="c" role="tab" class="dropdown-item active" href="#tab-404958-1">c</a>
                     </li>
                   </ul>
                 </li>
@@ -170,8 +170,8 @@ def test_navset_bar_markup():
         </nav>
         <div class="container-fluid html-fill-item html-fill-container">
           Page header
-          <div class="tab-content html-fill-item html-fill-container" data-tabsetid="7311">
-            <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="c" id="tab-7890-1" style="--bslib-navbar-margin:0;;">c</div>
+          <div class="tab-content html-fill-item html-fill-container" data-tabsetid="886440">
+            <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="c" id="tab-404958-1" style="--bslib-navbar-margin:0;;">c</div>
           </div>
           Page footer
         </div>"""