XWIKI-22485: Livedata option dropdown has no grouping semantics

* Updated the structure of the LiveData dropdown (namely, removed separator <li>s and grouped links together)
* Updated bootstrap dropdown styles to account for this new kind of separator in dropdowns.
* Updated the tests to work on this updated architecture

xwiki-platform-core/xwiki-platform-bootstrap/src/main/less/dropdowns.less

@@ -60,9 +60,18 @@
   .divider {
     .nav-divider(@dropdown-divider-bg);
   }
+
+  // Dividers within the dropdown with an improved semantic representation
+  li:has(> ul) + li:has(> ul) {
+    border-top: solid 1px @dropdown-divider-bg;
+    padding-top: ((@line-height-computed / 2) - 1);
+  }
+  li:has(> ul):has(+ li > ul) {
+    margin-bottom: ((@line-height-computed / 2) - 1);
+  }
 
-  // Links within the dropdown menu
-  > li > a {
+  // Links within the dropdown menu and submenus
+  > li > a, > li > ul > li > a {
     display: block;
     padding: 3px 20px;
     clear: both;

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/LivedataDropdownMenu.spec.js

@@ -56,12 +56,13 @@ function initWrapper() {
 
 // Since the <li> elements does not have distinguishing attributes, we look for the layout items by looking at the
 // elements located after the second separator (class dropdown-header).
+// The lis passed here are both group lis and item lis. Group lis contain a title and their own item lis.
 function findSecondDropdownHeaderIndex(lis) {
   var dropdownHeadersCptr = 0;
   var liIdx = 0;
   for (; liIdx < lis.length; liIdx++) {
     const li = lis.at(liIdx);
-    if (li.classes().includes('dropdown-header')) {
+    if (li.findAll('.dropdown-header').length > 0) {
       dropdownHeadersCptr++;
     }
     if (dropdownHeadersCptr >= 2) {

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/LivedataDropdownMenu.vue

@@ -47,7 +47,7 @@
     <ul class="dropdown-menu dropdown-menu-right">
 
       <!-- Actions -->
-      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.actions') }}</li>
+      <li><span class="dropdown-header">{{ $t('livedata.dropdownMenu.actions') }}</span><ul>
 
       <li>
         <!-- Refresh -->
@@ -56,12 +56,10 @@
           {{ $t('livedata.action.refresh') }}
         </a>
       </li>
-
+      </ul></li>
 
       <!-- Layouts -->
-      <li role="separator" class="divider"></li>
-
-      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.layouts') }}</li>
+      <li><span class="dropdown-header">{{ $t('livedata.dropdownMenu.layouts') }}</span><ul>
 
       <!-- Layout options -->
       <li
@@ -76,18 +74,18 @@
           {{ layout.name }}
         </a>
       </li>
+      </ul></li>
 
       <!-- Panels -->
-      <li role="separator" class="divider"></li>
-
-      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.panels') }}</li>
+      <li><span class="dropdown-header">{{ $t('livedata.dropdownMenu.panels') }}</span><ul>
 
       <li v-for="panel in logic.panels" :key="panel.id">
         <a href="#" @click.prevent="logic.uniqueArrayToggle(logic.openedPanels, panel.id)">
           <XWikiIcon :icon-descriptor="{name: panel.icon}"/>
           {{ panel.name }}
         </a>
       </li>
+      </ul></li>
 
     </ul>
 
@@ -130,7 +128,7 @@ export default {
 <style>
 
 .livedata-dropdown-menu {
-  // Similar to .flat-buttons()
+  /* Similar to .flat-buttons() */
   .btn-default {
     background-color: @breadcrumb-bg;
     background-image: none;
@@ -143,6 +141,12 @@ export default {
   .btn-default:hover, .btn-default:active, .btn-default:focus, .open .dropdown-toggle {
       border-color: darken(@dropdown-divider-bg, 10%);
   }
+
+  /* Style each section of the dropdown */
+  ul.dropdown-menu > li > ul {
+    list-style: none;
+    padding-left: 0;
+  }
 }
 
 .livedata-dropdown-menu .btn-default span {