Page MenuHomePhabricator

Create a pinia store for data collection items
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
• JKieserman
Jun 13 2023, 6:29 PM
Referenced Files
F37643661: image.png
Aug 31 2023, 12:39 AM
F37643627: image.png
Aug 31 2023, 12:39 AM
F37643625: image.png
Aug 31 2023, 12:39 AM
F37643120: image.png
Aug 31 2023, 12:39 AM
F37643119: image.png
Aug 31 2023, 12:39 AM
F37643117: image.png
Aug 31 2023, 12:39 AM
F37162880: image.png
Aug 3 2023, 11:32 PM
F37162871: image.png
Aug 3 2023, 11:32 PM

Description

The data collection Vue component will take input from the user for various fields. We should use a store to manage these fields.

Acceptance criteria:

  • setup a store using pinia for the app
  • the store has properties for all of the form fields
    • type of harassment
    • person violating behavior guidlines
    • links to harassment
    • additional details
    • reporter email
  • the fields can be set in the data collection component
  • the fields can be viewed in the data collection component

Event Timeline

SearchVue is an example of a codebase using Pinia for reference

Change 938259 had a related patch set uploaded (by Jkieserman; author: Jkieserman):

[mediawiki/extensions/ReportIncident@master] Input form for reporting harassment and pinia store

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

Change 939680 had a related patch set uploaded (by Jkieserman; author: Jkieserman):

[mediawiki/extensions/ReportIncident@master] add functionality for step2 of the report incident dialog - introduce form elements to capture user input - introduce pinia form store to save input values

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

Change 938259 abandoned by Jkieserman:

[mediawiki/extensions/ReportIncident@master] Input form for reporting harassment and pinia store

Reason:

bad gerrit state, replaced with new patch: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReportIncident/+/939680

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

Change 939680 merged by jenkins-bot:

[mediawiki/extensions/ReportIncident@master] add functionality for step2 of the report incident dialog - introduce form elements to capture user input - introduce pinia form store to save input values

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

I have discovered some issues, and have also noticed some minor differences between Aishwarya's mocks and whats actually displaying at https://patchdemo.wmflabs.org/wikis/59ac7835db/w/index.php?title=User_talk:Patch_Demo&action=edit&redlink=1&mobileaction=toggle_view_mobile

NOTE: No QA verification was executed for pre-population of the required fields, nor QA verification for error handling for required fields since those specific pieces of code logic have not been implemented at this particular date / time. The only QA that could be done for this ticket is to verify the elements layout is displaying per Aishwarya's design mocks for Desktop view and Mobile view.

Issue 1:
Using Mobile View on a desktop pc or using Mobile View on a mobile tablet seems to always display the dialog layouts as if you selected Desktop View even though you have it set for Mobile View (keep in mind I am not experiencing this issue when I use a cellphone and set the cellphone for Mobile View):

image.png (687×925 px, 145 KB)
image.png (896×1 px, 106 KB)
image.png (606×902 px, 186 KB)
image.png (908×701 px, 173 KB)


Issue 2:
Font Size for the headers What type of harassment , Who is violating behavioral guidelines, Link to evidence of incident, Additional details, Your email are smaller than the text for the types of harassment:

image.png (877×1 px, 216 KB)
image.png (694×406 px, 99 KB)
image.png (138×168 px, 14 KB)


Issue 3:
The word agression is misspelled and should be spelled as aggression.

image.png (45×322 px, 8 KB)


Issue 4:
At the section for Your email it contains the word followup:

image.png (74×294 px, 6 KB)

this is not a valid spelling for those two words, I do realize this is also spelled as followup on Aishwarya's mocks but I think that is not the correct spelling and it should be spelled as follow-up or follow up and those two words should also be followed by a period at the end of the word follow-up or follow up.


Issue 5:
Using Mobile View:
The footer buttons for Back and Submit have several issues:

  • Submit button should be on top of Back button.
  • Both buttons are not aligned correctly on the page, they should be center-aligned and not right-aligned.

image.png (188×449 px, 36 KB)

Below is a screenshot of Aishwarya's Mobile View mock and it shows how the buttons should appear:
image.png (125×335 px, 5 KB)


Issue 6:
When I insert text into all of the fields for Something else / Who is violating behavioral guidelines / Links to evidence of harassment / Additional details / Your email , and then click Back button and then click Proceed to file a report button, I am noticing the text that I inserted is being retained/saved/showing for all of the fields except Something else field and Additional details field...
The user inserted text is not being retained / saved in the Something else field nor in the Additional details field.


Mock Difference 1:
At the Additional details section, I am noticing the verbiage Word limit: 50 is missing:

image.png (123×329 px, 7 KB)

But on Aishwarya's mocks its showing the verbiage Word Limit: 50
image.png (129×309 px, 7 KB)


Mock Difference 2:
At the Additional details section, I am noticing inside the textbox is empty/blank:

image.png (102×314 px, 6 KB)

But on Aishwarya's mocks inside the textbox its showing the verbiage **Add context that could be helpful for a reviewer:

image.png (92×292 px, 5 KB)


Mock Difference 3:
On one of Aishwarya's mocks it shows a header Report harassment and also showing the header Who is violating behavioral guidelines and a header Links to evidence of harassment

image.png (579×591 px, 68 KB)

But on a different mock and also during my testing in Patch Demo its showing the header Report an incident and also shows a header Username you would like to report and a header Links to evidence of incident:
image.png (522×409 px, 86 KB)

I know we have several variations of these headers on Aishwarya's mocks, so I was using the mocks thats listed in our team's Google Share Drive to compare to what's displaying during my testing in Patch Demo, but there seems to be some mix-matching between the various mocks...

So to eliminate confusion which mocks should we be using going forward as the primary mocks to use (The mocks in our team's Google Share Drive OR the mocks in Figma thats dated as Spec 06/14/23)?


Mock Difference 4:
On one of Aishwarya's mocks it shows a type of harassment as Threats or violence:

image.png (40×196 px, 1 KB)

But on a different mock and also during my testing in Patch Demo its showing the type of harassment as Threats of violence:
image.png (34×182 px, 3 KB)

I know we have several variations of this specific harassment type on Aishwarya's mocks so which of the 2 different variations will we be using going forward for this page/screen?


Change 949084 had a related patch set uploaded (by Eigyan; author: Eigyan):

[mediawiki/extensions/ReportIncident@master] Fix issues identified in QA for Incident Reporting System

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

Test wiki created on Patch demo by EIgyan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/aa5055d961/w

Test wiki created on Patch demo by EIgyan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/81d80bc335/w

I know we have several variations of this specific harassment type on Aishwarya's mocks so which of the 2 different variations will we be using going forward for this page/screen?

@aishwaryavardhana this looks like a question for you.

Could you please also look over the issues that @Djackson-ctr noted in T338992#9068089 to see if you're in agreement with all proposed changes listed there?

Change 951467 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/ReportIncident@master] form: Use Pinia store for details fields

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

Change 951467 merged by jenkins-bot:

[mediawiki/extensions/ReportIncident@master] form: Use Pinia store for details fields

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

Great QAing Derrick. Love how detailed you're being.

Hi all, please only use the mocks in our team's Google Shared Drive. also I don't think @Djackson-ctr is making suggestions but just pointing out differences between the spec and the implementation? am I missing something @kostajh ?

Some clarifications from me:

Issue 4:

  • The mock up in Google drive says "Providing an email address will allow the response team to follow up."

Issue 6:

  • This might be moot given T338817 but word limit is 200, not 50. Again please make sure you're only looking at the mockups in the Google drive although I have also kept Figma up to date.

Mock difference 3:

  • It should be "Report an incident", "Username you would like to report", and "Links to evidence of incident"

Mock difference 4:

  • It's "Threats of violence"

Great QAing Derrick. Love how detailed you're being.

Hi all, please only use the mocks in our team's Google Shared Drive.

I didn't realize we were working from mockups in a Google Drive, I thought we were using the Figma files? I looked around and found https://drive.google.com/drive/u/0/folders/1fMRS48b7QMDWb-iUTb4fQeUAq5ajrfnY, are those the correct files @aishwaryavardhana @Madalina?

also I don't think @Djackson-ctr is making suggestions but just pointing out differences between the spec and the implementation? am I missing something @kostajh ?

Sorry for being unclear, @aishwaryavardhana -- by "proposed changes" I meant, changes to the existing code, and it looked to me like @Djackson-ctr was seeking clarification in the comments/questions in T338992#9068089.


Meta comment: this task is about using Pinia to create a store for form fields, which is done, so I will move design/QA feedback not related to that into a separate task.

Meta comment: this task is about using Pinia to create a store for form fields, which is done, so I will move design/QA feedback not related to that into a separate task.

I've done that in T344906: Fix discrepancies between existing code and design specifications. I think we can resolve this task (focused on Pinia implementation).

Change 949084 had a related patch set uploaded (by Eigyan; author: Eigyan):

[mediawiki/extensions/ReportIncident@master] Fix issues identified in QA for Incident Reporting System

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

hey @kostajh yup that's the correct drive! I actually wasn't sure when and in what capacity you're back and working so my bad for not communicating that to you sooner :)

all changes to the designs happen in Figma so technically it's the single source of truth but because Google drive is more familiar to folks on our team, I'm making sure to upload all designs there and it's my job to make sure Figma to Drive is 1:1.

Change 949084 merged by jenkins-bot:

[mediawiki/extensions/ReportIncident@master] Fix issues identified in QA for Incident Reporting System

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

Test wiki created on Patch demo by EIgyan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3155ddd680/w

Test wiki on Patch demo by EIgyan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/3155ddd680/w/

I have verified the information listed in the ticket Description has been implemented at the following url: https://patchdemo.wmflabs.org/wikis/6010bff443/wiki/User:Bob


Below are the results regarding each issue or Mock difference that was originally found during the initial QA testing:
Issue 1: is considered a non-issue and therefore will be left as is...
Issues 2 - 6: have been fixed and verified as resolved...
Mock Difference 1: will be left as is for now because in the very near future there will be new functionality regarding Word Limit...
Mock Differences 2 - 4: have been fixed and verified as resolved.

image.png (907×1 px, 111 KB)
image.png (832×456 px, 187 KB)
image.png (869×696 px, 150 KB)


As a side note:
Since there were some new minor changes that needed to be added to the Design in order to resolve some of the Mock Differences I did notice a very minor spacing issue when using a cellphone (in Portrait orientation mode ONLY), there seems to be extra spacing for the statement Providing an email address will allow the response team to follow up.
The 1st screenshot is from Aishwarya's mock for Mobile, then the 2nd screenshot is from my testing on Patch Demo, and the 3rd screenshot is also from my testing on Patch Demo using a cellphone in Portrait orientation mode:

image.png (167×348 px, 17 KB)
image.png (169×431 px, 35 KB)
image.png (813×425 px, 180 KB)

I have discussed this with the developer and since this issue is a very minor cosmetic issue and is not something that effects the functionality or behavior of the page then its fine to still push this to Product Sign Off…
For transparency purposes @aishwaryavardhana or @kostajh you are welcome to look at this just in case you have a different approach that you want us to take.