Add EmptyState component to new Vue To-Do app
What does this MR do and why?
This MR is about the new, unreleased Vue implementation of the To-do feature (dashboard/todos/vue). Closes #483059 (closed)
It renders an EmptyState component when there are no todos to show, the same way to old Haml implementation does:
- when the user never ever had a todo, we show the same Haml page. (no change)
- when the user has no pending todos, we show an empty state where the title is random from a pool of possible titles (now same as in Haml)
- when the user has no pending todos found while a filter is active, we show a different message (but same as Haml does)
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
No pending todos
| Before | After |
|---|---|
![]() |
![]() |
No filtered todos
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Enable the
todos_vue_applicationfeature flag. - Go to http://gdk.test:3000/dashboard/todos/vue (Note the
/vueat the end of the URL) - Check with 0 pending todos
- Check with 0 filtered todos
- Compare to the old implementation (
/dashboard/todos)
Edited by Thomas Hutterer



