As mentioned in parent task {T297763} 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:
[x] Table with data, created as `<data-table>`
[x] Table pagination tools, created as `<data-table-pagination>`
[x] Mentee LookUp component, created as `<mentee-search>`
[x] Filters component, created as `<mentee-filters>` component, could be replaced when {T298040} is resolved.
[x] Button group (for the most recent edit), created as custom component, should be revisited in {T311228} 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 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} )
## Mobile version of the dashboard remains **not** responsive :(
#### Completion checklist
**Functionality**
[x] The patches have been code reviewed and merged
[x] The task passes its acceptance criteria
**Engineering**
[x] There are existing and passing unit/integration tests
[x] Tests for every involved patch should pass
[x] Coverage for every involved project should have improved or stayed the same
**Design & QA**
[x] 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:
- {T311228}
Also as a result, the following UI interfaces have changed and been approved:
| Interface affected | Before | After | Change description |
| All icons | {F35320361}| {F35320363} | All icons have been replaced by it's Codex version except for the column sorting controls, see {T311396} |
| Info icon | {F35320322} | {F35320320} | 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}|
| Filters tooltip, Info tooltip | {F35320332} | {F35320336} | The tooltip component does not have a Codex replacement yet so we have created a dropdown-like interface as an interim replacement
| Limit selector | {F35320343} | {F35320345} | The selector is now the [[ https://doc.wikimedia.org/codex/v0.1.0-alpha.8/components/select.html | Codex select component ]] as opposite of OOUIs
| Lookup input | {F35320350} | {F35320352} | The lookup is now the [[ https://doc.wikimedia.org/codex/v0.1.0-alpha.8/components/lookup.htmll | Codex lookup component ]] as opposite of OOUIs
[] Must be reviewed and approved by Quality Assurance.
**Documentation**
[] Related and updated documentation done where necessary