Merge branch 'gps-autocomplete' into 'main'

Add autocomplete to Google search forms

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

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

7 files changed, 91 insertions, 8 deletions

diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 0287d9da..c46991d0 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -622,3 +622,83 @@ $gl-icon-check: 'data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7
   -webkit-mask-image: url('#{$gl-icon-check}');
   mask-image: url('#{$gl-icon-check}');
 }
+
+// Google Search
+/* stylelint-disable selector-class-pattern */
+form.gsc-search-box table tr,
+table.gsc-completion-container tr {
+  border-top: unset;
+  border-bottom: unset;
+}
+table.gsc-completion-container tr {
+  background: transparent;
+}
+table.gsc-completion-container tr.gsc-completion-selected {
+  background: $gray-50;
+}
+form.gsc-search-box {
+  table {
+    margin: 0;
+  }
+  table.gsc-search-box {
+    background-color: $white;
+    border-radius: 0.25rem;
+    border-collapse: collapse;
+    border-style: hidden;
+    box-shadow: 0 0 0 1px $gray-400;
+    color: $gray-900;
+    height: 2.5rem;
+    margin: 0 auto;
+    max-width: 25rem;
+    td.gsc-input {
+      border-right: 1px solid $gray-400;
+      padding: 0 0 0 0.75em;
+    }
+  }
+  td {
+    padding: 0;
+  }
+  .gsc-search-button {
+    padding: 0 0.35rem;
+  }
+  .gsst_a {
+    padding: 0 0.5rem;
+  }
+  .gscb_a {
+    line-height: 0;
+  }
+  .gsst_a .gscb_a {
+    color: $purple-300;
+  }
+  .gsst_b {
+    top: 4px;
+  }
+  .gsst_a:hover .gscb_a,
+  .gsst_a:focus .gscb_a {
+    color: $purple-700;
+  }
+}
+table.gstl_50 {
+  margin-top: 0;
+}
+// Interior pages: nav bar search form
+.navbar-nav {
+  div.gsc-control-searchbox-only {
+    transition: width 0.3s ease-in-out;
+    width: 12rem;
+  }
+  div.gsc-control-searchbox-only:focus-within {
+    width: 18rem;
+  }
+  form.gsc-search-box {
+    margin-bottom: 0;
+  }
+  form.gsc-search-box table.gsc-search-box {
+    height: auto;
+  }
+  input.gsc-input {
+    width: 14rem;
+    font-size: 0.875rem;
+  }
+}
+/* stylelint-enable selector-class-pattern */
diff --git a/content/frontend/search/components/search_form.vue b/content/frontend/search/components/search_form.vue
index 1c83878d..44d25d1d 100644
--- a/content/frontend/search/components/search_form.vue
+++ b/content/frontend/search/components/search_form.vue
@@ -12,7 +12,7 @@ export default {
   },
   methods: {
     onSubmit() {
-      window.location.href = `/search/?query=${encodeURI(this.query)}`;
+      window.location.href = `/search/?q=${encodeURI(this.query)}`;
     },
   },
 };
diff --git a/content/frontend/search/search_helpers.js b/content/frontend/search/search_helpers.js
index b1121fe4..45048fab 100644
--- a/content/frontend/search/search_helpers.js
+++ b/content/frontend/search/search_helpers.js
@@ -9,7 +9,7 @@
  *  The query string if it exists, or an empty string.
  */
 export const getSearchQueryFromURL = () => {
-  return new URLSearchParams(window.location.search).get('query') || '';
+  return new URLSearchParams(window.location.search).get('q') || '';
 };
 
 /**
@@ -18,5 +18,5 @@ export const getSearchQueryFromURL = () => {
  * This allows users to copy a link to search result pages.
  */
 export const updateURLParams = (query) => {
-  window.history.pushState(null, '', `${window.location.pathname}?query=${query}`);
+  window.history.pushState(null, '', `${window.location.pathname}?q=${query}`);
 };
diff --git a/content/index.erb b/content/index.erb
index c63a1fe8..b03183ef 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -13,12 +13,14 @@ title: GitLab Documentation
       <div class="row">
         <div class="col d-flex justify-content-center">
           <div class="card search gl-mt-6 gl-py-2">
-            <div class="card-body">
-              <h5 class="card-title gl-pb-2">Search the docs</h5>
+            <div class="card-body gl-pb-7">
+              <h5 class="card-title gl-pb-4">Search the docs</h5>
               <% if @item[:searchbar].nil? %>
                 <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
                   <% if @config[:search_backend] == "algolia" %>
                     <div id="docsearch" class="gl-mb-4 gl-display-flex gl-justify-content-center"></div>
+                  <% elsif @config[:search_backend] == "google" %>
+                    <div class="gcse-searchbox-only" enableAutoComplete="true" data-resultsUrl="/search/"></div>
                   <% else %>
                     <div class="js-search-form"></div>
                   <% end %>
diff --git a/layouts/default.html b/layouts/default.html
index dee2f472..68dbf471 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -72,9 +72,7 @@
     <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
     <% if @config[:search_backend] == "algolia" %>
     <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
-    <% elsif @config[:search_backend] == "google" %>
-    <script src="<%= @items['/frontend/search/google.*'].path %>"></script>
-    <% else %>
+    <% elsif @config[:search_backend] == "lunr" %>
     <script src="<%= @items['/frontend/search/lunrsearch.*'].path %>"></script>
     <% end %>
     <script src="<%= @items['/assets/javascripts/toggle_popover.*'].path %>"></script>
diff --git a/layouts/head.html b/layouts/head.html
index 99284d35..2a99649a 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -32,6 +32,7 @@
 
 <% if @config[:search_backend] == "google" && @config[:google_search_key] %>
 <script>const GOOGLE_SEARCH_KEY = "<%= @config[:google_search_key] %>";</script>
+<script async src="https://cse.google.com/cse.js?cx=97494f9fe316a426d"></script>
 <% end %>
 
 <!-- Enable CSP headers -->
diff --git a/layouts/header.html b/layouts/header.html
index 21b2cd6c..8526c79a 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -14,6 +14,8 @@
           <% unless %w(search index.erb).any?(location) %>
             <% if @config[:search_backend] == "algolia" %>
               <div id="docsearch" class="gl-my-3 gl-md-mt-0 gl-md-mb-0"></div>
+            <% elsif @config[:search_backend] == "google" %>
+              <div class="gcse-searchbox-only" enableAutoComplete="true" data-resultsUrl="/search/"></div>
             <% else %>
               <div class="js-search-form"></div>
             <% end %>