Page MenuHomePhabricator

Add drag and drop functionality to the resolution suggestion
Closed, ResolvedPublic1 Estimated Story Points

Description

This is about the implementation of the drag and drop functionality for the UI according to the following mock:

4.0 EC For Discussion Pages Main Page.jpg (1×1 px, 472 KB)

Note that T244237: Implement basic UI for the talk page resolution suggestion should be done first

The ticket does include

  • Users are able to drag and drop their or the other user's comment to change the order of these two paragraphs. This will only be possible for the two conflicting comments and only in in the specific spot the conflict occurred.
  • When the changes are saved or previewed the changes to the order will be respected accordingly

Event Timeline

WMDE-Fisch set the point value for this task to 5.Mar 18 2020, 12:00 PM
WMDE-Fisch moved this task from Sprint Backlog to Doing on the WMDE-QWERTY-Sprint-2020-03-18 board.

I'll start playing around with this to get a sense on how this an be done using OOUI draggable.

Change 581984 had a related patch set uploaded (by WMDE-Fisch; owner: WMDE-Fisch):
[mediawiki/extensions/TwoColConflict@master] [POC][WIP] Allow changing the order of the additions

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

Change 584708 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/TwoColConflict@master] Upgrade tests to wdio 5

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

Lena_WMDE changed the point value for this task from 5 to 3.

Change 584708 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Upgrade tests to wdio 5

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

Change 584626 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/TwoColConflict@master] [WIP] Browser tests for draggable talk page blocks

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

The current implementation leaves a few open questions behind, to be discussed during demo time or earlier:

  • Should the two drag icons have a tooltip? I feel this might be helpful. E.g. "Click, hold and drag this paragraph".
  • Shouldn't the unchanged copy blocks be editable? I mean, I understand why they are not editable. But: They are editable in the regular two-column conflict screen. We did this on purpose, to not block any existing workflows, no matter how strange they might be. A specific one we have been made aware of is this: Lets assume I want to split my answer into two. I want to do this by editing my answer, removing a part, dragging the remaining answer to the best position, and then inserting the other half of my answer somewhere else. That other position is most certainly somewhere in one of the unchanged copy blocks.

Technical TODOs (Technical-Debt):

  • Rename the two classes TalkPageResolution and HtmlTalkPageResolutionView to not mention "talk" any more, but conform to our "single-column(-view)" naming scheme.
  • The data-line-number attribute appears to be unused. Can we remove it?
  • Rewrite HtmlTalkPageResolutionView::getHtml() to not require a specific order (delete → add) any more.
  • Rewrite HtmlTalkPageResolutionView::getHtml() to wrap the two lines in a single Html::element( 'div', … ) instead of using (dangling) Html::open/closeElement().

Change 581984 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Allow changing the order of the additions

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

WMDE-Fisch changed the point value for this task from 3 to 1.
awight added a subscriber: awight.

I'm pushing a patch to disable draggability, until we can resolve the glitches.

Change 589563 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/TwoColConflict@master] Disable dragging until fixed.

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

No-dragging design solution: Flip button

Mock

No-JS Talk Page - Flip interaction.jpg (1×1 px, 462 KB)

Uses OOUI markup icon at 16x16 px, rotated 90 deg. This should be a frameless button which flips the position of the two comments when clicked.

Acceptability Criteria

  • Users are able to change the order of the comments by clicking the 'flip' button. This will only be possible for the two conflicting comments and only in in the specific spot the conflict occurred.
  • When the changes are saved or previewed the changes to the order will be respected accordingly

Uh, nice. I like it. @Lena_WMDE, is it ok from PM perspective to replace the draggable solution with this button?

@ecohen, I noticed a detail in the mock that's different from the current implementation. The white fade-out effect in the top gray box sits at the top of the box, but on the other side in the bottom box. I can see why. However, this is a little hard to implement. As of now, all these fade-out effects sit at the bottom of their gray box, and the expand button always expands downwards, not upwards. One of the arguments for this was that it's more likely that the user remembers the first line of a paragraph, but less likely to remember the end of a paragraph (not sure this is true, we just assumed). Should we invest time to change this, or can we keep the current behavior?

Change 590988 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/TwoColConflict@master] Use the "single column" naming scheme, instead of "talk page"

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

Change 590989 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/TwoColConflict@master] Remove unused data-line-number attribute

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

@thiemowmde I actually just re-used the old design file for the draggable UI and changed the button. The top fade must be a left-over from old designs. I think I was going too quickly and didn't look it all over in close enough detail. Thanks for catching it. I think it's fine to leave the fade-out at the bottom for all of the gray boxes. The only intentional change is removing the draggable icons and adding the 'switch' button.

Also - glad you like it!

Thanks @ecohen and @thiemowmde. Please go ahead with replacing the draggable solution with a switch button.

(re-adding to sprint, seems it was accidentally removed)

Change 590989 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Remove unused data-line-number attribute

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

Change 589563 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Disable dragging until fixed.

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

Change 590988 abandoned by Thiemo Kreuz (WMDE):
Use the "single column" naming scheme, instead of "talk page"

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

IMO the story point estimate needs to be increased here, since it turns out we have to rewrite the implementation.

IMO the story point estimate needs to be increased here, since it turns out we have to rewrite the implementation.

I'll create a new ticket for this. I think it's better to closes this one here. Drag and drop was done and we needed to remove it for reasons. Now we have a new approach.
/me goes to write that ticket.

Change 584626 abandoned by Awight:
[WIP] Browser tests for draggable talk page blocks

Reason:
Sadly, we had to drop draggability because of OOUI bugs.

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