Implement bulk select state and bulk actions display logic

Thomas Huttererrequested to merge
16564-select-all-and-select-state into master

What does this MR do and why?

Implements bulk select state and bulk actions display logic for the To-Do dashboard:

  • Keeps track of the selected, available ids in a new computed selectedIds property.
  • Reacts to and controls the state of the "Select all" checkbox, incl an indeterminate state.
  • Shows the count of selected items and the available bulk actions in a new TodosBulkBar component.

Note: The actions (graphql mutations) themselves are not part of this commit. Clicking the new bulk action buttons has no effect yet.

References

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

FF disabled (no change) FF enabled
image recording_1738601149

How to set up and validate locally

  • Enable the todos_bulk_actions feature flag.
  • Go to http://gdk.test:3000/dashboard/todos
  • Use the checkboxes on the left to select and deselect todo items.
  • Check the state of the "Select all" checkbox. When you select all items one-by-one, it should "turn on". And vice versa.
  • Switch tabs. This should reset your selection.
  • Check that the correct action buttons are displayed per tab. Same as the action buttons on the todo items.
Edited by Thomas Hutterer

Merge request reports