Description
In order to allow users to switch between Talk and Article views more fluidly, and also to match the expectations of the tab pattern, we should render the talk page as a tab rather than in a modal. This is a pre-requisite for enabling the Article/Talk tabs for all users. Our expectation is that this is the first task and a blocker for the remainder of this process, with the actual switch happening later in Q2, after AMC mode is deployed everywhere and sufficient outreach has been completed. While the initial group receiving these changes will be AMC users, the target for this is all logged-in users. As such, this task is not a part of the AMC project.
Acceptance criteria
Note: See developer notes about how we cannot do this in PHP. This is a CSS/JS only change
- The talk page is feature flagged behind "TALK_AT_TOP" config (both Talk At Top and new Talk Page will use same Feature). (This AC turned out not to be relevant as the simplified talk page is shown whether amc is enabled or not)
- When I click the talk tab we navigate to the Talk: page via a server side render.
- When I click a section heading a TalkSectionOverlay renders
- When I disable JavaScript I see the entire talk page with edit icons for editing individual sections
- When I click "view as wiki page" I see the entire talk page with edit icons for editing individual sections
- The #/talk and #/talk/1 routes have been removed. The latter is replaced with an overlay that shows when I navigate to '#Talk_Anchor'
- The talkBoard code has been moved from MobileFrontend (it is no longer needed because of the above A/C)
- When I click the "add new topic" I navigate to "#/talk/new" and the talk overlay for creating topics renders as it does currently
- Given the talk section content is inside the page, we can remove the code that hits the mobileview API and make the TalkSectionOverlay a synchronous component.
- The CSS for the talk page should be restricted to talk pages only - see skins.minerva.userpage.styles for how to do this.
Designs
| article view | talk view | discussion view (modal) | add new discussion view (modal) |
|
|
|
|
Note: once you've navigated to the Talk tab the actions in the toolbar (language, watch, history) and overflow menu should apply to the Talk page, not the Article page. For example tapping History would lead to the history of the Talk page (e.g. https://en.wikipedia.org/w/index.php?title=Talk:China&action=history). Let's be mindful to consider and test this. I know that Watch is the same regardless of whether you are on the Article or Talk tab.
Developer notes
We can do this using CSS and JS alone.
I have a patch which proves this:
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/540441 POC: Talk is a tab
Sign off steps
- The code for mobile.talk.overlays is now so small it should be folded into mobile.startup. Set up a task to do that.
- Document the change in bytes in this ticket.
- Confirm T237155 is resolved. If not pull it into the sprint to fix.
QA steps
When anon user visits talk page directly
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Dog as an anon user
- Ensure that an "Add discussion" button is NOT displayed
- Ensure there is a "Read as wiki page" button at bottom of page
- Ensure that clicking on a section opens up an overlay where you can see the topic title, comment, and any replies to that topic. You won't be able to add a reply since you are an anon,.
- Click the "Read as wiki page" button. Ensure that it lets you see the page with a Table of Contents (on wide screens), but without the "Read as wikipage" button or the "Active discussions" header.
- Click on a link in the TOC and ensure it leads you to the top of clicked section
- Ensure that you can collapse/expand a section by clicking on it and that no overlay shows
- Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:History/Talk:Main_Page?action=history and ensure that you don't see an "Add discussion button" or a "Read as wiki page" button
When logged in, non-AMC user visits article
- Login and visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog
- Ensure that there is a "Discussion" button at bottom of page. Click on it and ensure you are taken to the talk page (no overlay appears).
- Ensure there is a "Read as wiki page" button at bottom of page, "Add discussion" button at top of page, and "Active discussions" heading with a list of topics below that
- Ensure that clicking on a section opens up an overlay where you can see the topic title, comment, and any replies to that topic. Type a reply into the overlay and click the "Publish" button. Ensure that the page refreshes and the overlay appears again with the reply you typed visible (overlay should open again automatically). Exit overlay.
- Click the "Add discussion" button and ensure an overlay appears that lets you add a discussion.
- In the "Subject" field, type a subject with ascii and non-ascii characters e.g. ("😭\o/abc123!*"'();:@&=+$,/?#[]%F0%9F%98%AD存在%😭") should cover most of the edge cases out there. In the "What is on your mind?" field, type whatever you want. When done, click the "Publish" button. Ensure that the page refreshes and a toast appears saying your save was successful. Scroll to bottom of page and ensure your topic appears in the list. Click on the topic and ensure the overlay appears and shows what you wanted to publish.
- Click the "Read as wiki page" button. Ensure that it lets you see the page with a Table of Contents (on wide screens), but without the "Read as wikipage" button and without the "Active discussions" header.
- Click on the topic you added in step 6 in the TOC and ensure it leads you to the top of the section.
- Ensure that you can collapse/expand a section by clicking on it and that no overlay shows
- Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Main_Page?action=history and ensure that you don't see an "Add discussion button" or a "Read as wiki page" button
When logged in user visits a talk page with Flow enabled
- Login and visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Flow_QA
- Ensure that there is NOT a Table of contents, "Add discussion" button, "Read as wikipage" button, "There are no discussions on this page" message, or "Active discussions" message visible on the page.
- Ensure that clicking on a topic expands/collapses it and that no overlay is shown
When logged in user visits a talk page on desktop Minerva
- Login and visit https://en.wikipedia.beta.wmflabs.org/wiki/Talk:Dog?useskin=Minerva&useformat=desktop
- Ensure that there is NOT an "Read as wikipage" button, "There are no discussions on this page" message, or "Active discussions" message visible on the page. 3) Ensure the table of contents shows on wider screens
- Ensure that clicking on a topic expands/collapses it and that no overlay is shown
When logged in user visits a talk page with JS disabled
- Disable your browser's javascript and Login and visit https://en.wikipedia.beta.wmflabs.org/wiki/Talk:Dog
- Ensure that there is NOT a "Read as wikipage" button, "There are no discussions on this page" message, or "Active discussions" message visible on the page. There should still be an "Add discussion" button
- Ensure the table of contents shows on wider screens
- Ensure that there are edit icons next to the sections and clicking on one leads to an edit page for that section
When logged in, AMC user visits article
- Login with AMC mode on and visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog
- Ensure that there is a "Discussion" tab at top of page. Click on it and ensure you are taken to the talk page (no overlay appears).
- Repeat steps 3 - 10 from "When logged in, non-AMC user visits article"
QA Results
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T230695#5669243 |
| 2 | ❌ | T230695#5669243 |
| 3 | ❌ | T230695#5669243 |
| 4 | ❌ | T230695#5669243 |
| 5 | ✅ | T230695#5669243 |
| 6 | ✅ | T230695#5669243 |
