Add empty state to panels
Problem to solve
Analytics dashboard panels do not have an empty state. As such when there are no results to display for whatever reason the panel is simply empty.
For an improved UX we should give the user a clear indication that the panel has no results to display that match the Pajamas empty states.
Screenshots
Empty with no results |
---|
![]() |
Proposal
Add an empty state for panels when there is no data to visualize.
Implementation plan
- Update
customizable_dashboard.vue
to show an empty state when there is no data inside the panel.- Display the text
No results match your query or filter.
- The text should be both vertically and horizontally centred.
- Use the text color
gl-text-secondary
. - Note: This should also apply to
SingleStat
- Display the text
- Update the tests to verify that a panel shows the empty state when it has no data.
Edited by Elwyn Benson