feat(InputBar): files dropzone draft [WPB-16106]

[olafsulich]

WPB-16106 [Web] Draft message with multiple files - UI

Description

About the change:

• it's a first iteration, only from the UI side (no logic)
• a user would be able to upload multiple files into the input
• it uses a new library, react-dropzone, which is a nice addition and allows me to easily upload multiple files & display their previews
• it's not working with the "files" icon button yet, but I'll in the future

Animation library:

• introducing a new library for animation handling AutoAnimate, it's trivial to use
• with the animations, the deleting feature is looking way nicer
• we can use the library to animate other parts of the app, like the conversation list, so after archiving a conversation, the effect will be smoother
• didn't want to introduce a bigger library like Framer Motion, we don't need it at the moment, so AutoAnimate sounds like a fair alternative

Demo

Uploading and deleting multiple files:

upload-files.mov

[Error] Too many files:

too-many-files.mov

[Error] Images too large:

too-large-image.mov

[Error] Files and/or images too large:

files-too-large.mov

Checklist

• mentions the JIRA issue in the PR name (Ex. [WPB-XXXX])
• PR has been self reviewed by the author;
• Hard-to-understand areas of the code have been commented;
• If it is a core feature, unit tests have been added;

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 149 lines in your changes missing coverage. Please review.

Project coverage is 45.44%. Comparing base (b3a9739) to head (15c98ed).

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #18774      +/-   ##
==========================================
- Coverage   45.68%   45.44%   -0.25%     
==========================================
  Files         988     1014      +26     
  Lines       28042    28191     +149     
  Branches     6315     6336      +21     
==========================================
  Hits        12811    12811              
- Misses      13638    13787     +149     
  Partials     1593     1593              

[przemvs]

Maybe we can also provide unit ? MB/GB/ etc? WDYT ?

[olafsulich]

Currently we don't allow big files, like in GB (max is 25/50 MB, depends if user is in a team), so I would leave it like that 🤷‍♂️ If we would have a need, then sure

[przemvs]

Shouldn't be ...state.files first? Because it will override newFiles if will be the same :)

[olafsulich]

The case was to have new uploaded files first, on top of the list - then we can see there's a new file

[sonarqubecloud]

Quality Gate passed

Issues
20 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
4.4% Duplication on New Code

See analysis details on SonarQube Cloud