Agency Report Submission - Download button implementation

[as1729]

Why is this issue important?

See User Story here https://github.com/usdigitalresponse/cpf-reporter/issues/73

This is an issue in the sequence of tickets to ensure the CPF reporter can accept a user-submitted upload file and receive feedback on any errors that are present in the submitted file data.

Blocked By

• [x] #159

Current State

The following button on the upload-details page is not actually performing any action:

• Download

Expected State

The following button on the upload-details page are able to make requests to the GraphQL server and handling the response appropriately:

• Download
  • Must receive a SignedURL from S3 for the object and open a new-tab on the client that gets the URL

Acceptance Criteria

1. The Download must be performing the intended function as described above
2. The functions must have unit tests

Implementation Plan

Download Button: API Changes

See the following throwaway PR: https://github.com/usdigitalresponse/cpf-reporter/compare/as/throwaway-download-code?expand=1

1. Add mutation called downloadUploadFile

   src/graphql/uploads.sdl.ts
   
   type Mutation {
   createUpload...
   ...
   downloadUploadFile(id: Int!): String! @requireAuth
   }

2. Add the function to src/services/uploads/uploads.ts. And add corresponding tests in uploads.test.ts

   export const downloadUploadFile: MutationResolvers['downloadUploadFile'] =
   async ({ id }) => {
   const upload = await db.upload.findUnique({
     where: { id },
   })
   const signedUrl = await getSignedUrl(upload)
   
   return signedUrl
   }

3. Make changes to aws.ts to anticipate the upload as the argument for getSignedUrl.

Download Button: Front-end Changes

Example code here: https://github.com/usdigitalresponse/cpf-reporter/compare/as/throwaway-download-code?expand=1#diff-f52c147a71be1b28df2d58bf7eab4091c7f3e08afd94ca098cfccf539ef4e5f1R1 Changes are needed in this file: web/src/components/Upload/Upload/Upload.tsx

1. Call the mutation from the front-end by filling-out this empty function:

   const handleFileDownload = () => {}

2. Define the mutation

   const DOWNLOAD_UPLOAD_FILE = gql`
   mutation downloadUploadFile($id: Int!) {
   downloadUploadFile(id: $id) {
     id
   }
   }

3. Call the mutation from the empty function

   const [downloadUploadFile] = useMutation(DOWNLOAD_UPLOAD_FILE, {
   onCompleted: (resultUrl) => {
     console.log('Opening download file link in new tab..')
     window.open(resultUrl, '_blank').focus()
   },
   onError: (error) => {
     console.error('Error downloading upload file', error)
   },
   })
   const handleFileDownload = () => {
   downloadUploadFile({ variables: { id: upload.id } })
   }

Relevant Code Snippets

No response

[ClaireValdivia]

Aditya created #189 to address error occurring when you click on download button