Implement Feedback Box Functionality

MitchellTCG commented 8 months ago

Business Reason

As a Alpha Tester of FECFile, I would like a way to provide Feedback on the application so that I can report any defects, bugs, or peculiarities found while testing

Acceptance Criteria

Given the user is on any page in the FECFile Online application following a successful login,

When they click on the 'Feedback' button

Then a popup will be displayed where they can enter:

WHAT WERE YOU TRYING TO DO ON FECFILE ONLINE, AND HOW CAN WE IMPROVE IT? (Required)
GENERAL WEBSITE FEEDBACK
TELL US ABOUT YOURSELF

And when they enter data and click 'Post'

the feedback entered will be captured in GitHub
they will have the option to "Submit more feedback" which takes them to a cleared form, or close

OR when they click on the collapse icon, the feedback box will close (any data entered will be lost).

And if any errors are returned from GitHub

Then the screen will display 'Try Again' button so the user can return to the form to try again.

Dev Notes

[ ] Create a Feedback button the overlays the app (99 z-index)
[ ] Display a modal that will capture the feedback in a private GitHub repository 0
[X] Create Github repository https://github.com/fecgov/fecfile-feedback
[ ] in Github issue, include Details section to include URL and browser, as shown in Laura's ticket: https://github.com/fecgov/fecfile-web-app/issues/1745
[ ] Allow for 2000 characters in each section, characters entered will be the same that are defined in the e-filing specifications

the api will need to create tickets as a user that is added to the private repo

Source code

Feedback box is on every fec.gov page, in the lower right hand corner: https://www.fec.gov/

JavaScript: https://github.com/fecgov/fec-cms/blob/ea897966b75f65cdeb2cd3575411745aac3fc3cc/fec/fec/static/js/modules/feedback.js#L22

CSS (including for animation): https://github.com/fecgov/fec-cms/blob/ea897966b75f65cdeb2cd3575411745aac3fc3cc/fec/fec/static/scss/components/_feedback.scss

Python: https://github.com/fecgov/fec-cms/blob/ea897966b75f65cdeb2cd3575411745aac3fc3cc/fec/data/views.py#L991-L1045

Wireframes

Button
Overlay
Success
Error

Video https://github.com/fecgov/fecfile-web-app/assets/110493670/0068370a-a218-4a46-ab65-063fdd69a801

/

QA Notes

[ ] BA/Design Quality Checklist complete
Feedback box only shows after login. It will NOT appear on the FECFile landing page, but will appear on security consent, committee selection, etc.

DEV Notes

null

Design

null

FECFILE-473

MitchellTCG commented 8 months ago

@mjtravers please make sure that this ticket has the info for connecting Github to the modal:https://github.com/fecgov/fecfile-web-app/issues/1745

AureliaKhorsand commented 8 months ago

@MitchellTCG does collapsing the modal/pop up delete ay data they have entered? Or are we expected to preserve it as they navigate the site?

MitchellTCG commented 8 months ago

Since I am expecting the text to be cleared when the user clicks post, then also clear the data when the modal is minimized.

AureliaKhorsand commented 8 months ago

@MitchellTCG some more questions: What are the character limits for the boxes? Assuming all characters that we allow in the system are also allowed here? I'm guessing passing the CAPTCHA will be required for clicking "post"? Are there links you can provide for the two hyperlinks above the captcha?

MitchellTCG commented 8 months ago

Let's say 2000 Characters
All the same characters
Jonella says it is a Passive reCAPTCHA
"Use of reCAPTCHA": https://www.fec.gov/use-recaptcha/
"Contact the FEC about a specific question": https://www.fec.gov/contact/

JonellaCulmer commented 8 months ago

@MitchellTCG

Options for reCaptcha: https://developers.google.com/recaptcha/docs/v3 (Passive) https://developers.google.com/recaptcha/docs/display (Checkbox)

MitchellTCG commented 8 months ago

@AureliaKhorsand please review

AureliaKhorsand commented 8 months ago

@MitchellTCG please remove anything to do with reCAPTCHA from the wireframes for this ticket. Also, what kind of error messages do you expect to receive, or is that something we should confer with dev on? If there is an error, does "Try Again" immediately submit, or bring them back to the feedback form they were editing?

MitchellTCG commented 8 months ago

@AureliaKhorsand

regarding reCAPTCHA, I updated the wireframe not to have it
The error may be that GitHub does not respond or throws an error. Also, when the user clicks try again, they will be returned to the previously populated form.

MitchellTCG commented 8 months ago

I marked this as HIGH PRIORITY and moved it into Sprint 40 since it was originally slated for a Sprint 40 release.

AureliaKhorsand commented 7 months ago

@MitchellTCG given that it is in progress and in sprint 40, is there a reason it's marked as high priority over the other tickets for test release 1 in sprint 40?

AureliaKhorsand commented 7 months ago

@dheitzer updated ACs to clarify that this does not include the landing page pre-login. Let me know if it needs anything else!

dheitzer commented 7 months ago

@MitchellTCG @mary-tcg do you have a .svg for the custom close icon?

dheitzer commented 7 months ago

@AureliaKhorsand @MitchellTCG the ACs for these two headings don't seem to match the wireframe (specifically the parens text). Can you clarify which one to follow?

GENERAL WEBSITE FEEDBACK (Optional)
TELL US ABOUT YOURSELF (Optional)

Also, should the teal buttons have black text like like in the wireframe? our info buttons of this color have white text in other places.

GreggMoreland commented 7 months ago

@dheitzer "Optional" was mentioned not as a display label, but as a note for testing to see that field as Optional. I've removed it here, but if it comes up again in QA, I will add it back.

WiseQA commented 7 months ago

@MitchellTCG @AureliaKhorsand I thought we added the verbiage "(Optional)" to the field names that were applicable and optional ? Just clarifying which is correct ? @dheitzer I see your original question to Mitchell and Aurelia regarding the teal buttons and text color. Thanks !

MitchellTCG commented 7 months ago

@MitchellTCG @AureliaKhorsand I thought we added the verbiage "(Optional)" to the field names that were applicable and optional ? Just clarifying which is correct ? @dheitzer I see your original question to Mitchell and Aurelia regarding the teal buttons and text color. Thanks !

fair comment on the optional/required

I'll touch base with Jonella and discuss

MitchellTCG commented 7 months ago

Talked to Jonella. Please leave it as is. (Leave Required).

WiseQA commented 7 months ago

@mjtravers @dheitzer @MitchellTCG why was this moved back from CR to In-Progress ? Just like to know what fixes being made for testing ? Thanks

MitchellTCG commented 7 months ago

@WiseQA I was moved back to in progress because parts of the design didn't match the wires. I updated one wire, but no changes were made that should affect testing.

dheitzer commented 7 months ago

changes have been made to use p-overlaypanel instead of p-dialog for the needed effect. This is back in code review now.

mjtravers commented 7 months ago

Passes CR. Sending to QA.

MitchellTCG commented 6 months ago

@dheitzer @WiseQA PLEASE MAKE THE FOLLOWING FIXES:

Remove the Circle hover-over state on the Down arrow in the upper right-hand corner of the Feedback box. Either make the arrow white on hover or have no visual change (but keep the pointer finger cue).
The border radius is currently 4px all the way around. Please change to: border-radius: 4px 4px 0px 0px;

WiseQA commented 6 months ago

@MitchellTCG @dheitzer please clarify what border radius needs changed on the screen please - thanks

dheitzer commented 6 months ago

met with @MitchellTCG and he clarified it's just the feedback button. Thanks David !

mjtravers commented 6 months ago

Changes made to the buttons of feedback. Passes CR. Sending to QA.

WiseQA commented 6 months ago

QA review verified the Feedback Box functionality.

Verified "Feedback" button is not located on the landing page.

Verified "Feedback" button is located on every page starting with the "Security notification" page.

Select "Feedback" button the "Post feedback about FECFile anonymously" popup window is displayed.

Verified "What are you trying to do . . . " text box is a required field.

Entered text in required field then select the "Post" Button.

Verified "Thanks for helping us improve FECFile" popup window is displayed.

Verified the Circle hover-over state on the Down arrow in the upper right-hand corner of the Feedback box was removed. Either make the arrow white on hover or have no visual change (but keep the pointer finger cue).

Select the down arrow to close the feedback popup window.

Verified "Ooops ..." popup window is displayed (Note to test turn off wifi and non accessibility will populate this error.

![Image](https://github.com/fecgov/fecfile-web-app/assets/96139912/424e6fcf-53c3-451b-acf0-956eab

WiseQA commented 6 months ago

QA verified the links at the bottom of the FEEDBACK popup screen were correct and working.

WiseQA commented 6 months ago

QA Review Completed. Moved to Stage Ready.

fecgov / fecfile-web-app