[sbl-filing: just_metadata_branch branch] enhancement(Upload): Upload Adjustments

[shindigira]

closes #410

Note

• Using the all-current-prs new_all_branch just_metadata_branch branch of sbl-filing

Screenshot (04/24/2024)

Success	File Size Check
File Format Error	Unsupported Media
Upload - No Connection

New Test csv's

Syntactical Errors
Logical Warnings/Errors
not-enough-columns-parsing.csv

How to Test

1. Make sure SBL_REGTECH_FILING_URL is set properly in your .env
2. yarn install to get luxon
3. yarn up -i design-system-react to get the latest design-system-react dependency
4. Run yarn update, reset all Docker volumes and containers, yarn seed and set the user to have a LEI in Keycloak
5. Navigate to http://localhost:8899/filing and click on 'Upload' to navigate to the lei's specific Upload page
6. Upload a .csv file -- can use test .csv files from https://github.com/cfpb/regtech-data-validator/tree/main/tests/data
7. Notice Upload/Validation icons and content changes; inspect the Network tab to verify API request results
8. Verify the implemented control flow listed below:

[WIP] Control Flow Testing

• if the lei and/or filing period do not exist; or are not associated with the user, the user should be redirected to /filing
• If a filing has not been posted, the entire "Select a file to upload" Section should not appear
• If a previous upload was completed previously, the upload section's content and button label should change
• Validation should occur after an upload
• Save and continue button should be enabled after the Upload/Validation succeeds
• Upload not-enough-columns-parsing.csv and see the SUBMISSION_UPLOAD_MALFORMED error.
• Kill the sbl-filing docker container, and then try to upload -- should see the UPLOAD_FAILS error.

Changes

• enhancement(Upload): Allow being able to upload the same named file twice in a row
• enhancement(Upload - Longpolling): Retries the get latest submission request upon either VALIDATION_IN_PROGRESS or SUBMISSION_UPLOAD
• enhancement(Upload - Status): Created general catch all validation error content for the VALIDATION_ERROR state
• enhancement(Upload - File Details): Warnings and Errors use special messages and the yellow icon based on validation results
• refactor(SubmissionResponse): Updated the type based on incoming backend schema changes
• refactor(InlineStatus): Removed ternary hell
• feat(Upload - Error Handling): Checks if a user tries to upload a file over a size limit (e.g. 2GB)
• enhancement(Upload - Status): Implemented UPLOAD_FAILED

Next PR

• Overall Accessibility
• Alert handling (On initial page load too?) for aria-live regions -- try polite
• aria live region -- initial load don't use polite on uploadedBefore true

[meissadia]

Could this be simplified?

Suggested change

	return (response.data?.state && response.data.state) === FileSubmissionState.VALIDATION_IN_PROGRESS || (response.data?.state && response.data.state) === FileSubmissionState.SUBMISSION_UPLOADED;
	return [FileSubmissionState.VALIDATION_IN_PROGRESS, FileSubmissionState.SUBMISSION_UPLOADED].includes(response.data?.state);

[shindigira]

Thanks Meissa, I'll include this handling elsewhere too!

[meissadia]

Functionality looks good to me. Tested the prescribed scenarios and the UI felt aligned with the expected scenario outcomes.

[billhimmelsbach]

Code looks good, and the new use cases are working. Great work! 🥳

@shindigira did you want this to be your "design review" PR? I think I'd prefer if we move this one forward and have a separate design review with PR @natalia-fitzgerald?

When we were working on the DSR validations and Shared Lending Platform, I think generally we decided on an iterative approach towards a final design review, otherwise branches will get stale / out of sync with other work.

There's still some TODOs as well, so I wouldn't want to do a design review before then.

Other than this process question, I'd be ready to approve as a demonstrable step in the right direction! 🎉

[shindigira]

Code looks good, and the new use cases are working. Great work! 🥳

@shindigira did you want this to be your "design review" PR? I think I'd prefer if we move this one forward and have a separate design review with PR @natalia-fitzgerald?

When we were working on the DSR validations and Shared Lending Platform, I think generally we decided on an iterative approach towards a final design review, otherwise branches will get stale / out of sync with other work.

There's still some TODOs as well, so I wouldn't want to do a design review before then.

Other than this process question, I'd be ready to approve as a demonstrable step in the right direction! 🎉

@billhimmelsbach Yes, let's merge this into main for the sake of brevity. I've updated based on all of the data.state cases from the backend and have catch-all 4xx/5xx for both Uploading and Validation results.

Additionally, I've matched everything with the Figma as much as I can. If certain design or content items need to be updated, it would not take a significant amount of effort to make the necessary changes.

[billhimmelsbach]

@billhimmelsbach Yes, let's merge this into main for the sake of brevity. I've updated based on all of the data.state cases from the backend and have catch-all 4xx/5xx for both Uploading and Validation results.

Additionally, I've matched everything with the Figma as much as I can. If certain design or content items need to be updated, it would not take a significant amount of effort to make the necessary changes.

Let's have our chat about merging your work and Meissa's in our meeting in a bit, then let's go ahead and put up a design PR after this one is merged if you think it's ready for design review by Natalia.

[billhimmelsbach]

Looks good! Tried out a bunch of .csvs with the just_metadata_branch and everything looks good enough for now. Wait for @meissadia's review, then merge in. We're agreeing to two more PRs: accessibility improvements and a Natalia review next week.