Component breakdown: Group level environment dashboard
This issue is intended to discuss the component breakdown of the Group level environment dashboard.
Goals
The goal is to reuse styles from the Pipelines Dashboard https://gitlab.com/gitlab-org/gitlab-ee/issues/7861 and evaluate the opportunity to componentize the card (in vue) to be reusable in different UIs across the product.
Problem to solve
We are going to create a group level Environments Dashboard, that shows high-level information including group and project details as well as provide an experience that allows users to manage environments. The Dashboard must provide all the relevant information to prioritize the work and to jump into more details in an easy way.
The Environments Dashboard has a similar UI to the Cross-Project Pipeline Dashboard. This gives us opportunity to identify components and build them in a reusable way.
We have also identified existing components in the GitLab codebase that can potentially be reused, but currently are not added to the GitLab UI project.
Proposal
-
Break the dashboard UI down to understand what needs to be delivered to front-end -
For each component, UX to deliver: -
Acceptance criteria -
Visual design, including states and edge cases -
Accessibility considerations
-
-
FE: Add the components to the GitLab UI project. -
UX: Add the components to the Design System project
Components Breakdown
These are the initial components identified in the dashboard UI. Each component has a set of defined acceptance criteria and recommendations on accessibility and responsiveness. From here we can discuss what can we cover during the MVC, and how we will make them available to contributors. The names for new components are proposals.
Alert Line
Component name | Alert line |
Existing component? | YES -> Alerts |
Dependency | ? |
Acceptance criteria | 1. Displays an icon and text message related to the state of the component its attached to. 2. The alert color can modify the card color |
Responsiveness guidelines | N/A |
UI |
Avatar
Component name | Avatar |
Existing component? | YES -> User Avatar link |
Dependency | N/A |
Acceptance criteria | 1. Avatar shape should be determined by css utility class. 2. Avatar should be clickable and take to the user, group, or project page. 3. Hovering the avatar should display a tooltip with the user, group, or project name. 4. See on Design System |
Accessibility guidelines |
alt="" should be provided |
Responsiveness guidelines | N/A |
UI |
Badges
Component name | Badges |
Existing component? | YES -> GitLab UI |
Dependency | N/A |
Acceptance criteria | 1. It should be possible to wrap icons inside badges 2. See on Design System |
Accessibility guidelines | N/A |
Responsiveness guidelines | N/A |
UI |
Badge counter
Component name | Badge counter |
Existing component? | No |
Dependency | Badge |
Acceptance criteria | 1. Badge counter should only be displayed when there's 1+ item in the counter 2. If no items are available to be in the counter, the badge should not be displayed |
Accessibility guidelines | Badges may be confusing for users of screen readers and similar assistive technologies. Include additional context with a visually hidden piece of additional text. Ex: <span class="sr-only">unread messages</span>
|
Responsiveness guidelines | N/A |
UI |
Breadcrumbs
Component name | Breadcrumbs |
Existing component? | YES -> GitLab UI |
Dependency | N/A |
Acceptance criteria | See on Design System |
Accessibility guidelines | 1. make it easy to navigate through pages (back and previous pages) 2. make clear for the user the steps he took, and how many steps (and which ones) are remaining 3. tabindex=“-1” allows the menu-list items to be programmatically focusable (JS) 4. role=“presentation” prevents screen readers from interpreting <li> tags |
Responsiveness guidelines | All breadcrumb items except the last one are truncated to 128px if there isn’t enough horizontal space to fit them on one line. |
UI |
Buttons
Component name | Button, Button icon, Button icon + text |
Existing component? | YES GitLab UI and View App button |
Dependency | N/A |
Acceptance criteria | 1. Extend button to have button and label 2. Extend button to have just the icon 3. Button background will be extended |
Accessibility guidelines | 1. If disabled, use aria-disabled and aria-disabled=“true” 2. <input type=“button”> should always have a “value” 3. “title” is not read by the screenreader |
Responsiveness guidelines | N/A |
UI |
Card
Pipeline stages
Component name | Pipeline stages |
Existing component? | YES -> CI Icon stages |
Dependency | |
Acceptance criteria | 1. Hovering the icon should display a tooltip with the name of the stage 2. Clicking on an icon should take the user to the job detail page. |
Accessibility guidelines | N/A |
Responsiveness guidelines | N/A |
UI |
Pipeline stages strip
Component name | Pipeline stages strip |
Existing component? | YES -> Pipeline |
Dependency | |
Acceptance criteria | |
Accessibility guidelines | |
Responsiveness guidelines | |
UI |
Time stamp
Component name | Time stamp |
Existing component? | No. We use the timeago directive |
Dependency | N/A |
Acceptance criteria | N/A |
Accessibility guidelines | N/A |
Responsiveness guidelines | N/A |
UI |
Tooltip
Component name | Tooltip |
Existing component? | YES -> GitLab UI |
Dependency | N/A |
Acceptance criteria | N/A |
Accessibility guidelines | N/A |
Responsiveness guidelines | N/A |
UI |
Out of scope
- Accessibility/color contrast update of card interface