Add search bar component (#7074)

Co-authored-by: Tim Jacomb <[email protected]> Co-authored-by: Tim Jacomb <[email protected]>
jenkinsci · Sep 16, 2022 · 8ab0519 · 8ab0519
1 parent 5414938
commit 8ab0519
Show file tree

Hide file tree

Showing 13 changed files with 305 additions and 333 deletions.
diff --git a/core/src/main/resources/hudson/PluginManager/_table.js b/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']"
   );

diff --git a/core/src/main/resources/hudson/PluginManager/available.jelly b/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>
 

diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/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>
 

diff --git a/core/src/main/resources/hudson/PluginManager/table.jelly b/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>
 

diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly b/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>

diff --git a/core/src/main/resources/lib/layout/search-bar.jelly b/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>
diff --git a/war/src/main/js/keyboard-shortcuts.js b/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("/", () => {
+      pageSearchBar[0].focus();
+
+      // Returning false stops the event and prevents default browser events
+      return false;
+    });
+  }
 });
 
 /**

diff --git a/war/src/main/js/plugin-manager-ui.js b/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 () {