Refactor using datasources

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

@@ -1,7 +1,10 @@
 import "regenerator-runtime/runtime";
-import CommandPaletteService from "./services";
 import {LinkResult} from "@/components/command-palette/models";
 import * as Symbols from "./symbols";
+import {JenkinsSearchSource} from "./datasources";
+import Helpers from './helpers';
+
+const datasources = [JenkinsSearchSource];
 
 window.addEventListener('load', () => {
   const i18n = document.getElementById("command-palette-i18n")
@@ -37,22 +40,24 @@ window.addEventListener('load', () => {
     let results;
 
     if (query.length === 0) {
-      results = {
-        [i18n.dataset.help]: [
+      results = [
           new LinkResult(
           {svg: Symbols.HELP},
           i18n.dataset.getHelp,
           undefined,
-          undefined,
+          "Help",
           document.getElementById("page-header").dataset.searchHelpUrl.escapeHTML(),
             true
           )
         ]
-      }
     } else {
-      results = await CommandPaletteService.getResults(query);
+      await Promise.all(datasources.map(ds => ds.execute(query))).then(response => {
+        results = response.flat();
+      });
     }
 
+    results = Helpers.groupResultsByCategory(results);
+
     // Clear current search results
     searchResults.innerHTML = ""
 
@@ -64,9 +69,15 @@ window.addEventListener('load', () => {
         searchResults.append(heading)
 
         items.forEach(function (obj) {
+          const renderedObject = obj.render();
+
           let link = document.createElement("DIV")
-          link.innerHTML = obj.render();
-          link = link.firstChild
+          if (renderedObject instanceof HTMLElement) {
+            link = renderedObject;
+          } else {
+            link.innerHTML = renderedObject;
+            link = link.firstChild;
+          }
           link.addEventListener("mouseenter", e => itemMouseEnter(e))
           searchResults.append(link)
         })

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

@@ -0,0 +1,11 @@
+import {LinkResult} from "./models";
+import Search from "@/api/search";
+
+export const JenkinsSearchSource = {
+  async execute(query) {
+    const response = await Search.search(query);
+    return await response.json().then(data => {
+      return [...data["suggestions"]].map(e => new LinkResult(e.icon, e.name, e.description, e.category, e.url));
+    });
+  }
+}

war/src/main/js/components/command-palette/helpers.js

@@ -1,10 +1,10 @@
-// Group suggestions by 'category' field into map
-function groupByKey(array, key) {
+// Group results by 'category' field into map
+function groupResultsByCategory(array) {
   return array
     .reduce((hash, obj) => {
-      if (obj[key] === undefined) return hash
-      return Object.assign(hash, {[obj[key]]: (hash[obj[key]] || []).concat(obj)})
+      if (obj.category === undefined) return hash
+      return Object.assign(hash, {[obj.category]: (hash[obj.category] || []).concat(obj)})
     }, {})
 }
 
-export default {groupByKey: groupByKey};
+export default {groupResultsByCategory: groupResultsByCategory};

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

@@ -1,26 +1,11 @@
 import * as Symbols from "./symbols";
 
-class Result {
-  constructor(icon, label, description, category) {
+export class LinkResult {
+  constructor(icon, label, description, category, url, isExternal) {
     this.icon = icon;
     this.label = label;
     this.description = description;
     this.category = category;
-    console.log(this.icon)
-  }
-  render() {
-    return `<button class="jenkins-command-palette__results__item">
-        <div class="jenkins-command-palette__results__item__icon">${this.icon}"}</div>
-        ${this.label}
-        ${this.description ? `<span class="jenkins-command-palette__results__item__description">${this.description}</span>` : ``}
-        ${Symbols.CHEVRON_RIGHT}
-    </button>`
-  }
-}
-
-export class LinkResult extends Result {
-  constructor(icon, label, description, category, url, isExternal) {
-    super(icon, label, description, category);
     this.url = url;
     this.isExternal = isExternal;
   }

war/src/main/less/modules/command-palette.less

@@ -243,6 +243,8 @@
       transition: var(--standard-transition);
       box-shadow: 0 0 0 10px transparent;
       z-index: 0;
+      border: none;
+      outline: none;
 
       &::before,
       &::after {