From a8b007d0fb5677cb9f8242579b66e74d3f36288f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yoann=20Rodi=C3=A8re?= Date: Mon, 11 Mar 2024 17:32:26 +0100 Subject: [PATCH 1/3] Fix "Sorry, no guides matched your search." when starting initial search --- assets/javascript/guides-app.js | 36 ++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/assets/javascript/guides-app.js b/assets/javascript/guides-app.js index 28b9ed70fdc..ad56d8c50ae 100644 --- a/assets/javascript/guides-app.js +++ b/assets/javascript/guides-app.js @@ -14,6 +14,13 @@ function debounce(wait, fn) { } } +function concat(fn1, fn2) { + return function(...args) { + fn1.apply(this, args) + fn2.apply(this, args) + } +} + const appSelector = '#guides-app' const appElement = document.querySelector(appSelector); @@ -44,13 +51,21 @@ const app = createApp({ }, watch: { 'search.input.q': { - // "debounce" makes sure we only run search ~300ms after the user is done typing the text - // WARNING: we really do want to debounce here, NOT in setters, - // because debouncing in setters leads to data in input forms being refreshed after the timeout, - // causing problems when typing text relatively fast. - handler: debounce(300, function(newValue, oldValue) { - this.resetAndSearch() - }) + handler: concat( + // Without debouncing, we want to cancel the previous search and mark the view as "loading", + // so that we don't mistakenly display "no results" while debouncing the initial search. + // See https://github.com/quarkusio/search.quarkus.io/issues/200 + function(newValue, oldValue) { + this.resetAndMarkLoading() + }, + // "debounce" makes sure we only run search ~300ms after the user is done typing the text + // WARNING: we really do want to debounce here, NOT in setters, + // because debouncing in setters leads to data in input forms being refreshed after the timeout, + // causing problems when typing text relatively fast. + debounce(300, function(newValue, oldValue) { + this.resetAndSearch() + }) + ) }, 'search.input.categories': { handler(newValue, oldValue) { @@ -161,12 +176,15 @@ const app = createApp({ }) }, methods: { - async resetAndSearch() { + async resetAndMarkLoading() { if (this.loading) { this.loading.abort() } - this.loading = new AbortController(); + this.loading = new AbortController() this._resetResults() + }, + async resetAndSearch() { + this.resetAndMarkLoading() await this._searchBatch(this.initialTimeout) }, async searchMore() { From ea55e07b5b468db701ed930a706ffbd0da680acf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yoann=20Rodi=C3=A8re?= Date: Tue, 12 Mar 2024 10:02:14 +0100 Subject: [PATCH 2/3] Fix potential issues with Guide search --- assets/javascript/guides-app.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/assets/javascript/guides-app.js b/assets/javascript/guides-app.js index ad56d8c50ae..69ecfd6cb90 100644 --- a/assets/javascript/guides-app.js +++ b/assets/javascript/guides-app.js @@ -185,7 +185,7 @@ const app = createApp({ }, async resetAndSearch() { this.resetAndMarkLoading() - await this._searchBatch(this.initialTimeout) + await this._searchBatch(this.loading, this.initialTimeout) }, async searchMore() { if (this.loading) { @@ -193,20 +193,19 @@ const app = createApp({ } this.loading = new AbortController(); this.search.page = this.search.page + 1 - await this._searchBatch(this.moreTimeout) + await this._searchBatch(this.loading, this.moreTimeout) }, _resetResults() { this.search.page = 0 this.search.result.hits = [] this.search.result.hasMoreHits = false }, - async _searchBatch(timeout) { - if (!this.hasInput) { - // No input => no search - return - } - const controller = this.loading + async _searchBatch(controller, timeout) { try { + if (!this.hasInput) { + // No input => no search + return + } if (this.hasInputWithTooFewChars) { throw 'Too few characters' } From a3c543615e49aaed63642bb212056343475e875c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yoann=20Rodi=C3=A8re?= Date: Tue, 12 Mar 2024 10:19:50 +0100 Subject: [PATCH 3/3] Fix missing CSS classes when guide search defaults to Javascript --- assets/javascript/guides-app.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/javascript/guides-app.js b/assets/javascript/guides-app.js index 69ecfd6cb90..4ec08e49607 100644 --- a/assets/javascript/guides-app.js +++ b/assets/javascript/guides-app.js @@ -132,8 +132,11 @@ const app = createApp({ new URL(link.href).pathname, { url: url, - className: element.className, title: link.innerHTML, + type: [...element.classList] + .filter(clazz => clazz.endsWith("bkg")) + .map(clazz => clazz.substring(0, clazz.length - "bkg".length)) + .at(0), summary: element.querySelector('div .description').innerHTML, keywords: element.querySelector('div .keywords').innerHTML, categories: element.querySelector('div .categories').innerHTML, @@ -146,7 +149,6 @@ const app = createApp({ url, { url: url, - className: element.className, title: element.querySelector('p.title').innerHTML, summary: element.querySelector('div.description').innerHTML, keywords: element.querySelector('div.keywords').innerHTML,