Page MenuHomePhabricator

Add link to add interwiki links back to the sidebar
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

In T286659: [SPIKE] Explore adding interwiki links link back to sidebar we explored the best way to add interwiki links entry back into the sidebar as a temporary solution until this functionality was available in the ULS. This task tracks the implementation of the method identified in the spike

Acceptance criteria

  • Add JavaScript to modern Vector which puts the link in the sidebar
  • The link should apply for pages without a language button
  • Make sure link doesn't appear in legacy vector (or other skins)
  • It should work in the exact same way it used to work, with a pop-up in wiki, without going to any other project.

Developer notes

A carefully commented hack should be added like so:

// Temporary solution to T287206, can be removed when ULS dialog includes this link and button is shown on pages without language
var $editPage = $('#p-lang-btn .wbc-editpage')
if($editPage.length) {$editPage.text($editPage.attr('title'))}
var $li = $( '<li>' ).append( $editPage ); $li.appendTo( '#p-tb ul')

We'll also need to make sure the HTML is always present by using CSS to hide the language button for pages without languages. I suggest a class no-languages is added to the button and a display: none hides it.

Popup QA steps

Screen Shot 2021-08-09 at 10.07.22 AM.png (1×2 px, 1 MB)

Design

image.png (735×1 px, 454 KB)

QA

In modern Vector (useskinversion=2)

In legacy Vector (useskinversion=1)

QA Results - Beta

AC Status Details
1 T287206#7263600
2 T287206#7263600
3 T287206#7263600
4 T287206#7263600
5 T287206#7263600
6 T287206#7263600

QA Results - Beta

AC Status Details
1 T287206#7298213
2 T287206#7298213
3 T287206#7298213
4 T287206#7298213
5 T287206#7298213
6 T287206#7298213

QA Results - Beta

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
LGoto set the point value for this task to 3.Jul 26 2021, 5:38 PM

The AC says "The link should apply for pages without a language button", but the the developer notes mention hiding the link for pages without languages.

@ovasileva could you help clarify if the interwiki link should be inside the sidebar for pages without the language button? I might not be testing this right, but I don't see the link on pages without the language button right now.

Change 708173 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Copy interwiki links into sidebar

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

The AC says "The link should apply for pages without a language button", but the the developer notes mention hiding the link for pages without languages.

@ovasileva could you help clarify if the interwiki link should be inside the sidebar for pages without the language button? I might not be testing this right, but I don't see the link on pages without the language button right now.

I can expand on this one. Right now we don't output a language button for pages without languages.

We still don't want to show the language button, but we'll want to render it in the HTML so that the JavaScript hack works. Thus, we'll need to hide this in CSS instead as part of this task.

bwang removed bwang as the assignee of this task.Jul 27 2021, 5:09 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
bwang subscribed.

do we want to add an AC about ensuring that this link doesn't appear in legacy vector (or other skins)?

Change 708173 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Copy interwiki links into sidebar

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

In T287206#7240424, @alexhollender wrote:

do we want to add an AC about ensuring that this link doesn't appear in legacy vector (or other skins)?

This is part of the QA steps.

This approach seems odd. If you want to move the language links to the top-right, then people will start expecting to see the links there. So if you add the 'add links' back to the sidebar, then no-one will look for them there. Why not always show the interlanguage link in whatever place is now normal, and include the 'add links' link in that directly?

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

In modern Vector (useskinversion=2)

✅ AC1: Ensure "Edit interlanguage links" link is added to the "Tools" menu in the sidebar and matches the styles of the links around it

Screen Shot 2021-08-05 at 7.36.33 AM.png (965×994 px, 330 KB)

✅ AC2: Ensure the language button is only visible on pages with languages. It should be visible on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_language_test_page There should be no languages section in the sidebar on this page.
Screen Shot 2021-08-05 at 7.39.43 AM.png (732×991 px, 171 KB)

✅ AC3: Ensure the language button is only visible on pages with languages. It should NOT be visible on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_Echo_link_test_0.0409507727617362. There should be no languages section in the sidebar on this page.
Screen Shot 2021-08-05 at 7.52.11 AM.png (742×993 px, 171 KB)

In legacy Vector (useskinversion=1)

✅ AC4: Ensure the language section in the sidebar is present on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_language_test_page?useskinversion=1 and has a gray "Add links" in the bottom right corner.

Screen Shot 2021-08-05 at 7.53.52 AM.png (882×992 px, 196 KB)

✅ AC5: Ensure the language section in the sidebar is present on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_Echo_link_test_0.0409507727617362?useskinversion=1 and has a gray "Add links" in the bottom right corner.
Screen Shot 2021-08-05 at 7.54.26 AM.png (829×992 px, 195 KB)

✅ AC6: On both pages ensure "Edit interlanguage links" link is not added to the "Tools" menu in the sidebar

This has been implemented at euwiki but the system is not the same, and it should. Now we have a form at Wikidata that is new for all users.

We had one perfectly working solution, now we have changed the place and the system, so we have two problems.

Theklan raised the priority of this task from High to Unbreak Now!.Aug 6 2021, 7:28 PM

The link introduced creates a New Item at Wikidata, instead of linking to other languages. So people using it are creating items that should be merged in the future. This will create a burden of duplicated items and doesn't solve the issue it should be solved (linking).

Aklapper lowered the priority of this task from Unbreak Now! to High.Aug 6 2021, 8:25 PM

@Theklan wrote:
It should work in the exact same way it used to work, with a pop-up in wiki, without going to any other project.
The link introduced creates a New Item at Wikidata, instead of linking to other languages.

I'm sorry, I can't reproduce.

I go to a random page on Wikipedia in Euskara with the Desktop Improvements:

Enabled, Eustomias brevibarbatus, I find that it's already connected, and when I choose "Edit interlanguage links", I go to https://www.wikidata.org/wiki/Q4993563#sitelinks-wikipedia.

Disabled, Eustomias brevibarbatus, I choose "Edit links", I go to the very same section on the same page: https://www.wikidata.org/wiki/Q942005#sitelinks-wikipedia.

So in both situations, I go to another project.

I don't create a new item either.

Alright, sorry, I checked with a page that hasn't been linked to Wikidata, and now I understand.

Indeed, selecting "Add links" in Vector shows a pop-up. Selecting "Add interlanguage links" redirects to d:Special:NewItem.

That's it! This feature is for newly created pages that should be linked to other languages, so it shouldn't create NewItem, but link to already existing items. This feature now is creating duplicated entries at Wikidata, making the possible mess much bigger for volunteers.

You can easily reproduce the problem by going to any page linked in Special:UnconnectedPages. This would make finding the issue easier.

it's clear this fails the AC " It should work in the exact same way it used to work, with a pop-up in wiki, without going to any other project." So moving to needs more work (I've explained why on the Gerrit patch)

LGoto added a subscriber: Edtadros.

Change 711196 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Copy class across to new language link item

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

The dialog is added via this code:
https://gerrit.wikimedia.org/g/mediawiki/extensions/Wikibase/+/f2e96e1b08fc5ae2e2e92f05d5eda137dc6b1bc8/client/resources/jquery.wikibase/jquery.wikibase.linkitem.js#172
and added by https://gerrit.wikimedia.org/g/mediawiki/extensions/Wikibase/+/f2e96e1b08fc5ae2e2e92f05d5eda137dc6b1bc8/client/resources/wikibase.client.linkitem.init.js#82

... and added as part of the 'wikibase.client.linkitem.init' module which apparently is getting loaded mw.loader.getState('wikibase.client.linkitem.init') === 'ready'

This actually works fine with debug=true, (https://eu.wikipedia.org/wiki/Messali_Hadj?useskinversion=2&debug=true) so this tells me we have some kind of race condition.

I still can't setup Wikibase but I replicated this behaviour with:

$wgHooks['SkinAfterPortlet'][] = function ( $skin, $name, &$html ) {
	//$html .= "<!--injected by LocalSettings.php: $name-->";
	if ( $name === 'lang' ) {
		$html .= '<span class="wb-langlinks-edit wb-langlinks-link" style="list-style: none;text-align: right;padding-right: 0.5em !important;line-height: 1.125em;font-size: 0.75em;float: right;"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q107514094#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage" style="color: #54595d !important;">Edit links</a></span>';
		$html .= '<script>$(".wb-langlinks-link .wbc-editpage").on("click", (ev) => { alert("Works"); ev.preventDefault(); });</script>';
	}
};

With that, it was clear the issue relates to a missing class added in https://gerrit.wikimedia.org/r/711196

Change 711196 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Copy class across to new language link item

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

@Jdlrobson Assigning back to you per standup...at least I think this is the one we were discussing.

Change 712408 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Add wikibase skin style

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

Change 712408 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add wikibase skin style

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

I mean !important is evil but I don't know a better alternative atm :/ I can take a look at it but I doubt I would be able to come up with a solution tbh.

Change 712950 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Revert \"Add wikibase skin style\"

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

Change 713011 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Wikibase@master] Provide special styling for modern Vector for add language links

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

The skinStyle was not applying, as it seems skins can't register skinStyles if the skinStyle is defined inside the extension it's trying to extend.

@Ladsgroup https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikibase/+/713011 should fix the remaining styling problem. I can't think of a better way to do it right now.

Change 712950 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Revert \"Add wikibase skin style\"

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

Change 713011 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Provide special styling for modern Vector for add language links

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

I ran into a New Vector wiki while logged-out, and noticed this doesn't seem to look quite right:

https://pt.wikipedia.org/wiki/Algoritmo

Screenshot 2021-08-20 at 16.20.25.png (1×2 px, 1 MB)

It has the grey right-aligned pencil styling as if it were at the end of a list of language links. I assume this styling is no longer meant to apply. Perhaps this is due to a change that was incompatible with our caching in production? (I suspect, since it doesn't appear to be this way everywhere)

Yup, it's a known problem that its fix got merged last night (look at the above comment by gerritbot). It can be also backported but I leave that to the reading team.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

In modern Vector (useskinversion=2)

✅ AC1: Ensure "Edit interlanguage links" link is added to the "Tools" menu in the sidebar and matches the styles of the links around it

Screen Shot 2021-08-20 at 10.33.42 AM.png (926×1 px, 514 KB)

✅ AC2: Ensure the language button is only visible on pages with languages. It should be visible on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_language_test_page There should be no languages section in the sidebar on this page.

Screen Shot 2021-08-20 at 10.37.05 AM.png (926×1 px, 190 KB)

✅ AC3: Ensure the language button is only visible on pages with languages. It should NOT be visible on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_Echo_link_test_0.0409507727617362. There should be no languages section in the sidebar on this page.

Screen Shot 2021-08-20 at 10.36.51 AM.png (926×1 px, 194 KB)

In legacy Vector (useskinversion=1)

✅ AC4: Ensure the language section in the sidebar is present on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_language_test_page?useskinversion=1 and has a gray "Add links" in the bottom right corner.

Screen Shot 2021-08-20 at 11.09.50 AM.png (926×1 px, 207 KB)

✅ AC5: Ensure the language section in the sidebar is present on https://en.wikipedia.beta.wmflabs.org/wiki/Selenium_Echo_link_test_0.0409507727617362?useskinversion=1 and has a gray "Add links" in the bottom right corner.
Screen Shot 2021-08-20 at 11.10.30 AM.png (926×1 px, 206 KB)

✅ AC6: On both pages ensure "Edit interlanguage links" link is not added to the "Tools" menu in the sidebar

A question: is this related to why some languages (en, no, etc.) display the links by default, and others (fr) don't? Or is that just an option that the French have opted out of? My recollection is, that fr-wiki used to display them as well, but my memory may be off.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki, euwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

In modern Vector (useskinversion=2)

✅ AC1: Ensure "Edit interlanguage links" link is added to the "Tools" menu in the sidebar and matches the styles of the links around it

Screen Shot 2021-08-20 at 10.37.05 AM.png (926×1 px, 190 KB)

✅ AC2: Ensure the language button is only visible on pages with languages.

Screen Shot 2021-08-20 at 10.37.05 AM.png (926×1 px, 190 KB)

✅ AC3: Ensure the language button is only visible on pages with languages. It should NOT be visible and there should be no languages section in the sidebar on this page.

Screen Shot 2021-09-02 at 6.54.58 AM.png (936×1 px, 329 KB)

In legacy Vector (useskinversion=1)

✅ AC4: Ensure the language section in the sidebar is present and has a gray "Add links" in the bottom right corner.

Screen Shot 2021-09-02 at 7.08.32 AM.png (936×1 px, 167 KB)

✅ AC5: Ensure the language section in the sidebar is present and has a gray "Add links" in the bottom right corner.

Screen Shot 2021-09-02 at 6.58.56 AM.png (936×1 px, 351 KB)

✅ AC6: On both pages ensure "Edit interlanguage links" link is not added to the "Tools" menu in the sidebar
see above

Popup
Go to https://eu.wikipedia.org/wiki/Special:UnconnectedPages and click one of the links
Select the "add interlanguage links" link
✅ AC7: The modal for adding a link should appear{F34629341}

All done! Styling fixes in & popup opens when no languages are available. Resolving.