Working build

janfaracik · May 23, 2022 · 4cb4af6 · 4cb4af6
1 parent 4c12763
commit 4cb4af6
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 53 deletions.
diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -242,8 +242,6 @@ THE SOFTWARE.
       </div>
     </footer>
     </j:if>
-
-    <script src="${resURL}/jsbundles/search.js" type="text/javascript"/>
   </body>
 </html>
 </l:view>

diff --git a/core/src/main/resources/lib/layout/search.jelly b/core/src/main/resources/lib/layout/search.jelly
@@ -52,5 +52,5 @@ THE SOFTWARE.
     </div>
   </dialog>
 
-  <script src="${resURL}/jsbundles/search.js" type="text/javascript" />
+  <script src="${resURL}/jsbundles/command-palette.js" type="text/javascript" />
 </j:jelly>
diff --git a/war/src/main/js/api/search.js b/war/src/main/js/api/search.js
@@ -0,0 +1,9 @@
+/**
+ * @param {string} searchTerm
+ */
+async function search(searchTerm) {
+  const address = document.getElementById("page-header").dataset.searchUrl.escapeHTML();
+  return fetch(`${address}?query=${searchTerm}`);
+}
+
+export default { search: search };
diff --git a/war/src/main/js/search.js → war/src/main/js/command-palette.js b/war/src/main/js/search.js → war/src/main/js/command-palette.js
@@ -1,61 +1,53 @@
-import "core-js/stable"
 import "regenerator-runtime/runtime"
+import Search from "./api/search";
 
 window.addEventListener('load', () => {
   const i18n = document.getElementById("command-center-i18n")
-  const spotlightButton = document.getElementById("button-spotlight")
-  const commandCenter = document.getElementById("command-center")
-  const commandBarInput = document.getElementById("command-bar")
-  const commandBarMagnifyingGlass = commandCenter.querySelector(".jenkins-command-center__search .icon")
+  const headerCommandPaletteButton = document.getElementById("button-spotlight")
+  const commandPalette = document.getElementById("command-center")
+  const commandPaletteInput = document.getElementById("command-bar")
+  const commandPaletteLoadingSymbol = commandPalette.querySelector(".jenkins-command-center__search .icon")
   const searchResults = document.getElementById("search-results")
   const searchResultsContainer = document.getElementById("search-results-container")
-  // const commandBarKeyboardShortcut = document.getElementById("command-center-keyboard-shortcut")
 
-  const hoverClass = "jenkins-command-center__results__item--hover"
+  const hoverClass = "jenkins-command-center__results__item--hover";
 
-// Update the keyboard shortcut text depending on OS
-//   commandBarKeyboardShortcut.innerHTML = generateKeyboardShortcutUI("CMD+K")
-
-// Events
-  spotlightButton.addEventListener("click", function () {
-    console.log("hello")
-
-    if (commandCenter.open) {
-      hideCommandCenter()
+  // Events
+  headerCommandPaletteButton.addEventListener("click", function () {
+    if (commandPalette.hasAttribute("open")) {
+      hideCommandCenter();
     } else {
-      showCommandCenter()
+      showCommandCenter();
     }
-  })
+  });
 
-  commandCenter.addEventListener("click", function (e) {
+  commandPalette.addEventListener("click", function (e) {
     if (e.target !== e.currentTarget) {
       return
     }
 
-    hideCommandCenter()
+    hideCommandCenter();
   })
 
-  commandBarInput.addEventListener("input", async (e) => {
-    commandBarMagnifyingGlass.classList.add("icon--loading")
+  commandPaletteInput.addEventListener("input", async (e) => {
+    commandPaletteLoadingSymbol.classList.add("icon--loading")
     let results
 
     if (e.target.value.length === 0) {
       results = {
         [i18n.dataset.help]: [
           {
             icon: {
-              svg: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"ionicon\" viewBox=\"0 0 512 512\"><title>Help Circle</title><path d=\"M256 80a176 176 0 10176 176A176 176 0 00256 80z\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"32\"/><path d=\"M200 202.29s.84-17.5 19.57-32.57C230.68 160.77 244 158.18 256 158c10.93-.14 20.69 1.67 26.53 4.45 10 4.76 29.47 16.38 29.47 41.09 0 26-17 37.81-36.37 50.8S251 281.43 251 296\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"28\"/><circle cx=\"250\" cy=\"348\" r=\"20\" fill=\"currentColor\"/></svg>"
+              svg: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 80a176 176 0 10176 176A176 176 0 00256 80z\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"32\"/><path d=\"M200 202.29s.84-17.5 19.57-32.57C230.68 160.77 244 158.18 256 158c10.93-.14 20.69 1.67 26.53 4.45 10 4.76 29.47 16.38 29.47 41.09 0 26-17 37.81-36.37 50.8S251 281.43 251 296\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"28\"/><circle cx=\"250\" cy=\"348\" r=\"20\" fill=\"currentColor\"/></svg>"
             },
             name: i18n.dataset.getHelp,
             url: document.getElementById("page-header").dataset.searchHelpUrl.escapeHTML()
           }
         ]
       }
     } else {
-      let response = await fetch(document.getElementById("page-header").dataset.searchUrl.escapeHTML() + "?query=" + e.target.value)
-      let result = await response.json()
-
-      console.log(result)
+      const response = await Search.search(e.target.value);
+      const result = await response.json();
 
       // Group the results
       results = groupByKey(result["suggestions"], "category")
@@ -94,10 +86,10 @@ window.addEventListener('load', () => {
     }
 
     searchResultsContainer.style.height = searchResults.offsetHeight + "px"
-    commandBarMagnifyingGlass.classList.remove("icon--loading")
+    commandPaletteLoadingSymbol.classList.remove("icon--loading")
   })
 
-  commandBarInput.addEventListener("keyup", function (event) {
+  commandPaletteInput.addEventListener("keyup", function (event) {
     const maxLength = searchResults.getElementsByTagName("a").length
     let selectedIndex = -1
     let hoveredItem = document.querySelector("." + hoverClass)
@@ -137,24 +129,20 @@ window.addEventListener('load', () => {
     }
   })
 
-// Helper methods for visibility of command center
+  // Helper methods for visibility of command center
   function showCommandCenter() {
-    commandCenter.showModal()
-    // commandCenter.style.display = "flex"
-    // commandCenterBackdrop.style.display = "block"
-    commandBarInput.focus()
+    commandPalette.showModal();
+    commandPaletteInput.focus();
 
     // Fire empty input event to command bar to set appropriate UI states (OOBE, results, no results)
-    commandBarInput.dispatchEvent(new Event("input"))
+    commandPaletteInput.dispatchEvent(new Event("input"));
   }
 
   function hideCommandCenter() {
-    commandCenter.close()
-    // commandCenter.style.display = "none"
-    // commandCenterBackdrop.style.display = "none"
+    commandPalette.close();
   }
 
-// Group suggestions by 'category' field into map
+  // Group suggestions by 'category' field into map
   function groupByKey(array, key) {
     return array
       .reduce((hash, obj) => {

diff --git 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"),
     ],
-    "search": [path.join(__dirname, "src/main/js/search.js")],
+    "command-palette": [path.join(__dirname, "src/main/js/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")],

diff --git a/war/yarn.lock b/war/yarn.lock
@@ -3938,11 +3938,6 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
   integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
 
-hotkeys-js@^3.8.7:
-  version "3.8.7"
-  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
-  integrity sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==
-
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -6815,11 +6810,6 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
   integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
 
-regenerator-runtime@^0.13.9:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
-  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
-
 regenerator-transform@^0.14.2:
   version "0.14.4"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
-Original file line number
+Diff line change
@@ Expand Up / @@ -242,8 +242,6 @@ THE SOFTWARE. @@
           </div>
         </footer>
         </j:if>
-        <script src="${resURL}/jsbundles/search.js" type="text/javascript"/>
       </body>
     </html>
     </l:view>
@@ Expand Down @@