[CST][ENG] Update File Uploader to use the new `va-file-input-multiple` component

pmclaren19 commented 4 months ago

Background Context

Initially created a bug ticket here for the Platform Design team to update the va-file-input component to allow for multiple files. They took this ticket and created three new tickets to cover this work:

va-icon-button - #2641 (needed for file input)
update file input - #2642 (needs to happen before multiple file input)
multiple file input - #2643

This work has now been completed and we can update the file upload component that we are using in the CST on the Doc Request Page and Files Tab to use this new component va-file-input-multiple

Originally had created this ticket for us to do this work but that was with the intent that the platform design team would update the current component va-file-input. They have decided instead to create a whole new component called va-file-input-multiple.

New Feature

Update the AddFilesForm component that allows users to upload files to now instead us the component va-file-input-multiple . This component is used on the Files Tab and Document Request Form

Design

FIGMA

Current:

va-file-input-multiple component:

Enablement team (if needed)

@davidakennedy ?

Engineering

We will want to update the component AddFileForms to use https://design.va.gov/storybook/?path=/docs/uswds-va-file-input-multiple--docs#additional-form-inputs

Out of scope

Updating the AddFilesFormOld component that is only enabled when the feature flag cst_use_claim_details_v2 is disabled

Open questions

Do we need to use a feature flag?
Do we need to update the ask va page as well?

Tasks

[ ] The files tab now uses the new va component to upload multiple files
[ ] The Doc Request page now uses the new va component to upload multiple files
[ ] Users can add multiple files
[ ] When a user adds an encrypted file they are able to populate the password in an input field for that file
[ ] When a user adds a file they are able to select from a drop downt he doc type for that file
[ ] unit tests are added/updated
[ ] cypress tests are added/updated

Definition of Done

[ ] Meets acceptance criteria
[ ] Passed E2E testing (90% coverage)
[ ] Passed unit testing (90% coverage)
[ ] Passed integration testing (if applicable)
[ ] Code reviewed (internal)
[ ] Submitted to staging
[ ] Team approved production verification process
[ ] Design performs design QA and verifies the implementation matches the design spec
[ ] Accessibility specialist performs accessibility review (in code or design)
[ ] Engineering identifies staging users required to test and shares account and credentials with design and product
[ ] Product performs functional QA and verifies acceptance criteria was met

Acceptance Criteria

[ ] The files tab now uses the new va component to upload multiple files
[ ] The Doc Request page now uses the new va component to upload multiple files
[ ] Users see a drag and drop instead of a button for adding files
[ ] Users can add multiple files
[ ] When a user adds an encrypted file they are able to populate the password in an input field for that file
[ ] When a user adds a file they are able to select from a drop downt he doc type for that file

davidakennedy commented 4 months ago

Thanks for the ping, @pmclaren19! I would definitely like to test this when we implement it.

pmclaren19 commented 3 months ago

Reviewed and added some updates to tasks during eng refinement.

pmclaren19 commented 3 months ago

Running into some issues implementing this code. Talking with platform design and created several bug tickets ...

https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3139

pmclaren19 commented 3 months ago

This ticket is blocked by the following platform design tickets:

jacobworrell commented 3 months ago

Still awaiting updates from Platform.

skylerschain commented 1 month ago

It looks the bugs Peri filed and linked to above are Closed. So is this ticket unblocked now? I added the latest design mock to the Design section.

skylerschain commented 1 month ago

I also want to highlight a bug I noticed while looking at this in staging:

Repro:

User uploads a file (File 1)
Gray "attached" box (which we will be removing as part of this ticket) shows up, confirming that File 1 has been uploaded
User clicks "Change file" to replace File 1
User replaces File 1 with File 2
The gray "attached" boxes show up for both File 1 and File 2, even though File 1 is no longer attached.

I assume this would get fixed when we remove that gray box and replace it with the pattern from the design system. But wanted to document this just to be safe.

https://github.com/user-attachments/assets/84ea42fb-a6fb-4d07-888c-2c7709bfe8b0

pmclaren19 commented 2 weeks ago

slack comments- https://dsva.slack.com/archives/C01DBGX4P45/p1722966284369869 Both bug tickets have been worked. We need to attempt to implement again and see if the slot can be conditional.

pmclaren19 commented 2 weeks ago

I also want to highlight a bug I noticed while looking at this in staging:

Repro:

User uploads a file (File 1)

Gray "attached" box (which we will be removing as part of this ticket) shows up, confirming that File 1 has been uploaded

User clicks "Change file" to replace File 1

User replaces File 1 with File 2

The gray "attached" boxes show up for both File 1 and File 2, even though File 1 is no longer attached.

I assume this would get fixed when we remove that gray box and replace it with the pattern from the design system. But wanted to document this just to be safe.

Screen.Recording.2024-10-25.at.10.55.00.AM.mov

@skylerschain for the time being while we try to fix this please file a separate ticket to fix the issue witht he current implementation.

department-of-veterans-affairs / va.gov-team