Overhaul search with a Command Palette (#7569)

Co-authored-by: Wadeck Follonier <[email protected]> Co-authored-by: Tim Jacomb <[email protected]> Co-authored-by: Alexander Brandes <[email protected]> Co-authored-by: Tim Jacomb <[email protected]>
jenkinsci · Dec 9, 2024 · 930c7ff · 930c7ff
1 parent f6802dd
commit 930c7ff
Show file tree

Hide file tree

Showing 28 changed files with 600 additions and 163 deletions.
diff --git a/core/src/main/java/hudson/Functions.java b/core/src/main/java/hudson/Functions.java
@@ -62,6 +62,7 @@
 import hudson.model.View;
 import hudson.scm.SCM;
 import hudson.scm.SCMDescriptor;
+import hudson.search.SearchFactory;
 import hudson.search.SearchableModelObject;
 import hudson.security.ACL;
 import hudson.security.AccessControlled;
@@ -2578,6 +2579,11 @@ public static String generateItemId() {
         return String.valueOf(Math.floor(Math.random() * 3000));
     }
 
+    @Restricted(NoExternalUse.class)
+    public static ExtensionList<SearchFactory> getSearchFactories() {
+        return SearchFactory.all();
+    }
+
     /**
      * @param keyboardShortcut the shortcut to be translated
      * @return the translated shortcut, e.g. CMD+K to ⌘+K for macOS, CTRL+K for Windows
@@ -2596,6 +2602,10 @@ public static String translateModifierKeysForUsersPlatform(String keyboardShortc
 
     @Restricted(NoExternalUse.class)
     public static String formatMessage(String format, Object args) {
+        if (format == null) {
+            return args.toString();
+        }
+
         return MessageFormat.format(format, args);
     }
 }
diff --git a/core/src/main/java/hudson/model/Job.java b/core/src/main/java/hudson/model/Job.java
@@ -541,7 +541,7 @@ public void find(String token, List<SearchItem> result) {
             public void suggest(String token, List<SearchItem> result) {
                 find(token, result);
             }
-        }).add("configure", "config", "configure");
+        });
     }
 
     @Override

diff --git a/core/src/main/java/hudson/search/Search.java b/core/src/main/java/hudson/search/Search.java
@@ -158,7 +158,7 @@ public void doSuggestOpenSearch(StaplerRequest2 req, StaplerResponse2 rsp, @Quer
     public void doSuggest(StaplerRequest2 req, StaplerResponse2 rsp, @QueryParameter String query) throws IOException, ServletException {
         Result r = new Result();
         for (SuggestedItem item : getSuggestions(req, query))
-            r.suggestions.add(new Item(item.getPath()));
+            r.suggestions.add(new Item(item.getPath(), item.getUrl()));
 
         rsp.serveExposedBean(req, r, Flavor.JSON);
     }
@@ -252,12 +252,25 @@ public static class Result {
 
     @ExportedBean(defaultVisibility = 999)
     public static class Item {
+
         @Exported
         @SuppressFBWarnings(value = "URF_UNREAD_PUBLIC_OR_PROTECTED_FIELD", justification = "read by Stapler")
         public String name;
 
+        private final String url;
+
         public Item(String name) {
+            this(name, null);
+        }
+
+        public Item(String name, String url) {
             this.name = name;
+            this.url = url;
+        }
+
+        @Exported
+        public String getUrl() {
+            return url;
         }
     }
 

diff --git a/core/src/main/java/hudson/search/SuggestedItem.java b/core/src/main/java/hudson/search/SuggestedItem.java
@@ -62,7 +62,7 @@ private void getPath(StringBuilder buf) {
             buf.append(item.getSearchName());
         else {
             parent.getPath(buf);
-            buf.append(' ').append(item.getSearchName());
+            buf.append(" » ").append(item.getSearchName());
         }
     }
 

diff --git a/core/src/main/java/jenkins/model/Jenkins.java b/core/src/main/java/jenkins/model/Jenkins.java
@@ -2346,9 +2346,7 @@ public String getSearchUrl() {
     public SearchIndexBuilder makeSearchIndex() {
         SearchIndexBuilder builder = super.makeSearchIndex();
         if (hasPermission(ADMINISTER)) {
-                builder.add("configure", "config", "configure")
-                    .add("manage")
-                    .add("log");
+            builder.add("manage", Messages.ManageJenkinsAction_DisplayName());
         }
         builder.add(new CollectionSearchIndex<TopLevelItem>() {
                     @Override

diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/search-box.js b/core/src/main/resources/jenkins/views/JenkinsHeader/search-box.js
diff --git a/core/src/main/resources/lib/layout/command-palette.jelly b/core/src/main/resources/lib/layout/command-palette.jelly
@@ -0,0 +1,47 @@
+<!--
+The MIT License
+
+Copyright (c) 2024, 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:s="jelly:stapler" xmlns:l="/lib/layout">
+  <s:documentation>
+    The command palette overlay
+  </s:documentation>
+
+  <div id="command-palette-i18n" class="i18n"
+       data-no-results-for="${%No results for}"
+       data-help="${%Help}"
+       data-get-help="${%Get help using Jenkins search}"
+  />
+
+  <dialog id="command-palette" class="jenkins-command-palette__dialog">
+    <div class="jenkins-command-palette__wrapper">
+      <div class="jenkins-command-palette">
+        <l:search-bar id="command-bar" clazz="jenkins-command-palette__search" hasKeyboardShortcut="false" />
+        <div id="search-results-container" class="jenkins-command-palette__results-container">
+          <div id="search-results" class="jenkins-command-palette__results" />
+        </div>
+      </div>
+    </div>
+  </dialog>
+</j:jelly>
diff --git a/core/src/main/resources/lib/layout/header/searchbox.jelly b/core/src/main/resources/lib/layout/header/searchbox.jelly
@@ -1,25 +1,27 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
-  <div class="searchbox hidden-xs">
-    <!-- search box -->
-    <j:set var="searchURL" value="${h.searchURL}"/>
-    <form action="${searchURL}" method="get" style="position:relative;" class="no-json" name="search" role="search">
-      <!-- this div is used to calculate the width of the text box -->
-      <div id="search-box-sizer"/>
-      <div id="searchform">
-        <input name="q" placeholder="${searchPlaceholder}" id="search-box" class="main-search__input" value="${request.getParameter('q')}" role="searchbox" />
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler">
+  <div class="page-header__hyperlinks">
+    <j:forEach var="factory" items="${h.searchFactories}">
+      <st:include it="${factory}" page="search.jelly" optional="true" />
+    </j:forEach>
 
-        <span class="main-search__icon-leading">
-          <l:icon src="symbol-search"/>
+    <j:set var="commandPaletteTooltip">
+      <div class="jenkins-keyboard-shortcut__tooltip">
+        <span class="jenkins-!-margin-right-1">
+          ${%Search}
         </span>
-        <a href="${searchHelpUrl}" class="main-search__icon-trailing">
-          <l:icon src="symbol-help-circle"/>
-        </a>
-
-        <div id="search-box-completion" data-search-url="${searchURL}" />
-        <st:adjunct includes="jenkins.views.JenkinsHeader.search-box" />
+        <l:keyboard-shortcut shortcut="CMD+K" />
       </div>
-    </form>
+    </j:set>
+
+    <button id="button-open-command-palette"
+            data-html-tooltip="${commandPaletteTooltip}"
+            data-keyboard-shortcut="CMD+K"
+            data-search-url="${rootURL + '/search/suggest'}"
+            data-search-help-url="${searchHelpUrl}"
+    >
+      <l:icon src="symbol-search" />
+    </button>
   </div>
   <script src="${resURL}/jsbundles/keyboard-shortcuts.js" type="text/javascript"/>
 </j:jelly>
diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -179,6 +179,7 @@ THE SOFTWARE.
     <script src="${resURL}/jsbundles/app.js" type="text/javascript" defer="true" />
   </head>
   <body id="jenkins" class="${removeYUI ? '' : 'yui-skin-sam'} ${layoutType} jenkins-${h.version}" data-version="${h.version}" data-model-type="${it.class.name}">
+    <l:command-palette />
 
     <j:if test="${layoutType!='full-screen'}">
       <!-- for accessibility, skip the entire navigation bar and etc and go straight to the head of the content -->

diff --git a/eslint.config.cjs b/eslint.config.cjs
@@ -36,7 +36,6 @@ module.exports = [
         CodeMirror: "readonly",
         ComboBox: "readonly",
         COMBOBOX_VERSION: "writeable",
-        createSearchBox: "readonly",
         crumb: "readonly",
         dialog: "readonly",
         ensureVisible: "readonly",

diff --git a/src/main/js/api/search.js b/src/main/js/api/search.js
@@ -0,0 +1,10 @@
+/**
+ * @param {string} searchTerm
+ */
+function search(searchTerm) {
+  const address = document.getElementById("button-open-command-palette").dataset
+    .searchUrl;
+  return fetch(`${address}?query=${encodeURIComponent(searchTerm)}`);
+}
+
+export default { search: search };
diff --git a/src/main/js/app.js b/src/main/js/app.js
@@ -1,4 +1,5 @@
 import Dropdowns from "@/components/dropdowns";
+import CommandPalette from "@/components/command-palette";
 import Notifications from "@/components/notifications";
 import SearchBar from "@/components/search-bar";
 import Tooltips from "@/components/tooltips";
@@ -7,6 +8,7 @@ import ConfirmationLink from "@/components/confirmation-link";
 import Dialogs from "@/components/dialogs";
 
 Dropdowns.init();
+CommandPalette.init();
 Notifications.init();
 SearchBar.init();
 Tooltips.init();

diff --git a/src/main/js/components/command-palette/datasources.js b/src/main/js/components/command-palette/datasources.js
@@ -0,0 +1,29 @@
+import { LinkResult } from "./models";
+import Search from "@/api/search";
+import * as Symbols from "./symbols";
+
+export const JenkinsSearchSource = {
+  execute(query) {
+    const rootUrl = document.head.dataset.rooturl;
+
+    function correctAddress(url) {
+      if (url.startsWith("/")) {
+        url = url.substring(1);
+      }
+
+      return rootUrl + "/" + url;
+    }
+
+    return Search.search(query).then((rsp) =>
+      rsp.json().then((data) => {
+        return data["suggestions"].slice().map((e) =>
+          LinkResult({
+            icon: Symbols.SEARCH,
+            label: e.name,
+            url: correctAddress(e.url),
+          }),
+        );
+      }),
+    );
+  },
+};