MR-3573: Download all contracts button does not generate zip file on first click #1859

JasonLin0991 · 2023-08-07T15:37:29Z

Summary

This bug occurs when the Download all document button link is an empty string. There were two ways to reproduce this bug.

Clicking on Download all before generating the bulk download URL was finished, and the link
Generating bulk download URL encountered an error.
Both ways caused this bug because the code defaults the URL to an empty string. This empty link will then open a new tab with the submission summary page.

The fix was to add error handling and loading UI around generating the bulk URL.

When first loading the submission summary, Contract details and Rate details section will first show a Loading button. Once the bulk download URL has been generated, it will show the Download all button.
If there is an error in getBulkDlURL, then an inline warning will appear in place of the Download all button, and a warning banner will appear at the top of the page.
- There will only be one document warning banner if both Contract and Rate bulk download encountered an error.
Fixed a few other issues:
- Flickering on ActionButton component when displaying loading first.
- ActionButton loading state size is larger then default size.
- Preventing fetchZipUrl from executing on DRAFT and previous submission view.

Related issues

Screenshots

Test cases covered

DownloadButton.test.tsx
- 'renders loading button'
ContractDetailsSummarySection.test.tsx, RateDetailsSummarySection.test.tsx
- 'renders inline error when bulk URL is unavailable'
SubmissionSummary.test.tsx
- 'renders document download warning banner'

QA guidance

You can test these error UI on the submissions created by Cypress. The submission with Q&A will have an invalid s3 url for a contract document which leads to errors when running getBulkDlURL.
Please test to make sure there is no regression in the fix for spam clicking the Continue or Save as Draft buttons.

…uments if viewing draft or previous submission.

macrael · 2023-08-15T22:20:45Z

Is it intentional that this submission on the review app generates an error? Error banner works: https://ddt0awkezsb2o.cloudfront.net/submissions/7055c843-32c2-48b0-b806-103488e3c291

macrael

solid

macrael · 2023-08-15T22:27:44Z

services/app-web/src/components/DownloadButton/DownloadButton.tsx

 }

 export const DownloadButton = ({
    text,
    zippedFilesURL,
 }: DownloadButtonProps): React.ReactElement => {
+    const handleClick = () => {
+        if (zippedFilesURL) {
+            window.open(zippedFilesURL)


why are we opening the link with JS? Shouldn't it be a simple Link in the end? Id worry about screen readers here going outside the normal semantics

Oh! Good call.

@macrael I updated this to use the Link component again. From this blog, disabling the link might not be the way to go, so I'm rendering just a div with the loading spinner until the link is ready. Could use you're eyes on this again.

macrael · 2023-08-15T22:30:00Z

...nts/SubmissionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.tsx

 }: ContractDetailsSummarySectionProps): React.ReactElement => {
    // Checks if submission is a previous submission
    const isPreviousSubmission = usePreviousSubmission()
    // Get the zip file for the contract
    const { getKey, getBulkDlURL } = useS3()
-    const [zippedFilesURL, setZippedFilesURL] = useState<string>('')
+    const [zippedFilesURL, setZippedFilesURL] = useState<
+        string | undefined | Error


macrael · 2023-08-15T22:34:14Z

...nts/SubmissionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.tsx

@@ -83,8 +93,14 @@ export const ContractDetailsSummarySection = ({
                'HEALTH_PLAN_DOCS'
            )
            if (zippedURL instanceof Error) {
-                console.info('ERROR: TODO: DISPLAY AN ERROR MESSAGE')


macrael · 2023-08-15T22:38:48Z

...nts/SubmissionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.tsx

    ])
+
+    const renderDownloadButton = () => {


pull this out into its own function, please. Anonymous functions that render JSX are how we got a lot of our Cypress flakes b/c the component is unmounted and remounted on every render.

macrael · 2023-08-15T22:41:19Z

.../components/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx

@@ -174,7 +179,10 @@ export const RateDetailsSummarySection = ({
        }
    }

-    useEffect(() => {
+    useDeepCompareEffect(() => {


was this switch for the flickering? Makes sense that this would be useful but referential equality seems to usually be good enough for us

This was switched because of infinite re-rendering. I think it is because of isPreviousSubmission dependency, which is a hook and the referential equality was not enough.

macrael · 2023-08-15T22:41:43Z

.../components/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx

    ])
+    const renderDownloadButton = () => {


macrael · 2023-08-15T22:42:06Z

...issionSummarySection/SupportingDocumentsSummarySection/SupportingDocumentsSummarySection.tsx


    const documentsSummary = `${refreshedDocs.length} ${
        refreshedDocs.length === 1 ? 'file' : 'files'
    }`
    // when there are no uncategorized supporting documents, remove this section entirely
    if (refreshedDocs.length === 0) return null

+    const renderDownloadButton = () => {


JasonLin0991 · 2023-08-15T23:48:04Z

Is it intentional that this submission on the review app generates an error? Error banner works: https://ddt0awkezsb2o.cloudfront.net/submissions/7055c843-32c2-48b0-b806-103488e3c291

For the Q&A tests, we use direct API requests to make quick submissions, which does not upload files, just inserts a string in for the URL.

macrael

That makes sense to me semantically!

Log out the bulk url errors.

cb9fbe7

github-actions bot deployed to review-apps August 7, 2023 15:41 View deployment

JasonLin0991 added 7 commits August 8, 2023 11:29

Inline warning component for documents.

c76934b

Display inline document warning.

873d82d

Fix action button flickering and size change when loading.

220e2ad

Update download button to use ActionButton component with loading state.

b63f2d8

Remove unused download button scss.

64dfa90

Document warning banner.

b542daa

Show warning messages on bulk download URL error and skip zipping doc…

d25b3dd

…uments if viewing draft or previous submission.

github-actions bot deployed to review-apps August 15, 2023 18:24 View deployment

Remove duplicate test

394d528

JasonLin0991 marked this pull request as ready for review August 15, 2023 19:20

github-actions bot deployed to review-apps August 15, 2023 19:24 View deployment

github-actions bot deployed to review-apps August 15, 2023 20:09 View deployment

JasonLin0991 requested review from haworku and macrael August 15, 2023 20:35

macrael approved these changes Aug 15, 2023

View reviewed changes

JasonLin0991 added 2 commits August 16, 2023 13:06

Move renderDownloadButton.

71e22db

Change download button back to link. Update tests.

661665a

github-actions bot deployed to review-apps August 16, 2023 17:12 View deployment

JasonLin0991 requested a review from macrael August 16, 2023 17:20

macrael approved these changes Aug 16, 2023

View reviewed changes

JasonLin0991 merged commit 4e85504 into main Aug 16, 2023
27 checks passed

JasonLin0991 deleted the jl-3573-Download-all-contracts-button-does-not-generate-zip-file-on-first-click branch August 16, 2023 18:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MR-3573: Download all contracts button does not generate zip file on first click #1859

MR-3573: Download all contracts button does not generate zip file on first click #1859

JasonLin0991 commented Aug 7, 2023 •

edited

Loading

macrael commented Aug 15, 2023

macrael left a comment

macrael Aug 15, 2023

JasonLin0991 Aug 16, 2023

JasonLin0991 Aug 16, 2023

macrael Aug 15, 2023

macrael Aug 15, 2023

macrael Aug 15, 2023

macrael Aug 15, 2023

JasonLin0991 Aug 15, 2023 •

edited

Loading

macrael Aug 15, 2023

macrael Aug 15, 2023

JasonLin0991 commented Aug 15, 2023

macrael left a comment

MR-3573: Download all contracts button does not generate zip file on first click #1859

MR-3573: Download all contracts button does not generate zip file on first click #1859

Conversation

JasonLin0991 commented Aug 7, 2023 • edited Loading

Summary

Related issues

Screenshots

Test cases covered

QA guidance

macrael commented Aug 15, 2023

macrael left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JasonLin0991 Aug 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JasonLin0991 commented Aug 15, 2023

macrael left a comment

Choose a reason for hiding this comment

JasonLin0991 commented Aug 7, 2023 •

edited

Loading

JasonLin0991 Aug 15, 2023 •

edited

Loading