Merge branch '1376-gps-load-more-results' into 'main'

Add pagination to search results

Closes #1376

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/3510

Merged-by: Suzanne Selhorn <sselhorn@gitlab.com>
Reviewed-by: David O'Regan <doregan@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>
Co-authored-by: David O'Regan <doregan@gitlab.com>

1 files changed, 44 insertions, 4 deletions

diff --git a/content/frontend/search/components/google_results.vue b/content/frontend/search/components/google_results.vue
index 07dca9de..5cccbba5 100644
--- a/content/frontend/search/components/google_results.vue
+++ b/content/frontend/search/components/google_results.vue
@@ -1,6 +1,12 @@
 <script>
 /* global GOOGLE_SEARCH_KEY */
-import { GlSearchBoxByClick, GlLink, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import {
+  GlSearchBoxByClick,
+  GlLink,
+  GlLoadingIcon,
+  GlSafeHtmlDirective as SafeHtml,
+  GlPagination,
+} from '@gitlab/ui';
 import { getSearchQueryFromURL, updateURLParams } from '../search_helpers';
 import { GPS_ENDPOINT, GPS_ID } from '../../services/google_search_api';
 
@@ -8,6 +14,8 @@ export default {
   components: {
     GlSearchBoxByClick,
     GlLink,
+    GlLoadingIcon,
+    GlPagination,
   },
   directives: {
     SafeHtml,
@@ -17,21 +25,36 @@ export default {
     return {
       query: queryParam || '',
       submitted: false,
+      loading: false,
       error: false,
+      pageNumber: 1,
       response: {},
       results: [],
     };
   },
   computed: {
-    resultCount() {
+    resultSummary() {
       const { count, startIndex } = this.response.queries.request[0];
       const end = startIndex - 1 + count;
       return `Showing ${startIndex}-${end} of ${this.response.searchInformation.formattedTotalResults} results`;
     },
     noResults() {
-      return this.submitted && !this.results.length && !this.error;
+      return this.submitted && !this.loading && !this.results.length && !this.error;
+    },
+    showPager() {
+      return (
+        this.submitted && this.response.searchInformation.totalResults > this.MAX_RESULTS_PER_PAGE
+      );
+    },
+    pagerMaxItems() {
+      return Math.min(this.response.searchInformation.totalResults, this.MAX_TOTAL_RESULTS);
     },
   },
+  created() {
+    // Limits from the Google API
+    this.MAX_RESULTS_PER_PAGE = 10;
+    this.MAX_TOTAL_RESULTS = 100;
+  },
   mounted() {
     if (this.query) {
       this.search(this.query);
@@ -50,6 +73,7 @@ export default {
               key: GOOGLE_SEARCH_KEY,
               cx: GPS_ID,
               q: this.query,
+              start: (this.pageNumber - 1) * this.MAX_RESULTS_PER_PAGE + 1,
             }),
         );
         data = await response.json();
@@ -70,8 +94,13 @@ export default {
     },
     async search(query) {
       this.query = query;
+      this.results = [];
+
+      this.loading = true;
       this.response = await this.fetchGoogleResults();
       this.results = this.response.items ? this.response.items : [];
+      this.loading = false;
+
       this.submitted = true;
       updateURLParams(this.query);
     },
@@ -84,9 +113,11 @@ export default {
     <h1>Search</h1>
     <gl-search-box-by-click v-model="query" :value="query" @submit="onSubmit" />
     <div v-if="results.length" class="gl-font-sm gl-mb-5">
-      {{ resultCount }}
+      {{ resultSummary }}
     </div>
 
+    <gl-loading-icon v-if="loading" size="lg" class="gl-mt-5" />
+
     <ul
       v-if="results.length"
       class="gl-list-style-none gl-pl-2 gl-max-w-80"
@@ -102,6 +133,15 @@ export default {
       </li>
     </ul>
 
+    <gl-pagination
+      v-if="showPager"
+      v-model="pageNumber"
+      :per-page="MAX_RESULTS_PER_PAGE"
+      :total-items="pagerMaxItems"
+      class="gl-mt-9"
+      @input="search(query)"
+    />
+
     <p v-if="noResults" class="gl-py-5">No results found.</p>
     <p v-if="error" class="gl-py-5" data-testid="search-error">
       Error fetching results. Please try again later.