Environments Dashboard: Explore front-end implementation (mvc) and suggest UX improvements
Today, We are still at an MVC for the Environments Dashboard https://gitlab.com/gitlab-org/gitlab-ee/issues/3713. This issue documents design improvements and fixes for the current front-end implementation, aimed to be delivered on 12.2 release.
I am labeling the identified improvements with Needs UX and Needs Front-End
Walkthrough video
Issues identified
1. 'Dashboards' dropdown button is missing the chevron (app header)
Needs Front-End
The Environments Dashboard can be accessed via app header, by clicking the speedometer button. The button triggers a dropdown, but currently the chevron icon that visually differentiate a dropdown button from common buttons, is missing.
There is an issue open for this on https://gitlab.com/gitlab-org/gitlab-ee/issues/11562
2. The Add Projects modal is unclear
https://gitlab.com/gitlab-org/gitlab-ee/issues/12869#/
Needs UX
User needs to know ahead the name of projects in order to find them using the autocomplete search input. We can help users by providing them indication of their recent or starred projects in the modal, so they can just click and add it to the dashboard without having to search.
3. When adding a project that has no environments setup yet to the dashboard, show an empty state instead of a blank page
Needs UX Needs Front-End
Assuming that in a real user case, users know which have active environments, this should not be a major issue. Yet, we need to display an empty state instead of a blank page. Perhaps route users to the environments page of that project.
4. Because the project that has no environments is "empty", when adding a project that has environments to the dashboard the interface gives the impression the section is "collapsed"
Needs Front-End
This issue can be solved by fixing the one above.
5. Cards improvements
5.1 The environment card is missing the avatar of commit author
Needs Front-End
5.2 0 Alerts is redundant
Needs Front-End
Remove the 0 Alerts indication. The alerts, when existing, are informed by the combination of the helper text and the update on the card background color.
5.3. The environment card is missing the info icon on the card header
Needs Front-End
The info icon, on hover, should display the text: You are looking at the last updated environment
This should only be present on cards that for which multiple environments are active.
See reference: https://gitlab.com/gitlab-org/gitlab-ee/uploads/d9c263c31c8efb40514bbef2bedc075c/environments-dashboard__hover.png
5.4 Empty state of card is misaligned
Needs Front-End
| Implemented | Desired |
|---|---|
 |
 |
5.5 Pipeline stripe is missing from card
Needs Front-End
| Implemented | Desired |
|---|---|
 |
 |
5.6 The last updated and alerts information is hidden on responsive
Needs Front-End
The information disappear from the screen once the user resizes the viewport. In fact, the information should break into another line and be positioned below the other environment details in the card.
| Implemented | Desired |
|---|---|
 |
 |
5.7 The View app button has incorrect padding (label + icon alignment)
Needs Front-End
| Implemented | Desired |
|---|---|
 |
 |
Reference: https://gitlab.com/gitlab-org/design.gitlab.com/merge_requests/1448
5.8 The card content is breaking into multiple lines
Needs Front-End
For this issue in particular, I think we need to reevaluate the padding/margin values in the card. We already truncate the content, but the commit and hash number should be displayed on the same line.
| Implemented | Desired |
|---|---|
 |
 |
6. Unable to remove project from the Environments view
Needs Front-End
User is unable to remove the projects from the Environments view of the dashboard. Only by going to Operations Dashboard, removing the project, and then going back to Environments, the changes are visible.
User should be able to remove projects from both views.
7. Indicate to users that removing/adding a project from one dashboard view, affects all others
https://gitlab.com/gitlab-org/gitlab-ee/issues/12870
Needs UX Needs Front-End
We need to improve the UI to let users know that all changes/additions made on Operations dashboard are reflected on Environments dashboard. Need to indicate it on Add Projects modal. Need to indicate it when clicking delete project from dashboard.
In the case of delete, consider adding a confirmation modal or updating the label to Remove from all dashboards.
8. Page headers and cards are misaligned
Needs Front-End
