Add support for images

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

@@ -58,6 +58,7 @@ import org.kohsuke.stapler.StaplerRequest2;
 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;
@@ -159,17 +160,23 @@ public class Search implements StaplerProxy {
      */
     public void doSuggest(StaplerRequest2 req, StaplerResponse2 rsp, @QueryParameter String query) throws IOException, ServletException {
         Result r = new Result();
-        for (SuggestedItem item : getSuggestions(req, query)) {
-            String symbolName = item.item.getSearchIcon();
+        for (SuggestedItem curItem : getSuggestions(req, query)) {
+            String iconName = curItem.item.getSearchIcon();
 
-            if (symbolName == null || !symbolName.startsWith("symbol-")) {
-                symbolName = "symbol-search";
+            if (iconName == null ||
+                    (!iconName.startsWith("symbol-") && !iconName.startsWith("http"))
+            ) {
+                iconName = "symbol-search";
             }
 
-            r.suggestions.add(new Item(item.getPath(), item.getUrl(),
-                    Symbol.get(new SymbolRequest.Builder().withRaw(symbolName).build())));
+            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, Flavor.JSON);
+        rsp.serveExposedBean(req, r, new ExportConfig());
     }
 
     /**
@@ -268,6 +275,8 @@ public class Search implements StaplerProxy {
 
         private final String url;
 
+        private final String type;
+
         public final String iconXml;
 
         public Item(String name) {
@@ -278,6 +287,14 @@ public class Search implements StaplerProxy {
             this.name = name;
             this.url = url;
             this.iconXml = iconXml;
+            this.type = "symbol";
+        }
+
+        public Item(String name, String url, String iconXml, String type) {
+            this.name = name;
+            this.url = url;
+            this.iconXml = iconXml;
+            this.type = type;
         }
 
         @Exported
@@ -289,6 +306,11 @@ public class Search implements StaplerProxy {
         public String getIconXml() {
             return iconXml;
         }
+
+        @Exported
+        public String getType() {
+            return type;
+        }
     }
 
     private enum Mode {

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

@@ -18,6 +18,7 @@ export const JenkinsSearchSource = {
         return data["suggestions"].slice().map((e) =>
           LinkResult({
             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,

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>`;