UX: Enable Invite modal to handle multiple errors at once

Context

As a follow-on to the release of the invite modal to SaaS and SM in 14.8, we have a series of UX-related updates pertaining to how the modal handles error messaging and in particular, multiple error messages at once. This UX issue is intended to solve for the design needs of those error messages.

Problems

  1. The current invite modal can't handle multiple error messages at once. Single or multiple emails added may trigger multiple errors and we need to clearly communicate what infractions are causing each error for each email.
  2. The current error message to inform the inviter that the member has already been added needs improvement. See https://gitlab.com/gitlab-org/gitlab/-/issues/334280#note_706373370 for context

Proposed Solution

We need to find a way to enable the invite modal to manage and display multiple errors at once.

Needs to include:

Design

  • Add in an alert that explains what went wrong with the errored emails, as well as change the colours of the user pills to show which succeeded and which did not.
  • This alert supersedes all other alerts.
Error Message Error Message Expanded
Screen_Shot_2022-04-13_at_2.06.56_PM Screen_Shot_2022-04-13_at_2.07.07_PM

Design File

Edited by Gayle Doud