Skip to content

Refactor banners to use GitLab UI components

Sarah German requested to merge banner into main

What does this MR do and why?

Refactors banners on the Docs site to use GlAlert components from GitLab UI.

  • Removes version_banner.vue and the Bootstrap-powered survey banner
  • Refactors docs_banner.vue to be useable for both the version banner and the survey banner
  • Repositions the version banner so that it's full-width
  • Refactors duplicative cookie get/set code

Why:

  • More work towards removing Bootstrap dependency (#1684 (closed))
  • Removes more ES5 JS code (#439 (closed))
  • Better adherence to Pajamas design guidelines
  • Less custom code to maintain
  • The archived version banner was a little weird-looking at 3/4 width

Screenshots, screen recordings, or links to review app

Before After
image image
image image

How to set up and validate locally

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

Test the survey banner:

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Enable a survey banner by editing banner.yaml and setting show_banner to true.
  3. Compile and view the site: make view
  4. Verify the banner renders appropriately at various screen sizes, and it can be dismissed. The dismissed state should persist across page views. Clear the HideDocsBanner cookie to reset this.

Test the archive version banner:

  1. Run a new compile that emulates an archived version: CI_COMMIT_REF_NAME="15.0" NANOC_ENV="production" make view
  2. Verify the archived version banner renders appropriately at various screen sizes. It should not be dismissible and should be positioned "sticky" (always visible, even if you've scrolled down the page).

Note that we don't need to support both banners appearing together. The survey banner is never shown on archived versions of the site. Nice.

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