Page MenuHomePhabricator

Migration of mentee overview to Vue
Open, MediumPublic

Description

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:

Acceptance Criteria

  1. Should be able to perform all features included in the non-Vue version of the mentee overview table
    1. 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. )
    2. Should allow to change the table page size using the "Show X" selector
    3. Should allow to navigate result pages back and forth
    4. Should allow to filter the mentees shown using the "Filters" form
      1. 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
      2. Should allow to add and remove filtering by Most recent edit and Only starred mentees
    5. Should allow to look up mentees using the "Search" text input and display them on the table
  2. Accessibility status quo should stay the same or be improved:
    1. All features are keyboard accessible
    2. 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 )
    3. 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 affectedBeforeAfterChange description
All icons
Screenshot 2022-07-18 at 13.26.14.png (728×1 px, 87 KB)
Screenshot 2022-07-18 at 13.26.02.png (1×1 px, 161 KB)
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
Screenshot 2022-07-18 at 13.09.10.png (694×1 px, 92 KB)
Screenshot 2022-07-18 at 13.08.46.png (1×1 px, 172 KB)
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
Screenshot 2022-07-18 at 13.15.38.png (1×1 px, 100 KB)
Screenshot 2022-07-18 at 13.15.24.png (1×1 px, 126 KB)
The tooltip component does not have a Codex replacement yet so we have created a dropdown-like interface as an interim replacement
Limit selector
Screenshot 2022-07-18 at 13.19.02.png (1×1 px, 100 KB)
Screenshot 2022-07-18 at 13.19.10.png (1×1 px, 201 KB)
The selector is now the Codex select component as opposite of OOUIs
Lookup input
Screenshot 2022-07-18 at 13.23.26.png (734×1 px, 90 KB)
Screenshot 2022-07-18 at 13.23.15.png (1×1 px, 235 KB)
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

Related Objects

Event Timeline

Change 758476 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] [experimental] Mentor dashboard: refactor mentee overview to use Vue and Codex

https://gerrit.wikimedia.org/r/758476

Sgs moved this task from Upcoming Work to Current Sprint on the Growth-Team board.
Sgs edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
Sgs moved this task from Incoming to In Progress on the Growth-Team (Current Sprint) board.

Change 778997 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Vue migration: create mentee overview table with Vue

https://gerrit.wikimedia.org/r/778997

kostajh changed the task status from Open to In Progress.May 12 2022, 8:55 AM
kostajh triaged this task as Medium priority.

Change 805490 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[operations/mediawiki-config@master] MentorDashboard: enable the Vue version of the dashboard in beta

https://gerrit.wikimedia.org/r/805490

Change 805901 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: add table info popover

https://gerrit.wikimedia.org/r/805901

Change 805901 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: add table info popover

Reason:

Squashed in Ifc90bc93dd1d2c1744cc10e0b83b4d55fc7d8f29

https://gerrit.wikimedia.org/r/805901

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/97aaeeeed1/w/

Change 778997 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Vue migration: create mentee overview table with Vue

https://gerrit.wikimedia.org/r/778997

Change 805490 merged by jenkins-bot:

[operations/mediawiki-config@master] MentorDashboard: enable the Vue version of the dashboard in beta

https://gerrit.wikimedia.org/r/805490

Per @kostajh's request, I enabled vue version of the Mentor dashboard in enwiki, arwiki beta.

Mentioned in SAL (#wikimedia-operations) [2022-07-05T07:58:13Z] <urbanecm@deploy1002> Synchronized wmf-config/InitialiseSettings.php: 89aef540e22aaded6c279d9d11c769507e497b6a: MentorDashboard: enable the Vue version of the dashboard in beta (T300532) (duration: 03m 18s)

Per @kostajh's request, I enabled vue version of the Mentor dashboard in enwiki, arwiki beta.

Thank you @Urbanecm_WMF! We should resolve T311992: MenteeOverview: Fix autocompletion search before moving this task to QA, I'll be pushing a fix for it asap.

Change 811367 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Mentee overview (vue): place info icon in right top corner

https://gerrit.wikimedia.org/r/811367

Change 811367 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentee overview (vue): place info icon in right top corner

https://gerrit.wikimedia.org/r/811367

Sgs added a subscriber: RHo.

Change 814789 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[operations/mediawiki-config@master] Mentorship: enable the Vue version of the dashboard in test

https://gerrit.wikimedia.org/r/814789

Change 814789 merged by jenkins-bot:

[operations/mediawiki-config@master] Mentorship: enable the Vue version of the dashboard in test

https://gerrit.wikimedia.org/r/814789

Mentioned in SAL (#wikimedia-operations) [2022-07-18T20:10:35Z] <urbanecm@deploy1002> Synchronized wmf-config/InitialiseSettings.php: 76b7cd6379c25175570eeeb2a305de0fd0bc61e5: Mentorship: enable the Vue version of the dashboard in test (T300532) (duration: 03m 00s)

@Etonkovidova this task is now ready for QA in testwiki. @Urbanecm_WMF has already spotted a bug T313263: Mentee overview Vue: Once added, edit count-based filtering cannot be removed but it's an edge case on the filters form and does not block the whole testing. I have added acceptance criteria 1.D.a and 1.D.b as a reminder. I'll give an update when the fix ( gerrit 815695 ) is merged/backported in testwiki.

Sgs changed the task status from In Progress to Open.Wed, Jul 20, 10:52 AM
Sgs updated the task description. (Show Details)
Sgs moved this task from Code Review to QA on the Growth-Team (Current Sprint) board.

Checked in betalabs and testwiki wmf.22 - the specs status is updated.

  1. 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. )

There might be cases when it's desirable to display users' with zero edits (even if they were not active during last six months) to see, for example, the number of reverts, or the number of blocks.

  1. 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

Integers numbers include negative numbers and zero. Currently "minimum" and "maximum" numbers fields do not accept a zero number.

Two other "i" icons on Special:Mentorship page are <span class="oo-ui-iconElement-icon oo-ui-icon-info-unpadded">. Are they going to be replaced with <span class="cdx-icon info-icon">

Screen Shot 2022-07-29 at 8.14.31 PM.png (952×2 px, 231 KB)

Change 819647 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Mentee overview(vue): use number input for the edit count filters

https://gerrit.wikimedia.org/r/819647

There might be cases when it's desirable to display users' with zero edits (even if they were not active during last six months) to see, for example, the number of reverts, or the number of blocks.

I agree but I think we don't want to change that for now. We would need to change which mentees are collected when we run the update script.

Integers numbers include negative numbers and zero. Currently "minimum" and "maximum" numbers fields do not accept a zero number.

We don't want negative values to be stored or sent to the API. The current minimum is set to 0 so I guess it's fine if the number input accepts it even if it's not very useful for the reason in the prior quote. I have re-worked a bit the inputs for the min and max to be of type="number" and not accept non-numeric characters [a-Z]. Some characters like -, +, ´ are still rendered in the input (with an invalid state). See table below:

non-vue currentvue currentvue proposed patch
validation1.gif (1×954 px, 578 KB)
validation2.gif (1×954 px, 485 KB)
validation3.gif (1×954 px, 386 KB)

The behavior is a little different because the form cannot be saved in an invalid state. Would this validation be fine or it's too obtrusive? @Urbanecm_WMF

Two other "i" icons on Special:Mentorship page are <span class="oo-ui-iconElement-icon oo-ui-icon-info-unpadded">. Are they going to be replaced with <span class="cdx-icon info-icon">

Screen Shot 2022-07-29 at 8.14.31 PM.png (952×2 px, 231 KB)

Yes, we are willing to replace them once we migrate the mentor tools and resources modules. The inconsistency is due to problems mentioned in T280666.

Change 820719 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: dont emit update event until count is set

https://gerrit.wikimedia.org/r/820719