Fix minor UX issues with "group by" within Iteration Report
What does this MR do?
This MR fixes some minor UX issues with "group by" labels within the iteration report, as described in #299238 (closed).
It:
- Replaces the loading icon with skeleton loaders to decrease the amount of height shifting
It also fixes some issues with the label dropdown component, thereby fixing issues on the iteration report page as well as in the issues sidebar:
- Stops the page from jumping when the user goes through the labels dropdown list using the arrow keys
- Fixes the label dropdown item text color to be black
- Wraps the label name when long
- Stops the checkmark and color block from being squashed when the label name is long
- Adds a bit of extra space between the color block and label name
- Vertically centers the checkmark, color block, and label name for the case where the label name wraps to multiple lines
- Shows the label dropdown above the dropdown button if there's not enough space below for it to fit
Screenshots (strongly suggested)
Screen_Recording_2021-04-15_at_7.09.18_pm
| Sidebar variant | Standalone variant | Embedded variant |
|---|---|---|
 |
 |
 |
 |
 |
 |
Does this MR meet the acceptance criteria?
Conformity
-
📋 Does this MR need a changelog?-
I have included a changelog entry. -
I have not included a changelog entry because _____.
-
-
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Related to #299238 (closed)
Edited by Coung Ngo