From bdcb9b7b029f4a7a6a94229790856ad613e9493d Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 25 May 2022 00:30:56 +0100 Subject: [PATCH] Refactor using datasources --- .../command-palette/command-palette.js | 27 +++++++++++++------ .../components/command-palette/datasources.js | 11 ++++++++ .../js/components/command-palette/helpers.js | 10 +++---- .../js/components/command-palette/models.js | 19 ++----------- .../js/components/command-palette/services.js | 13 --------- .../main/less/modules/command-palette.less | 2 ++ 6 files changed, 39 insertions(+), 43 deletions(-) create mode 100644 war/src/main/js/components/command-palette/datasources.js delete mode 100644 war/src/main/js/components/command-palette/services.js diff --git a/war/src/main/js/components/command-palette/command-palette.js b/war/src/main/js/components/command-palette/command-palette.js index 29e407602a4f..d17880e2ce15 100644 --- a/war/src/main/js/components/command-palette/command-palette.js +++ b/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) }) diff --git a/war/src/main/js/components/command-palette/datasources.js b/war/src/main/js/components/command-palette/datasources.js new file mode 100644 index 000000000000..444f04aeed5c --- /dev/null +++ b/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)); + }); + } +} diff --git a/war/src/main/js/components/command-palette/helpers.js b/war/src/main/js/components/command-palette/helpers.js index 4dc6e10f6ed2..44f3e28934b0 100644 --- a/war/src/main/js/components/command-palette/helpers.js +++ b/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}; diff --git a/war/src/main/js/components/command-palette/models.js b/war/src/main/js/components/command-palette/models.js index 00939e73c3bc..7c47947e111c 100644 --- a/war/src/main/js/components/command-palette/models.js +++ b/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 `` - } -} - -export class LinkResult extends Result { - constructor(icon, label, description, category, url, isExternal) { - super(icon, label, description, category); this.url = url; this.isExternal = isExternal; } diff --git a/war/src/main/js/components/command-palette/services.js b/war/src/main/js/components/command-palette/services.js deleted file mode 100644 index 5cee5b001171..000000000000 --- a/war/src/main/js/components/command-palette/services.js +++ /dev/null @@ -1,13 +0,0 @@ -import CommandPaletteHelpers from "./helpers"; -import {LinkResult} from "./models"; -import Search from "@/api/search"; - -async function getResults(query) { - const response = await Search.search(query); - return await response.json().then(data => { - const results = [...data["suggestions"]].map(e => new LinkResult(e.icon, e.name, e.description, e.category, e.url)); - return CommandPaletteHelpers.groupByKey(results, "category"); - }); -} - -export default {getResults: getResults} diff --git a/war/src/main/less/modules/command-palette.less b/war/src/main/less/modules/command-palette.less index 75b74d89b916..94417e95a07c 100644 --- a/war/src/main/less/modules/command-palette.less +++ b/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 {