Add search bar component

core/src/main/resources/hudson/PluginManager/_table.js

@@ -476,8 +476,6 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
 })();
 
 Element.observe(window, "load", function () {
-  document.getElementById("filter-box").focus();
-
   const compatibleCheckbox = document.querySelector(
     "[data-select='compatible']"
   );

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

@@ -36,15 +36,11 @@ THE SOFTWARE.
     <l:main-panel>
       <div class="jenkins-app-bar jenkins-app-bar--sticky">
         <div class="jenkins-app-bar__content">
-          <div class="app-plugin-manager__search">
-            <span class="app-plugin-manager__search__icon">
-              <l:icon src="symbol-search"/>
-            </span>
-            <input type="search"
-                   placeholder="Search available plugins"
-                   id="filter-box"
-                   value="${request.getParameter('filter')}" />
-          </div>
+          <l:search-bar clazz="jenkins-search--app-bar"
+                        placeholder="${%Search available plugins}"
+                        id="filter-box"
+                        autofocus="true"
+                        value="${request.getParameter('filter')}" />
         </div>
       </div>
 

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

@@ -37,15 +37,11 @@ THE SOFTWARE.
     <l:main-panel>
       <div class="jenkins-app-bar jenkins-app-bar--sticky">
         <div class="jenkins-app-bar__content">
-          <div class="app-plugin-manager__search">
-            <span class="app-plugin-manager__search__icon">
-              <l:icon src="symbol-search"/>
-            </span>
-            <input type="search"
-                   placeholder="Search installed plugins"
-                   id="filter-box"
-                   value="${request.getParameter('filter')}" />
-          </div>
+          <l:search-bar clazz="jenkins-search--app-bar"
+                        placeholder="${%Search installed plugins}"
+                        id="filter-box"
+                        autofocus="true"
+                        value="${request.getParameter('filter')}" />
         </div>
       </div>
 

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

@@ -45,15 +45,11 @@ THE SOFTWARE.
     <l:main-panel>
       <div class="jenkins-app-bar jenkins-app-bar--sticky">
         <div class="jenkins-app-bar__content">
-          <div class="app-plugin-manager__search">
-            <span class="app-plugin-manager__search__icon">
-              <l:icon src="symbol-search"/>
-            </span>
-            <input type="search"
-                   placeholder="Search plugin updates"
-                   id="filter-box"
-                   value="${request.getParameter('filter')}" />
-          </div>
+          <l:search-bar clazz="jenkins-search--app-bar"
+                        placeholder="${%Search plugin updates}"
+                        id="filter-box"
+                        autofocus="true"
+                        value="${request.getParameter('filter')}" />
         </div>
       </div>
 

core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly

@@ -79,12 +79,7 @@ THE SOFTWARE.
     <l:pane width="3" title="${h.runScript(paneTitle)}" footer="${h.runScript(paneFooter)}" id="buildHistory" class="jenkins-pane stripped">
       <tr class="build-search-row">
         <td>
-          <div class="jenkins-search">
-            <input type="search" placeholder="${%find}" class="jenkins-search__input" />
-            <div class="jenkins-search__icon">
-              <l:icon src="symbol-search" />
-            </div>
-          </div>
+          <l:search-bar placeholder="${%find}" />
           <div id="no-builds" class="jenkins-pane__information" style="${page.runs.isEmpty() and page.queueItems.isEmpty() ? '' : 'display: none;'}">
             ${%No builds}
           </div>

core/src/main/resources/lib/layout/search-bar.jelly

@@ -0,0 +1,61 @@
+<!--
+The MIT License
+
+Copyright (c) 2022 Jan Faracik
+
+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:l="/lib/layout">
+  <st:documentation>
+    <st:attribute name="value" />
+    <st:attribute name="placeholder" />
+    <st:attribute name="id" />
+    <st:attribute name="autofocus" />
+    <st:attribute name="clazz" />
+    <st:attribute name="hasKeyboardShortcut">
+      If false the default keyboard shortcut for the input is disabled. Defaults to true.
+    </st:attribute>
+    Creates a search input
+
+    @since TODO
+  </st:documentation>
+
+  <div class="jenkins-search ${attrs.clazz}">
+    <div class="jenkins-search__icon">
+      <l:icon src="symbol-search" />
+    </div>
+    <input value="${attrs.value}"
+           id="${attrs.id}"
+           class="jenkins-search__input"
+           placeholder="${attrs.placeholder ?: '%Search'}"
+           type="search"
+           autofocus="${attrs.autofocus == 'true' ? 'true' : null}"
+           autocomplete="off"
+           autocorrect="off"
+           autocapitalize="off"
+           spellcheck="false" />
+    <j:if test="${attrs.hasKeyboardShortcut != 'false'}">
+      <div class="jenkins-search__shortcut" tooltip="${%Press / on your keyboard to focus}">
+        <l:icon src="symbol-search-shortcut" />
+      </div>
+    </j:if>
+  </div>
+</j:jelly>

war/src/main/js/keyboard-shortcuts.js

@@ -12,6 +12,16 @@ window.addEventListener("load", () => {
     // Returning false stops the event and prevents default browser events
     return false;
   });
+
+  const pageSearchBar = document.querySelectorAll(".jenkins-search__input");
+  if (pageSearchBar.length === 1) {
+    hotkeys(translateModifierKeysForUsersPlatform("CMD+/"), () => {
+      pageSearchBar[0].focus();
+
+      // Returning false stops the event and prevents default browser events
+      return false;
+    });
+  }
 });
 
 /**

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

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

war/src/main/less/form/search-bar.less

@@ -0,0 +1,208 @@
+.jenkins-search {
+  --search-bar-height: 2.1875rem;
+
+  position: relative;
+  max-width: 420px;
+
+  &__input {
+    appearance: none;
+    background: var(--item-background--hover);
+    border: none;
+    outline: none;
+    border-radius: 0.625rem;
+    width: 100%;
+    margin: 0;
+    padding: 0 0.5rem 0 var(--search-bar-height);
+    line-height: 1;
+    box-shadow: var(--form-input-glow);
+    transition: var(--standard-transition);
+    font-weight: 500;
+    height: var(--search-bar-height);
+
+    &::placeholder {
+      color: var(--text-color-secondary);
+    }
+
+    // Safari adds unwanted padding - let's remove it
+    &::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      height: 45%;
+      min-height: 1.1rem;
+      aspect-ratio: 1;
+      margin-right: 0.2rem;
+      background: currentColor;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      opacity: 0;
+      pointer-events: none;
+      transform: scale(0.8);
+      transition: var(--standard-transition);
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.75 !important;
+      }
+
+      &:active {
+        opacity: 1 !important;
+      }
+    }
+
+    &:hover {
+      background: var(--item-background--active);
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+      background: var(--item-background--active);
+      box-shadow: var(--form-input-glow--focus);
+
+      &::-webkit-search-cancel-button {
+        opacity: 0.5;
+        pointer-events: all;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    aspect-ratio: 1 / 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    display: grid;
+    pointer-events: none;
+
+    svg {
+      width: 45%;
+      height: 45%;
+      max-width: 1.1rem;
+      max-height: 1.1rem;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      justify-self: center;
+      align-self: center;
+      transition: var(--standard-transition);
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      width: 0;
+      height: 0;
+      max-width: 1.1rem;
+      max-height: 1.1rem;
+      border: 0.125rem solid currentColor;
+      border-radius: 100%;
+      transition: var(--standard-transition);
+      grid-column-start: 1;
+      grid-row-start: 1;
+      justify-self: center;
+      align-self: center;
+      opacity: 0;
+    }
+
+    &::after {
+      clip-path: inset(0 0 50% 50%);
+      transition: var(--standard-transition);
+      animation: loading-spinner 1s infinite linear;
+
+      @media (prefers-reduced-motion) {
+        animation-duration: 2s;
+      }
+    }
+  }
+
+  &__shortcut {
+    position: absolute;
+    aspect-ratio: 1 / 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.25s ease;
+    text-align: center;
+    font-size: 0.8em;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--text-color-secondary);
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(50% - 1em);
+      right: calc(50% - 1em);
+      width: 2em;
+      height: 2em;
+      border: 0.1rem solid var(--item-background--active);
+      border-radius: 0.3rem;
+    }
+
+    svg {
+      width: 1.2em;
+      height: 1.2em;
+    }
+  }
+
+  &--loading {
+    .jenkins-search__icon {
+      svg {
+        opacity: 0;
+        transform: scale(0);
+      }
+
+      &::before {
+        opacity: 0.2;
+        width: 45%;
+        height: 45%;
+      }
+
+      &::after {
+        opacity: 1;
+        width: 45%;
+        height: 45%;
+      }
+    }
+  }
+
+  &--app-bar {
+    --search-bar-height: 3rem;
+
+    max-width: 50vw;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 10px;
+      z-index: -1;
+      backdrop-filter: blur(20px);
+      box-shadow: 0 0 var(--section-padding) var(--background);
+
+      @supports not (backdrop-filter: blur(20px)) {
+        background: var(--background);
+      }
+    }
+  }
+
+  &:focus-within {
+    .jenkins-search__icon {
+      fill: var(--focus-input-border);
+    }
+
+    .jenkins-search__shortcut {
+      opacity: 0;
+      transform: scale(0.9);
+      pointer-events: none;
+    }
+  }
+}