Convert generic epic error banners to form validation messages
Problem
We currently use this generic alert banner as a catch-all for all errors related to attaching epics and issues to an epic:
This is confusing and doesn't make sense, as it covers a multitude of errors such as:
- URL isn't valid/can't find the epic
- Trying to add a 6th level of epic descendants
- Attaching an epic/issue that has already been attached
Solution
Convert these errors to form validation messages, following our guidelines
Error messages and validation should be shown inline and can, in general, happen either live or on form submission. Live validation should be seen as assisting the user to input the correct information and not as a way of preventing them from submitting the form with possibly incorrect information (live validation might be frontend-only but the user has no way of knowing that).
The error message shows up below the input field in error state and should be helpful and contextual, not generic. If there’s Help text below the input field, an error pushes it further down as it needs to show up immediately after the input.
Design
From our specs:
- The errors should show up in an unordered list below in the input in
#DB3B21
- Input should be outlined in
#DB3B21
- After errors occur, they should be cleared when the user clears out the input tokens
Example
* [Epic name] already has the maximum number of child epics
* [Epic name] cannot be found
Note: We currently have an error appearing if you attach an epic/issue that already exists on the current epic. We shouldn't show any error in this case, and just ignore it (it's already attached so shouldn't be an issue)
Original issue description
Problem
When child epics were first implemented, a maximum depth of 5 levels was set: #8333 (comment 117260311)
We want to be conservative and limit levels for this first iteration, and consider expanding more in the future.
The documentation is clear about this limitation, but the UI is not. This error message appears when trying to add more than 5 child epics:
This happened to me when trying to add epic FY2019 Q3 UX OKRs for Create to FY2019 Q3 UX OKRs:
Epic structure:
GitLab UX
└─ UX OKRs
└─ *FY2019 Q3 UX OKRs*
*FY2019 Q3 UX OKRs for Create*
└─ Q3 UX OKR, Create: JTBD Experience Baseline Scores
├─ Q3 UX OKR, Create: Reviewing Changes
└─ Q3 UX OKR, Create: Creating a Merge Request
Side discussion
Should we increase the maximum depth of epics?