Add mass upload section in Admin Portal

[christina-luong]

User Story

As a user of either NO or Hawaii I want to be able to mass upload information about officers or inmates (respectively) So that the database is kept up to date

Business Context:

Occasionally, we are provided by either organization a spreadsheet containing the updated roster of officers or inmates. The uploads have been a manual process (see #592) with some research previously done on mass uploading (see #529). This story will build the functionality needed to accept this information to the system from the client side.

In Scope

1. Create a mass upload section/button in the Admin Portal.
2. Display a blank example template with the correct layout for client reference. (see Mockups)
3. Facilitate an upload of a csv file using a Dropzone component
4. Once inputted (in the server handler), validate that the csv has the correct headers.

   Out of Scope

5. Processing the csv past the headers; see #629

Open Questions

Mockups

Draft Template https://docs.google.com/spreadsheets/d/1UD4cuP2LJ160PHak3wpRTLuBgSPg7RI_QTMpcNOUud4/edit?usp=sharing Visual Mockup https://www.figma.com/design/3XcaCKS0xC3U0mo98B8eTV/Features-Complaint-Manager?node-id=971-3861&t=AcLrpZUzwJNA43NU-0

Acceptance Criteria

1. Scenario: Given that I am in the Admin Portal When I look at the page Then I see a Mass Upload section where I can input my csv file

2. Scenario: Given that I have entered a csv with incorrect or missing headers When I click Upload Then an error is generated stating that I need to fix errors and resubmit

Notes

Checklist

Kickoff

• [x] We have we indicated which organizations and user permissions require this
• [x] We have indicated whether we have any dependencies to other cards/work
• [x] We have indicated which environment this can be tested in
• [x] We have included a mockup if this is design related
• [x] We have included clear ACs to test it
• [x] We have estimated the story

Deskcheck

• [ ] This work has been demoed in CI (or higher) and led by the dev pair who worked on this card
• [ ] We have run through and passed all the ACs
• [ ] Our documentation has been updated
• [ ] Our onboarding checklist has been updated

[paul-thompson1]

• [ ] Find admin portal page in codebase
• [ ] Create shared component for mass upload section
• [ ] Create react dropzone component to accept a csv file
• [ ] Create handler to read first row and validate (could use something like every() method)
• [ ] Add CSV template to prod
• [ ] Add wiki entry (this page)

References: example upload admin portal? dropzone component example dropzone container example file upload example

[andrew-rist-tw]

Once this is implemented, we need to add a wiki page under this page that instructs clients how to upload a roster.

[paul-thompson1]

Made basic structure of Mass Upload section.

[paul-thompson1]

Made basic header validation during upload for one organization. Was able to display error during header validation on the frontend. Still need to detect organization and then validate the expected headers for that organization against the headers from the uploaded file.

[rd-huerta]

To do:

get the roster template from s3 and display a link to it from the massUpload component

• [x] create a new endpoint
• [x] look at src/server/handlers/cases/referralLetters/retrieveSignatureImage.js to see how they are using the s3.getObject()
  • [x] add the handler to src/server/apiRoutes.js
  • [x] On the frontend, use an axios call similar tosrc/client/policeDataManager/admin/thunks/getSigners.js

[paul-thompson1]

Currently working on getting csv file from S3 and linking the file to mass upload section. Need to perform additional tests for header validation in different environments.

[paul-thompson1]

Was able to download csv file locally via link in the mass upload section. Used getSignedUrl method from s3.

Created a handler and an endpoint for get the link to the template.