Progress is measured here: mediawiki.org
This begins our refactoring effort and aims to minimise the use of inheritance in MobileFrontend. We will reduce components to classes that extend the View class to minimise confusion in navigating through files to understand how the inheritance change impacts our component.
Per T206036#4832740 (MFA: [Spike, 8hrs] Views: You Gotta Keep 'em Separated) and similar discussions in T209647 our main focus will be the Overlay's. We will limit efforts to separating the content of overlays from the overlay itself.
How?
We can replace many of our classes with factory functions that create Overlays and append child components via jQuery.
The LoadingOverlay probably provides the most simple to explain example: https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/468187/14/src/mobile.startup/loadingOverlay.js
We will look to generate many of our View's in this way, resorting to using existing components with different options (think React-like props). Where needed, we will add functionality/flexibility to View and Overlay classes to generalise different component needs - for example in the LoadingOverlay example a will described property noHeader was added.
Outcomes
The outcomes of this epic will be:
- More granularity in our components and more reuse
- The DRYing up of many template and template partials
- Easier to read code.
- The ability to remove the LoadingOverlay - instead, Overlay factories will be able to limit the spinner/async loader indicator to the Overlay content
- We have documented a best practice for how to make new overlay's / components going forward
When is it done?
This EPIC can be resolved when the following classes either do not exist (replaced with factory functions or removed)
- Documentation on how to make View's has been written
- The following query should return 0 results in Minerva and MobileFrontend.
ag "extends Overlay"
ag "extends Drawer"
ag "extends Icon"
ag "extends PageList"
Icons
- DownloadIcon extends Icon -> is Icon (https://gerrit.wikimedia.org/r/472371)
- ShareIcon extends Icon -> is Icon (T205592)
Drawers and Panels
- BetaOptinPanel extends Panel -> extends View T217298
- BlockMessage extends Drawer -> is Drawer
- Drawer extends Panel -> is View
- CtaDrawer extends Drawer -> is Drawer (red links + watchstar when anon!)
- ReferencesDrawer extends Drawer -> is Drawer (T217295)
Categories
- CategoryAddOverlay extends Overlay -> is Overlay (T246049)
- CategoryOverlay extends Overlay -> is Overlay (https://gerrit.wikimedia.org/r/469145)
MediaViewer
- ImageOverlay extends Overlay -> is Overlay (T216198)
Languages
- LanguageOverlay extends Overlay -> is Overlay
Notifications
- NotificationsFilterOverlay extends Overlay -> is Overlay (T217296)
- NotificationsOverlay extends Overlay -> is Overlay (T217296)
Page issues
- PageIssuesOverlay extends Overlay -> is Overlay (https://gerrit.wikimedia.org/r/475576)
Talk
- TalkOverlay extends Overlay (T215370)
- TalkSectionAddOverlay extends Overlay (T217102, T278590)
- TalkSectionOverlay extends Overlay (T217810, T278590)
Page lists
- SearchOverlay extends Overlay
- WatchstarPageList extends PageList -> is PageList
- Nearby extends WatchstarPageList extends PageList (T217814)
- WatchList extends WatchstarPageList extends PageList -> is PageList
Editor
- AbuseFilterOverlay extends Overlay -> is Overlay
- VisualEditorOverlay extends EditorOverlayBase extends Overlay -> is Overlay
- EditorOverlayBase extends Overlay -> devnull
- EditorOverlay extends EditorOverlayBase -> is Overlay
Misc
- LoadingOverlay extends Overlay (https://gerrit.wikimedia.org/r/468187)
- Remove the loadingOverlay factory function (replaced by promisedView pattern)
What happens after this epic?
We'll review the newly created components and with a spike evaluate how we can break them down further.
As part of this we may decide to target one specific overlay and refactor until completion to show/prove to ourselves this will result in more manageable and testable code.
Do we write new tests?
This will be decided by the team as and when we work on this. We'll talk about our commitment to code coverage and how it will change during this refactor.
What will code look like in future?
All Overlay's will be Overlay's with widgets inside them
e.g.
var overlay = new Overlay( {
title: 'Editing Spain article'
} );
overlay.append(
new EditorSurface()
);Sign off steps
- Take a look at T214641 and determine whether the issue has been solved. If not adjust/rewrite