# Update the Bulk Upload Page to Reflect Recent Design Changes

[Old Figma Design](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=1380%3A17444&t=pOncMlYXVGw4uTrF-0)

[New Figma Design](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=1725%3A28040&t=G6iS7KUBKQOZfMQ9-0)

To automate the adoptions for institutions the first step is to provide a list of books to be processed.
This project will be to update the Bulk Upload page according to the new UI/UX design.

This will allow us to validate bulk uploads as well as keep the client informed with statuses and warnings for a clear user journey.

## Proposed Changes

### First steps
First, we need to merge and resolve conflicts between Tim P's branch, fix/tim-functionality-fixes, and Neil's branch, STU-446, because will need to use the hidden file input approach in STU-446 in order match the Figma doc. Merging in STU-446 will also take care of some of the changes to the Figma doc, i.e. removal of "Step 3", removal of "Step" headings, etc.

### Bulk Upload integration testing with Playwright
This test should cover the full user flow from when the user first clicks the "Browse to upload" button and is redirected to the Review page, and then finally clicks the "Confirm upload" button and sees a success notice.

**NOTE:** We don't currently have a success notice design

[How to upload in Playwright](https://timdeschryver.dev/blog/how-to-upload-files-with-playwright)

### Client-side file size validation
Get [file information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files) after a user selects a file and validate that the size is < 10MB. AWS Gateway has a hard limit on 10MB but this will prevent having to make the unneccessary request.

### Add Upload History UI to the "/bulkupload" Page - [Figma](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=1725%3A28069&t=264qZIS7mWAoZ1Av-4)

(There will be changes to the design of the items in the history list in Figma coming soon.)

Upload history will be an virtual scroll list. We will use [Vue Virtual Scroller](https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller) to create the virtual list. At this moment, upload history mock data will be hardcoded in the TRPC response until back end work on the upload history is complete.

Each item in the upload history list will be a link to the Review Page, "/bulkupload/:uploadId". Each item will contain the original filename of the upload, file size, upload date, upload user, number of errors if it was an invalid upload or the number of books, courses, and users created if it was a valid upload.

**Example:**
"template.csv (67MB) on 11/11/22 by David Smith (Not saved)
341 rows, 280 books, 110 courses, 33 users. 41 rows have errors."

**Testing:** The test should hit the TRPC endpoint, receive the list of uploads, then render as `<a></a>` tags

### Bulk upload page error notices - [Figma](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=1725%3A28069&t=264qZIS7mWAoZ1Av-4)

For file size too large errors, or unknown server errors during the upload, we will display an error notice as pictured in Figma.

### Review page table - [Figma](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=1725%3A27807&t=264qZIS7mWAoZ1Av-4)
Just like the booklist page, there will be a paginated table of books from the uploaded CSV. More information in the event of valid/invalid below. Above the table we will show the row, book, course, and user count.

At the moment, we will proceed with hardcoding a mock data response in tRPC until the bulkupload GET endpoint is completed.

### Review Page (file errors) - [Figma](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=1758%3A24526&t=264qZIS7mWAoZ1Av-4)

URL: /bulkupload/:uploadId

A total error count will be displayed above the table next to the row, book, course, and user count referenced above.

#### Confirm upload button
The "Confirm upload" button will be disabled with a tooltip on hover describing why the user can't proceed due to errors in the file.

#### Back to upload button
The "Browse to upload" button on this page in the current version of the Figma doc will be changed to "Back to upload". This button will take the user back to "/bulkupload" page with upload history.

#### File content errors - column error tooltip
If there are file content errors, those will be indicated on a per column basis. Incorrect columns will have <span style="color:red">red</span> text. When the user hovers over that field, a tooltip will appear giving more information as to what's wrong.

#### File content errors - Status chip tooltip
The Status column will also have a red chip with text "Error" in the event of an error. Hovering over this will display a tooltip with the whole list of errors.
**NOTE:** Still to be discussed is how many errors to show in the event that the whole row is invalid.

#### File content errors - Header tooltip
In the event that the file is missing a header completely, the column header text will be highlighted red and all of the rows' column text will be blank. The column header will also show a tooltip on hover indicating that the row was missing in the uploaded file.

Any errors displayed on this page are simply just formatting errors like "Publisher in Row 51 contains unexpected characters". We won't be able to display any issues related to a title being unavailable.

### Review Page (No Errors) - [Figma](https://www.figma.com/file/wizjOjHKk2tYKhaeaMJzD0/Adoptions?node-id=60%3A496&t=ORa4wVftb3AXhlMh-0)
This is the Review page that the user will be redirected to when we transition to the Uploaded state. In the event of a valid file, no errors will be displayed. The book, user, and course count will be shown in a datatable.

The "Browse to upload" button on this page in the current version of the Figma doc will be changed to "Back to upload". This button will take the user back to "/bulkupload" page with upload history.

We will add a "Confirm Upload" button to this page that makes a POST request to the tRPC endpoint, "confirmupload"

URL: /bulkupload/:uploadId

### Review page Download CSV button
**NOTE:** No design yet, still provisional as this was something just discussed on 12/12 with Product.

Error page will have a Download CSV button so that the user can download the csv and fix any errors. Download file will also (possibly) have another column appended called Error that will list out the errors for the row so the user has easy reference. This will just be stubbed out for now until that endpoint is completed.

### Download Template File

The file should now be a static file that contains a header row and example row. This will eventually be hosted on S3 but for now it can point to a file in the repo, "adoptions-upload-template.csv".

ISBN,Title,Publisher,Edition,Department,Course,Professor
12345678910,The Science of Science,Publisher,1st,Science,TEST-101,Professor Name

[Example File](https://docs.google.com/spreadsheets/d/1fSAy3x0kVqSH6HTYlYX0LnnMxKVCDRIC6SPvI83E6_Q/edit#gid=0)

**Testing**: A similar test to the download test for the booklist

## Roadblocks
Updated designs are still needed so we are proceeding based off of discussions with Product.

## Technical Debt

We need to fix our **Icon.vue** component to make icons themable.

## Communication

Follow up with Martin and Josh regarding questions raised during the Adoptions Sync meeting (12/12) and forthcoming design changes.

- Do we really need to display a "Status" column on the Review Page (No Errors), since all statuses will be "processed" in this state?
- Do we really need to show a "Confirm Upload" button in a disabled state on the Review Page (With Errors)?
- What do we show the user on "Confirm upload" success and "Confirm upload" error?

We need to communicate with Institutions to get info for the upload confirmation request.

## Document Checklist

- [x] Describe why the work is being carried out
- [x] Provide a high level technical plan for work carried out
- [x] Included testing strategy if applicable
- [x] Included any potential issues or roadblocks
- [x] Included areas of technical debt that can be resolved
- [x] Included external teams or people who need to be kept in the loop