Merge branch 'new-plugin-manager-1' into new-search-bar-component

core/src/main/resources/hudson/PluginManager/advanced.jelly

@@ -31,13 +31,13 @@ THE SOFTWARE.
     <l:layout title="${%Advanced Settings} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
         <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>
 
-        <l:app-bar title="${%Plugin Manager}"/>
+        <l:app-bar title="${%Advanced settings}"/>
 
-        <st:include page="sidepanel.jelly"/>
+        <l:side-panel>
+          <local:sidepanel xmlns:local="/hudson/PluginManager" page="advanced" />
+        </l:side-panel>
 
         <l:main-panel>
-            <local:tabBar page="advanced" xmlns:local="/hudson/PluginManager"/>
-
             <section class="jenkins-section">
                 <h2 class="jenkins-section__title">${%HTTP Proxy Configuration}</h2>
                 <f:form method="post" action="proxyConfigure" name="proxyConfigure">

core/src/main/resources/hudson/PluginManager/available.jelly

@@ -28,30 +28,28 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:f="/lib/form">
   <l:layout title="${%Available Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
-    <j:set var="page" value="available"/>
-
-    <l:app-bar title="${%Plugin Manager}" />
-
-    <st:include page="sidepanel.jelly"/>
+    <l:side-panel>
+      <local:sidepanel xmlns:local="/hudson/PluginManager" page="available" />
+    </l:side-panel>
 
     <l:main-panel>
-      <script src="${resURL}/jsbundles/plugin-manager-ui.js" type="text/javascript"/>
-
-      <form method="post" action="install">
-        <local:tabBar page="${page}" xmlns:local="/hudson/PluginManager"/>
-
-        <div class="jenkins-form-item jenkins-search">
-          <input
-            class="jenkins-search__input"
-            type="search"
-            id="filter-box"
-            value="${request.getParameter('filter')}"
-            placeholder="${%Search}"/>
-          <div class="jenkins-search__icon">
-            <l:icon src="symbol-search"/>
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
+        <div class="jenkins-app-bar__content">
+          <div class="app-plugin-manager__search">
+            <span class="app-plugin-manager__search__icon">
+              <l:icon src="symbol-search"/>
+            </span>
+            <input type="search"
+                   placeholder="Search available plugins"
+                   id="filter-box"
+                   value="${request.getParameter('filter')}" />
           </div>
         </div>
+      </div>
+
+      <script src="${resURL}/jsbundles/plugin-manager-ui.js" type="text/javascript"/>
 
+      <form method="post" action="install">
         <table id="plugins" class="jenkins-table sortable"
                data-hasAdmin="${h.hasPermission(app.ADMINISTER)}">
           <thead>

core/src/main/resources/hudson/PluginManager/installed.jelly

@@ -30,11 +30,25 @@ THE SOFTWARE.
   <l:layout title="${%Installed Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
     <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>
 
-    <l:app-bar title="${%Plugin Manager}" />
-
-    <st:include page="sidepanel.jelly"/>
+    <l:side-panel>
+      <local:sidepanel xmlns:local="/hudson/PluginManager" page="installed" />
+    </l:side-panel>
 
     <l:main-panel>
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
+        <div class="jenkins-app-bar__content">
+          <div class="app-plugin-manager__search">
+            <span class="app-plugin-manager__search__icon">
+              <l:icon src="symbol-search"/>
+            </span>
+            <input type="search"
+                   placeholder="Search installed plugins"
+                   id="filter-box"
+                   value="${request.getParameter('filter')}" />
+          </div>
+        </div>
+      </div>
+
       <st:adjunct includes="hudson.PluginManager._table"/>
 
       <j:if test="${app.updateCenter.isRestartRequiredForCompletion()}">
@@ -53,20 +67,6 @@ THE SOFTWARE.
            data-detached-possible-dependents="${%detached-possible-dependents}"
       />
 
-      <local:tabBar page="installed" xmlns:local="/hudson/PluginManager" />
-
-      <div class="jenkins-form-item jenkins-search">
-        <input
-          class="jenkins-search__input"
-          type="search"
-          id="filter-box"
-          value="${request.getParameter('filter')}"
-          placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
-        <div class="jenkins-search__icon">
-          <l:icon src="symbol-search"/>
-        </div>
-      </div>
-
       <table id="plugins" class="jenkins-table sortable">
         <j:choose>
           <j:when test="${empty(app.pluginManager.plugins) and empty(app.pluginManager.failedPlugins)}">

core/src/main/resources/hudson/PluginManager/sidepanel.jelly

@@ -0,0 +1,117 @@
+<!--
+The MIT License
+
+Copyright (c) 2022, Jenkins contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<!--
+  Sidepanel component for Plugins Manager
+-->
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+  <st:documentation>
+    <st:attribute name="page">
+      Adds the highlighted class to the current page item in the list
+    </st:attribute>
+  </st:documentation>
+
+  <div id="tasks" class="app-plugin-manager__sidebar">
+    <div class="jenkins-app-bar">
+      <div class="jenkins-app-bar__content">
+        <h1>${%Plugins}</h1>
+      </div>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./" class="task-link ${page == 'updates' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-download" />
+          </div>
+          <span class="task-icon-text">
+            ${%Updates}
+          </span>
+          <j:if test="${app.updateCenter.updates.size() != 0}">
+            <span class="task-icon-badge">
+              ${app.updateCenter.updates.size()}
+            </span>
+          </j:if>
+        </a>
+      </span>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./available" class="task-link ${page == 'available' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-shopping-bag" />
+          </div>
+          <span class="task-icon-text">
+            ${%Available plugins}
+          </span>
+        </a>
+      </span>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./installed" class="task-link ${page == 'installed' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-plugins" />
+          </div>
+          <span class="task-icon-text">
+            ${%Installed plugins}
+          </span>
+        </a>
+      </span>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./advanced" class="task-link ${page == 'advanced' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-settings" />
+          </div>
+          <span class="task-icon-text">
+            ${%Advanced settings}
+          </span>
+        </a>
+      </span>
+    </div>
+
+    <j:if test="${!app.updateCenter.jobs.isEmpty()}">
+      <hr />
+
+      <div class="task">
+        <span class="task-link-wrapper">
+          <a href="../updateCenter" class="task-link">
+            <div class="task-icon-link">
+              <l:icon src="symbol-list" />
+            </div>
+            <span class="task-icon-text">
+              ${%Update Center}
+            </span>
+          </a>
+        </span>
+      </div>
+    </j:if>
+  </div>
+</j:jelly>

core/src/main/resources/hudson/PluginManager/table.jelly

@@ -37,27 +37,29 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
   <l:layout title="${%Update Center} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
-    <l:app-bar title="${%Plugin Manager}" />
+    <l:side-panel>
+      <local:sidepanel xmlns:local="/hudson/PluginManager" page="updates" />
+    </l:side-panel>
 
-    <st:include page="sidepanel.jelly"/>
     <l:main-panel>
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
+        <div class="jenkins-app-bar__content">
+          <div class="app-plugin-manager__search">
+            <span class="app-plugin-manager__search__icon">
+              <l:icon src="symbol-search"/>
+            </span>
+            <input type="search"
+                   placeholder="Search plugin updates"
+                   id="filter-box"
+                   value="${request.getParameter('filter')}" />
+          </div>
+        </div>
+      </div>
+
       <st:adjunct includes="hudson.PluginManager._table"/>
 
       <form method="post" action="install">
         <j:set var="isUpdates" value="${attrs.page=='updates'}"/>
-        <local:tabBar xmlns:local="/hudson/PluginManager" page="${attrs.page}"/>
-
-        <div class="jenkins-form-item jenkins-search">
-          <input
-            class="jenkins-search__input"
-            type="search"
-            id="filter-box"
-            value="${request.getParameter('filter')}"
-            placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
-          <div class="jenkins-search__icon">
-            <l:icon src="symbol-search"/>
-          </div>
-        </div>
 
         <j:set var="cache" value="${it.createCache()}"/>
 

war/src/main/js/components/row-selection-controller/index.js

@@ -46,7 +46,7 @@ rowSelectionControllers.forEach(headerCheckbox => {
   function updateIcon() {
     headerCheckbox.classList.remove("jenkins-table__checkbox--all")
     headerCheckbox.classList.remove("jenkins-table__checkbox--indeterminate")
-    moreOptionsDropdown.classList.remove("jenkins-table__checkbox-dropdown--visible")
+    moreOptionsDropdown?.classList.remove("jenkins-table__checkbox-dropdown--visible")
 
     if (allCheckboxesSelected()) {
       headerCheckbox.classList.add("jenkins-table__checkbox--all")

war/src/main/js/plugin-manager-ui.js

@@ -12,7 +12,7 @@ function applyFilter(searchQuery) {
         var selectedPlugins = [];
 
         var filterInput = document.getElementById('filter-box');
-        filterInput.parentElement.classList.remove("jenkins-search--loading");
+        filterInput.parentElement.classList.remove("app-plugin-manager__search--loading");
 
         function clearOldResults() {
             if (!admin) {
@@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
     var filterInput = document.getElementById('filter-box');
     filterInput.addEventListener('input', function (e) {
         debouncedFilter(e);
-        filterInput.parentElement.classList.add("jenkins-search--loading");
+        filterInput.parentElement.classList.add("app-plugin-manager__search--loading");
     });
 
     filterInput.focus();

war/src/main/less/modules/app-bar.less

@@ -31,8 +31,41 @@
     border-bottom: 2px solid var(--panel-border-color);
   }
 
-  h1,
-  h2 {
+  &--sticky {
+    position: sticky;
+    top: 40px;
+    padding-top: 2rem;
+    margin-top: -2rem;
+    z-index: 2;
+
+    &::before, &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -2rem;
+      bottom: -2rem;
+      right: -2rem;
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    &::before {
+      background: var(--background);
+      mask-image: linear-gradient(black 70%, transparent);
+      opacity: 0.55;
+
+      @supports not (backdrop-filter: blur(15px)) {
+        opacity: 1;
+      }
+    }
+
+    &::after {
+      backdrop-filter: blur(15px);
+      mask-image: linear-gradient(black 50%, transparent);
+    }
+  }
+
+  h1, h2 {
     margin: 0;
     font-size: 1.6rem;
   }