Page MenuHomePhabricator

I should be able to support a focus area
Closed, ResolvedPublic

Assigned To
Authored By
JWheeler-WMF
Apr 23 2024, 8:53 PM
Referenced Files
F57330511: 2024-08-28_10-55-59.mp4.gif
Aug 28 2024, 10:21 PM
F57331585: 2024-08-28_10-54-58.mp4.gif
Aug 28 2024, 10:21 PM
F57281895: 2024-08-19_15-16-50.mp4.gif
Aug 19 2024, 10:29 PM
F57281897: 2024-08-19_15-15-33.png
Aug 19 2024, 10:29 PM
F57281893: 2024-08-19_15-15-25.mp4.gif
Aug 19 2024, 10:29 PM
Restricted File
Aug 14 2024, 1:53 AM
F57272122: 2024-08-13_13-04-49.mp4.gif
Aug 13 2024, 10:05 PM
F57272115: 2024-08-13_13-01-26.png
Aug 13 2024, 10:05 PM

Description

Given that I’m logged in and have an opinion about a focus area, when I go to the focus area page, then I should see the number of supporters for the focus area

  • And at the bottom of the page, see a button to support the focus area
  • and by supporting the focus area, I should see a dialog that allows me to add a comment
  • and I when I submit, then my support, username, timestamp, and comment should be visible on the page as an edit. And, I should see a confirmation dialog to show my support has been recorded.
    • And I should not be able to support the focus area if I am not logged in

https://www.figma.com/file/JcTMFwbEJPpCKBiZ16Jkel/Future-of-the-Wishlist?type=design&node-id=1175-78244&mode=design&t=q7LAvYAtYri5kle8-0

https://www.figma.com/file/JcTMFwbEJPpCKBiZ16Jkel/Future-of-the-Wishlist?type=design&node-id=1175-78244&mode=design&t=q7LAvYAtYri5kle8-0

https://www.figma.com/file/JcTMFwbEJPpCKBiZ16Jkel/Future-of-the-Wishlist?type=design&node-id=1175-78244&mode=design&t=q7LAvYAtYri5kle8-0


Developer notes: This is essentially about bringing https://gitlab.wikimedia.org/repos/commtech/add-me over to the new repo. AddMe was meant to be a general purpose "support this thing" kind of gadget but it lost steam. We can take just the bits we need.

Derived Requirement:

When a logged-in user visits a focus area page, they should see the number of supporters for the focus area. At the bottom of the page, there should be a button to support the focus area. Upon supporting, the user should be presented with a dialog to add a comment, and after submission, the support action (including username, timestamp, and comment) should be visible as an edit on the page. A confirmation dialog should also be shown to indicate that the support has been recorded. Users who are not logged in should not be able to support the focus area.

BDD

Feature: Support Focus Area Functionality

Scenario: Display number of supporters for a focus area

Given I’m logged in
When I visit a focus area page
Then I should see the number of supporters for the focus area

Scenario: Display support button for a focus area

Given I’m logged in
When I visit a focus area page
Then I should see a button to support the focus area at the bottom of the page

Scenario: Submit support with comment for a focus area

Given I’m logged in
When I click the support button
Then I should see a dialog allowing me to add a comment
And when I submit the comment
Then my support, username, timestamp, and comment should be visible on the page as an edit
And I should see a confirmation dialog showing my support has been recorded

Scenario: Restrict support functionality for non-logged-in users

Given I’m not logged in
When I visit a focus area page
Then I should not be able to support the focus area
Test Steps

Test Case 1: Validate display of supporters count

Log in to the website.
Navigate to a focus area page.
✅❓❌⬜ AC1: Confirm that the number of supporters is visible on the page.

Test Case 2: Validate presence of support button

Log in to the website.
Navigate to a focus area page.
✅❓❌⬜ AC2: Confirm that a support button is visible at the bottom of the page.

Test Case 3: Validate submission of support with a comment

Log in to the website.
Navigate to a focus area page.
Click on the support button.
Enter a comment in the dialog that appears.
Submit the comment.
✅❓❌⬜ AC3: Confirm that the support, username, timestamp, and comment are visible as an edit on the page.
✅❓❌⬜ AC4: Confirm that a confirmation dialog appears indicating the support has been recorded.

Test Case 4: Validate restriction for non-logged-in users

Log out of the website.
Navigate to a focus area page.
✅❓❌⬜ AC5: Confirm that the support button is not usable or that attempting to support prompts a login requirement.

QA Results - Wishlist-test.toolforge

Details

Other Assignee
GMikesell-WMF

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
JWheeler-WMF raised the priority of this task from Medium to High.May 28 2024, 9:18 PM

If someone has already voted, what should the button do or say? A couple of possible options:

  • Change it from 'Support focus area' (progressive primary) to 'Remove your support' (destructive normal) and it could delete the support template.
  • Change to 'Edit your support' (progressive normal), and the dialog would load the existing comment and on submission would update the timestamp.

Or something else.

I should see a confirmation dialog to show my support has been recorded.

There's no confirmation dialog but instead the button turns into a ticked "You've supported" message.

The work that I mentioned above for removing a vote can be done in T371656.

I think everything else for this task is done. The test site is updated with the latest templates and gadget.

Oops, I missed the "Your support has been submitted successfully." banner that appears below the button. Doing that now.

In T363231#10037524, Samwilson wrote:

Oops, I missed the "Your support has been submitted successfully." banner that appears below the button. Doing that now.

FYI @JSengupta-WMF this wording came up in code review per https://www.mediawiki.org/wiki/Help:System_message#Avoid_jargon_and_slang. A suggested change that's i18n-friendly and closest to the designs would be: "Your support vote has been submitted." Does that sound okay?

This is all done, I think (with the above changes to the wording, which I think we can assume are fine).

GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF subscribed.

@Samwilson Please review the issues/questions below. If you need any more information about them, please let me know. AC3 & AC5 are gifs.

Test Result - Wishlist-test.toolforge

Status: ❌ FAIL
Environment: Wishlist-test.toolforge
OS: macOS Sonoma 14.6
Browser: Chrome 127
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Validate display of supporters count

  1. Log in to the website.
  2. Navigate to a focus area page.

✅ AC1: Confirm that the number of supporters is visible on the page.

2024-08-13_12-55-12.png (809×953 px, 135 KB)

Test Case 2: Validate presence of support button

  1. Log in to the website.
  2. Navigate to a focus area page.

✅ AC2: Confirm that a support button is visible at the bottom of the page.

2024-08-13_12-53-45.png (923×1 px, 152 KB)

Test Case 3: Validate submission of support with a comment

  1. Log in to the website.
  2. Navigate to a focus area page.
  3. Click on the support button.
  4. Enter a comment in the dialog that appears.
  5. Submit the comment.

❌AC3: Confirm that the support, username, timestamp, and comment are visible as an edit on the page.
Time stamp does not appear

2024-08-13_12-59-17.mp4.gif (936×882 px, 756 KB)

❓AC4: Confirm that a confirmation dialog appears indicating the support has been recorded.
Is the dialogue box you are talking about showing that it's recorded?

2024-08-13_13-01-26.png (856×886 px, 144 KB)

Test Case 4: Validate restriction for non-logged-in users

  1. Log out of the website.
  2. Navigate to a focus area page.

❓AC5: Confirm that the support button is not usable or that attempting to support prompts a login requirement.
Did you just want this greyed out or not visible? If greyed out, did you want some kind of prompt to let the user know that they need to log in or is that obvious already?

2024-08-13_13-04-49.mp4.gif (932×888 px, 600 KB)

❌AC3: Confirm that the support, username, timestamp, and comment are visible as an edit on the page.
Time stamp does not appear

Fixed.

❓AC4: Confirm that a confirmation dialog appears indicating the support has been recorded.
Is the dialogue box you are talking about showing that it's recorded?

No, it should be showing a success banner below the button. I see where the issue is; fix incoming. Thanks!

{F57272512}

❓AC5: Confirm that the support button is not usable or that attempting to support prompts a login requirement.
Did you just want this greyed out or not visible? If greyed out, did you want some kind of prompt to let the user know that they need to log in or is that obvious already?

No, another bug! The greyed out button's label should be "Please log in to support this focus area".

Thank you! I'll get these things sorted now.

@GMikesell-WMF these fixes are merged and deployed to test and prod; can you test again? Thanks! :-)

@Samwilson AC4 is now resolved but I'm still getting the same issues for AC3 and AC5 as you see in the 2 gifs below.

Test Result - Wishlist-test.toolforge

Status: ❌ FAIL
Environment: Wishlist-test.toolforge
OS: macOS Sonoma 14.6
Browser: Chrome 127
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Validate display of supporters count

  1. Log in to the website.
  2. Navigate to a focus area page.

✅ AC1: Confirm that the number of supporters is visible on the page.

2024-08-13_12-55-12.png (809×953 px, 135 KB)

Test Case 2: Validate presence of support button

  1. Log in to the website.
  2. Navigate to a focus area page.

✅ AC2: Confirm that a support button is visible at the bottom of the page.

2024-08-13_12-53-45.png (923×1 px, 152 KB)

Test Case 3: Validate submission of support with a comment

  1. Log in to the website.
  2. Navigate to a focus area page.
  3. Click on the support button.
  4. Enter a comment in the dialog that appears.
  5. Submit the comment.

❌AC3: Confirm that the support, username, timestamp, and comment are visible as an edit on the page.
Time stamp does not appear

2024-08-19_15-15-25.mp4.gif (744×1 px, 831 KB)

✅AC4: Confirm that a confirmation dialog appears indicating the support has been recorded.

2024-08-19_15-15-33.png (285×756 px, 43 KB)

Test Case 4: Validate restriction for non-logged-in users

  1. Log out of the website.
  2. Navigate to a focus area page.

❌AC5: Confirm that the support button is not usable or that attempting to support prompts a login requirement.
Still greyed out

2024-08-19_15-16-50.mp4.gif (732×1 px, 750 KB)

I have synced the Meta templates with wishlist-test, so the timestamps should be showing now, as well as AC5.

@MusikAnimal and @Samwilson Please review the results below, thanks!

I have synced the Meta templates with wishlist-test, so the timestamps should be showing now, as well as AC5.

Test Case 3: Validate submission of support with a comment

Log in to the website.
Navigate to a focus area page.
Click on the support button.
Enter a comment in the dialog that appears.
Submit the comment.

❌AC3: Confirm that the support, username, timestamp, and comment are visible as an edit on the page.
The time stamp didn't appear for today's date 8/28 as seen in the gif. Also, do you think we should have the latest timestamp date on top besides the oldest?

2024-08-28_10-54-58.mp4.gif (714×876 px, 1 MB)

✅AC5: Confirm that the support button is not usable or that attempting to support prompts a login requirement.
This is what you want, right?

2024-08-28_10-55-59.mp4.gif (710×920 px, 764 KB)

❌AC3: Confirm that the support, username, timestamp, and comment are visible as an edit on the page.
The time stamp didn't appear for today's date 8/28 as seen in the gif. Also, do you think we should have the latest timestamp date on top besides the oldest?

It looks like there was an error in how that focus area was set up: it had the wrong slug parameter, so although your vote was being saved to the right page, that wasn't the page of votes that was being transcluded. I've fixed that issue on the test site, and on Meta all focus areas are set up correctly so it's not an issue there.

As for the ordering of putting the latest at the top vs the bottom, I think the usual way on Meta is for it to be at the bottom as it is. But it's not too hard to change that if we want to.


I also noticed that the after-voting message isn't displaying correctly at the moment, so have made a fix for that.

That's merged and deployed to test and prod.

I think everything's good here now.