diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly index e50e183598e8..2d18ebbd9464 100644 --- a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly +++ b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly @@ -19,7 +19,7 @@
- diff --git a/core/src/main/resources/lib/layout/search.jelly b/core/src/main/resources/lib/layout/search.jelly index 49af812987b2..06996ef46afc 100644 --- a/core/src/main/resources/lib/layout/search.jelly +++ b/core/src/main/resources/lib/layout/search.jelly @@ -28,26 +28,26 @@ THE SOFTWARE. The command center overlay for Jenkins -
- -
-
+ +
+
-
+
-
-
+
+
diff --git a/war/src/main/js/command-palette.js b/war/src/main/js/components/command-palette/command-palette.js similarity index 60% rename from war/src/main/js/command-palette.js rename to war/src/main/js/components/command-palette/command-palette.js index 3d9a2ad5e502..29e407602a4f 100644 --- a/war/src/main/js/command-palette.js +++ b/war/src/main/js/components/command-palette/command-palette.js @@ -1,16 +1,18 @@ -import "regenerator-runtime/runtime" -import Search from "./api/search"; +import "regenerator-runtime/runtime"; +import CommandPaletteService from "./services"; +import {LinkResult} from "@/components/command-palette/models"; +import * as Symbols from "./symbols"; window.addEventListener('load', () => { - const i18n = document.getElementById("command-center-i18n") - const headerCommandPaletteButton = document.getElementById("button-spotlight") - const commandPalette = document.getElementById("command-center") + const i18n = document.getElementById("command-palette-i18n") + const headerCommandPaletteButton = document.getElementById("button-open-command-palette"); + const commandPalette = document.getElementById("command-palette") const commandPaletteInput = document.getElementById("command-bar") - const commandPaletteLoadingSymbol = commandPalette.querySelector(".jenkins-command-center__search .icon") + const commandPaletteLoadingSymbol = commandPalette.querySelector(".jenkins-command-palette__search .icon") const searchResults = document.getElementById("search-results") const searchResultsContainer = document.getElementById("search-results-container") - const hoverClass = "jenkins-command-center__results__item--hover"; + const hoverClass = "jenkins-command-palette__results__item--hover"; // Events headerCommandPaletteButton.addEventListener("click", function () { @@ -31,46 +33,39 @@ window.addEventListener('load', () => { commandPaletteInput.addEventListener("input", async (e) => { commandPaletteLoadingSymbol.classList.add("icon--loading") - let results + const query = e.target.value; + let results; - if (e.target.value.length === 0) { + if (query.length === 0) { results = { [i18n.dataset.help]: [ - { - icon: { - svg: "" - }, - name: i18n.dataset.getHelp, - url: document.getElementById("page-header").dataset.searchHelpUrl.escapeHTML() - } + new LinkResult( + {svg: Symbols.HELP}, + i18n.dataset.getHelp, + undefined, + undefined, + document.getElementById("page-header").dataset.searchHelpUrl.escapeHTML(), + true + ) ] } } else { - const response = await Search.search(e.target.value); - const result = await response.json(); - - // Group the results - results = groupByKey(result["suggestions"], "category") + results = await CommandPaletteService.getResults(query); } // Clear current search results searchResults.innerHTML = "" - if (e.target.value.length === 0 || Object.keys(results).length > 0) { + if (query.length === 0 || Object.keys(results).length > 0) { for (const [category, items] of Object.entries(results)) { const heading = document.createElement("p") - heading.className = "jenkins-command-center__results__heading" + heading.className = "jenkins-command-palette__results__heading" heading.innerText = category searchResults.append(heading) items.forEach(function (obj) { let link = document.createElement("DIV") - link.innerHTML = ` -
${obj.icon ? `${obj.icon.svg ? obj.icon.svg : ``}` : ``}
- ${obj.name} - ${obj.description ? `${obj.description}` : ``} - - ` + link.innerHTML = obj.render(); link = link.firstChild link.addEventListener("mouseenter", e => itemMouseEnter(e)) searchResults.append(link) @@ -80,7 +75,7 @@ window.addEventListener('load', () => { updateSelectedItem(0) } else { const label = document.createElement("p") - label.className = "jenkins-command-center__info" + label.className = "jenkins-command-palette__info" label.innerHTML = "" + i18n.dataset.noResultsFor.escapeHTML() + " " + e.target.value.escapeHTML() searchResults.append(label) } @@ -142,15 +137,6 @@ window.addEventListener('load', () => { commandPalette.close(); } - // Group suggestions by 'category' field into map - function groupByKey(array, key) { - return array - .reduce((hash, obj) => { - if (obj[key] === undefined) return hash - return Object.assign(hash, {[obj[key]]: (hash[obj[key]] || []).concat(obj)}) - }, {}) - } - function itemMouseEnter(item) { let hoveredItems = document.querySelector("." + hoverClass) if (hoveredItems) { diff --git a/war/src/main/js/components/command-palette/helpers.js b/war/src/main/js/components/command-palette/helpers.js new file mode 100644 index 000000000000..4dc6e10f6ed2 --- /dev/null +++ b/war/src/main/js/components/command-palette/helpers.js @@ -0,0 +1,10 @@ +// Group suggestions by 'category' field into map +function groupByKey(array, key) { + return array + .reduce((hash, obj) => { + if (obj[key] === undefined) return hash + return Object.assign(hash, {[obj[key]]: (hash[obj[key]] || []).concat(obj)}) + }, {}) +} + +export default {groupByKey: groupByKey}; diff --git a/war/src/main/js/components/command-palette/models.js b/war/src/main/js/components/command-palette/models.js new file mode 100644 index 000000000000..00939e73c3bc --- /dev/null +++ b/war/src/main/js/components/command-palette/models.js @@ -0,0 +1,35 @@ +import * as Symbols from "./symbols"; + +class Result { + constructor(icon, label, description, category) { + 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; + } + render() { + return ` +
${this.icon ? `${this.icon.svg ? this.icon.svg : ``}` : ``}
+ ${this.label} + ${this.description ? `${this.description}` : ``} + ${this.isExternal ? Symbols.EXTERNAL_LINK : Symbols.CHEVRON_RIGHT} + ` + } +} diff --git a/war/src/main/js/components/command-palette/services.js b/war/src/main/js/components/command-palette/services.js new file mode 100644 index 000000000000..5cee5b001171 --- /dev/null +++ b/war/src/main/js/components/command-palette/services.js @@ -0,0 +1,13 @@ +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/js/components/command-palette/symbols.js b/war/src/main/js/components/command-palette/symbols.js new file mode 100644 index 000000000000..50ea8d58733c --- /dev/null +++ b/war/src/main/js/components/command-palette/symbols.js @@ -0,0 +1,3 @@ +export const CHEVRON_RIGHT = ``; +export const EXTERNAL_LINK = ``; +export const HELP = ``; diff --git a/war/src/main/less/modules/command-center.less b/war/src/main/less/modules/command-palette.less similarity index 83% rename from war/src/main/less/modules/command-center.less rename to war/src/main/less/modules/command-palette.less index bbbbfad22409..75b74d89b916 100644 --- a/war/src/main/less/modules/command-center.less +++ b/war/src/main/less/modules/command-palette.less @@ -1,25 +1,25 @@ :root { - --command-center-backdrop: rgba(125, 125, 125, 0.9); - --command-center-background: rgba(255, 255, 255, 0.8); - --command-center-focus-color: var(--primary); - --command-center-drop-shadow: 0 0 60px rgba(5, 5, 20, 0.4); - --command-center-inset-shadow: inset 0 0 2px 2px rgba(white, 0.1); + --command-palette-backdrop: rgba(125, 125, 125, 0.9); + --command-palette-background: rgba(255, 255, 255, 0.8); + --command-palette-focus-color: var(--primary); + --command-palette-drop-shadow: 0 0 60px rgba(5, 5, 20, 0.4); + --command-palette-inset-shadow: inset 0 0 2px 2px rgba(white, 0.1); } @media (prefers-color-scheme: dark) { :root { - --command-center-backdrop: rgba(20, 20, 25, 0.95); - --command-center-background: rgba(50, 50, 56, 0.7); - --command-center-focus-color: rgba(83, 193, 255, 0.5); - --command-center-drop-shadow: 0 0 60px rgba(0, 0, 15, 0.4); - --command-center-inset-shadow: inset 0 0 2px 2px rgba(240, 240, 255, 0.025); + --command-palette-backdrop: rgba(20, 20, 25, 0.95); + --command-palette-background: rgba(50, 50, 56, 0.7); + --command-palette-focus-color: rgba(83, 193, 255, 0.5); + --command-palette-drop-shadow: 0 0 60px rgba(0, 0, 15, 0.4); + --command-palette-inset-shadow: inset 0 0 2px 2px rgba(240, 240, 255, 0.025); } } -.jenkins-command-center__wrapper { +.jenkins-command-palette__wrapper { background: none; border: none; - filter: drop-shadow(var(--command-center-drop-shadow)); + filter: drop-shadow(var(--command-palette-drop-shadow)); margin: 20vh auto; &::backdrop { @@ -27,7 +27,7 @@ } } -.jenkins-command-center { +.jenkins-command-palette { position: relative; width: 50vw; min-width: 400px; @@ -36,8 +36,8 @@ pointer-events: auto; &__search { - background: var(--command-center-background); - box-shadow: 0 0 0 20px transparent, var(--command-center-inset-shadow); + background: var(--command-palette-background); + box-shadow: 0 0 0 20px transparent, var(--command-palette-inset-shadow); margin-bottom: 1.5rem; display: grid; grid-template-columns: auto 1fr auto; @@ -196,7 +196,7 @@ } &:focus-within { - box-shadow: 0 0 0 5px var(--command-center-focus-color), var(--command-center-inset-shadow); + box-shadow: 0 0 0 5px var(--command-palette-focus-color), var(--command-palette-inset-shadow); } } @@ -204,9 +204,9 @@ display: flex; flex-direction: column; border-radius: 10px; - background: var(--command-center-background); + background: var(--command-palette-background); backdrop-filter: saturate(2) blur(10px); - box-shadow: var(--command-center-inset-shadow); + box-shadow: var(--command-palette-inset-shadow); height: 0; transition: height 0.3s ease; overflow: hidden; @@ -296,17 +296,17 @@ display: flex; align-items: center; justify-content: center; - width: 18px; - height: 18px; + width: 1.4rem; + height: 1.4rem; margin-right: 12.5px; overflow: hidden; pointer-events: none; - color: var(--primary); + color: var(--text-color); svg, img { - width: 18px; - height: 18px; + width: 1.4rem; + height: 1.4rem; } } diff --git a/war/src/main/less/styles.less b/war/src/main/less/styles.less index 3f1e6bc0d19b..46100db38f74 100644 --- a/war/src/main/less/styles.less +++ b/war/src/main/less/styles.less @@ -38,7 +38,7 @@ html { @import './modules/breadcrumbs'; @import './modules/buttons'; @import './modules/buttons-temp'; -@import "./modules/command-center"; +@import "./modules/command-palette"; @import './modules/content-blocks'; @import './modules/icon-size'; @import './modules/icons'; diff --git a/war/webpack.config.js b/war/webpack.config.js index d9714d90514a..dd4c3d31fa39 100644 --- a/war/webpack.config.js +++ b/war/webpack.config.js @@ -29,7 +29,7 @@ module.exports = (env, argv) => ({ path.join(__dirname, "src/main/js/config-tabbar.js"), path.join(__dirname, "src/main/js/config-tabbar.less"), ], - "command-palette": [path.join(__dirname, "src/main/js/command-palette.js")], + "command-palette": [path.join(__dirname, "src/main/js/components/command-palette/command-palette.js")], "sortable-drag-drop": [path.join(__dirname, "src/main/js/sortable-drag-drop.js")], "section-to-tabs": [path.join(__dirname, "src/main/js/section-to-tabs.js")], "filter-build-history": [path.join(__dirname, "src/main/js/filter-build-history.js")], @@ -154,7 +154,8 @@ module.exports = (env, argv) => ({ } }, resolve: { - alias:{ + alias: { + '@': path.resolve(__dirname, 'src/main/js'), // Needed to be able to register helpers at runtime handlebars: 'handlebars/runtime', },