The TalkOverlay inside mobile.talk.overlays is one of our most simple overlays.
It's an overlay with
* a header
** that contains an "add discussion" button
* a content area
* that contains a Panel component "The following conversations are currently active"
* that contains a list of topics.
* a footer
* which contains a single link.
It looks like this:
{F28129454}
Despite this, the TalkOverlay is defined as a single component. It uses templatePartials from other classes and using a gateway makes ajax requests!
The same overlay can be created via composition using an async function
```
overlayManager.addRoute( '/talk/', () => {
return gateway.getTopics( url ).then( ( topics ) => {
new Overlay( {
events: { .... },
action: new Button( { label: 'Add discussion' } ),
anchor: new Anchor( { label: 'read as wiki page' } ),
children: [ new Panel(), new TopicTitleList( topics ) ]
} );
} );
}
```
= Developer notes
I took a stab at this here: https://gerrit.wikimedia.org/r/471334
I found one component particularly useful - The [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/471333/ | PromisedView ]] component. This is essentially a temporary view that replaces itself when a promise is resolved (essentially an async component).
I also saw an opportunity to tidy up some CSS/HTML generation shared by category, talk and language overlay.
Please see the pageIssuesOverlay in Minerva for an existing example of an Overlay not using composition.
Note: TalkSectionOverlay and TalkSectionAddOverlay are out of scope for this task.
= Acceptance criteria
[] The Overlay class is updated to be flexible enough to render the TalkOverlay
[] The TalkOverlay has no template partials (it instead uses child components)
[] The TalkOverlay is actually an Overlay
[] We have a way of creating async components that depend on data from API calls.
[] We have a working agreed upon way of doing composition given the constraints of the system
[] A reusable component (suggested name TopicTitleList) is created that can be used inside the CategoryOverlay and LanguageOverlay:
{F28129503}
{F28129505}
[] A conversation has been had about how this went and how we might do it better next time.
= QA steps
[] Test this on the beta cluster: https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain
[] Visit article in stable mode while logged in
[] Click the talk button (bottom or top of article)
[] Verify several talk topics show
[] Verify that when you click one of the topics you are shown that topic
[] Verify that the talk overlay can be closed by the browser back button
[] Verify that the talk overlay can be closed by clicking the icon in the top left
[] Verify that clicking add discussion shows a form for adding new topics
= Sign off steps
[x] Set up tasks for TalkSectionOverlay and TalkSectionAddOverlay which we will port next (see T217102)
[x] Setup a task for moving the registration for the talkOverlay route into MobileFrontend and removing the usage of LoadingOverlay / loadModule. (This was done as part of this change!)
== QA Results
| **Status** | **Details**)) |
| ✅ Passed |T215370#4983605|