Skip to content

Create migration path for form_error alert banners

Mike Greiling requested to merge mg-update-form-error-alert-banners into master

What does this MR do and why?

The form_error helper currently produces alert-style banners which are not in line with the Pajamas design system.

This MR provides an option to render the form errors using Pajamas::AlertComponent which utilizes the Vue GlAlert DOM structure.

The idea behind this is to allow for individual migration of each of the 120+ instances of form_error in which specs can be fixed and changes can be inspected for visual regressions or other side effects, as opposed to migrating everything all at once.

Once each instance of form_errors has been migrated, Pajamas will become the default and the option will be removed.

Screenshots

Single error

before after
CleanShot_2022-06-09_at_17.24.14_2x CleanShot_2022-06-09_at_17.23.32_2x

How to set up and validate locally

  1. Navigate to Project => Wiki
  2. Click Create a new wiki page
  3. Put in a title that is > 255chars
  4. Click Create
  5. Observe error message

Multiple errors

before after
Screen_Shot_2022-06-09_at_5.07.19_PM Screen_Shot_2022-06-09_at_5.04.52_PM

How to set up and validate locally

  1. Navigate to Admin => Deploy Keys => Click "Add Deploy Key"
  2. Click Create without filling anything out
  3. Observe multiple errors

MR acceptance checklist

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

Part of: #294442 (closed) and &5550 (closed)

Edited by Mike Greiling

Merge request reports