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

[pmclaren19]

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]

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

[pmclaren19]

Reviewed and added some updates to tasks during eng refinement.

[pmclaren19]

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

• VAFileInputMultiple component adds null value to the files array when adding a file vets-design-system-documentation#3139

[pmclaren19]

This ticket is blocked by the following platform design tickets:

• VAFileInputMultiple component adds null value to the files array when adding a file vets-design-system-documentation#3139
• Unable to use the slot in VAFileInputMultiple vets-design-system-documentation#3153

[jacobworrell]

Still awaiting updates from Platform.

[skylerschain]

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]

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

Repro:

1. User uploads a file (File 1)
2. Gray "attached" box (which we will be removing as part of this ticket) shows up, confirming that File 1 has been uploaded
3. User clicks "Change file" to replace File 1
4. User replaces File 1 with File 2
5. 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

[pmclaren19]

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]

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

Repro:

1. User uploads a file (File 1)
2. Gray "attached" box (which we will be removing as part of this ticket) shows up, confirming that File 1 has been uploaded
3. User clicks "Change file" to replace File 1
4. User replaces File 1 with File 2
5. 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.

[pmclaren19]

Working this ticket and found several bugs with the va-file-input-multiple component. Talked to the platform design team and we wrote up these tickets. Likely they wont be worked until Jan 2025.

• Ticket for vaMultipleChange firing twice
• Ticket for disallowing multiple of the same file
• Conditional slot content ticket