Page MenuHomePhabricator

BetaOptInPanel should use ES6 classes NOT mfExtend
Closed, ResolvedPublic2 Story Points

Description

Note: If this task is starting to feel "medium" sized, stop what you are doing immediately and document the troubles you've hit. You've likely hit unknown unknowns and we should re-evaluate and re-estimate this work based on your discoveries.

mfExtend() is a prevalent utility in MobileFrontend and MinervaNeue. In the former, ES6 is now available and canonical class extends are preferable to a custom utility.

extends is compatible with both classes and functions so it's not a requirement that the parent be a real ES6 class. See the example below. This gives some flexibility in choosing which code to convert to classes because the change can be isolated from the parent.

Example: extending a function
// Parent "class"
function Foo() { console.log('constructor'); }
Foo.prototype.hello = () => console.log('hello')

// Actual class extending a function
class Bar extends Foo { goodbye() { console.log('goodbye') } }

// Prints "constructor".
const bar = new Bar()

// Prints "hello" and "goodbye".
bar.hello()
bar.goodbye()

Since there may be unknown unknowns, the initial effort will focus on BetaOptInPanel.

Acceptance criteria

  • BetaOptInPanel is a class that extends View.
  • BetaOptInPanel invokes View with the correct arguments via super.
  • mfExtend is removed and its overrides are moved to class properties and methods.
  • If successful, a new task for new further mfExtend refactors is made. (See T224998)

QA Steps

Prerequisites:

  • All of the following steps assume you are on the mobile site (ensure you have toggled that mode on) and your settings initially have devwiki βeta turned off. It's best to do these steps in Chrome's incognito mode so that you have a clean slate.
  1. Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test . It may take 60 seconds to load. That is perfect normal! 👌Repeat this to yourself as many times as needed to convince yourself that it is true.
  2. You should see the BetaOptin panel on this page. It is the grey box with text "Do you want to try some new features?". Click the "okay" button.
  3. The settings page should load with "devwiki βeta" turned on.
  4. Turn off "devwiki βeta"
  5. Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test again.
  6. Click the "No thanks" button. The BetaOptin panel should disappear.
  7. Refresh the page. The BetaOptin panel should not be there anymore.

QA Results

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 12 2019, 6:39 PM
Niedzielski renamed this task from Replace some usages of mfExtend to Refactor BetaOptInPanel to a class that extends View.Apr 15 2019, 8:03 PM
Niedzielski updated the task description. (Show Details)
Niedzielski updated the task description. (Show Details)
Jdlrobson renamed this task from Refactor BetaOptInPanel to a class that extends View to BetaOptInPanel should use ES6 classes NOT mfExtend.May 2 2019, 9:01 PM
Jdlrobson triaged this task as High priority.
Jdlrobson moved this task from To Triage to Upcoming on the Readers-Web-Backlog board.
Jdlrobson updated the task description. (Show Details)May 8 2019, 4:48 PM
Jdlrobson set the point value for this task to 2.
Jdlrobson updated the task description. (Show Details)

Change 510221 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Make BetaOptInPanel use ES6 class instead of mfExtend

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

Change 510221 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Make BetaOptInPanel use ES6 class instead of mfExtend

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

I just need to add QA instructions. This patch has been merged though

nray reassigned this task from nray to Edtadros.May 30 2019, 12:01 AM
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)
nray added a subscriber: nray.
nray updated the task description. (Show Details)May 30 2019, 12:04 AM
Edtadros reassigned this task from Edtadros to ovasileva.May 31 2019, 12:56 PM
Edtadros added a subscriber: Edtadros.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA Steps:

All of the following steps assume you are on the mobile site (ensure you have toggled that mode on) and your settings initially have devwiki βeta turned off. It's best to do these steps in Chrome's incognito mode so that you have a clean slate.

Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test . It may take 60 seconds to load. That is perfect normal! 👌Repeat this to yourself as many times as needed to convince yourself that it is true.
@nray Just an FYI, this didn't take 60 seconds. It took no more than any other page.

✅ AC1: You should see the BetaOptin panel on this page. It is the grey box with text "Do you want to try some new features?". Click the "okay" button.

✅ AC2: The settings page should load with "devwiki βeta" turned on.

Turn off "devwiki βeta"
Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test again.+
✅ AC3: Click the "No thanks" button. The BetaOptin panel should disappear.

✅ AC4: Refresh the page. The BetaOptin panel should not be there anymore.

Niedzielski added a subscriber: ovasileva.
Niedzielski updated the task description. (Show Details)Jun 3 2019, 5:35 PM
Niedzielski updated the task description. (Show Details)Jun 3 2019, 5:38 PM

If successful, a new task for new further mfExtend refactors is made.

This task looks good to me. I'm discussing this last bullet with the team.

Niedzielski closed this task as Resolved.Jun 4 2019, 3:39 PM
Niedzielski updated the task description. (Show Details)