Page MenuHomePhabricator

Migration of mentee overview to Vue
Closed, ResolvedPublic

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

There are a very large number of changes, so older changes are hidden. Show Older Changes

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.Jul 20 2022, 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

Change 819647 merged by jenkins-bot:

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

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

Re-checked in wmf.26 - all issues are captured in additional phab tasks.

Some additional actions are needed for the following:

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.

(1) The current validation (wmf.26) displays the following warning:

Screen Shot 2022-08-25 at 2.58.33 PM.png (1×1 px, 129 KB)
Screen Shot 2022-08-25 at 5.13.00 PM.png (1×1 px, 152 KB)

The proposed patch (https://phabricator.wikimedia.org/T300532#8125333) would be an improvement.

(2) Presently, the validation warning message is displayed only once - there will be no warnings if a user keeps entering invalid values.

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

Sorry for the delay here (and thanks @Etonkovidova for pinging me about this question). I think that the introduced validation is perfect (and tbh, better than the current behavior). Thanks for implementing it!

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

[operations/mediawiki-config@master] Enable the Vue version of the mentee overview in pilot wikis

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

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

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: avoid requiring the non-vue mentee overview script when loading the Vue one

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

We need to remember to delete the mentee overview unneeded code after deploying the Vue module. In particular MenteeOverview.js and MenteeOverview.less. Patch gerrit 831097 is for the interim period in which both Vue and non-Vue code is required.

Change 831097 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: avoid requiring the non-vue mentee overview script when loading the Vue one

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

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

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.28] Mentee overview: avoid requiring the non-vue mentee overview script when loading the Vue one

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

Change 832462 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.28] Mentee overview: avoid requiring the non-vue mentee overview script when loading the Vue one

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

Mentioned in SAL (#wikimedia-operations) [2022-09-15T13:33:46Z] <urbanecm@deploy1002> Synchronized php-1.39.0-wmf.28/extensions/GrowthExperiments/: f592e85858d17a2de99cde93627054ee4972c2bd: Mentee overview: avoid requiring the non-vue mentee overview script when loading the Vue one (T300532) (duration: 04m 05s)

Change 830197 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable the Vue version of the mentee overview in pilot wikis

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

Mentioned in SAL (#wikimedia-operations) [2022-09-15T14:00:40Z] <urbanecm@deploy1002> Synchronized wmf-config/InitialiseSettings.php: 6b9784a0708cf1e7762034ccfba7e5604b2f6dc2: Enable the Vue version of the mentee overview in pilot wikis (T300532) (duration: 03m 45s)

Change 830197 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable the Vue version of the mentee overview in pilot wikis

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

@Sgs @Urbanecm_WMF should we enable for all wikis, or do you want to wait a little while?

Change 830197 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable the Vue version of the mentee overview in pilot wikis

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

@Sgs @Urbanecm_WMF should we enable for all wikis, or do you want to wait a little while?

No objections here, but I'll defer to @Sgs here.

Re-checked on testwiki wmf.2- two additional tasks were filed:

As to the scope of this task - all specs are met - marking as Resolved.

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

[operations/mediawiki-config@master] GrowthExperiments: enable the Vue version of the mentee overview in all wikis

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

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

[mediawiki/extensions/GrowthExperiments@master] [DNM] Mentor dashboard: remove uneeded files from the non-Vue mentee overview

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

Change 842356 merged by jenkins-bot:

[operations/mediawiki-config@master] GrowthExperiments: enable the Vue version of the mentee overview in all wikis

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

Mentioned in SAL (#wikimedia-operations) [2022-10-13T13:47:34Z] <lucaswerkmeister-wmde@deploy1002> Started scap: Backport for [[gerrit:842356|GrowthExperiments: enable the Vue version of the mentee overview in all wikis (T300532)]]

Mentioned in SAL (#wikimedia-operations) [2022-10-13T13:47:58Z] <lucaswerkmeister-wmde@deploy1002> lucaswerkmeister-wmde and sgimeno: Backport for [[gerrit:842356|GrowthExperiments: enable the Vue version of the mentee overview in all wikis (T300532)]] synced to the testservers: mwdebug1001.eqiad.wmnet, mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet, mwdebug2001.codfw.wmnet

Mentioned in SAL (#wikimedia-operations) [2022-10-13T13:47:34Z] <lucaswerkmeister-wmde@deploy1002> Started scap: Backport for [[gerrit:842356|GrowthExperiments: enable the Vue version of the mentee overview in all wikis (T300532)]]

FTR, this was reverted due to a newly-found regression (T320728).

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

[operations/mediawiki-config@master] GrowthExperiments: enable the vue version of mentee overview in all wikis

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

Change 843481 merged by jenkins-bot:

[operations/mediawiki-config@master] GrowthExperiments: enable the vue version of mentee overview in all wikis

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

Mentioned in SAL (#wikimedia-operations) [2022-10-17T13:23:11Z] <urbanecm@deploy1002> Started scap: Backport for [[gerrit:843481|GrowthExperiments: enable the vue version of mentee overview in all wikis (T300532)]]

Mentioned in SAL (#wikimedia-operations) [2022-10-17T13:23:30Z] <urbanecm@deploy1002> urbanecm and sgimeno: Backport for [[gerrit:843481|GrowthExperiments: enable the vue version of mentee overview in all wikis (T300532)]] synced to the testservers: mwdebug2001.codfw.wmnet, mwdebug1002.eqiad.wmnet, mwdebug1001.eqiad.wmnet, mwdebug2002.codfw.wmnet

Mentioned in SAL (#wikimedia-operations) [2022-10-17T13:29:35Z] <urbanecm@deploy1002> Finished scap: Backport for [[gerrit:843481|GrowthExperiments: enable the vue version of mentee overview in all wikis (T300532)]] (duration: 06m 24s)

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/97aaeeeed1/w/

Change 842422 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentor dashboard: remove uneeded files from the non-Vue mentee overview

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