UI/UX empty File Picker

[odeimaiz]

What do these changes do?

This PR improves the UX when the File Picker has no file selected. When the empty File Picker is selected a "Drop here" field is shown and the Files Tree tab is shown in the primary column.
In the "Drop here" field, files coming from the Files Tree and also the ones coming from the user's local storage can be Drag&Dropped.

Related issue/s

How to test

Checklist

[codecov]

Codecov Report

Merging #2648 (37fb76c) into master (01106aa) will increase coverage by 0.0%.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #2648   +/-   ##
======================================
  Coverage    78.1%   78.1%           
======================================
  Files         635     635           
  Lines       25918   25918           
  Branches     2507    2507           
======================================
+ Hits        20248   20261   +13     
+ Misses       5008    4998   -10     
+ Partials      662     659    -3     

Flag	Coverage Δ
integrationtests	67.0% <ø> (+<0.1%)	⬆️
unittests	73.6% <ø> (+<0.1%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...webserver/computation_comp_tasks_listening_task.py	80.2% <0.0%> (-3.2%)	⬇️
..._director_v2/modules/dynamic_sidecar/docker_api.py	87.2% <0.0%> (+0.5%)	⬆️
...simcore_service_webserver/projects/projects_api.py	83.8% <0.0%> (+1.0%)	⬆️
.../src/simcore_service_webserver/director_v2_core.py	69.5% <0.0%> (+1.1%)	⬆️
...car/src/simcore_service_dask_sidecar/dask_utils.py	90.4% <0.0%> (+1.1%)	⬆️
...rc/simcore_service_director_v2/modules/rabbitmq.py	89.4% <0.0%> (+1.7%)	⬆️
...ce_webserver/resource_manager/garbage_collector.py	78.8% <0.0%> (+2.0%)	⬆️
...ce_webserver/resource_manager/websocket_manager.py	97.3% <0.0%> (+4.0%)	⬆️

[sanderegg]

That is very nice!
just wondering why the node in the workbench changes shape only when a file is selected. should it have always the same shape?

[KZzizzle]

Very nice! Just to clarify - when there is a file picked for the File Picker, would the user ever be able to change the file? It looks like the file metadata is shown for a file picker node after one is picked so to change files, the user would need to delete that file picker and create another one. I'm not sure this is ideal but I will let you judge on that.

[odeimaiz]

Very nice! Just to clarify - when there is a file picked for the File Picker, would the user ever be able to change the file? It looks like the file metadata is shown for a file picker node after one is picked so to change files, the user would need to delete that file picker and create another one. I'm not sure this is ideal but I will let you judge on that.

Correct. I thought there was no need to add a "Clear selection" button since it usually never changes, but I might be wrong....

[KZzizzle]

Very nice! Just to clarify - when there is a file picked for the File Picker, would the user ever be able to change the file? It looks like the file metadata is shown for a file picker node after one is picked so to change files, the user would need to delete that file picker and create another one. I'm not sure this is ideal but I will let you judge on that.

Correct. I thought there was no need to add a "Clear selection" button since it usually never changes, but I might be wrong....

Personally I like being able to change the file "in place" so I don't have to reconnect/map inputs. One example is if I'm troubleshooting a python runner or something. Perhaps @newton1985 has an opinion?

[pcrespov]

beautiful! 🎉
just a minor suggestion on the message: Drop file/s here instead of simpley Drop Here