DnD on storage

[tanmoyAtb]

closes #2071

---

Submission checklist:

Layout

• Change looks good in the desktop web ui

Theme

• Components / elements inspected in light mode

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-2084.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c99i3lf6d9kgu5172cvg.

[render]

Your Render PR Server URL is https://files-ui-stage-pr-2084.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c99i3mf6d9kgu5172d4g.

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-2084.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c99i3nf6d9kgu5172dm0.

[asnaith]

Hey Tanmoy, I noticed a few issues in this branch after these changes:

• The breadcrumb positioning/layout breaks once you start to nest folders. See video / screenshot below:

breadcrumb.issues.mov

• The file browser is only allowing drag and drop on folders if one of them contains a file. If you try and drag and drop an empty folder into another empty folder then it doesn't work (this works on files).

empty.folder.issue.mov

• I'm not seeing any DND behaviour on the mobile layout

[tanmoyAtb]

Hey Tanmoy, I noticed a few issues in this branch after these changes:

• The breadcrumb positioning/layout breaks once you start to nest folders. See video / screenshot below:

breadcrumb.issues.mov

• The file browser is only allowing drag and drop on folders if one of them contains a file. If you try and drag and drop an empty folder into another empty folder then it doesn't work (this works on files).

empty.folder.issue.mov

• I'm not seeing any DND behaviour on the mobile layout

Hey @asnaith, thanks for the check. Interesting stuff,
Can you give me the browser and screen size at which you are testing the breadcrumb breaking ?

[asnaith]

Hey @asnaith, thanks for the check. Interesting stuff, Can you give me the browser and screen size at which you are testing the breadcrumb breaking ?

@tanmoyAtb This was at 1280 x 720 resolution on Chrome / Firefox.

The easiest way to reproduce this is to create a folder, double click on it, add a new folder inside and repeat. After a couple of times doing that you will see that things start to go awry with the breadcrumb.

[tanmoyAtb]

All right, we had a css system missing on storage. It's all updated.
We don't really have DnD for mobile layouts on files either. So we're not going to have it here I think.

[asnaith]

Hey @tanmoyAtb this is looking great after the css fix. The only DND issue remaining is the one I mentioned before with blank folders.

The file browser is only allowing drag and drop on folders if one of them contains a file. If you try and drag and drop an empty folder into another empty folder then it doesn't work (this works on files).

I'm assuming we'd want to fix it (because it's allowed on Files) but I'm not sure. What do you think?

[tanmoyAtb]

#2071

Hey @asnaith I checked on the empty folder moving functionality. It seems to be working fine on my end.

Screen.Recording.2022-04-14.at.8.20.56.PM.mov

[tanmoyAtb]

#2071

Hey @asnaith I checked on the empty folder moving functionality. It seems to be working fine on my end.

Screen.Recording.2022-04-14.at.8.20.56.PM.mov

I just realized the move doesn't work with IPFS file system. Looking into it.

[asnaith]

#2071

Hey @asnaith I checked on the empty folder moving functionality. It seems to be working fine on my end.
Screen.Recording.2022-04-14.at.8.20.56.PM.mov

I just realized the move doesn't work with IPFS file system. Looking into it.

@tanmoyAtb Oh! Good catch. I hadn't yet realized it was specifically related to bucket type

[tanmoyAtb]

#2071

Hey @asnaith I checked on the empty folder moving functionality. It seems to be working fine on my end.
Screen.Recording.2022-04-14.at.8.20.56.PM.mov

I just realized the move doesn't work with IPFS file system. Looking into it.

@tanmoyAtb Oh! Good catch. I hadn't yet realized it was specifically related to bucket type

All right. It should be good to go now.

[asnaith]

All right. It should be good to go now.

👍 Working great for both bucket types now

[FSM1]

Working really well. I left one quick suggestion, that will make for neater code, but besides that this is good to go.