From 3dcabc4b026750906a1d16a54b4296fe50ceb402 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 14 Dec 2021 08:27:21 +0000
Subject: [PATCH] Modernise the appearance of the plugin manager (#5916)

Co-authored-by: Joseph Petersen <josephp90@gmail.com>
Co-authored-by: Tim Jacomb <timjacomb1+github@gmail.com>
Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>
---
 .editorconfig                                 |   7 +
 .../resources/hudson/PluginManager/_table.css |  74 ----
 .../resources/hudson/PluginManager/_table.js  |   8 +-
 .../hudson/PluginManager/advanced.jelly       | 144 ++++---
 .../hudson/PluginManager/available.jelly      |  47 +--
 .../hudson/PluginManager/installed.jelly      | 385 ++++++++++--------
 .../resources/hudson/PluginManager/search.gif | Bin 591 -> 0 bytes
 .../hudson/PluginManager/table.jelly          | 217 ++++++----
 .../hudson/widgets/HistoryWidget/index.jelly  |   4 +-
 .../views/JenkinsHeader/headerContent.jelly   |   4 +-
 .../lib/hudson/newFromList/form.jelly         |   6 +-
 .../main/resources/lib/layout/app-bar.jelly   |  44 ++
 .../main/resources/lib/layout/layout.jelly    |   6 +-
 .../hudson/PluginManagerInstalledGUITest.java |   2 +-
 war/src/main/js/plugin-manager-ui.js          |  16 +-
 .../js/templates/plugin-manager/available.hbs |  17 +-
 war/src/main/less/abstracts/theme.less        |   1 +
 war/src/main/less/base-styles-v2.less         |   3 +
 war/src/main/less/base/spacing.less           |  45 ++
 war/src/main/less/base/style.less             | 122 +-----
 war/src/main/less/base/typography.less        |   9 +-
 war/src/main/less/base/visibility-utils.less  |   4 +
 war/src/main/less/modules/app-bar.less        |   6 +
 war/src/main/less/modules/buttons.less        |  11 +
 war/src/main/less/modules/form.less           | 105 +++++
 war/src/main/less/modules/page-header.less    |  15 +-
 war/src/main/less/modules/table.less          |  17 +
 war/src/main/less/pages/plugin-manager.less   | 100 +++++
 war/src/main/less/plugin-manager-ui.less      | 105 -----
 .../images/ionicons/close-circle-outline.svg  |   1 +
 .../ionicons/downgrade-circle-outline.svg     |   5 +
 .../images/ionicons/help-circle-outline.svg   |   1 +
 .../images/ionicons/search-outline.svg        |   1 +
 war/webpack.config.js                         |   1 -
 34 files changed, 845 insertions(+), 688 deletions(-)
 create mode 100644 .editorconfig
 delete mode 100644 core/src/main/resources/hudson/PluginManager/_table.css
 delete mode 100644 core/src/main/resources/hudson/PluginManager/search.gif
 create mode 100644 core/src/main/resources/lib/layout/app-bar.jelly
 create mode 100644 war/src/main/less/base/spacing.less
 create mode 100644 war/src/main/less/pages/plugin-manager.less
 delete mode 100644 war/src/main/less/plugin-manager-ui.less
 create mode 100644 war/src/main/resources/images/ionicons/close-circle-outline.svg
 create mode 100644 war/src/main/resources/images/ionicons/downgrade-circle-outline.svg
 create mode 100644 war/src/main/resources/images/ionicons/help-circle-outline.svg
 create mode 100644 war/src/main/resources/images/ionicons/search-outline.svg

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000..2e71b15330
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,7 @@
+root = true
+
+[*.{jelly, js, less, css, hbs}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/core/src/main/resources/hudson/PluginManager/_table.css b/core/src/main/resources/hudson/PluginManager/_table.css
deleted file mode 100644
index 5c3bfab450..0000000000
--- a/core/src/main/resources/hudson/PluginManager/_table.css
+++ /dev/null
@@ -1,74 +0,0 @@
-#filter-box {
-    padding-left: 35px;
-    width: 15em;
-}
-
-time {
-    white-space: nowrap;
-}
-
-#filter-container {
-    margin: 1em 0;
-    font-size: 1em;
-}
-.plugin-manager__categories {
-    margin-top: 0.25em;
-}
-
-.plugin-manager__search-input {
-    position: static;
-    padding: 0.25rem 0.1rem 0.25rem 2.5rem;
-    margin: 0;
-
-    font-size: 1rem;
-    line-height: 1.5;
-    color: #333;
-    color: var(--text-color);
-
-    border-radius: 4px;
-    border: 1px solid grey;
-    outline: none;
-}
-
-.plugin-manager__search {
-    position: relative;
-}
-
-.plugin-manager__icon-leading {
-    position: absolute;
-    left: -2px;
-    top: -3px;
-    font-size: 15px;
-    padding: 0.5rem;
-}
-
-.main-search__icon-leading {
-    left: 0;
-    pointer-events: none;
-}
-
-
-.hidden-by-default {
-}
-.hidden {
-    display: none;
-}
-
-#plugins tr.unavailable {
-  background-color: #f4f4f4;
-  background-color: var(--plugin-manager-unavailable-bg-color);
-}
-tr.unavailable span.unavailable-label {
-    display: inline-block;
-    border: 1px solid #666;
-    color: #333;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    padding: 0 0.5rem;
-    margin: 0.25rem 0.5rem;
-    text-decoration: none;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-}
diff --git a/core/src/main/resources/hudson/PluginManager/_table.js b/core/src/main/resources/hudson/PluginManager/_table.js
index 10af227861..d14b436a4a 100644
--- a/core/src/main/resources/hudson/PluginManager/_table.js
+++ b/core/src/main/resources/hudson/PluginManager/_table.js
@@ -16,13 +16,14 @@ Behaviour.specify("#filter-box", '_table', 0, function(e) {
         var anyVisible = false;
         for (var i=0; i<items.length; i++) {
             if ((filterParts.length < 1 || filter.length < 2) && items[i].hasClassName("hidden-by-default")) {
-                items[i].addClassName("hidden");
+                items[i].addClassName("jenkins-hidden");
                 continue;
             }
             var makeVisible = true;
 
             var pluginId = items[i].getAttribute('data-plugin-id');
             var content = (items[i].querySelector('.details').innerText + " " + pluginId).toLowerCase();
+
             for (var j = 0; j < filterParts.length; j++) {
                 var part = filterParts[j];
                 if (content.indexOf(part) < 0) {
@@ -30,11 +31,12 @@ Behaviour.specify("#filter-box", '_table', 0, function(e) {
                     break;
                 }
             }
+
             if (makeVisible) {
-                items[i].removeClassName("hidden");
+                items[i].classList.remove("jenkins-hidden");
                 anyVisible = true;
             } else {
-                items[i].addClassName("hidden");
+                items[i].classList.add("jenkins-hidden");
             }
         }
         var instructions = document.getElementById("hidden-by-default-instructions")
diff --git a/core/src/main/resources/hudson/PluginManager/advanced.jelly b/core/src/main/resources/hudson/PluginManager/advanced.jelly
index 1400e4e904..5155ca71ec 100644
--- a/core/src/main/resources/hudson/PluginManager/advanced.jelly
+++ b/core/src/main/resources/hudson/PluginManager/advanced.jelly
@@ -23,92 +23,90 @@ THE SOFTWARE.
 -->
 
 <!--
-  List of available new plugins
+  Advanced settings for plugin manager
 -->
 <?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 title="${%Update Center}" permission="${app.SYSTEM_READ}">
-        <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}" />
+    <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}"/>
+
         <st:include page="sidepanel.jelly"/>
+
         <l:main-panel>
             <local:tabBar page="advanced" xmlns:local="/hudson/PluginManager"/>
-            <div class="pane-frame">
-                <div id="pluginsAdv" class="pane" style="margin-top:0; border-top:none">
-                    <section>
-                        <h2>${%HTTP Proxy Configuration}</h2>
-                        <f:form method="post" action="proxyConfigure" name="proxyConfigure">
-                            <j:scope>
-                                <j:set var="instance" value="${app.proxy}"/>
-                                <j:set var="descriptor" value="${it.proxyDescriptor}"/>
-                                <st:include from="${descriptor}" page="${descriptor.configPage}"/>
-                            </j:scope>
-                          <l:isAdmin>
-                            <f:block>
-                                <f:submit/>
-                            </f:block>
-                          </l:isAdmin>
-                        </f:form>
-                    </section>
 
-                  <l:isAdmin>
-                    <section>
-                        <h2>${%Deploy Plugin}</h2>
-                        <f:form method="post" action="uploadPlugin" name="uploadPlugin" enctype="multipart/form-data">
-                            <div style="margin-bottom: 1em;">
-                                ${%deploytext}
-                            </div>
-                            <f:entry title="${%File}">
-                                <input type="file" name="name" class="setting-input" accept=".hpi,.jpi"/>
-                            </f:entry>
-                            <p>${%Or}</p>
-                            <f:entry title="${%URL}">
-                                <f:textbox name="pluginUrl"
-                                   class="setting-input validated" checkUrl="'checkPluginUrl?value='+this.value" />
-                            </f:entry>
-                            <f:submit value="${%Deploy}"/>
-                        </f:form>
-                    </section>
-                  </l:isAdmin>
+            <section class="jenkins-section">
+                <h2 class="jenkins-section__title">${%HTTP Proxy Configuration}</h2>
+                <f:form method="post" action="proxyConfigure" name="proxyConfigure">
+                    <j:scope>
+                        <j:set var="instance" value="${app.proxy}"/>
+                        <j:set var="descriptor" value="${it.proxyDescriptor}"/>
+                        <st:include from="${descriptor}" page="${descriptor.configPage}"/>
+                    </j:scope>
+                    <l:isAdmin>
+                        <f:block>
+                            <f:submit/>
+                        </f:block>
+                    </l:isAdmin>
+                </f:form>
+            </section>
 
-                    <section>
-                        <h2>${%Update Site}</h2>
-                        <f:form method="post" action="siteConfigure" name="siteConfigure">
-                            <f:entry title="${%URL}">
-                                <f:textbox name="site"
-                                           value="${app.updateCenter.getSite(app.updateCenter.ID_DEFAULT).url}"/>
-                            </f:entry>
-                          <l:isAdmin>
-                            <f:block>
-                                <f:submit/>
-                            </f:block>
-                          </l:isAdmin>
-                        </f:form>
-                        <j:set var="hasNonDefault" value="${false}"/>
+            <l:isAdmin>
+                <section class="jenkins-section">
+                    <h2 class="jenkins-section__title">${%Deploy Plugin}</h2>
+                    <f:form method="post" action="uploadPlugin" name="uploadPlugin" enctype="multipart/form-data">
+                        <div style="margin-bottom: 1em;">
+                            ${%deploytext}
+                        </div>
+                        <f:entry title="${%File}">
+                            <input type="file" name="name" class="setting-input" accept=".hpi,.jpi"/>
+                        </f:entry>
+                        <p>${%Or}</p>
+                        <f:entry title="${%URL}">
+                            <f:textbox name="pluginUrl"
+                                       class="setting-input validated" checkUrl="'checkPluginUrl?value='+this.value"/>
+                        </f:entry>
+                        <f:submit value="${%Deploy}"/>
+                    </f:form>
+                </section>
+            </l:isAdmin>
+
+            <section class="jenkins-section">
+                <h2 class="jenkins-section__title">${%Update Site}</h2>
+                <f:form method="post" action="siteConfigure" name="siteConfigure">
+                    <f:entry title="${%URL}">
+                        <f:textbox name="site"
+                                   value="${app.updateCenter.getSite(app.updateCenter.ID_DEFAULT).url}"/>
+                    </f:entry>
+                    <l:isAdmin>
+                        <f:block>
+                            <f:submit/>
+                        </f:block>
+                    </l:isAdmin>
+                </f:form>
+                <j:set var="hasNonDefault" value="${false}"/>
+                <j:forEach var="site" items="${app.updateCenter.sites}">
+                    <j:if test="${site.id != app.updateCenter.ID_DEFAULT}">
+                        <j:set var="hasNonDefault" value="${true}"/>
+                    </j:if>
+                </j:forEach>
+            </section>
+
+            <j:if test="${hasNonDefault}">
+                <section class="jenkins-section">
+                    <h2 class="jenkins-section__title">${%Other Sites}</h2>
+                    <ul>
                         <j:forEach var="site" items="${app.updateCenter.sites}">
                             <j:if test="${site.id != app.updateCenter.ID_DEFAULT}">
-                                <j:set var="hasNonDefault" value="${true}"/>
+                                <li>${site.url}</li>
                             </j:if>
                         </j:forEach>
-                    </section>
-
-                    <j:if test="${hasNonDefault}">
-                        <section>
-                            <h2 class="h4">${%Other Sites}</h2>
-                            <ul>
-                                <j:forEach var="site" items="${app.updateCenter.sites}">
-                                    <j:if test="${site.id != app.updateCenter.ID_DEFAULT}">
-                                        <li>${site.url}</li>
-                                    </j:if>
-                                </j:forEach>
-                            </ul>
-                        </section>
-                    </j:if>
-                </div>
-            </div>
-            <div align="right" style="margin-top:1em">
-                <st:include page="check.jelly"/>
-            </div>
+                    </ul>
+                </section>
+            </j:if>
         </l:main-panel>
     </l:layout>
 </j:jelly>
diff --git a/core/src/main/resources/hudson/PluginManager/available.jelly b/core/src/main/resources/hudson/PluginManager/available.jelly
index abcd52b911..e22f2f833c 100644
--- a/core/src/main/resources/hudson/PluginManager/available.jelly
+++ b/core/src/main/resources/hudson/PluginManager/available.jelly
@@ -23,47 +23,42 @@ THE SOFTWARE.
 -->
 
 <!--
-  List of available new plugins    
+  List of available new plugins
 -->
 <?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}" permission="${app.SYSTEM_READ}">
+  <l:layout title="${%Available Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
     <j:set var="page" value="available"/>
 
-    <st:include page="sidepanel.jelly"/>
-    <l:main-panel>
-      <script src="${resURL}/jsbundles/plugin-manager-ui.js" type="text/javascript"/>
-      <link rel="stylesheet" href="${resURL}/jsbundles/plugin-manager-ui.css" type="text/css"/>
-
-      <div id="filter-container">
-        <div class="plugin-manager__search">
-          <input
-              role="searchbox"
-              class="plugin-manager__search-input"
-              type="text"
-              id="filter-box"
-              value="${request.getParameter('filter')}"
-              placeholder="${%search}"/>
-          <span class="plugin-manager__icon-leading">
-            <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px"/>
-          </span>
+    <l:app-bar title="${%Plugin Manager}">
+      <div class="jenkins-search">
+        <input
+          class="jenkins-search__input"
+          type="search"
+          id="filter-box"
+          value="${request.getParameter('filter')}"
+          placeholder="${%Search}"/>
+        <div class="jenkins-search__icon">
+          <l:ionicon name="search-outline"/>
         </div>
       </div>
+    </l:app-bar>
+
+    <st:include page="sidepanel.jelly"/>
+
+    <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"/>
-        <table id="plugins" class="sortable pane bigtable stripped-odd"
+        <table id="plugins" class="jenkins-table sortable"
                data-hasAdmin="${h.hasPermission(app.ADMINISTER)}">
           <thead>
             <tr>
               <l:isAdmin>
-                <th initialSortDir="${isUpdates?null:'up'}"
-                    tooltip="${%Check to install the plugin}"
-                    width="32">${%Install}
-                </th>
+                <th width="32">${%Install}</th>
               </l:isAdmin>
-              <th initialSortDir="${isUpdates?'down':null}">${%Name}</th>
-              <th>${%Version}</th>
+              <th initialSortDir="down">${%Name}</th>
               <th>${%Released}</th>
               <j:if test="${isUpdates}">
                 <th>${%Installed}</th>
diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/core/src/main/resources/hudson/PluginManager/installed.jelly
index 7712da4c8d..bb6f9bf8ec 100644
--- a/core/src/main/resources/hudson/PluginManager/installed.jelly
+++ b/core/src/main/resources/hudson/PluginManager/installed.jelly
@@ -23,29 +23,31 @@ THE SOFTWARE.
 -->
 
 <!--
-  Config page
+  Installed plugins
 -->
 <?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:s="/lib/form">
-  <l:layout title="${%Update Center}" permission="${app.SYSTEM_READ}">
-    <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}" />
-    <st:include page="sidepanel.jelly"/>
-    <l:main-panel>
-        <st:adjunct includes="hudson.PluginManager._table"/>
-      <div id="filter-container">
-        <div class="plugin-manager__search">
-          <input
-              role="searchbox"
-              class="plugin-manager__search-input"
-              type="text"
-              id="filter-box"
-              value="${request.getParameter('filter')}"
-              placeholder="${filtered == 'true' ? '%search' : '%filter'}" />
-          <span class="plugin-manager__icon-leading">
-            <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" />
-          </span>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:s="/lib/form">
+  <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}">
+      <div class="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:ionicon name="search-outline"/>
         </div>
       </div>
+    </l:app-bar>
+
+    <st:include page="sidepanel.jelly"/>
+
+    <l:main-panel>
+      <st:adjunct includes="hudson.PluginManager._table"/>
 
       <j:if test="${app.updateCenter.isRestartRequiredForCompletion()}">
         <div class="alert alert-warning"><strong>${%Warning}</strong>: ${%requires.restart}</div>
@@ -64,171 +66,202 @@ THE SOFTWARE.
       />
 
       <local:tabBar page="installed" xmlns:local="/hudson/PluginManager" />
-        
-      <table id="plugins" class="pane bigtable sortable stripped-odd">
+
+      <table id="plugins" class="jenkins-table sortable">
         <j:choose>
           <j:when test="${empty(app.pluginManager.plugins) and empty(app.pluginManager.failedPlugins)}">
-            <tr>
-              <th>${%Installed plugins}</th>
-            </tr>
-            <tr>
-              <td align="center">${%No plugins installed.}</td>
-            </tr>
+            <thead>
+              <tr>
+                <th>${%Installed plugins}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td align="center">${%No plugins installed.}</td>
+              </tr>
+            </tbody>
           </j:when>
           <j:otherwise>
-            <tr>
-              <th width="32" tooltip="${%Uncheck to disable the plugin}">${%Enabled}</th>
-              <th initialSortDir="down">${%Name}</th>
-              <th width="1">${%Version}</th>
-              <l:isAdmin>
-                <th width="1">${%Previously installed version}</th>
-                <th width="1">${%Uninstall}</th>
-              </l:isAdmin>
-            </tr>
-            <j:forEach var="p" items="${app.pluginManager.plugins}">
-              <tr class="plugin ${p.hasMandatoryDependents()?'has-dependents':''} ${(p.hasMandatoryDependents() and !p.enabled)?'has-dependents-but-disabled':''} ${p.isDeleted()?'deleted':''} ${p.hasImpliedDependents() and p.enabled ? 'possibly-has-implied-dependents' : ''}" data-plugin-id="${p.shortName}" data-plugin-name="${p.displayName}">
-                <j:set var="state" value="${p.enabled?'true':null}"/>
-                <td class="center pane enable" data="${state}">
-                  <input type="checkbox" checked="${state}" onclick="flip(event)"
-                         url="plugin/${p.shortName}"
-                         disabled="${readOnlyMode ? 'true' : null}"
-                         original="${p.active?'true':'false'}"/>
-                </td>
-                <td class="pane details">
-                  <div class="plugin-name success-plugin">
-                    <a href="${p.url}" target="_blank" rel="noopener noreferrer" class="display-name">
-                      ${p.updateInfo.displayName?:p.displayName}
-                    </a>
-                  </div>
-                  <div class="excerpt">
-                    <j:set var="indexPage" value="${p.indexPage.toString()}" />
-                    <j:set var="excerpt" value="${app.updateCenter.getPlugin(p.shortName).excerpt}"/>
-                    <j:set var="description" value="${p.manifest.mainAttributes.getValue('Specification-Title')}"/>
-                    <j:choose>
-                      <j:when test="${!empty(indexPage)}"> <!-- src/main/resources/index.jelly, preferred -->
-                        <j:include uri="${indexPage}"/>
-                      </j:when>
-                      <j:when test="${excerpt != null}"> <!-- HTML from {excerpt} in wiki page -->
-                        <j:out value="${excerpt}"/>
-                      </j:when>
-                      <j:when test="${description != null}"> <!-- last resort, from POM -->
-                        ${description}
-                      </j:when>
-                      <j:otherwise>
-                        ${%No description available.}
-                      </j:otherwise>
-                    </j:choose>
-                  </div>
-                  <j:if test="${!p.getActiveWarnings().isEmpty()}">
-                    <div class="alert alert-danger">${%securityWarning}
-                      <ul>
-                        <j:forEach var="warning" items="${p.getActiveWarnings()}">
-                          <li><a href="${warning.url}" rel="noopener noreferrer" target="_blank">${warning.message}</a></li>
-                        </j:forEach>
-                      </ul>
-                    </div>
-                  </j:if>
-                  <j:if test="${p.isDeprecated()}">
-                    <div class="alert alert-warning">
-                      <!-- figure out a way how to present deprecations by multiple update sites instead of just the first one -->
-                      ${%deprecationWarning(p.getDeprecations().get(0).url)}
-                    </div>
-                  </j:if>
-                  <j:if test="${it.hasAdoptThisPluginLabel(p)}">
-                    <div class="alert alert-warning">
-                      ${%adoptThisPlugin}
-                    </div>
-                  </j:if>
-                </td>
-                <td class="pane" style="white-space:normal">
-                  <a href="plugin/${p.shortName}/thirdPartyLicenses">
-                    ${p.version}
-                  </a>
-                </td>
+            <thead>
+              <tr>
+                <th initialSortDir="down">${%Name}</th>
+                <th class="jenkins-table__cell--tight">${%Enabled}</th>
                 <l:isAdmin>
-                  <td class="pane">
-                    <j:if test="${p.downgradable}">
-                      <form method="post" action="${rootURL}/updateCenter/plugin/${p.shortName}/downgrade">
-                        <s:submit value="${%downgradeTo(p.backupVersion)}"/>
-                      </form>
-                    </j:if>
-                  </td>
-                  <j:choose>
-                      <j:when test="${p.hasMandatoryDependents()}">
-                            <j:set var="uninstallPossible" value="true"/>
-                      </j:when>
-                      <j:otherwise>
-                          <j:set var="uninstallPossible" value="false"/>
-                      </j:otherwise>
-                  </j:choose>
-                  <td class="pane uninstall" data="${uninstallPossible}">
-                    <j:choose>
-                      <j:when test="${p.isDeleted()}">
-                        <p>${%Uninstallation pending}</p>
-                      </j:when>
-                      <j:otherwise>
-                          <j:if test="${p.hasMandatoryDependents() or p.hasImpliedDependents()}">
-                            <div class="dependent-list">
-                              <j:forEach var="dependent" items="${p.mandatoryDependents}">
-                                <span data-plugin-id="${dependent}"></span>
-                              </j:forEach>
-                              <j:set var="impliedDependents" value="${p.impliedDependents}" />
-                              <j:choose>
-                                <j:when test="${impliedDependents.size() lt 15}">
-                                  <j:forEach var="dependent" items="${impliedDependents}">
-                                    <span data-plugin-id="${dependent}"></span>
-                                  </j:forEach>
-                                </j:when>
-                                <j:otherwise>
-                                  <p>${%detached-many-dependents(impliedDependents.size())}</p>
-                                </j:otherwise>
-                              </j:choose>
-                            </div>
-                          </j:if>
-                          <j:if test="${p.hasMandatoryDependencies()}">
-                            <div class="dependency-list">
-                              <j:forEach var="dependency" items="${p.mandatoryDependencies}">
-                                <span data-plugin-id="${dependency.shortName}"></span>
-                              </j:forEach>
-                            </div>
-                          </j:if>
-                          <form method="post" action="plugin/${p.shortName}/uninstall">
-                              <input class="uninstall" type="submit" value="${%Uninstall}"/>
-                          </form>
-                      </j:otherwise>
-                    </j:choose>
-                  </td>
+                  <th data-sort-disable="true"/>
                 </l:isAdmin>
               </tr>
-            </j:forEach>
-            <!-- failed ones -->
-            <j:forEach var="p" items="${it.failedPlugins}">
-              <tr class="hoverback">
-                <td class="center pane enable">
-                  <input type="checkbox" disabled="disabled"/>
-                </td>
-                <td class="pane">
-                  <j:if test="${p.pluginWrapper != null}">
-                    <div class="plugin-name failed-plugin with-plugin-wrapper">
-                      <a href="${p.pluginWrapper.url}" target="_blank" rel="noopener noreferrer" class="display-name">
-                        ${p.pluginWrapper.updateInfo.displayName?:p.pluginWrapper.displayName}
+            </thead>
+            <tbody>
+              <j:forEach var="p" items="${app.pluginManager.plugins}">
+                <tr
+                  class="plugin ${p.hasMandatoryDependents()?'has-dependents':''} ${(p.hasMandatoryDependents() and !p.enabled)?'has-dependents-but-disabled':''} ${p.isDeleted()?'deleted':''} ${p.hasImpliedDependents() and p.enabled ? 'possibly-has-implied-dependents' : ''}"
+                  data-plugin-id="${p.shortName}" data-plugin-name="${p.displayName}">
+                  <td class="details">
+                    <div class="plugin-name success-plugin">
+                      <a href="${p.url}" class="jenkins-table__link" target="_blank" rel="noopener noreferrer">
+                        ${p.updateInfo.displayName?:p.displayName}
+                        <span class="jenkins-label jenkins-label--tertiary" style="margin-left: 1ch;">
+                          <span class="jenkins-visually-hidden">${%Version}</span>
+                          ${p.version}
+                        </span>
                       </a>
                     </div>
-                  </j:if>
-                  <j:if test="${p.pluginWrapper == null}">
-                    <div class="plugin-name failed-plugin no-plugin-wrapper">
-                      ${p.name}
+                    <div class="jenkins-!-margin-top-1">
+                      <j:set var="indexPage" value="${p.indexPage.toString()}"/>
+                      <j:set var="excerpt"
+                             value="${app.updateCenter.getPlugin(p.shortName).excerpt}"/>
+                      <j:set var="description"
+                             value="${p.manifest.mainAttributes.getValue('Specification-Title')}"/>
+                      <j:choose>
+                        <j:when
+                          test="${!empty(indexPage)}"> <!-- src/main/resources/index.jelly, preferred -->
+                          <j:include uri="${indexPage}"/>
+                        </j:when>
+                        <j:when test="${excerpt != null}"> <!-- HTML from {excerpt} in wiki page -->
+                          <j:out value="${excerpt}"/>
+                        </j:when>
+                        <j:when test="${description != null}"> <!-- last resort, from POM -->
+                          ${description}
+                        </j:when>
+                        <j:otherwise>
+                          ${%No description available.}
+                        </j:otherwise>
+                      </j:choose>
                     </div>
-                  </j:if>
-                  <div class="alert alert-danger">
-                    <pre>${p.cause.message}</pre>
-                  </div>
-                </td>
-                <td class="pane" />
-                <td class="pane" />
-                <td class="pane" />
-              </tr>
-            </j:forEach>
+                    <j:if test="${!p.getActiveWarnings().isEmpty()}">
+                      <div class="alert alert-danger">${%securityWarning}
+                        <ul>
+                          <j:forEach var="warning" items="${p.getActiveWarnings()}">
+                            <li>
+                              <a href="${warning.url}" rel="noopener noreferrer"
+                                 target="_blank">${warning.message}
+                              </a>
+                            </li>
+                          </j:forEach>
+                        </ul>
+                      </div>
+                    </j:if>
+                    <j:if test="${p.isDeprecated()}">
+                      <div class="alert alert-warning">
+                        <!-- figure out a way how to present deprecations by multiple update sites instead of just the first one -->
+                        ${%deprecationWarning(p.getDeprecations().get(0).url)}
+                      </div>
+                    </j:if>
+                    <j:if test="${it.hasAdoptThisPluginLabel(p)}">
+                      <div class="alert alert-warning jenkins-!-margin-top-1 jenkins-!-margin-bottom-0">
+                        ${%adoptThisPlugin}
+                      </div>
+                    </j:if>
+                  </td>
+                  <j:set var="state" value="${p.enabled?'true':null}"/>
+                  <td class="jenkins-table__cell--tight enable" data="${state}">
+                    <div class="jenkins-table__cell__button-wrapper">
+                      <span class="jenkins-toggle-switch">
+                        <input type="checkbox" checked="${state}" onclick="flip(event)"
+                               url="plugin/${p.shortName}"
+                               disabled="${readOnlyMode ? 'true' : null}"
+                               original="${p.active?'true':'false'}"/>
+                        <label class="attach-previous"></label>
+                      </span>
+                    </div>
+                  </td>
+                  <l:isAdmin>
+                    <td class="jenkins-table__cell--tight">
+                      <div class="jenkins-table__cell__button-wrapper">
+                        <j:if test="${p.downgradable}">
+                          <form class="jenkins-buttons-row" method="post"
+                                action="${rootURL}/updateCenter/plugin/${p.shortName}/downgrade">
+                            <button class="jenkins-table__button  jenkins-table__button--orange" tooltip="${%downgradeTo(p.backupVersion)}">
+                              <l:ionicon name="downgrade-circle-outline"/>
+                              <span class="jenkins-!-margin-left-1"
+                                    style="font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50px;">
+                                ${p.backupVersion}
+                              </span>
+                            </button>
+                          </form>
+                        </j:if>
+                      </div>
+                    </td>
+                    <td class="jenkins-table__cell--tight uninstall">
+                      <div class="jenkins-table__cell__button-wrapper">
+                        <j:choose>
+                          <j:when test="${p.isDeleted()}">
+                            <p>${%Uninstallation pending}</p>
+                          </j:when>
+                          <j:otherwise>
+                            <j:if test="${p.hasMandatoryDependents() or p.hasImpliedDependents()}">
+                              <div class="dependent-list">
+                                <j:forEach var="dependent" items="${p.mandatoryDependents}">
+                                  <span data-plugin-id="${dependent}"></span>
+                                </j:forEach>
+                                <j:set var="impliedDependents" value="${p.impliedDependents}"/>
+                                <j:choose>
+                                  <j:when test="${impliedDependents.size() lt 15}">
+                                    <j:forEach var="dependent" items="${impliedDependents}">
+                                      <span data-plugin-id="${dependent}"></span>
+                                    </j:forEach>
+                                  </j:when>
+                                  <j:otherwise>
+                                    <p>
+                                      ${%detached-many-dependents(impliedDependents.size())}
+                                    </p>
+                                  </j:otherwise>
+                                </j:choose>
+                              </div>
+                            </j:if>
+                            <j:if test="${p.hasMandatoryDependencies()}">
+                              <div class="dependency-list">
+                                <j:forEach var="dependency" items="${p.mandatoryDependencies}">
+                                  <span data-plugin-id="${dependency.shortName}"></span>
+                                </j:forEach>
+                              </div>
+                            </j:if>
+                            <form class="jenkins-buttons-row" method="post" action="plugin/${p.shortName}/uninstall">
+                              <button class="jenkins-table__button jenkins-table__button--red uninstall" tooltip="${%Uninstall} ${p.updateInfo.displayName?:p.displayName}">
+                                <l:ionicon name="close-circle-outline"/>
+                              </button>
+                            </form>
+                          </j:otherwise>
+                        </j:choose>
+                      </div>
+                    </td>
+                  </l:isAdmin>
+                </tr>
+              </j:forEach>
+              <!-- failed ones -->
+              <j:forEach var="p" items="${it.failedPlugins}">
+                <tr class="hoverback">
+                  <td>
+                    <j:if test="${p.pluginWrapper != null}">
+                      <div class="plugin-name failed-plugin with-plugin-wrapper">
+                        <a href="${p.pluginWrapper.url}" target="_blank" rel="noopener noreferrer"
+                           class="display-name">
+                          ${p.pluginWrapper.updateInfo.displayName?:p.pluginWrapper.displayName}
+                        </a>
+                      </div>
+                    </j:if>
+                    <j:if test="${p.pluginWrapper == null}">
+                      <div class="plugin-name failed-plugin no-plugin-wrapper">
+                        ${p.name}
+                      </div>
+                    </j:if>
+                    <div class="alert alert-danger jenkins-!-margin-top-1 jenkins-!-margin-bottom-0">
+                      <pre>${p.cause.message}</pre>
+                    </div>
+                  </td>
+                  <td class="jenkins-table__cell--tight">
+                    <div class="jenkins-table__cell__button-wrapper">
+                      <span class="jenkins-toggle-switch">
+                        <input type="checkbox" disabled="disabled"/>
+                        <label class="attach-previous"></label>
+                      </span>
+                    </div>
+                  </td>
+                  <td/>
+                  <td/>
+                </tr>
+              </j:forEach>
+            </tbody>
           </j:otherwise>
         </j:choose>
       </table>
@@ -237,7 +270,7 @@ THE SOFTWARE.
         <form method="post" action="${rootURL}/safeRestart">
           ${%Changes will take effect when you restart Jenkins}
           <j:if test="${app.lifecycle.canRestart()}">
-            <s:submit value="${%Restart Once No Jobs Are Running}" />
+            <s:submit value="${%Restart Once No Jobs Are Running}"/>
           </j:if>
         </form>
       </div>
@@ -252,7 +285,7 @@ THE SOFTWARE.
           new Ajax.Request(btn.getAttribute('url')+"/make"+(btn.checked?"Enable":"Disable")+"d", {
             method: "POST",
             onFailure : function(req,o) {
-              $('needRestart').innerHTML = req.responseText;
+                $('needRestart').innerHTML = req.responseText;
             }
           });
 
diff --git a/core/src/main/resources/hudson/PluginManager/search.gif b/core/src/main/resources/hudson/PluginManager/search.gif
deleted file mode 100644
index ea1072ec3a4ccfb0550f6e37d07d29bae113e9b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 591
zcmV-V0<ir@Nk%w1VGsZi0QPwRh=_=bi;I+$l$n{Cot>SYo}Qthp{1pzsHmu|t*x-I
zu(7eRwY9alxVXQ+zk!~`hNQ-Zrpt+?$BU)Jh^EMouhWsK#FeVYkgLm(t<IIK$ds?l
zld;p3vC^8e)10!=p1RtmxX!4#&Y-&3slna8$kwF6;Ht#ou*&4K%H+M#=)TkFz`(%5
z!otJD!^g+R$jHdb%F4^j%gxQr&(F`p%-71%+RfD4(9qD*($dq@)6~?|)z#J0*W1(B
z-_+UO*x1<F+1c9K+SuCM+1lLQ-QC{a-ow}H#@Fn}*z3sH?8)2g%G>SI;P2kx;nU#o
z)8X*d;_=qw@Ydt;*yHio<nh|&^4jL|+~@P%=kwv=;o{=r<KyGx<mBe&=I7_<>FMd}
z>gwz3>+J08?d|RE?(XmJ@8Ih5;_LO}?DgdB_UP~T>G1dP@bK~R@$>WZ_4W1l_xJet
z`1$$y`uh6&`}_R-{Qdp?{{H^||NsC0{{R30000000000000000A^8LW004RbEC2ui
z01yBW000N9fO&#~V_kEDh=@5nJvTrxZ;694B@iPd86iAnl0Y^cS8QodAR#Z3G80E=
zqFE;qMq`OF6ir!aqbL<VIf*S4NmXc7Oe+;YJiZntD#24p89B0uKtvBINmElFH4Kt@
zE>0R79~wSJ1_X7IIx#>-GA#-U00NPcaMM}`3IPINiRQp@L(q*D0tpNt5F~Jn!!d5Y
d7|~*6K#m4*80P!ZMN5~D4jpLuMp95906R$&Xe0mt

diff --git a/core/src/main/resources/hudson/PluginManager/table.jelly b/core/src/main/resources/hudson/PluginManager/table.jelly
index 4938c258b2..9ae7349d42 100644
--- a/core/src/main/resources/hudson/PluginManager/table.jelly
+++ b/core/src/main/resources/hudson/PluginManager/table.jelly
@@ -36,75 +36,89 @@ THE SOFTWARE.
       If true, will hide all rows by default, and only the filter field will show them.
     </st:attribute>
   </st:documentation>
-  <l:layout title="${%Update Center}" permission="${app.SYSTEM_READ}">
+  <l:layout title="${%Update Center} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
+    <l:app-bar title="${%Plugin Manager}">
+      <div class="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:ionicon name="search-outline"/>
+        </div>
+      </div>
+    </l:app-bar>
+
     <st:include page="sidepanel.jelly"/>
     <l:main-panel>
       <st:adjunct includes="hudson.PluginManager._table"/>
 
-      <div id="filter-container">
-        <div class="plugin-manager__search">
-          <input
-              role="searchbox"
-              class="plugin-manager__search-input"
-              type="text"
-              id="filter-box"
-              value="${request.getParameter('filter')}"
-              placeholder="${filtered == 'true' ? '%search' : '%filter'}" />
-          <span class="plugin-manager__icon-leading">
-            <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" />
-          </span>
-        </div>
-      </div>
-
       <form method="post" action="install">
-        <j:set var="isUpdates" value="${attrs.page=='updates'}" />
-        <local:tabBar page="${attrs.page}" xmlns:local="/hudson/PluginManager" />
-        <table id="plugins" class="sortable pane bigtable stripped-odd">
-          <tr>
-            <l:isAdmin>
-              <th initialSortDir="${isUpdates?null:'up'}"
-                  tooltip="${%Check to install the plugin}"
-                  width="32">${%Install}</th>
-            </l:isAdmin>
-            <th initialSortDir="${isUpdates?'down':null}">${%Name}</th>
-            <th>${%Version}</th>
-            <th>${%Released}</th>
-            <j:if test="${isUpdates}"><th>${%Installed}</th></j:if>
-          </tr>
+        <j:set var="isUpdates" value="${attrs.page=='updates'}"/>
+        <local:tabBar xmlns:local="/hudson/PluginManager" page="${attrs.page}"/>
+        <table id="plugins" class="jenkins-table sortable">
+          <thead>
+            <tr>
+              <l:isAdmin>
+                <th initialSortDir="${isUpdates?null:'up'}"
+                    tooltip="${%Check to install the plugin}"
+                    width="32">${%Install}
+                </th>
+              </l:isAdmin>
+              <th initialSortDir="${isUpdates?'down':null}">${%Name}</th>
+              <th>${%Released}</th>
+              <j:if test="${isUpdates}">
+                <th>${%Installed}</th>
+              </j:if>
+            </tr>
+          </thead>
           <j:set var="unavailableList" value="${app.updateCenter.pluginsWithUnavailableUpdates}"/>
           <j:choose>
             <j:when test="${!empty(list) or (isUpdates and !empty(unavailableList))}">
               <j:set var="cache" value="${it.createCache()}"/>
               <j:if test="${filtered == 'true'}">
                 <tr id="hidden-by-default-instructions">
-                  <td class="pane" colspan="5" align="center" id="hidden-by-default-instructions-td" data-loaded-text="${%instructions}">
+                  <td colspan="5" align="center" id="hidden-by-default-instructions-td"
+                      data-loaded-text="${%instructions}">
                     ${%loading}
                   </td>
                 </tr>
               </j:if>
               <j:forEach var="p" items="${list}">
-                <j:set var="installJob" value="${isUpdates ? app.updateCenter.getJob(p) : null}" />
+                <j:set var="installJob" value="${isUpdates ? app.updateCenter.getJob(p) : null}"/>
                 <j:set var="installedOk"
-                       value="${installJob.status.success and installJob.plugin.version==p.version}" />
-                <tr class="${installJob!=null ? 'already-upgraded' : ''} plugin ${filtered == 'true' ? 'hidden hidden-by-default' : ''}" name="${p.displayName}">
+                       value="${installJob.status.success and installJob.plugin.version==p.version}"/>
+                <tr
+                  class="${installJob!=null ? 'already-upgraded' : ''} plugin ${filtered == 'true' ? 'hidden hidden-by-default' : ''}"
+                  name="${p.displayName}">
                   <l:isAdmin>
-                    <td class="pane" align="center" data="${isUpdates ? null : it.unscientific(p.popularity)}">
-                        <input type="checkbox" name="plugin.${p.name}.${p.sourceId}"
-                               checked="${installedOk ? 'checked' : null}"
-                               disabled="${installedOk ? 'disabled' : null}"
-                               data-compat-warning="${!p.isCompatible(cache)}" />
+                    <td align="center" data="${isUpdates ? null : it.unscientific(p.popularity)}">
+                      <input type="checkbox" name="plugin.${p.name}.${p.sourceId}"
+                             checked="${installedOk ? 'checked' : null}"
+                             disabled="${installedOk ? 'disabled' : null}"
+                             data-compat-warning="${!p.isCompatible(cache)}"/>
                     </td>
                   </l:isAdmin>
-                  <td class="pane details" data="${h.xmlEscape(p.displayName)}" data-id="${h.xmlEscape(p.name+':'+p.version)}">
+                  <td class="details"
+                      data="${h.xmlEscape(p.displayName)}"
+                      data-id="${h.xmlEscape(p.name+':'+p.version)}">
                     <div>
-                      <a href="${p.wiki}" rel="noopener noreferrer" target="_blank"><st:out value="${p.displayName}"/></a>
+                      <a href="${p.wiki}" class="jenkins-table__link" rel="noopener noreferrer" target="_blank">
+                        <st:out value="${p.displayName}"/>
+                        <span class="jenkins-label jenkins-label--tertiary" style="margin-left: 1ch;">
+                          <span class="jenkins-visually-hidden">${%Version}</span>
+                          ${p.version}
+                        </span>
+                      </a>
                     </div>
                     <j:if test="${!p.categories.isEmpty()}">
-                      <div class="plugin-manager__categories">
+                      <div class="app-plugin-manager__categories">
                         <j:forEach var="label" items="${p.categories}">
                           <j:if test="${!it.isMetaLabel(label)}">
                             <a href="?filter=${app.updateCenter.getCategoryDisplayName(label)}"
-                               class="plugin-manager__category-label">
+                               class="jenkins-table__link jenkins-table__badge">
                               ${app.updateCenter.getCategoryDisplayName(label)}
                             </a>
                           </j:if>
@@ -112,7 +126,9 @@ THE SOFTWARE.
                       </div>
                     </j:if>
                     <j:if test="${p.excerpt!=null}">
-                      <div class="excerpt"><j:out value="${p.excerpt}" /></div>
+                      <div>
+                        <j:out value="${p.excerpt}"/>
+                      </div>
                     </j:if>
                     <j:if test="${!p.isCompatibleWithInstalledVersion()}">
                       <div class="alert alert-danger">${%compatWarning}
@@ -120,7 +136,12 @@ THE SOFTWARE.
                           <br/>${%parentCompatWarning}
                           <ul>
                             <j:forEach var="i" items="${p.getIncompatibleParentPlugins()}">
-                              <li><a href="${i.wiki}"><st:out value="${i.displayName} (${i.installed.version})"/></a></li>
+                              <li>
+                                <a href="${i.wiki}">
+                                  <st:out
+                                    value="${i.displayName} (${i.installed.version})"/>
+                                </a>
+                              </li>
                             </j:forEach>
                           </ul>
                         </j:if>
@@ -133,29 +154,45 @@ THE SOFTWARE.
                       <div class="alert alert-danger">${%javaWarning(p.minimumJavaVersion)}</div>
                     </j:if>
                     <j:if test="${p.fixesSecurityVulnerabilities()}">
-                      <div class="alert alert-warning">${%Applying this update will address security vulnerabilities in the currently installed version.}</div>
+                      <div class="alert alert-warning">
+                        ${%Applying this update will address security vulnerabilities in the currently installed version.}
+                      </div>
                     </j:if>
                     <j:if test="${!p.isNeededDependenciesCompatibleWithInstalledVersion(cache)}">
                       <div class="alert alert-danger">${%depCompatWarning}
                         <br/>${%parentDepCompatWarning}
                         <ul>
-                          <j:forEach var="d" items="${p.getDependenciesIncompatibleWithInstalledVersion(cache)}">
-                              <li><a href="${d.wiki}"><st:out value="${d.displayName} (${d.installed.version})"/></a></li>
+                          <j:forEach var="d"
+                                     items="${p.getDependenciesIncompatibleWithInstalledVersion(cache)}">
+                            <li>
+                              <a href="${d.wiki}">
+                                <st:out
+                                  value="${d.displayName} (${d.installed.version})"/>
+                              </a>
+                            </li>
                           </j:forEach>
                         </ul>
                       </div>
                     </j:if>
                     <j:if test="${p.isNeededDependenciesForNewerJenkins(cache)}">
-                      <div class="alert alert-danger">${%depCoreWarning(p.getNeededDependenciesRequiredCore().toString())}</div>
+                      <div class="alert alert-danger">
+                        ${%depCoreWarning(p.getNeededDependenciesRequiredCore().toString())}
+                      </div>
                     </j:if>
                     <j:if test="${p.isNeededDependenciesForNewerJava()}">
-                      <div class="alert alert-danger">${%depJavaWarning(p.getNeededDependenciesMinimumJavaVersion().toString())}</div>
+                      <div class="alert alert-danger">
+                        ${%depJavaWarning(p.getNeededDependenciesMinimumJavaVersion().toString())}
+                      </div>
                     </j:if>
                     <j:if test="${p.hasWarnings()}">
                       <div class="alert alert-danger">${%securityWarning}
                         <ul>
                           <j:forEach var="warning" items="${p.getWarnings()}">
-                            <li><a href="${warning.url}" rel="noopener noreferrer" target="_blank">${warning.message}</a></li>
+                            <li>
+                              <a href="${warning.url}" rel="noopener noreferrer"
+                                 target="_blank">${warning.message}
+                              </a>
+                            </li>
                           </j:forEach>
                         </ul>
                       </div>
@@ -176,23 +213,26 @@ THE SOFTWARE.
                       </div>
                     </j:if>
                   </td>
-                  <td class="pane"><st:out value="${p.version}" /></td>
-                  <td class="pane" data="${p.releaseTimestamp.time}">
+                  <td data="${p.releaseTimestamp.time}" class="jenkins-table__cell--no-wrap">
                     <j:if test="${p.releaseTimestamp != null}">
-                      <time datetime="${h.iso8601DateTime(p.releaseTimestamp)}" tooltip="${h.localDate(p.releaseTimestamp)}">
+                      <time datetime="${h.iso8601DateTime(p.releaseTimestamp)}"
+                            tooltip="${h.localDate(p.releaseTimestamp)}">
                         ${%ago(h.getTimeSpanString(p.releaseTimestamp))}
                       </time>
                     </j:if>
                   </td>
                   <j:if test="${isUpdates}">
-                    <td class="pane">
-                      <j:choose><j:when test="${p.installed.active}">
-                        <st:out value="${p.installed.version}" />
-                      </j:when><j:otherwise>
-                        <span title="${%Inactive}">
-                          (<st:out value="${p.installed.version}" />)
-                        </span>
-                      </j:otherwise></j:choose>
+                    <td>
+                      <j:choose>
+                        <j:when test="${p.installed.active}">
+                          <st:out value="${p.installed.version}"/>
+                        </j:when>
+                        <j:otherwise>
+                          <span title="${%Inactive}">
+                            (<st:out value="${p.installed.version}"/>)
+                          </span>
+                        </j:otherwise>
+                      </j:choose>
                     </td>
                   </j:if>
                 </tr>
@@ -200,22 +240,31 @@ THE SOFTWARE.
               <j:if test="${isUpdates}">
                 <!-- TODO this might be nicer by going through the root list element and populating it in index.jelly -->
                 <j:forEach var="p" items="${unavailableList}">
-                  <j:if test="${!list.contains(p)}"><!-- only show entries for plugins not already in the real updates list -->
+                  <j:if
+                    test="${!list.contains(p)}"><!-- only show entries for plugins not already in the real updates list -->
                     <tr class="unavailable">
                       <l:isAdmin>
                         <td><!-- install --></td>
                       </l:isAdmin>
-                      <td class="pane" data="${h.xmlEscape(p.displayName)}" data-id="${h.xmlEscape(p.name+':'+p.version)}">
+                      <td class="details"
+                          data="${h.xmlEscape(p.displayName)}"
+                          data-id="${h.xmlEscape(p.name+':'+p.version)}">
                         <div>
-                          <a href="${p.wiki}" rel="noopener noreferrer" target="_blank"><st:out value="${p.displayName}"/></a>
+                          <a href="${p.wiki}" rel="noopener noreferrer" target="_blank">
+                            <st:out value="${p.displayName}"/>
+                            <span class="jenkins-label jenkins-label--tertiary" style="margin-left: 1ch;">
+                              <span class="jenkins-visually-hidden">${%Version}</span>
+                              ${p.latest}
+                            </span>
+                          </a>
                           <span class="unavailable-label">${%unavailable}</span>
                         </div>
                         <j:if test="${!p.categories.isEmpty()}">
-                          <div class="plugin-manager__categories">
+                          <div class="app-plugin-manager__categories">
                             <j:forEach var="label" items="${p.categories}">
                               <j:if test="${!it.isMetaLabel(label)}">
                                 <a href="?filter=${app.updateCenter.getCategoryDisplayName(label)}"
-                                   class="plugin-manager__category-label">
+                                   class="jenkins-table__link jenkins-table__badge">
                                   ${app.updateCenter.getCategoryDisplayName(label)}
                                 </a>
                               </j:if>
@@ -223,7 +272,9 @@ THE SOFTWARE.
                           </div>
                         </j:if>
                         <j:if test="${p.excerpt!=null}">
-                          <div class="excerpt"><j:out value="${p.excerpt}" /></div>
+                          <div>
+                            <j:out value="${p.excerpt}"/>
+                          </div>
                         </j:if>
                         <j:if test="${it.hasLatestVersionNewerThanOffered(p)}">
                           <div class="alert alert-info">
@@ -231,16 +282,18 @@ THE SOFTWARE.
                           </div>
                         </j:if>
                       </td>
-                      <td>${p.latest}</td>
                       <td><!-- timestamp --></td>
-                      <td class="pane">
-                        <j:choose><j:when test="${p.installed.active}">
-                          <st:out value="${p.installed.version}" />
-                        </j:when><j:otherwise>
-                          <span title="${%Inactive}">
-                            (<st:out value="${p.installed.version}" />)
-                          </span>
-                        </j:otherwise></j:choose>
+                      <td>
+                        <j:choose>
+                          <j:when test="${p.installed.active}">
+                            <st:out value="${p.installed.version}"/>
+                          </j:when>
+                          <j:otherwise>
+                            <span title="${%Inactive}">
+                              (<st:out value="${p.installed.version}"/>)
+                            </span>
+                          </j:otherwise>
+                        </j:choose>
                       </td>
                     </tr>
                   </j:if>
@@ -259,21 +312,21 @@ THE SOFTWARE.
           </j:choose>
         </table>
 
-        <div id="bottom-sticker" >
+        <div id="bottom-sticker">
           <div class="bottom-sticker-inner">
             <l:isAdmin>
               <j:if test="${!empty(list)}">
                 <j:if test="${!isUpdates}">
-                  <f:submit value="${%Install without restart}" name="dynamicLoad" />
+                  <f:submit value="${%Install without restart}" name="dynamicLoad"/>
                   <span style="margin-left:2em;"></span>
                 </j:if>
-                <f:submit value="${%Download now and install after restart}" />
+                <f:submit value="${%Download now and install after restart}"/>
               </j:if>
             </l:isAdmin>
             <st:include page="check.jelly"/>
-            </div>
           </div>
-        <d:invokeBody />
+        </div>
+        <d:invokeBody/>
       </form>
     </l:main-panel>
     <div class="grey-anime-preload" style="display:none">
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
index edac188c62..536c3947ff 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
@@ -77,7 +77,9 @@ THE SOFTWARE.
         <td>
           <div class="jenkins-search">
             <input type="search" placeholder="${%find}" class="jenkins-search__input" />
-            <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+            <div class="jenkins-search__icon">
+              <l:ionicon name="search-outline" />
+            </div>
           </div>
           <div id="no-builds" class="jenkins-pane__information" style="${page.runs.isEmpty() ? '' : 'display: none;'}">
             ${%No builds}
diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
index 6018c3b7f5..d18b310528 100644
--- a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
+++ b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
@@ -27,10 +27,10 @@
                     <input name="q" placeholder="${searchPlaceholder}" id="search-box" class="main-search__input" value="${request.getParameter('q')}" role="searchbox" />
 
                     <span class="main-search__icon-leading">
-                        <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" />
+                        <l:ionicon name="search-outline"/>
                     </span>
                     <a href="${searchHelpUrl}" class="main-search__icon-trailing">
-                        <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_help_outline_24px" />
+                        <l:ionicon name="help-circle-outline"/>
                     </a>
 
                     <div id="search-box-completion" />
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 7996750eca..5a947d0322 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -93,7 +93,9 @@ THE SOFTWARE.
               <j:set var="descriptor" value="${it.descriptor}" />
               <div class="jenkins-search">
                 <s:textbox placeholder="${%Type for suggestions}" clazz="jenkins-search__input"  name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
-                <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+                <div class="jenkins-search__icon">
+                  <l:ionicon name="search-outline" />
+                </div>
               </div>
             </div>
           </div>
@@ -113,4 +115,4 @@ THE SOFTWARE.
 
     <st:adjunct includes="lib.hudson.newFromList.validation" />
   </s:form>
-</j:jelly>
\ No newline at end of file
+</j:jelly>
diff --git a/core/src/main/resources/lib/layout/app-bar.jelly b/core/src/main/resources/lib/layout/app-bar.jelly
new file mode 100644
index 0000000000..773740a904
--- /dev/null
+++ b/core/src/main/resources/lib/layout/app-bar.jelly
@@ -0,0 +1,44 @@
+<!--
+The MIT License
+
+Copyright (c) 2021, 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.
+-->
+
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
+  <st:documentation>
+    <st:attribute name="title" use="required">
+      The title for the application bar
+    </st:attribute>
+    Generates a row containing the page title and an optional set of controls
+  </st:documentation>
+
+  <j:if test="${mode=='app-bar'}">
+    <div class="jenkins-app-bar">
+      <div class="jenkins-app-bar__content">
+        <h1>${title}</h1>
+      </div>
+      <div class="jenkins-app-bar__controls">
+        <d:invokeBody/>
+      </div>
+    </div>
+  </j:if>
+</j:jelly>
diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
index 3f909358ec..d71d1145e7 100644
--- a/core/src/main/resources/lib/layout/layout.jelly
+++ b/core/src/main/resources/lib/layout/layout.jelly
@@ -220,8 +220,10 @@ THE SOFTWARE.
         </div>
       </j:if>
       <div id="main-panel">
-         <j:set var="mode" value="main-panel" />
-         <d:invokeBody/>
+        <j:set var="mode" value="app-bar" />
+        <d:invokeBody/>
+        <j:set var="mode" value="main-panel" />
+        <d:invokeBody/>
       </div>
     </div>
 
diff --git a/test/src/test/java/hudson/PluginManagerInstalledGUITest.java b/test/src/test/java/hudson/PluginManagerInstalledGUITest.java
index fc97aa3e71..6c8bdb7a48 100644
--- a/test/src/test/java/hudson/PluginManagerInstalledGUITest.java
+++ b/test/src/test/java/hudson/PluginManagerInstalledGUITest.java
@@ -191,7 +191,7 @@ public class PluginManagerInstalledGUITest {
         }
         
         private HtmlInput getEnableWidget() {
-            HtmlElement input = pluginRow.getCells().get(0).getElementsByTagName("input").get(0);
+            HtmlElement input = pluginRow.getCells().get(1).getElementsByTagName("input").get(0);
             return (HtmlInput) input;
         }
 
diff --git a/war/src/main/js/plugin-manager-ui.js b/war/src/main/js/plugin-manager-ui.js
index 6e96f3833b..a3f5e888f1 100644
--- a/war/src/main/js/plugin-manager-ui.js
+++ b/war/src/main/js/plugin-manager-ui.js
@@ -4,13 +4,17 @@ import requestAnimationFrame from 'raf';
 import pluginManagerAvailable from './templates/plugin-manager/available.hbs'
 import pluginManager from './api/pluginManager';
 
+var filterInput = document.getElementById('filter-box');
+
 function applyFilter(searchQuery) {
     // debounce reduces number of server side calls while typing
     pluginManager.availablePluginsSearch(searchQuery.toLowerCase().trim(), 50, function (plugins) {
         var pluginsTable = document.getElementById('plugins');
         var tbody = pluginsTable.querySelector('tbody');
-        var selectedPlugins = []
         var admin = pluginsTable.dataset.hasadmin === 'true';
+        var selectedPlugins = [];
+
+        filterInput.parentElement.classList.remove("jenkins-search--loading");
 
         function clearOldResults() {
             if (!admin) {
@@ -22,7 +26,7 @@ function applyFilter(searchQuery) {
                     rows.forEach(function (row) {
                         var input = row.querySelector('input');
                         if (input.checked === true) {
-                            var pluginName = input.name.split('.')[1]
+                            var pluginName = input.name.split('.')[1];
                             selectedPlugins.push(pluginName)
                         } else {
                             row.remove();
@@ -54,14 +58,14 @@ var handleFilter = function (e) {
 var debouncedFilter = debounce(handleFilter, 150);
 
 document.addEventListener("DOMContentLoaded", function () {
-    var filterInput = document.getElementById('filter-box');
-
-    filterInput.addEventListener('input', debouncedFilter);
+    filterInput.addEventListener('input', function (e) {
+        debouncedFilter(e);
+        filterInput.parentElement.classList.add("jenkins-search--loading");
+    });
 
     applyFilter(filterInput.value);
 
     setTimeout(function () {
         layoutUpdateCallback.call();
     }, 350)
-
 });
diff --git a/war/src/main/js/templates/plugin-manager/available.hbs b/war/src/main/js/templates/plugin-manager/available.hbs
index 8012a9dd6e..d72c778145 100644
--- a/war/src/main/js/templates/plugin-manager/available.hbs
+++ b/war/src/main/js/templates/plugin-manager/available.hbs
@@ -1,20 +1,22 @@
 {{#each plugins}}
     <tr data-plugin-id="{{ this.name }}" data-plugin-version="{{ this.version }}">
         {{#if @root/admin }}
-            <td class="pane">
+            <td align="center">
                 <input type="checkbox" name="plugin.{{ this.name }}.{{ this.sourceId }}">
             </td>
         {{/if}}
-        <td class="pane">
+        <td>
             <div>
-                <a href="{{ this.wiki }}" target="_blank" rel="noopener noreferrer">
+                <a href="{{ this.wiki }}" class="jenkins-table__link" target="_blank" rel="noopener noreferrer">
                     {{ this.displayName }}
+                    <span class="jenkins-visually-hidden">Version</span>
+                    <span class="jenkins-label jenkins-label--tertiary" style="margin-left: 1ch;">{{ this.version }}</span>
                 </a>
             </div>
             {{#if this.categories }}
-                <div class="plugin-manager__categories">
+                <div class="app-plugin-manager__categories">
                     {{#each this.categories }}
-                        <a href="?filter={{ this }}" class="plugin-manager__category-label">
+                        <a href="?filter={{ this }}" class="jenkins-table__link jenkins-table__badge">
                         {{ this }}
                         </a>
                     {{/each}}
@@ -65,10 +67,7 @@
                 </div>
             {{/if}}
         </td>
-        <td class="pane">
-            {{ this.version }}
-        </td>
-        <td class="pane">
+        <td width="25%">
             {{#if this.releaseTimestamp }}
                 <time datetime="{{ this.releaseTimestamp.iso8601 }}">
                     {{ this.releaseTimestamp.displayValue }}
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
index eb4985ae96..5874db5cfa 100644
--- a/war/src/main/less/abstracts/theme.less
+++ b/war/src/main/less/abstracts/theme.less
@@ -323,5 +323,6 @@
 
   // Colors
   --green: #1c9146;
+  --orange: #fe820a;
   --red: #df001c;
 }
diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
index 46af9a5a2c..9e9421daa2 100644
--- a/war/src/main/less/base-styles-v2.less
+++ b/war/src/main/less/base-styles-v2.less
@@ -20,6 +20,7 @@ html {
 @import './abstracts/mixins';
 
 @import './base/layout-commons';
+@import './base/spacing';
 @import './base/style';
 @import './base/typography';
 @import './base/visibility-utils';
@@ -44,3 +45,5 @@ html {
 @import './modules/table';
 @import './modules/tabs';
 @import './modules/tooltips';
+
+@import './pages/plugin-manager';
diff --git a/war/src/main/less/base/spacing.less b/war/src/main/less/base/spacing.less
new file mode 100644
index 0000000000..bfee6e233e
--- /dev/null
+++ b/war/src/main/less/base/spacing.less
@@ -0,0 +1,45 @@
+@unit: 0.4rem;
+
+each(range(0, 5), {
+  .jenkins-\!-margin-@{value} {
+    margin: @value * @unit !important;
+  }
+
+  .jenkins-\!-margin-top-@{value} {
+    margin-top: @value * @unit !important;
+  }
+
+  .jenkins-\!-margin-left-@{value} {
+    margin-left: @value * @unit !important;
+  }
+
+  .jenkins-\!-margin-bottom-@{value} {
+    margin-bottom: @value * @unit !important;
+  }
+
+  .jenkins-\!-margin-right-@{value} {
+    margin-right: @value * @unit !important;
+  }
+});
+
+each(range(0, 5), {
+  .jenkins-\!-padding-@{value} {
+    padding: @value * @unit !important;
+  }
+
+  .jenkins-\!-padding-top-@{value} {
+    padding-top: @value * @unit !important;
+  }
+
+  .jenkins-\!-padding-left-@{value} {
+    padding-left: @value * @unit !important;
+  }
+
+  .jenkins-\!-padding-bottom-@{value} {
+    padding-bottom: @value * @unit !important;
+  }
+
+  .jenkins-\!-padding-right-@{value} {
+    padding-right: @value * @unit !important;
+  }
+});
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index bcd8ef6706..5fe70bcb53 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -1008,103 +1008,6 @@ table.fingerprint-in-build td {
   padding-right: 1em;
 }
 
-
-
-
-/* ========================= plugin manager ========================= */
-#plugins {
-  margin-top: 0;
-  border-top: none;
-}
-
-#plugins.bigtable {
-  // Add this fallback because tables with hidden rows will
-  // not have a bottom border
-  border-bottom: 1px solid var(--bigtable-row-border-color);
-}
-
-#pluginsAdv tr:hover {
-  background-color: inherit;
-}
-
-#plugins tr.already-upgraded {
-  background-color: var(--plugin-manager-bg-color-already-upgraded);
-}
-
-#plugins tr.all-dependents-disabled .enable input {
-  pointer-events: auto;
-  opacity: 1;
-  visibility: visible;
-}
-
-#plugins tr.has-dependents input,
-#plugins tr.has-disabled-dependency .enable input {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-#plugins tr.has-dependents-but-disabled .enable input {
-  pointer-events: auto;
-  opacity: 1;
-  visibility: visible;
-}
-
-#plugins tr.has-disabled-dependency .enable input {
-  opacity: 0.4;
-}
-
-#plugins tr.deleted input {
-  visibility: hidden !important;
-}
-
-#plugins .dependent-list,
-#plugins .dependency-list {
-  display: none;
-}
-
-#plugins .enable-state-info,
-#plugins .uninstall-state-info {
-    padding: 5px 20px;
-    max-width: 70%;
-    border: solid 1px var(--warning);
-    border-radius: 3px;
-    text-align: center;
-}
-
-#plugins .enable-state-info {
-    float: left;
-}
-
-#plugins .uninstall-state-info {
-    float: right;
-}
-
-#plugins .plugin-dependency-info .title,
-#plugins .plugin-dependency-info .subtitle {
-    opacity: 0.7;
-}
-
-#plugins .plugin-dependency-info .title {
-    margin-bottom: 5px;
-    font-size: larger;
-    font-weight: bolder;
-}
-
-#plugins .plugin-dependency-info span {
-    margin: 5px 5px 0 0;
-    background-color: var(--primary);
-    display: inline-block;
-    padding: 0.2em 0.6em 0.3em;
-    font-size: var(--font-size-xs);
-    font-weight: 700;
-    line-height: 1;
-    color: var(--white);
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: 0.25em;
-}
-
 /* ========================= repeatable elements ========================= */
 
 .repeated-chunk {
@@ -1238,19 +1141,6 @@ textarea.rich-editor {
   }
 }
 
-/* ========================= plugin update center ========================= */
-
-#plugins .excerpt {
-    white-space: normal;
-    margin-top: 0.5em;
-    padding-left: 2em;
-    color: var(--text-color-secondary);
-}
-
-#plugins .excerpt a {
-  text-decoration: underline;
-}
-
 /*
  * TODO(andipabst): Not used after https://github.com/jenkinsci/jenkins/pull/4299,
  *                  remove once there are no more dependencies
@@ -1269,16 +1159,6 @@ textarea.rich-editor {
     color: #f00;
 }
 
-#pluginsAdv {
-  padding: 0.5rem;
-}
-
-#pluginsAdv section {
-  &:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-}
-
 /* ========================= progress bar ========================= */
 
 table.progress-bar {
@@ -1538,7 +1418,7 @@ select.select-ajax-pending {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
-    border-radius: 4px;
+    border-radius: var(--form-input-border-radius);
 }
 
 .alert a {
diff --git a/war/src/main/less/base/typography.less b/war/src/main/less/base/typography.less
index a5a9aa6d76..9333048229 100644
--- a/war/src/main/less/base/typography.less
+++ b/war/src/main/less/base/typography.less
@@ -90,4 +90,11 @@ h6,
   line-height: 1.66;
   margin-top: 0;
   margin-bottom: 2rem;
-}
\ No newline at end of file
+}
+
+.jenkins-label {
+  &--tertiary {
+    color: var(--text-color-secondary);
+    opacity: 0.7;
+  }
+}
diff --git a/war/src/main/less/base/visibility-utils.less b/war/src/main/less/base/visibility-utils.less
index 5fe7862799..164743f7ec 100644
--- a/war/src/main/less/base/visibility-utils.less
+++ b/war/src/main/less/base/visibility-utils.less
@@ -142,6 +142,10 @@
   }
 }
 
+.jenkins-hidden {
+  display: none;
+}
+
 /// Hide an element visually, but have it available for screen readers
 .jenkins-visually-hidden {
   position: absolute;
diff --git a/war/src/main/less/modules/app-bar.less b/war/src/main/less/modules/app-bar.less
index e8b6c34429..3469d31e25 100644
--- a/war/src/main/less/modules/app-bar.less
+++ b/war/src/main/less/modules/app-bar.less
@@ -9,6 +9,7 @@
     justify-content: center;
     flex-direction: column;
     width: 100%;
+    min-height: 36px;
   }
 
   .jenkins-app-bar__controls {
@@ -16,6 +17,11 @@
     align-items: center;
     justify-content: center;
     margin-left: 2rem;
+    min-height: 36px;
+
+    .jenkins-search {
+      min-width: 260px;
+    }
   }
 
   &--border {
diff --git a/war/src/main/less/modules/buttons.less b/war/src/main/less/modules/buttons.less
index 4102872089..116b27520b 100644
--- a/war/src/main/less/modules/buttons.less
+++ b/war/src/main/less/modules/buttons.less
@@ -307,11 +307,17 @@ a.yui-button.icon-button.large-button {
 
 .jenkins-buttons-row {
   display: flex;
+  align-items: center;
   
   .yui-button {
     margin-left: 0!important;
     margin-right: 0.5rem!important;
   }
+
+  .jenkins-table__button {
+    margin-left: 0!important;
+    margin-right: 1.5rem!important;
+  }
   
   &--invert {
     justify-content: flex-end;
@@ -320,5 +326,10 @@ a.yui-button.icon-button.large-button {
       margin-left: 0.5rem!important;
       margin-right: 0!important;
     }
+
+    .jenkins-table__button {
+      margin-left: 1.5rem!important;
+      margin-right: 0!important;
+    }
   }  
 }
\ No newline at end of file
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index 171908a2ae..cf296979bf 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -356,3 +356,108 @@
     }
   }
 }
+
+.jenkins-toggle-switch {
+  position: relative;
+  display: inline-block;
+}
+
+.jenkins-toggle-switch input {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0;
+  padding: 0;
+
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+
+  &:disabled {
+    & + label {
+      cursor: default;
+
+      &::before {
+        opacity: 0.25 !important;
+        background-color: var(--input-border) !important;
+        box-shadow: none !important;
+      }
+
+      &::after {
+        opacity: 0.5 !important;
+      }
+    }
+  }
+
+  &:checked + label::before {
+    background-color: var(--focus-input-border);
+  }
+
+  &:checked + label::after {
+    left: 25px;
+    color: var(--focus-input-border);
+    transform: rotate(0deg);
+  }
+
+  &:active + label::before, &:focus + label::before {
+    box-shadow: 0 0 0 5px var(--focus-input-glow);
+  }
+}
+
+.jenkins-toggle-switch label {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0;
+  cursor: pointer;
+  line-height: 30px;
+  font-weight: bold;
+
+  &::before {
+    display: inline-block;
+    content: "";
+    position: relative;
+    min-width: 50px;
+    min-height: 30px;
+    background: var(--input-border);
+    border-radius: 19px;
+    transition: 0.2s ease;
+    margin-right: 15px;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 10px transparent;
+  }
+
+  &::after {
+    content: "✓";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 20px;
+    height: 20px;
+    background: var(--background);
+    border-radius: 19px;
+    color: transparent;
+    transition: 0.2s ease;
+    transform: rotate(-90deg);
+    font-size: 12px;
+    padding-top: 2px;
+    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &:hover::before {
+    background-color: var(--input-border-hover);
+  }
+
+  &:active, &:focus {
+    &::before {
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--focus-input-glow);
+    }
+  }
+}
diff --git a/war/src/main/less/modules/page-header.less b/war/src/main/less/modules/page-header.less
index 4daaaeeff1..a571735516 100644
--- a/war/src/main/less/modules/page-header.less
+++ b/war/src/main/less/modules/page-header.less
@@ -111,8 +111,8 @@ a.page-header__brand-link {
     line-height: var(--line-height-base);
     font-weight: bold;
     color: var(--search-input-color);
-    border-radius: var(--header-item-border-radius);
-    border: 3px solid var(--header-search-border);
+    border-radius: var(--form-input-border-radius);
+    border: 2px solid var(--header-search-border);
     outline: none;
 
     &::placeholder {
@@ -130,7 +130,6 @@ a.page-header__brand-link {
     display: inline-flex;
     height: 2.5rem;
     width: 2.5rem;
-    padding: 0.5rem;
     justify-content: center;
     align-items: center;
     background: transparent;
@@ -139,6 +138,11 @@ a.page-header__brand-link {
 .main-search__icon-leading {
     left: 0;
     pointer-events: none;
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 .main-search__icon-trailing {
@@ -158,6 +162,11 @@ a.page-header__brand-link {
     &:active {
         fill: var(--header-link-bg-classic-active);
     }
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
 }
 
 #search-box-completion {
diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
index c3698c3ee8..ea50d2b716 100644
--- a/war/src/main/less/modules/table.less
+++ b/war/src/main/less/modules/table.less
@@ -65,6 +65,7 @@
         &:first-of-type {
           border-radius: var(--table-body-radius) 0 0 var(--table-body-radius);
           padding-left: calc(var(--table-padding) * 2);
+          padding-right: var(--table-padding);
         }
 
         &:last-of-type {
@@ -110,6 +111,10 @@
     width: 60px;
   }
 
+  &__cell--no-wrap {
+    white-space: nowrap;
+  }
+
   &__button {
     display: inline-flex;
   }
@@ -155,6 +160,10 @@
     }
   }
 
+  &__button, &__link {
+    color: var(--link-color)!important;
+  }
+
   &__button, .sortheader, &__link {
     align-items: center;
     justify-content: center;
@@ -206,6 +215,14 @@
     &--green {
       color: var(--green)!important;
     }
+
+    &--orange {
+      color: var(--orange)!important;
+    }
+
+    &--red {
+      color: var(--red)!important;
+    }
   }
 
   &__badge {
diff --git a/war/src/main/less/pages/plugin-manager.less b/war/src/main/less/pages/plugin-manager.less
new file mode 100644
index 0000000000..daca338564
--- /dev/null
+++ b/war/src/main/less/pages/plugin-manager.less
@@ -0,0 +1,100 @@
+#plugins {
+  .app-plugin-manager__categories {
+    margin: 0.5rem 0;
+
+    a {
+      margin: 0 1.25rem 0 0 !important;
+      font-size: 0.75rem;
+    }
+  }
+
+  tr.already-upgraded {
+    background-color: var(--plugin-manager-bg-color-already-upgraded);
+  }
+
+  tr.all-dependents-disabled .enable input,
+  tr.all-dependents-disabled .enable button,
+  tr.all-dependents-disabled .enable .jenkins-toggle-switch label {
+    pointer-events: auto;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  tr.has-dependents input,
+  tr.has-disabled-dependency .enable input,
+  tr.has-disabled-dependency .enable .jenkins-toggle-switch label,
+  tr.has-dependents button,
+  tr.has-dependents .enable button,
+  tr.has-dependents .enable .jenkins-toggle-switch label {
+    pointer-events: none;
+    opacity: 0.25;
+  }
+
+  tr.has-dependents-but-disabled .enable input,
+  tr.has-dependents-but-disabled .enable button,
+  tr.has-dependents-but-disabled .enable .jenkins-toggle-switch label {
+    pointer-events: auto;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  tr.has-disabled-dependency .enable input,
+  tr.has-disabled-dependency .enable button,
+  tr.has-disabled-dependency .enable .jenkins-toggle-switch label {
+    opacity: 0.4;
+  }
+
+  tr.deleted input,
+  tr.deleted button,
+  tr.deleted .jenkins-toggle-switch label {
+    visibility: hidden !important;
+  }
+
+  .dependent-list,
+  .dependency-list {
+    display: none;
+  }
+
+  .enable-state-info,
+  .uninstall-state-info {
+    padding: 5px 20px;
+    max-width: 70%;
+    border: solid 1px var(--warning);
+    border-radius: 3px;
+    text-align: center;
+  }
+
+  .enable-state-info {
+    float: left;
+  }
+
+  .uninstall-state-info {
+    float: right;
+  }
+
+  .plugin-dependency-info .title,
+  .plugin-dependency-info .subtitle {
+    opacity: 0.7;
+  }
+
+  .plugin-dependency-info .title {
+    margin-bottom: 5px;
+    font-size: larger;
+    font-weight: bolder;
+  }
+
+  .plugin-dependency-info span {
+    margin: 5px 5px 0 0;
+    background-color: var(--primary);
+    display: inline-block;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: var(--font-size-xs);
+    font-weight: 700;
+    line-height: 1;
+    color: var(--white);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+  }
+}
diff --git a/war/src/main/less/plugin-manager-ui.less b/war/src/main/less/plugin-manager-ui.less
deleted file mode 100644
index 6d4661b32e..0000000000
--- a/war/src/main/less/plugin-manager-ui.less
+++ /dev/null
@@ -1,105 +0,0 @@
-#filter-box {
-    padding-left: 35px;
-    width: 15em;
-}
-
-time {
-    white-space: nowrap;
-}
-
-#filter-container {
-    margin: 1em 0;
-    font-size: 1em;
-}
-.plugin-manager__categories {
-    margin-top: 0.25em;
-}
-
-.plugin-manager__category-label:link,
-.plugin-manager__category-label:visited {
-    display: inline-block;
-    border: 1px solid #ccc;
-    border: 1px solid var(--plugin-manager-category-link-border-color);
-    background-color: #fbfbfb;
-    background-color: var(--plugin-manager-category-link-bg-color);
-    color: #333;
-    color: var(--plugin-manager-category-text-color);
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    padding: 0 0.5rem;
-    margin: 0 0.25rem 0.25rem 0;
-    text-decoration: none;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    transition: all 0.15s ease-in-out;
-}
-.plugin-manager__category-label:hover,
-.plugin-manager__category-label:focus,
-.plugin-manager__category-label:active {
-    background-color: #f2f2f2;
-    background-color: var(--plugin-manager-category-link-bg-color--hover);
-    border-color:  #333;
-    border-color:  var(--plugin-manager-category-link-border-color--hover);
-    color: #333;
-    color: var(--plugin-manager-category-link-color--hover);
-}
-
-.plugin-manager__search-input {
-    position: static;
-    padding: 0.25rem 0.1rem 0.25rem 2.5rem;
-    margin: 0;
-
-    font-size: 1rem;
-    line-height: 1.5;
-    color: #333;
-    color: var(--text-color);
-
-    border-radius: 4px;
-    border: 1px solid grey;
-    outline: none;
-}
-
-.plugin-manager__search {
-    position: relative;
-}
-
-.plugin-manager__icon-leading {
-    position: absolute;
-    left: -2px;
-    top: -3px;
-    font-size: 15px;
-    padding: 0.5rem;
-}
-
-.main-search__icon-leading {
-    left: 0;
-    pointer-events: none;
-}
-
-
-.hidden-by-default {
-}
-.hidden {
-    display: none;
-}
-
-#plugins tr.unavailable {
-    background-color: #f4f4f4;
-    background-color: var(--plugin-manager-unavailable-bg-color);
-}
-tr.unavailable span.unavailable-label {
-    display: inline-block;
-    border: 1px solid #666;
-    color: #333;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    padding: 0 0.5rem;
-    margin: 0.25rem 0.5rem;
-    text-decoration: none;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-}
diff --git a/war/src/main/resources/images/ionicons/close-circle-outline.svg b/war/src/main/resources/images/ionicons/close-circle-outline.svg
new file mode 100644
index 0000000000..5b0112cdc3
--- /dev/null
+++ b/war/src/main/resources/images/ionicons/close-circle-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Close Circle</title><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 320L192 192M192 320l128-128"/></svg>
\ No newline at end of file
diff --git a/war/src/main/resources/images/ionicons/downgrade-circle-outline.svg b/war/src/main/resources/images/ionicons/downgrade-circle-outline.svg
new file mode 100644
index 0000000000..86fe608b7c
--- /dev/null
+++ b/war/src/main/resources/images/ionicons/downgrade-circle-outline.svg
@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M64 256C64 150 150 64 256 64C362 64 448 150 448 256C448 362 362 448 256 448C150 448 64 362 64 256Z" stroke="currentColor" stroke-width="32" stroke-miterlimit="10"/>
+<path d="M170.46 197.85L181.83 184.62C197.379 168.34 217.817 157.581 240.039 153.978C262.261 150.376 285.052 154.126 304.948 164.659C324.844 175.192 340.758 191.933 350.271 212.336C359.783 232.74 362.375 255.691 357.652 277.702C352.929 299.714 341.15 319.581 324.104 334.286C307.058 348.991 285.677 357.73 263.211 359.173C240.746 360.617 218.423 354.687 199.635 342.285C180.847 329.882 166.621 311.686 159.12 290.46" stroke="currentColor" stroke-width="32" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M144.68 162C145.799 162.005 146.905 162.232 147.935 162.668C148.965 163.104 149.898 163.74 150.68 164.54L210.22 224.08C211.428 225.284 212.252 226.819 212.586 228.491C212.921 230.164 212.751 231.898 212.099 233.473C211.446 235.049 210.341 236.396 208.922 237.342C207.503 238.289 205.835 238.793 204.13 238.79H144.59C142.304 238.79 140.111 237.882 138.495 236.265C136.878 234.649 135.97 232.456 135.97 230.17V170.61C135.967 169.472 136.19 168.344 136.626 167.293C137.062 166.241 137.702 165.287 138.509 164.484C139.317 163.681 140.275 163.047 141.329 162.617C142.383 162.187 143.512 161.971 144.65 161.98L144.68 162Z" fill="currentColor"/>
+</svg>
diff --git a/war/src/main/resources/images/ionicons/help-circle-outline.svg b/war/src/main/resources/images/ionicons/help-circle-outline.svg
new file mode 100644
index 0000000000..44273fdb1b
--- /dev/null
+++ b/war/src/main/resources/images/ionicons/help-circle-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Help Circle</title><path d="M256 80a176 176 0 10176 176A176 176 0 00256 80z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path d="M200 202.29s.84-17.5 19.57-32.57C230.68 160.77 244 158.18 256 158c10.93-.14 20.69 1.67 26.53 4.45 10 4.76 29.47 16.38 29.47 41.09 0 26-17 37.81-36.37 50.8S251 281.43 251 296" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="28"/><circle cx="250" cy="348" r="20" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/war/src/main/resources/images/ionicons/search-outline.svg b/war/src/main/resources/images/ionicons/search-outline.svg
new file mode 100644
index 0000000000..103efe8e94
--- /dev/null
+++ b/war/src/main/resources/images/ionicons/search-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Search</title><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"/></svg>
\ No newline at end of file
diff --git a/war/webpack.config.js b/war/webpack.config.js
index 9e90eaf114..ebc7fedf1f 100644
--- a/war/webpack.config.js
+++ b/war/webpack.config.js
@@ -16,7 +16,6 @@ module.exports = (env, argv) => ({
     ],
     "plugin-manager-ui": [
       path.join(__dirname, "src/main/js/plugin-manager-ui.js"),
-      path.join(__dirname, "src/main/less/plugin-manager-ui.less"),
     ],
     "add-item": [
       path.join(__dirname, "src/main/js/add-item.js"),