[JENKINS-75634] Restore children context menu for breadcrumbs (#10629)

* Init

* Format

* Update jumplists.js

* Tidy

* Update jumplists.js

* Update jumplists.js

* Update jumplists.js

* Don't use async/awai

Author: janfaracik

core/src/main/resources/lib/layout/breadcrumb.jelly

@@ -37,8 +37,12 @@ THE SOFTWARE.
       This is useful for programmatically adding the context menu
     </st:attribute>
     <st:attribute name="hasMenu">
-      If true, this breadcrumb item will include a '⌄' symbol to display a dropdown menu with items
-      from the '{breadcrumb.href}/contextMenu' path. Since 2.361.
+      If true, this breadcrumb item will display a dropdown menu with items
+      from the '{breadcrumb.href}/contextMenu' path on hover. Since 2.361.
+    </st:attribute>
+    <st:attribute name="hasChildrenMenu">
+      If true, this breadcrumb item will display a dropdown menu with items
+      from the '{breadcrumb.href}/childrenContextMenu' path on hover. Since TODO.
     </st:attribute>
   </st:documentation>
 
@@ -50,7 +54,7 @@ THE SOFTWARE.
           <span>${attrs.title}</span>
         </j:when>
         <j:otherwise>
-          <a href="${attrs.href}" class="${attrs.hasMenu ? 'hoverable-model-link' : ''}">
+          <a href="${attrs.href}" class="${attrs.hasMenu ? 'hoverable-model-link' : ''} ${attrs.hasChildrenMenu ? 'hoverable-children-model-link' : ''}">
             ${attrs.title}
           </a>
         </j:otherwise>

core/src/main/resources/lib/layout/breadcrumbBar.jelly

@@ -44,7 +44,8 @@ THE SOFTWARE.
           <j:if test="${anc.object != app}">
             <l:breadcrumb title="${anc.object.displayName}"
                           href="${anc.url}/"
-                          hasMenu="${h.isModelWithContextMenu(anc.object)}" />
+                          hasMenu="${h.isModelWithContextMenu(anc.object)}"
+                          hasChildrenMenu="${h.isModelWithChildren(anc.object)}" />
           </j:if>
         </j:if>
       </j:forEach>

src/main/js/components/dropdowns/jumplists.js

@@ -31,7 +31,7 @@ function generateJumplistAccessors() {
  */
 function generateDropdowns() {
   behaviorShim.specify(
-    ".hoverable-model-link",
+    ".hoverable-model-link, .hoverable-children-model-link",
     "-hoverable-dropdown-",
     1000,
     (element) =>
@@ -45,17 +45,65 @@ function generateDropdowns() {
             return;
           }
 
-          fetch(Path.combinePath(href, "contextMenu"))
-            .then((response) => response.json())
-            .then((json) =>
-              instance.setContent(
-                Utils.generateDropdownItems(
-                  mapChildrenItemsToDropdownItems(json.items),
-                ),
-              ),
-            )
-            .catch((error) => console.log(`Jumplist request failed: ${error}`))
-            .finally(() => (instance.loaded = true));
+          const hasModelLink = element.classList.contains(
+            "hoverable-model-link",
+          );
+          const hasChildrenLink = element.classList.contains(
+            "hoverable-children-model-link",
+          );
+
+          const sections = {
+            model: null,
+            children: null,
+          };
+
+          const fetchSection = function (urlSuffix) {
+            return fetch(Path.combinePath(href, urlSuffix))
+              .then((response) => response.json())
+              .then((json) => {
+                const items = mapChildrenItemsToDropdownItems(json.items);
+                const section = document.createElement("div");
+                section.appendChild(Utils.generateDropdownItems(items));
+                return section;
+              });
+          };
+
+          const promises = [];
+
+          if (hasModelLink) {
+            promises.push(
+              fetchSection("contextMenu").then((section) => {
+                sections.model = section;
+              }),
+            );
+          }
+
+          if (hasChildrenLink) {
+            promises.push(
+              fetchSection("childrenContextMenu").then((section) => {
+                sections.children = section;
+              }),
+            );
+          }
+
+          Promise.all(promises)
+            .then(() => {
+              const container = document.createElement("div");
+              container.className = "jenkins-dropdown__split-container";
+              if (sections.model) {
+                container.appendChild(sections.model);
+              }
+              if (sections.children) {
+                container.appendChild(sections.children);
+              }
+              instance.setContent(container);
+            })
+            .catch((error) => {
+              console.log(`Dropdown fetch failed: ${error}`);
+            })
+            .finally(() => {
+              instance.loaded = true;
+            });
         },
         false,
         {
@@ -74,6 +122,7 @@ function generateDropdowns() {
     (element) =>
       Utils.generateDropdown(element, (instance) => {
         const href = element.dataset.href;
+
         const jumplistType = !element.classList.contains("children")
           ? "contextMenu"
           : "childrenContextMenu";

src/main/scss/components/_dropdowns.scss

@@ -288,3 +288,21 @@ $dropdown-padding: 0.375rem;
     height: 1.25rem;
   }
 }
+
+.jenkins-dropdown__split-container {
+  display: grid;
+  grid-template-columns: auto auto;
+
+  & > * {
+    min-width: 215px;
+
+    &:not(:first-of-type) {
+      background: color-mix(
+        in sRGB,
+        var(--text-color-secondary) 5%,
+        transparent
+      );
+      border-left: var(--jenkins-border--subtle);
+    }
+  }
+}