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
image image

No filtered todos

Before After
image image

How to set up and validate locally

  • Enable the todos_vue_application feature flag.
  • Go to http://gdk.test:3000/dashboard/todos/vue (Note the /vue at 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

Merge request reports

Loading