As mentioned in parent task T297763: Migration of Mentor dashboard modules to Vue this component is a good candidate for the modernization towards Vue since it doesn't have server-side rendering. These are the components that need to be created:
- Table with data, created as <data-table>
- Table pagination tools, created as <data-table-pagination>
- Mentee LookUp component, created as <mentee-search>
- Filters component, created as <mentee-filters> component, could be replaced when T298040: replace existing Tooltip with CODEX version is resolved.
- Button group (for the most recent edit), created as custom component, should be revisited in T311228: Revise design of the Mentee overview filter for recent days to avoid using a button group.
Acceptance Criteria
- Should be able to perform all features included in the non-Vue version of the mentee overview table
- Should show mentor's mentees in the table ( table shows your mentees whose account was created within the past two weeks or who have edited in the last six months, and have the newcomer homepage enabled. )
- Should allow to change the table page size using the "Show X" selector
- Should allow to navigate result pages back and forth
- Should allow to filter the mentees shown using the "Filters" form
- Should allow to input integer values in the edit count minimum and maximum inputs and also remove completely the number and get mentees regardeless of their edit counters
- Should allow to add and remove filtering by Most recent edit and Only starred mentees
- Should allow to look up mentees using the "Search" text input and display them on the table
- Accessibility status quo should stay the same or be improved:
- All features are keyboard accessible
- All features are screenreader accessible, meaning icons and buttons have labels or titles, etc. ( exception for the table caption, see T311393: (Don't) Add caption to mentee overview table )
- Mobile version of the dashboard remains not responsive :( (covered by T279965: Mentor dashboard: V1 mobile )
Completion checklist
Functionality
- The patches have been code reviewed and merged
- The task passes its acceptance criteria
Engineering
- There are existing and passing unit/integration tests
- Tests for every involved patch should pass
- Coverage for every involved project should have improved or stayed the same
Design & QA
- If the task is UX/Design related: it must be reviewed and approved by the UX/Design team
A design review was made by @RHo and follw-up tasks were created:
Also as a result, the following UI interfaces have changed and been approved:
| Interface affected | Before | After | Change description |
| All icons |  |  | All icons have been replaced by its Codex version except for the column sorting controls, see T311396: Find replacement for the mentee overview table sort icons |
| Info icon |  |  | The icon size and stroke width have changed to use the Codex rovided icon, the info icon in particular has some sizing concerns that have been reported in T280666: Extend color and size guidelines of the Wikimedia Design System icon set |
| Filters tooltip, Info tooltip |  |  | The tooltip component does not have a Codex replacement yet so we have created a dropdown-like interface as an interim replacement |
| Limit selector |  |  | The selector is now the Codex select component as opposite of OOUIs |
| Lookup input |  |  | The lookup is now the Codex lookup component as opposite of OOUIs |
- Must be reviewed and approved by Quality Assurance.
Documentation
- Related and updated documentation done where necessary
