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

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):

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:

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

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

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.

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:

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

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

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

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:

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

In T338992#9068089, @Djackson-ctr wrote:

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"

In T338992#9115042, @aishwaryavardhana wrote:

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/

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

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.

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:

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

https://patchdemo.wmflabs.org/wikis/aa5055d961/w/

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

https://patchdemo.wmflabs.org/wikis/81d80bc335/w/

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

https://patchdemo.wmflabs.org/wikis/6010bff443/w/