Issue 858: Upload functionality improvements #916

jorgegonzalez · 2021-05-14T20:35:46Z

Summary of Changes

As a followup to some of the upload feature work, this PR addresses various issues to enhance clarity and reduce distractions in the upload flow, and is particularly impactful for screen reader users.

_Addresses issue #858
closes #858
Acceptance criteria as stated in the issue

How to Test

TODO

Login to the app
Navigate to the "Data Files" Tab
If the user is not an OFA Admin, ensure there is an error suggesting an STT is not selected
- If this is the case, navigate to the "Profile" tab, select an STT, and click "Request Access"
- Navigate back to "Data Files"
- The missing STT error should be gone.
Click "Search" without filling any of the required fields.
Ensure the focus shifts to the new error message.
Fill out all required fields and hit "Search".
The file input section should appear with the correct header.
Make changes to the form.
- Ensure that the file input section doesn not de-render.

Deliverable 1: Accepted Features

Performance Standard(s): At the beginning of each sprint, the Product Owner and development team will collaborate to define a set of user stories to be completed during the sprint. Acceptance criteria for each story will also be defined. The development team will deliver code and functionality to satisfy these user stories.

Acceptable Quality Level: Delivered code meets the acceptance criteria for each user story. Incomplete stories will be assessed and considered for inclusion in the next sprint.

Look up the acceptance criteria in the related issue; paste ACs below in checklist format.
Check against the criteria (as a hotfix, this PR addresses only one criterion):
- File input "results" don't change or disappear unless "Search" is clicked
- When (STT/Fiscal Year/Quarter) form has errors, focus shifts to error summary whenever "Search" is clicked
- Changes to error summary continues to be announced as an alert as individual errors are resolved

As facilitator/product manager, @kniz-raft will decide if ACs are met from Raft's perspective.

Deliverable 2: Tested Code

Performance Standard(s): Code delivered under the order must have substantial test code coverage. Version-controlled HHS GitHub repository of code that comprises products that will remain in the government domain.

Acceptable Quality Level: Minimum of 90% test coverage of all code. All areas of code are meaningfully tested.

Are all areas of code introduced in this PR meaningfully tested?
- If this PR introduces frontend code changes, are they meaningfully tested?
Are code coverage minimums met?
- Frontend coverage: 91% (see https://github.com/raft-tech/TANF-app README coverage dashboard)

Deliverable 3: Properly Styled Code

Performance Standard(s): GSA 18F Front- End Guide

Acceptable Quality Level: 0 linting errors and 0 warnings

Are frontend code style checks passing on CircleCI?

Deliverable 4: Accessible

Performance Standard(s): Web Content Accessibility Guidelines 2.1 AA standards

Acceptable Quality Level: 0 errors reported using an automated scanner and 0 errors reported in manual testing

Did automated and manual testing with @iamjolly and @ttran-hub using Accessibility Insights reveal any errors introduced in this PR?
- See the full Accessibility Assessment plan here.

Deliverable 5: Deployed

Performance Standard(s): Code must successfully build and deploy into the staging environment.

Acceptable Quality Level: Successful build with a single command

NOTE: until we have a proper staging environment this may not be satisfiable prior to merging

Was the code successfully deployed via automated CircleCI process to development on Cloud.gov?

Deliverable 6: Documented

Performance Standard(s): Summary of user stories completed every two weeks. All dependencies are listed and the licenses are documented. Major functionality in the software/source code is documented, including system diagram. Individual methods are documented inline in a format that permits the use of tools such as JSDoc. All non-inherited 800-53 system security controls are documented in the Open Control or OSCAL format and HHS Section 508 Product Assessment Template (PAT) are updated as appropriate.

Acceptable Quality Level: Combination of manual review and automated testing, if available

If this PR introduces frontend code, is that code documented both inline and overall?

Deliverable 7: Secure

Performance Standard(s): Open Web Application Security Project (OWASP) Application Security Verification Standard 3.0

Acceptable Quality Level: Code submitted must be free of medium- and high-level static and dynamic security vulnerabilities

Does the OWASP Scan pass on CircleCI?
Do manual code review and manual testing detect any security issues?
- None detected

…cked

jorgegonzalez · 2021-05-18T13:38:31Z

tdrs-frontend/src/components/Reports/Reports.test.js

@@ -191,7 +191,7 @@ describe('Reports', () => {
    expect(getByText('Section 4 - Stratum Data')).toBeInTheDocument()
  })

-  it('should de-render the UploadReports form after it has been toggled but the year is changed', () => {
+  it('should not de-render the UploadReports form after it has been toggled but the year is changed', () => {


The AC describes the opposite of this test, and is updated below appropriately.

jorgegonzalez · 2021-05-18T13:39:47Z

tdrs-frontend/src/components/Reports/Reports.jsx

+          <div
+            className="margin-top-4 usa-error-message"
+            role="alert"
+            ref={errorsRef}
+            tabIndex="-1"


Ensure the error message is focused on submission, if there are errors.

jorgegonzalez · 2021-05-18T13:41:11Z

tdrs-frontend/src/components/Reports/Reports.jsx

-      }
+    if (form.length === 3) {
+      setIsToggled(true)
+      setSubmittedHeader(reportHeader)


Save a reference to the previous "submitted" header, so that the header that is currently rendered is static, and does not change if the user changes form selections.

jorgegonzalez · 2021-05-18T13:41:40Z

tdrs-frontend/src/components/EditProfile/EditProfile.jsx

@@ -194,7 +190,7 @@ function EditProfile() {
          <STTComboBox
            selectStt={setStt}
            error={Boolean(errors.stt)}
-            selectedStt={profileInfo?.stt?.toLowerCase()}
+            selectedStt={profileInfo?.stt}


Removed the .toLowerCase() call from all of these above for consistency.

jorgegonzalez · 2021-05-18T13:42:48Z

tdrs-frontend/src/components/EditProfile/EditProfile.test.js

    const form = wrapper.find('.usa-form').hostNodes()
    form.simulate('submit', {
      preventDefault: () => {},
    })

-    expect(store.dispatch).toHaveBeenCalledTimes(6)
+    expect(store.dispatch).toHaveBeenCalledTimes(1)


I'd eventually like to update all these (useless) toHaveBeenCalledTimes tests that count dispatch calls.

jtwillis92 · 2021-05-18T20:56:44Z

I noticed that when the search form is changed and submitted after a file has been uploaded it follows to the new upload sections - is that intended?

jorgegonzalez · 2021-05-18T21:05:12Z

I noticed that when the search form is changed and submitted after a file has been uploaded it follows to the new upload sections - is that intended?

Hmmm this sounds like a bug, fixing now

jtwillis92

This looks great, tested locally and ran into no issues with the listed "How to Test" steps!

Here are some screenshots I took at various points throughout the testing flow:

jorgegonzalez · 2021-06-01T21:49:13Z

Note that the An STT is not set for this user message is a temporary warning until we lock the Data Files page behind some role check.

ADPennington · 2021-06-02T17:30:18Z

@jorgegonzalez @jtwillis92 can the latest changes be merged into this branch?

jorgegonzalez · 2021-06-02T20:25:39Z

ADPennington

Deliverable 1: Accepted Features

Performance Standard(s): At the beginning of each sprint, the Product Owner and development team will collaborate to define a set of user stories to be completed during the sprint. Acceptance criteria for each story will also be defined. The development team will deliver code and functionality to satisfy these user stories.

Acceptable Quality Level: Delivered code meets the acceptance criteria for each user story. Incomplete stories will be assessed and considered for inclusion in the next sprint.

Look up the acceptance criteria in the related issue; paste ACs below in checklist format.
- Check against the criteria:
- File input "results" don't change or disappear unless "Search" is clicked
  during 6/2 dev sync, we tested the route where an STT user uploads a file but--before submitting-- makes selection changes. Currently that uploaded file will be lost without warning, so we agreed that it would be helpful if the user was notified of this before changes are applied. Captured this as issue As an OFA admin/STT user, I want to be notified if I change search selections after a file has been uploaded but not yet submitted #992.
- When (STT/Fiscal Year/Quarter) form has errors, focus shifts to error summary whenever "Search" is clicked
- Changes to error summary continues to be announced as an alert as individual errors are resolved

As Product Owner, @lfrohlich will decide if ACs are met.

Deliverable 2: Tested Code

Performance Standard(s): Code delivered under the order must have substantial test code coverage. Version-controlled HHS GitHub repository of code that comprises products that will remain in the government domain.

Acceptable Quality Level: Minimum of 90% test coverage of all code. All areas of code are meaningfully tested.

Are all areas of code introduced in this PR meaningfully tested?
- If this PR introduces frontend code changes, are they meaningfully tested?
Are code coverage minimums met?
- Frontend coverage: ___ (see https://github.com/raft-tech/TANF-app README coverage dashboard)

Deliverable 3: Properly Styled Code

Performance Standard(s): GSA 18F Front- End Guide

Acceptable Quality Level: 0 linting errors and 0 warnings

Are backend code style checks passing on CircleCI?
Are frontend code style checks passing on CircleCI?

Deliverable 4: Accessible

Performance Standard(s): Web Content Accessibility Guidelines 2.1 AA standards

Acceptable Quality Level: 0 errors reported using an automated scanner and 0 errors reported in manual testing

Does this PR complete the epic?
no, but #834 will
Are links included to any other gov-approved PRs associated with epic?
n/a: this one will be linked in PR that addresses [Frontend] Hook upload and download to real API endpoints #834
Does PR include documentation for Raft's a11y review?
See comment cc: @ttran-hub

Deliverable 5: Deployed

Performance Standard(s): Code must successfully build and deploy into the staging environment.

Acceptable Quality Level: Successful build with a single command

Was the code successfully deployed via automated CircleCI process to development on Cloud.gov?

Deliverable 6: Documented

Performance Standard(s): Summary of user stories completed every two weeks. All dependencies are listed and the licenses are documented. Major functionality in the software/source code is documented, including system diagram. Individual methods are documented inline in a format that permits the use of tools such as JSDoc. All non-inherited 800-53 system security controls are documented in the Open Control or OSCAL format and HHS Section 508 Product Assessment Template (PAT) are updated as appropriate.

Acceptable Quality Level: Combination of manual review and automated testing, if available

If this PR introduces frontend code, is that code documented both inline and overall?

Deliverable 7: Secure

Performance Standard(s): Open Web Application Security Project (OWASP) Application Security Verification Standard 3.0

Acceptable Quality Level: Code submitted must be free of medium- and high-level static and dynamic security vulnerabilities

Does the OWASP Scan pass on CircleCI?
Do manual code review and manual testing detect any security issues?
none detected

jorgegonzalez added 5 commits May 14, 2021 15:09

Remove unneeded sttlist call

c1a02c4

Add missing stt error message

f8898cf

Fix STT Combobox selection on the Profile page

48d0d05

Prevent file input section from changing until search is clicked

2671e00

On error state, shift focus to error summary whenever "Search" is cli…

6599c91

…cked

jorgegonzalez added frontend WIP dev labels May 14, 2021

jorgegonzalez self-assigned this May 14, 2021

jorgegonzalez added the a11y Accessibility/Section 508 label May 14, 2021

Merge branch 'raft-tdp-main' into fix/858-part-2

14de955

jorgegonzalez changed the base branch from raft-tdp-main to fix/858 May 14, 2021 20:36

jorgegonzalez added 2 commits May 14, 2021 16:37

Merge branch 'fix/858' into fix/858-part-2

b526fac

Remove log

a5fadd5

Base automatically changed from fix/858 to raft-tdp-main May 17, 2021 21:45

jorgegonzalez added 2 commits May 18, 2021 09:27

Merge branch 'raft-tdp-main' into fix/858-part-2

fbf295b

Fix tests

6d6c94e

jorgegonzalez commented May 18, 2021

View reviewed changes

jorgegonzalez marked this pull request as ready for review May 18, 2021 13:42

jorgegonzalez added raft review This issue is ready for raft review and removed WIP labels May 18, 2021

jorgegonzalez requested a review from jtwillis92 May 18, 2021 13:46

jorgegonzalez added 2 commits May 19, 2021 14:50

Fix issue with stale submitted form state

ecf0822

Fix tests

f9d465f

Merge branch 'raft-tdp-main' into fix/858-part-2

94eaf75

jorgegonzalez requested review from jtwillis92 and removed request for jtwillis92 May 24, 2021 21:55

jorgegonzalez and others added 2 commits May 26, 2021 17:15

Merge branch 'raft-tdp-main' into fix/858-part-2

dbedeff

Merge branch 'raft-tdp-main' into fix/858-part-2

0c43e1d

jtwillis92 approved these changes Jun 1, 2021

View reviewed changes

jtwillis92 added QASP Review and removed raft review This issue is ready for raft review labels Jun 1, 2021

jtwillis92 requested a review from ADPennington June 1, 2021 19:52

Merge branch 'raft-tdp-main' into fix/858-part-2

6a28a70

jorgegonzalez added the Deploy with CircleCI label Jun 2, 2021

Merge branch 'raft-tdp-main' into fix/858-part-2

7458d0e

ADPennington approved these changes Jun 2, 2021

View reviewed changes

ADPennington added Ready to Merge and removed QASP Review labels Jun 2, 2021

jtwillis92 merged commit ddb6feb into raft-tdp-main Jun 2, 2021

jtwillis92 deleted the fix/858-part-2 branch June 2, 2021 20:38

jtwillis92 mentioned this pull request Jun 2, 2021

Multi Issue PR 20210602-1 HHS/TANF-app#305

Merged

jorgegonzalez removed the Deploy with CircleCI label Jun 16, 2021

ADPennington mentioned this pull request Jul 22, 2021

Issue 834: Connect frontend to real API endpoints for download & upload #1061

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 858: Upload functionality improvements #916

Issue 858: Upload functionality improvements #916

jorgegonzalez commented May 14, 2021 •

edited

Loading

jorgegonzalez May 18, 2021

jorgegonzalez May 18, 2021

jorgegonzalez May 18, 2021

jorgegonzalez May 18, 2021

jorgegonzalez May 18, 2021

jtwillis92 commented May 18, 2021

jorgegonzalez commented May 18, 2021

jtwillis92 left a comment

jorgegonzalez commented Jun 1, 2021 •

edited

Loading

ADPennington commented Jun 2, 2021

jorgegonzalez commented Jun 2, 2021

ADPennington left a comment

Issue 858: Upload functionality improvements #916

Issue 858: Upload functionality improvements #916

Conversation

jorgegonzalez commented May 14, 2021 • edited Loading

Summary of Changes

How to Test

Deliverable 1: Accepted Features

Deliverable 2: Tested Code

Deliverable 3: Properly Styled Code

Deliverable 4: Accessible

Deliverable 5: Deployed

Deliverable 6: Documented

Deliverable 7: Secure

jorgegonzalez May 18, 2021

Choose a reason for hiding this comment

jorgegonzalez May 18, 2021

Choose a reason for hiding this comment

jorgegonzalez May 18, 2021

Choose a reason for hiding this comment

jorgegonzalez May 18, 2021

Choose a reason for hiding this comment

jorgegonzalez May 18, 2021

Choose a reason for hiding this comment

jtwillis92 commented May 18, 2021

jorgegonzalez commented May 18, 2021

jtwillis92 left a comment

Choose a reason for hiding this comment

jorgegonzalez commented Jun 1, 2021 • edited Loading

ADPennington commented Jun 2, 2021

jorgegonzalez commented Jun 2, 2021

ADPennington left a comment

Choose a reason for hiding this comment

Deliverable 1: Accepted Features

Deliverable 2: Tested Code

Deliverable 3: Properly Styled Code

Deliverable 4: Accessible

Deliverable 5: Deployed

Deliverable 6: Documented

Deliverable 7: Secure

jorgegonzalez commented May 14, 2021 •

edited

Loading

jorgegonzalez commented Jun 1, 2021 •

edited

Loading