POC configure system page with new tabs

jenkinsci · Jul 5, 2022 · d21beb2 · d21beb2
1 parent d1b5763
commit d21beb2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/core/src/main/resources/jenkins/model/Jenkins/configure.jelly b/core/src/main/resources/jenkins/model/Jenkins/configure.jelly
@@ -28,14 +28,35 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
 <l:layout permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%Configure System}">
-  <st:include page="sidepanel.jelly" />
+  <l:side-panel>
+    <div id="tasks">
+      <div class="jenkins-app-bar">
+        <div class="jenkins-app-bar__content">
+          <h1>${%Configuration}</h1>
+        </div>
+      </div>
+    </div>
+  </l:side-panel>
   <f:breadcrumb-config-outline title="${%Configure System}" />
 
-  <l:app-bar title="${%Configure System}" />
+  <l:header>
+    <script src="${resURL}/jsbundles/section-to-sidebar-items.js" type="text/javascript" defer="true" />
+  </l:header>
 
   <l:main-panel>
     <div class="behavior-loading"><l:spinner text="${%LOADING}"/></div>
-    <f:form method="post" name="config" action="configSubmit" class="jenkins-form">
+    <f:form method="post" name="config" action="configSubmit" class="jenkins-form config-table">
+      <div class="jenkins-app-bar">
+        <div class="jenkins-app-bar__content">
+          <h2>
+            <div class="jenkins-hidden">
+              <l:icon src="symbol-settings" />
+            </div>
+            <span>${%General}</span>
+          </h2>
+        </div>
+      </div>
+
       <j:set var="instance" value="${it}" />
       <j:set var="descriptor" value="${instance.descriptor}" />
 

diff --git a/war/src/main/js/section-to-sidebar-items.js b/war/src/main/js/section-to-sidebar-items.js
@@ -1,7 +1,7 @@
 import {createElementFromHtml, toId} from "./util/dom";
 import page from "./util/page";
 
-const HEADER_SELECTOR = ".config-table .jenkins-app-bar h2, .config-table > .jenkins-section > .jenkins-section__title";
+const HEADER_SELECTOR = ".config-table .jenkins-app-bar h2, .config-table > .jenkins-section > .jenkins-section__title,.jenkins-section > .jenkins-section__title";
 const DEFAULT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>`;
 
 window.addEventListener("load", function() {
@@ -14,7 +14,10 @@ window.addEventListener("load", function() {
 
   // Create the sidebar items
   sectionHeaders.forEach(function (header, i) {
-    const headerId = toId(header.textContent);
+    // remove anchor placeholder
+    const headerText = header.textContent.replace(/^#/, '')
+
+    const headerId = toId(headerText);
     header.id = headerId;
     const icon = header.querySelector("svg") ? header.querySelector("svg").outerHTML : DEFAULT_ICON;
     const item = createElementFromHtml(`
@@ -25,7 +28,7 @@ window.addEventListener("load", function() {
                         ${icon}
                     </span>
                     <span class="task-link-text">
-                        ${header.textContent}
+                        ${headerText}
                     </span>
                 </button>
             </span>