From 25d2ca2cfab0eb6ab16d36fe9201e8905c0b4f9e Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@xwiki.com>
Date: Wed, 20 Nov 2024 12:15:20 +0100
Subject: [PATCH] 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

---
 .../src/main/less/dropdowns.less              | 13 +++++++++--
 .../tests/unit/LivedataDropdownMenu.spec.js   |  3 ++-
 .../src/main/vue/LivedataDropdownMenu.vue     | 22 +++++++++++--------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-bootstrap/src/main/less/dropdowns.less b/xwiki-platform-core/xwiki-platform-bootstrap/src/main/less/dropdowns.less
index 542c00461adc..6408b8802768 100644
--- a/xwiki-platform-core/xwiki-platform-bootstrap/src/main/less/dropdowns.less
+++ b/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;
diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/LivedataDropdownMenu.spec.js b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/LivedataDropdownMenu.spec.js
index d57e3ba276d1..a956fbf04fe7 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/LivedataDropdownMenu.spec.js
+++ b/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) {
diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/LivedataDropdownMenu.vue b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/LivedataDropdownMenu.vue
index 14bf2b7d6527..99f0f0d2fa28 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/LivedataDropdownMenu.vue
+++ b/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,11 +74,10 @@
           {{ 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)">
@@ -88,6 +85,7 @@
           {{ 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 {