Add icons to Command Palette

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

@@ -1109,6 +1109,11 @@ public String getSearchUrl() {
         return getUrl();
     }
 
+    @Override
+    public String getSearchIcon() {
+        return this.getIconClassName();
+    }
+
     /**
      * {@link RetentionStrategy} associated with this computer.
      *

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

@@ -519,6 +519,11 @@ public boolean supportsLogRotator() {
         return true;
     }
 
+    @Override
+    public String getSearchIcon() {
+        return "symbol-status-" +  this.getIconColor().getIconName();
+    }
+
     @Override
     protected SearchIndexBuilder makeSearchIndex() {
         return super.makeSearchIndex().add(new SearchIndex() {

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

@@ -44,6 +44,7 @@
 import hudson.security.AccessControlled;
 import hudson.security.SecurityRealm;
 import hudson.security.UserMayOrMayNotExistException2;
+import hudson.tasks.UserAvatarResolver;
 import hudson.util.FormValidation;
 import hudson.util.RunList;
 import hudson.util.XStream2;
@@ -277,6 +278,11 @@ public String getId() {
         return "/user/" + Util.rawEncode(idStrategy().keyFor(id));
     }
 
+    @Override
+    public String getSearchIcon() {
+        return UserAvatarResolver.resolve(this, "48x48");
+    }
+
     /**
      * The URL of the user page.
      */

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

@@ -560,6 +560,11 @@ public String getSearchUrl() {
         return getUrl();
     }
 
+    @Override
+    public String getSearchIcon() {
+        return "symbol-jobs";
+    }
+
     /**
      * Returns the transient {@link Action}s associated with the top page.
      *

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

@@ -46,6 +46,8 @@
 import jenkins.security.stapler.StaplerNotDispatchable;
 import jenkins.util.MemoryReductionUtil;
 import jenkins.util.SystemProperties;
+import org.jenkins.ui.symbol.Symbol;
+import org.jenkins.ui.symbol.SymbolRequest;
 import org.kohsuke.accmod.Restricted;
 import org.kohsuke.accmod.restrictions.NoExternalUse;
 import org.kohsuke.stapler.Ancestor;
@@ -56,6 +58,7 @@
 import org.kohsuke.stapler.StaplerResponse;
 import org.kohsuke.stapler.StaplerResponse2;
 import org.kohsuke.stapler.export.DataWriter;
+import org.kohsuke.stapler.export.ExportConfig;
 import org.kohsuke.stapler.export.Exported;
 import org.kohsuke.stapler.export.ExportedBean;
 import org.kohsuke.stapler.export.Flavor;
@@ -157,10 +160,23 @@ 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(), item.getUrl()));
+        for (SuggestedItem curItem : getSuggestions(req, query)) {
+            String iconName = curItem.item.getSearchIcon();
 
-        rsp.serveExposedBean(req, r, Flavor.JSON);
+            if (iconName == null ||
+                    (!iconName.startsWith("symbol-") && !iconName.startsWith("http"))
+            ) {
+                iconName = "symbol-search";
+            }
+
+            if (iconName.startsWith("symbol")) {
+                r.suggestions.add(new Item(curItem.getPath(), curItem.getUrl(),
+                        Symbol.get(new SymbolRequest.Builder().withRaw(iconName).build())));
+            } else {
+                r.suggestions.add(new Item(curItem.getPath(), curItem.getUrl(), iconName, "image"));
+            }
+        }
+        rsp.serveExposedBean(req, r, new ExportConfig());
     }
 
     /**
@@ -259,19 +275,42 @@ public static class Item {
 
         private final String url;
 
+        private final String type;
+
+        public final String iconXml;
+
         public Item(String name) {
-            this(name, null);
+            this(name, null, null);
+        }
+
+        public Item(String name, String url, String iconXml) {
+            this.name = name;
+            this.url = url;
+            this.iconXml = iconXml;
+            this.type = "symbol";
         }
 
-        public Item(String name, String url) {
+        public Item(String name, String url, String iconXml, String type) {
             this.name = name;
             this.url = url;
+            this.iconXml = iconXml;
+            this.type = type;
         }
 
         @Exported
         public String getUrl() {
             return url;
         }
+
+        @Exported
+        public String getIconXml() {
+            return iconXml;
+        }
+
+        @Exported
+        public String getType() {
+            return type;
+        }
     }
 
     private enum Mode {

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

@@ -25,6 +25,7 @@
 package hudson.search;
 
 import hudson.model.Build;
+import org.jenkins.ui.icon.IconSpec;
 
 /**
  * Represents an item reachable from {@link SearchIndex}.
@@ -54,6 +55,14 @@ public interface SearchItem {
 
     String getSearchUrl();
 
+    default String getSearchIcon() {
+        if (this instanceof IconSpec) {
+            return ((IconSpec) this).getIconClassName();
+        }
+
+        return "symbol-search";
+    }
+
     /**
      * Returns the {@link SearchIndex} to further search sub items inside this item.
      *

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

@@ -147,6 +147,7 @@
 import hudson.scm.RepositoryBrowser;
 import hudson.scm.SCM;
 import hudson.search.CollectionSearchIndex;
+import hudson.search.SearchIndex;
 import hudson.search.SearchIndexBuilder;
 import hudson.search.SearchItem;
 import hudson.security.ACL;
@@ -2345,9 +2346,29 @@ public String getSearchUrl() {
     @Override
     public SearchIndexBuilder makeSearchIndex() {
         SearchIndexBuilder builder = super.makeSearchIndex();
-        if (hasPermission(ADMINISTER)) {
-            builder.add("manage", Messages.ManageJenkinsAction_DisplayName());
-        }
+
+        this.actions.stream().filter(e -> e.getIconFileName() != null).forEach(action -> builder.add(new SearchItem() {
+            @Override
+            public String getSearchName() {
+                return action.getDisplayName();
+            }
+
+            @Override
+            public String getSearchUrl() {
+                return action.getUrlName();
+            }
+
+            @Override
+            public String getSearchIcon() {
+                return action.getIconFileName();
+            }
+
+            @Override
+            public SearchIndex getSearchIndex() {
+                return SearchIndex.EMPTY;
+            }
+        }));
+
         builder.add(new CollectionSearchIndex<TopLevelItem>() {
                     @Override
                     protected SearchItem get(String key) { return getItemByFullName(key, TopLevelItem.class); }

src/main/js/components/command-palette/datasources.js

@@ -1,6 +1,5 @@
 import { LinkResult } from "./models";
 import Search from "@/api/search";
-import * as Symbols from "./symbols";
 
 export const JenkinsSearchSource = {
   execute(query) {
@@ -18,7 +17,8 @@ export const JenkinsSearchSource = {
       rsp.json().then((data) => {
         return data["suggestions"].slice().map((e) =>
           LinkResult({
-            icon: Symbols.SEARCH,
+            icon: e.iconXml,
+            type: e.type,
             label: e.name,
             url: correctAddress(e.url),
           }),

src/main/js/components/command-palette/index.js

@@ -59,6 +59,7 @@ function init() {
       results = Promise.all([
         LinkResult({
           icon: Symbols.HELP,
+          type: "symbol",
           label: i18n.dataset.getHelp,
           url: headerCommandPaletteButton.dataset.searchHelpUrl,
           isExternal: true,
@@ -94,18 +95,23 @@ function init() {
       }
 
       searchResultsContainer.style.height = searchResults.offsetHeight + "px";
+      debouncedSpinner.cancel();
       commandPaletteSearchBarContainer.classList.remove(
         "jenkins-search--loading",
       );
     });
   }
 
+  const debouncedSpinner = debounce(() => {
+    commandPaletteSearchBarContainer.classList.add("jenkins-search--loading");
+  }, 150);
+
   const debouncedLoad = debounce(() => {
     renderResults();
   }, 150);
 
   commandPaletteInput.addEventListener("input", () => {
-    commandPaletteSearchBarContainer.classList.add("jenkins-search--loading");
+    debouncedSpinner();
     debouncedLoad();
   });
 
@@ -119,7 +125,16 @@ function init() {
   }
 
   function hideCommandPalette() {
-    commandPalette.close();
+    commandPalette.setAttribute("closing", "");
+
+    commandPalette.addEventListener(
+      "animationend",
+      () => {
+        commandPalette.removeAttribute("closing");
+        commandPalette.close();
+      },
+      { once: true },
+    );
   }
 
   function itemMouseEnter(item) {

src/main/js/components/command-palette/models.js

@@ -5,6 +5,7 @@ import { xmlEscape } from "@/util/security";
  * @param {Object} params
  * @param {string} params.icon
  * @param {string} params.label
+ * @param {string} params.type
  * @param {string} params.url
  * @param {boolean | undefined} params.isExternal
  */
@@ -16,9 +17,8 @@ export function LinkResult(params) {
       return `<a class="jenkins-command-palette__results__item" href="${xmlEscape(
         params.url,
       )}">
-        <div class="jenkins-command-palette__results__item__icon">${
-          params.icon
-        }</div>
+        ${params.type === "image" ? `<img alt="${xmlEscape(params.label)}" class="jenkins-command-palette__results__item__icon" src="${params.icon}" />` : ""}
+        ${params.type !== "image" ? `<div class="jenkins-command-palette__results__item__icon">${params.icon}</div>` : ""}
         ${xmlEscape(params.label)}
         ${params.isExternal ? Symbols.EXTERNAL_LINK : ""}
     </a>`;