Rewrite links for older versionssarahg/gps-versions

5 files changed, 108 insertions, 10 deletions

diff --git a/content/frontend/search/components/google_results.vue b/content/frontend/search/components/google_results.vue
index cc078674..e3e2ca68 100644
--- a/content/frontend/search/components/google_results.vue
+++ b/content/frontend/search/components/google_results.vue
@@ -10,6 +10,7 @@ import {
 import isEqual from 'lodash.isequal';
 import { getSearchQueryFromURL, updateURLParams } from '../search_helpers';
 import { GPS_ENDPOINT, GPS_ID } from '../../services/google_search_api';
+import { getVersions } from '../../services/fetch_versions';
 import SearchFilters from './search_filters.vue';
 
 export default {
@@ -34,10 +35,12 @@ export default {
       response: {},
       results: [],
       activeFilters: [],
+      version: '',
     };
   },
   computed: {
     resultSummary() {
+      if (!this.response.queries) return '';
       const { count, startIndex } = this.response.queries.request[0];
       const end = startIndex - 1 + count;
       return `Showing ${startIndex}-${end} of ${this.response.searchInformation.formattedTotalResults} results`;
@@ -57,10 +60,13 @@ export default {
       return Math.min(this.response.searchInformation.totalResults, this.MAX_TOTAL_RESULTS);
     },
   },
-  created() {
+  async created() {
     // Limits from the Google API
     this.MAX_RESULTS_PER_PAGE = 10;
     this.MAX_TOTAL_RESULTS = 100;
+
+    this.version = document.querySelector('meta[name="gitlab-docs-version"]').content;
+    this.allVersions = await getVersions();
   },
   mounted() {
     if (this.query) {
@@ -121,14 +127,22 @@ export default {
         this.loading = false;
         this.submitted = true;
         updateURLParams(this.query);
-
-        // Add a relative link to each result object.
-        this.results = this.results.map((obj) => ({
-          ...obj,
-          relativeLink: obj.link.replace('https://docs.gitlab.com/', '/'),
-        }));
+        this.rewriteLinks(this.version);
       }
     },
+    rewriteLinks(version) {
+      // Include the version in the result link if we're viewing an older site version.
+      const pathPrefix = version !== this.allVersions.next ? version : '';
+
+      // If including a version prefix, point to the production site.
+      // Otherwise, links can be relative.
+      const url = pathPrefix ? `https://docs.gitlab.com/${pathPrefix}/` : '/';
+
+      this.results = this.results.map((obj) => ({
+        ...obj,
+        customLink: obj.link.replace('https://docs.gitlab.com/', url),
+      }));
+    },
   },
 };
 </script>
@@ -137,7 +151,12 @@ export default {
   <div class="google-search gl-mb-9">
     <h1>Search</h1>
     <div class="gl-h-11 gl-mb-5">
-      <gl-search-box-by-click v-model="query" :value="query" @submit="search(query)" />
+      <gl-search-box-by-click
+        v-model="query"
+        :value="query"
+        :clearable="false"
+        @submit="search(query)"
+      />
       <div v-if="results.length" class="gl-font-sm gl-mb-5 gl-ml-1">
         {{ resultSummary }}
       </div>
@@ -155,7 +174,7 @@ export default {
         <ul v-if="results.length" class="gl-list-style-none gl-pl-2" data-testid="search-results">
           <li v-for="result in results" :key="result.cacheId" class="gl-mb-5!">
             <gl-link
-              :href="`${result.relativeLink}`"
+              :href="`${result.customLink}`"
               class="gl-font-lg gl-border-bottom-0! gl-hover-text-decoration-underline:hover gl-mb-2"
               >{{ cleanTitle(result.title) }}
             </gl-link>
diff --git a/layouts/search.html b/layouts/search.html
index bf9aea2b..425826cb 100644
--- a/layouts/search.html
+++ b/layouts/search.html
@@ -34,6 +34,7 @@
     </section>
     <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
+    <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
 
     <% if production? %>
     <%# Add analytics only in production %>
diff --git a/spec/frontend/default/components/helpers/versions_menu_helper.js b/spec/frontend/default/components/helpers/versions_helper.js
index 5842880e..5842880e 100644
--- a/spec/frontend/default/components/helpers/versions_menu_helper.js
+++ b/spec/frontend/default/components/helpers/versions_helper.js
diff --git a/spec/frontend/default/components/versions_menu_spec.js b/spec/frontend/default/components/versions_menu_spec.js
index 7de730d2..ceba6a0e 100644
--- a/spec/frontend/default/components/versions_menu_spec.js
+++ b/spec/frontend/default/components/versions_menu_spec.js
@@ -7,7 +7,7 @@ import flushPromises from 'flush-promises';
 import VersionsMenu from '../../../../content/frontend/default/components/versions_menu.vue';
 import { getVersions } from '../../../../content/frontend/services/fetch_versions';
 import { mockVersions } from '../../__mocks__/versions_mock';
-import { setWindowPath, setVersionMetatag } from './helpers/versions_menu_helper';
+import { setWindowPath, setVersionMetatag } from './helpers/versions_helper';
 
 jest.mock('../../../../content/frontend/services/fetch_versions');
 
diff --git a/spec/frontend/search/google_search_spec.js b/spec/frontend/search/google_search_spec.js
index 3d2554b9..bff8f30d 100644
--- a/spec/frontend/search/google_search_spec.js
+++ b/spec/frontend/search/google_search_spec.js
@@ -5,13 +5,20 @@
 import { shallowMount } from '@vue/test-utils';
 import SearchPage from '../../../content/frontend/search/components/google_results.vue';
 import { GPS_ENDPOINT } from '../../../content/frontend/services/google_search_api';
+import { mockVersions } from '../__mocks__/versions_mock';
+import { setVersionMetatag } from '../default/components/helpers/versions_helper';
+
+jest.mock('../../../content/frontend/services/fetch_versions');
 
 describe('content/frontend/search/components/google_results.vue', () => {
   it('Search form renders', () => {
+    setVersionMetatag(mockVersions.next);
     const wrapper = shallowMount(SearchPage);
     expect(wrapper.findComponent(SearchPage).isVisible()).toBe(true);
   });
+});
 
+describe('content/frontend/search/components/google_results.vue#search', () => {
   it('API request failure shows an error', async () => {
     const wrapper = shallowMount(SearchPage);
     const fetch = jest.fn(() => {
@@ -48,3 +55,74 @@ describe('content/frontend/search/components/google_results.vue', () => {
     }
   });
 });
+
+describe('content/frontend/search/components/google_results.vue#rewriteLinks', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(SearchPage, {
+      data() {
+        return {
+          results: [
+            { link: 'https://docs.gitlab.com/some-page.html', title: 'Some Page', customLink: '' },
+          ],
+        };
+      },
+    });
+  });
+  afterEach(() => {
+    document.querySelector('meta[name="gitlab-docs-version"]').remove();
+  });
+
+  it('includes version in result link if viewing an older site version', () => {
+    wrapper.vm.allVersions = mockVersions;
+    const version = mockVersions.last_minor[1];
+    setVersionMetatag(version);
+
+    const expectedUrl = `https://docs.gitlab.com/${version}/`;
+
+    wrapper.vm.rewriteLinks(version);
+
+    const obj = wrapper.vm.results[0];
+    expect(obj.customLink).toBe(`${expectedUrl}some-page.html`);
+  });
+
+  it('does not include version in result link for latest version', () => {
+    wrapper.vm.allVersions = mockVersions;
+    const version = mockVersions.next;
+    setVersionMetatag(version);
+
+    const expectedUrl = '/';
+
+    wrapper.vm.rewriteLinks(version);
+
+    const obj = wrapper.vm.results[0];
+    expect(obj.customLink).toBe(`${expectedUrl}some-page.html`);
+  });
+
+  it('points to production site if has version prefix', () => {
+    wrapper.vm.allVersions = mockVersions;
+    const version = mockVersions.last_major[0];
+    setVersionMetatag(version);
+
+    const expectedUrl = `https://docs.gitlab.com/${version}/`;
+
+    wrapper.vm.rewriteLinks(version);
+
+    const obj = wrapper.vm.results[0];
+    expect(obj.customLink).toBe(`${expectedUrl}some-page.html`);
+  });
+
+  it('uses relative link if no version prefix', () => {
+    wrapper.vm.allVersions = mockVersions;
+    const version = mockVersions.next;
+    setVersionMetatag(version);
+
+    const expectedUrl = '/';
+
+    wrapper.vm.rewriteLinks(version);
+
+    const obj = wrapper.vm.results[0];
+    expect(obj.customLink).toBe(`${expectedUrl}some-page.html`);
+  });
+});