Overhaul search with a Command Palette

core/src/main/java/hudson/model/Job.java

@@ -515,7 +515,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

core/src/main/java/hudson/search/Search.java

@@ -129,7 +129,7 @@ public void doSuggestOpenSearch(StaplerRequest req, StaplerResponse rsp, @QueryP
     public void doSuggest(StaplerRequest req, StaplerResponse 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);
     }
@@ -207,12 +207,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;
         }
     }
 

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());
         }
     }
 

core/src/main/java/jenkins/model/Jenkins.java

@@ -2431,9 +2431,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

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>

core/src/main/resources/lib/layout/header/searchbox.jelly

@@ -1,25 +1,12 @@
 <?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" />
-
-        <span class="main-search__icon-leading">
-          <l:icon src="symbol-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" />
-      </div>
-    </form>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+  <div class="page-header__hyperlinks">
+    <button id="button-open-command-palette" tooltip="${%Search}" 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>

core/src/main/resources/lib/layout/layout.jelly

@@ -174,6 +174,7 @@ THE SOFTWARE.
     <script src="${resURL}/jsbundles/app.js" type="text/javascript" defer="true" />
   </head>
   <body id="jenkins" class="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 -->

test/src/test/java/hudson/model/AbstractProjectTest.java

@@ -663,6 +663,7 @@ private void testAutoCompleteResponse(JSONObject responseBody, String... project
         for (String p : projects) {
             JSONObject o = new JSONObject();
             o.put("name", p);
+            o.put("url", JSONObject.fromObject(null));
             expected.add(o);
         }
         assertThat(suggestions.containsAll(expected), is(true));

test/src/test/java/hudson/search/SearchTest.java

@@ -28,6 +28,7 @@
 import static org.junit.Assert.assertFalse;
 import static org.junit.Assert.assertNotNull;
 import static org.junit.Assert.assertTrue;
+import static org.jvnet.hudson.test.QueryUtils.waitUntilStringIsPresent;
 
 import hudson.model.FreeStyleProject;
 import hudson.model.ListView;
@@ -38,7 +39,6 @@
 import hudson.security.GlobalMatrixAuthorizationStrategy;
 import java.io.IOException;
 import java.lang.reflect.Field;
-import java.net.HttpURLConnection;
 import java.net.URL;
 import java.util.ArrayList;
 import java.util.Collections;
@@ -48,6 +48,8 @@
 import net.sf.json.JSONObject;
 import net.sf.json.JSONSerializer;
 import org.htmlunit.Page;
+import org.htmlunit.html.HtmlButton;
+import org.htmlunit.html.HtmlInput;
 import org.htmlunit.html.HtmlPage;
 import org.junit.Rule;
 import org.junit.Test;
@@ -64,15 +66,22 @@ public class SearchTest {
 
     @Rule public JenkinsRule j = new JenkinsRule();
 
-    /**
-     * No exact match should result in a failure status code.
-     */
+    private void searchWithoutNavigating(HtmlPage page, String query) throws IOException {
+        HtmlButton button = page.querySelector("#button-open-command-palette");
+        button.click();
+
+        HtmlInput search = page.querySelector("#command-bar");
+        search.setValue(query);
+        page.executeJavaScript("document.querySelector('#command-bar').dispatchEvent(new Event(\"input\"))");
+    }
+
     @Test
     public void testFailure() throws Exception {
-        WebClient wc = j.createWebClient()
-                .withThrowExceptionOnFailingStatusCode(false);
-        HtmlPage resultPage = wc.search("no-such-thing");
-        assertEquals(HttpURLConnection.HTTP_NOT_FOUND, resultPage.getWebResponse().getStatusCode());
+        HtmlPage page = j.createWebClient().goTo("");
+
+        searchWithoutNavigating(page, "no-such-thing");
+
+        waitUntilStringIsPresent(page, "No results for no-such-thing");
     }
 
     /**
@@ -81,13 +90,17 @@ public void testFailure() throws Exception {
     @Issue("JENKINS-3415")
     @Test
     public void testXSS() throws Exception {
-        WebClient wc = j.createWebClient()
-                .withThrowExceptionOnFailingStatusCode(false);
+        WebClient wc = j.createWebClient();
         wc.setAlertHandler((page, message) -> {
             throw new AssertionError();
         });
-        HtmlPage resultPage = wc.search("<script>alert('script');</script>");
-        assertEquals(HttpURLConnection.HTTP_NOT_FOUND, resultPage.getWebResponse().getStatusCode());
+        FreeStyleProject freeStyleProject = j.createFreeStyleProject("Project");
+        freeStyleProject.setDisplayName("<script>alert('script');</script>");
+
+        Page result = wc.search("<script>alert('script');</script>");
+
+        assertNotNull(result);
+        assertEquals(j.getInstance().getRootUrl() + freeStyleProject.getUrl(), result.getUrl().toString());
     }
 
     @Test
@@ -127,7 +140,7 @@ public void testSearchByProjectNameInAFolder() throws Exception {
         MockFolder myMockFolder = j.createFolder("my-folder-1");
         FreeStyleProject myFreeStyleProject = myMockFolder.createProject(FreeStyleProject.class, "my-job-1");
 
-        Page result = j.createWebClient().goTo(myMockFolder.getUrl() + "search?q=" + myFreeStyleProject.getFullName());
+        Page result = j.search(myFreeStyleProject.getName());
 
         assertNotNull(result);
         j.assertGoodStatus(result);
@@ -181,41 +194,6 @@ public void testSearch2ProjectsWithSameDisplayName() throws Exception {
         assertFalse(contents.contains(otherDisplayName));
     }
 
-    @Test
-    public void testProjectNamePrecedesDisplayName() throws Exception {
-        final String project1Name = "foo";
-        final String project1DisplayName = "project1DisplayName";
-        final String project2Name = "project2Name";
-        final String project2DisplayName = project1Name;
-        final String project3Name = "project3Name";
-        final String project3DisplayName = "project3DisplayName";
-
-        // create 1 freestyle project with the name foo
-        FreeStyleProject project1 = j.createFreeStyleProject(project1Name);
-        project1.setDisplayName(project1DisplayName);
-
-        // create another with the display name foo
-        FreeStyleProject project2 = j.createFreeStyleProject(project2Name);
-        project2.setDisplayName(project2DisplayName);
-
-        // create a third project and make sure it's not picked up by search
-        FreeStyleProject project3 = j.createFreeStyleProject(project3Name);
-        project3.setDisplayName(project3DisplayName);
-
-        // search for foo
-        Page result = j.search(project1Name);
-        assertNotNull(result);
-        j.assertGoodStatus(result);
-
-        // make sure we get the project with the name foo
-        String contents = result.getWebResponse().getContentAsString();
-        assertTrue(contents.contains(String.format("<title>%s [Jenkins]</title>", project1DisplayName)));
-        // make sure projects 2 and 3 were not picked up
-        assertFalse(contents.contains(project2Name));
-        assertFalse(contents.contains(project3Name));
-        assertFalse(contents.contains(project3DisplayName));
-    }
-
     @Test
     public void testGetSuggestionsHasBothNamesAndDisplayNames() throws Exception {
         final String projectName = "project name";
@@ -335,7 +313,7 @@ public void testProjectNameInAFolderDisplayName() throws Exception {
 
             String name = (String) jsonSuggestion.get("name");
 
-            if (displayName2.equals(name)) {
+            if ("my-folder-1 → job-2".equals(name)) {
                 foundDisplayName = true;
             }
         }

test/src/test/java/hudson/widgets/HistoryWidgetTest.java

@@ -36,15 +36,15 @@ public void displayFilterInput() throws Exception {
 
         { // Filter input shouldn't display when there's no build
             HtmlPage page = wc.goTo("job/" + p.getName());
-            DomNode searchInputContainer = page.querySelector(".jenkins-search");
+            DomNode searchInputContainer = page.querySelector(".build-search-row .jenkins-search");
             assertTrue(searchInputContainer.getAttributes().getNamedItem("class").getNodeValue().contains("jenkins-hidden"));
         }
 
         j.buildAndAssertSuccess(p);  // Add a build
 
         { // Filter input should display when there's a build
             HtmlPage page = wc.goTo("job/" + p.getName());
-            DomNode searchInputContainer = page.querySelector(".jenkins-search");
+            DomNode searchInputContainer = page.querySelector(".build-search-row .jenkins-search");
             assertFalse(searchInputContainer.getAttributes().getNamedItem("class").getNodeValue().contains("jenkins-hidden"));
         }
     }

test/src/test/java/jenkins/model/JenkinsTest.java

@@ -139,8 +139,7 @@ public void verifyUploadedFingerprintFilePermission() throws Exception {
         assumeFalse(Functions.isWindows());
 
         HtmlPage page = j.createWebClient().goTo("fingerprintCheck");
-        // The form doesn't have a name, the page contain the search form and the one we're interested in
-        HtmlForm form = page.getForms().get(1);
+        HtmlForm form = page.getForms().get(0);
         File dir = tmp.newFolder();
         File plugin = new File(dir, "htmlpublisher.jpi");
         // We're using a plugin to have a file above DiskFileItemFactory.DEFAULT_SIZE_THRESHOLD

war/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 };

war/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();

war/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),
+          }),
+        );
+      }),
+    );
+  },
+};