Getting there 🚀

janfaracik · Feb 2, 2025 · ef847c9 · ef847c9
1 parent 5bd87dc
commit ef847c9
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 34 deletions.
diff --git a/core/src/main/resources/hudson/AboutJenkins/index.jelly b/core/src/main/resources/hudson/AboutJenkins/index.jelly
@@ -29,7 +29,35 @@ THE SOFTWARE.
     <l:header>
       <script src="${resURL}/jsbundles/section-to-tabs.js" type="text/javascript" defer="true" />
     </l:header>
-
+
+    <l:breadcrumb title="${%Test 1}" />
+    <l:breadcrumb title="${%Test 2}" />
+    <l:breadcrumb title="${%Test 3}" />
+    <l:breadcrumb title="${%Test 4}" />
+    <l:breadcrumb title="${%Test 5}" />
+    <l:breadcrumb title="${%Test 6}" />
+    <l:breadcrumb title="${%Test 7}" />
+    <l:breadcrumb title="${%Test 8}" />
+    <l:breadcrumb title="${%Test 9}" />
+    <l:breadcrumb title="${%Test 10}" />
+    <l:breadcrumb title="${%Test 11}" />
+    <l:breadcrumb title="${%Test 12}" />
+    <l:breadcrumb title="${%Test 13}" />
+    <l:breadcrumb title="${%Test 14}" />
+    <l:breadcrumb title="${%Test 15}" />
+    <l:breadcrumb title="${%Test 16}" />
+    <l:breadcrumb title="${%Test 17}" />
+    <l:breadcrumb title="${%Test 18}" />
+    <l:breadcrumb title="${%Test 19}" />
+    <l:breadcrumb title="${%Test 20}" />
+    <l:breadcrumb title="${%Test 21}" />
+    <l:breadcrumb title="${%Test 22}" />
+    <l:breadcrumb title="${%Test 23}" />
+    <l:breadcrumb title="${%Test 24}" />
+    <l:breadcrumb title="${%Test 25}" />
+    <l:breadcrumb title="${%Test 26}" />
+    <l:breadcrumb title="${%Test 27}" />
+
     <l:main-panel>
       <div class="app-about-branding">
         <div class="app-about-branding__aurora"></div>

diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
@@ -1,5 +1,7 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:h="/lib/layout/header" xmlns:l="/lib/layout" xmlns:dd="/lib/layout/dropdowns" xmlns:st="jelly:stapler" xmlns:x="jelly:xml">
+  <script src="${resURL}/jsbundles/header.js" type="text/javascript" />
+
   <header id="page-header" class="jenkins-header">
     <div id="breadcrumbBar" class="jenkins-header__breadcrumbs" aria-label="breadcrumb">
       <ol class="jenkins-header__breadcrumbs__list" id="breadcrumbs">
@@ -16,6 +18,16 @@
                     <st:include page="logo" />
                   </a>
                 </li>
+                <li class="jenkins-header__breadcrumbs__list-item">
+                  <button class="jenkins-button jenkins-button--tertiary"
+                          id="button-breadcrumbs-overflow">
+                    <div class="jenkins-overflow-button__ellipsis">
+                      <span />
+                      <span />
+                      <span />
+                    </div>
+                  </button>
+                </li>
               </j:when>
               <j:otherwise>
                 <l:breadcrumb title="${anc.object.displayName}"

diff --git a/src/main/js/app.js b/src/main/js/app.js
@@ -2,7 +2,6 @@ import Dropdowns from "@/components/dropdowns";
 import CommandPalette from "@/components/command-palette";
 import Notifications from "@/components/notifications";
 import SearchBar from "@/components/search-bar";
-import Header from "@/components/header";
 import Tooltips from "@/components/tooltips";
 import StopButtonLink from "@/components/stop-button-link";
 import ConfirmationLink from "@/components/confirmation-link";
@@ -12,7 +11,6 @@ Dropdowns.init();
 CommandPalette.init();
 Notifications.init();
 SearchBar.init();
-Header.init();
 Tooltips.init();
 StopButtonLink.init();
 ConfirmationLink.init();

diff --git a/src/main/js/components/header/index.js b/src/main/js/components/header/index.js
@@ -1,3 +1,5 @@
+import Utils from "@/components/dropdowns/utils";
+
 function init() {
   window.addEventListener("scroll", () => {
     const navigation = document.querySelector("#page-header");
@@ -20,6 +22,40 @@ function init() {
       );
     }
   });
+
+  const breadcrumbsOverflow = document.querySelector("#button-breadcrumbs-overflow");
+  const breadcrumbs = [...document.querySelectorAll(".jenkins-header__breadcrumbs__list-item")].slice(2)
+
+  if (!breadcrumbsBarOverflows()) {
+    breadcrumbsOverflow.parentNode.remove();
+  }
+
+  const items = [];
+  while (breadcrumbsBarOverflows()) {
+    const item = breadcrumbs.shift();
+    items.push(item);
+    item.remove();
+
+    console.log("Overflowing?")
+    console.log(items)
+  }
+
+  Utils.generateDropdown(breadcrumbsOverflow, (instance) => {
+    const mappedItems = items.map(e => (
+      {
+        type: "link",
+        label: e.textContent,
+        url: e.querySelector("a")?.href,
+      }
+    ));
+
+    instance.setContent(Utils.generateDropdownItems(mappedItems));
+  });
+}
+
+function breadcrumbsBarOverflows() {
+  const breadcrumbsBar = document.querySelector("#breadcrumbBar");
+  return breadcrumbsBar.scrollWidth > breadcrumbsBar.offsetWidth;
 }
 
 export default { init };
diff --git a/src/main/scss/components/_breadcrumbs.scss b/src/main/scss/components/_breadcrumbs.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   gap: 0.625rem;
-  overflow: auto hidden;
+  overflow: hidden;
   padding-left: var(--section-padding);
 
   &__list {

diff --git a/src/main/scss/components/_header.scss b/src/main/scss/components/_header.scss
@@ -42,9 +42,36 @@
     margin-left: 0.15rem;
   }
 
-  // For customizable-header-plugin
   .jenkins-button {
+    min-width: 2.375rem;
+    min-height: 2.375rem;
+    padding: 0;
+
+    // For customizable-header-plugin
     color: inherit !important;
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    img {
+      border-radius: 100px;
+      width: 1.625rem;
+      height: 1.625rem;
+      outline: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
+      background: color-mix(in srgb, var(--text-color) 5%, transparent);
+      outline-offset: -1px;
+    }
+
+    .jenkins-badge {
+      position: absolute;
+      top: calc(16%);
+      right: calc(16%);
+      min-width: 5px;
+      min-height: 5px;
+      padding: 0;
+    }
   }
 
   &__actions {
@@ -53,35 +80,6 @@
     justify-content: center;
     gap: 0.5rem;
     padding-right: var(--section-padding);
-
-    .jenkins-button {
-      min-width: 2.375rem;
-      min-height: 2.375rem;
-      padding: 0;
-
-      svg {
-        width: 1.25rem;
-        height: 1.25rem;
-      }
-
-      img {
-        border-radius: 100px;
-        width: 1.625rem;
-        height: 1.625rem;
-        outline: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
-        background: color-mix(in srgb, var(--text-color) 5%, transparent);
-        outline-offset: -1px;
-      }
-
-      .jenkins-badge {
-        position: absolute;
-        top: calc(16%);
-        right: calc(16%);
-        min-width: 5px;
-        min-height: 5px;
-        padding: 0;
-      }
-    }
   }
 }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -29,6 +29,7 @@ module.exports = (env, argv) => ({
       ),
     ],
     app: [path.join(__dirname, "src/main/js/app.js")],
+    header: [path.join(__dirname, "src/main/js/components/header/index.js")],
     "pages/cloud-set": [
       path.join(__dirname, "src/main/js/pages/cloud-set/index.js"),
       path.join(__dirname, "src/main/js/pages/cloud-set/index.scss"),