Skip to content

Add autocomplete to Google search forms

Sarah German requested to merge gps-autocomplete into main

What does this MR do and why?

Adds autocomplete to Google search on the homepage and interior content pages.

To do this, we're replacing the GitLab UI search box with an embeddable form from Google and overriding styles as much as possible to make it look more like the GitLab UI component. We have to use the embeddable version since autocomplete is not available over the API.

The form submit behavior is mostly unchanged: we route you over to /search/?q=your search term, where results are still fetched via the JSON API. The only change to this piece was the query parameter itself: q is the default option for the Google embedded form, and customizing that as little as possible will be more maintainable.

Screenshots, screen recordings, or links to review app

Review app: https://gps-autocomplete.docs.gitlab-review.app/

Before After
image image
image image

How to set up and validate locally

Testing on the review app works fine, but if you want to run it locally:

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Compile the site with the following environment variables: make clean && SEARCH_BACKEND="google" GOOGLE_SEARCH_KEY="AIzaSyAUCkVNs7JsHYKISjVrVv1PGXg9WQr1MCQ" DISABLE_CSP="true" bundle exec nanoc compile
  3. Try running searches from the homepage and interior pages.

CSP headers need to be disabled locally (since we don't have HTTPS available there) but we do not need to do this on review apps or production. This is documented in a separate MR (!3660 (diffs)).

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sarah German

Merge request reports