DnD with breadcrumbs

[tanmoyAtb]

closes #1772

---

Submission checklist:

Layout

• Change looks good in the desktop web ui
• Change looks good in the mobile web ui

Theme

• Components / elements inspected in light mode
• Components / elements inspected in dark mode

[render]

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

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

[render]

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

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

[render]

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

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

[Tbaut]

I didn't check the code yet, but testing the functionality, I got an error from the mv from the api.
I have a file in /some/folder and drag it to move it to /some. The request fails with

Object { code: 400, message: "paths is required" }
The request is as follow:

{"paths":[],"new_path":"/some/"}

[tanmoyAtb]

I didn't check the code yet, but testing the functionality, I got an error from the mv from the api. I have a file in /some/folder and drag it to move it to /some. The request fails with

Object { code: 400, message: "paths is required" }
The request is as follow:

{"paths":[],"new_path":"/some/"}

Its working my side, I even tried with the same /some/folder tree. Can you check if the drag and drop on a folder in the file browser lists work instead of the breadcrumb ?

[Tbaut]

There are some weirdnesses.. I moved my file to the /some/folder folder, then try to DnD with breadcrumb, it fails (not on the video), I try again (visible in the video), it works, I browse to /some, drag the file down to /some/folder, it works, then try to drag it up using the breadcrumb, it fails again..

weirdness.mp4

[tanmoyAtb]

There are some weirdnesses.. I moved my file to the /some/folder folder, then try to DnD with breadcrumb, it fails (not on the video), I try again (visible in the video), it works, I browse to /some, drag the file down to /some/folder, it works, then try to drag it up using the breadcrumb, it fails again..

weirdness.mp4

So I think there's some sensitivity around the way we are dragging. If you check the clip, when the move failed, there was no drag preview. Somehow the drag event failed to grab the source.

I'll spend some time to see if I can find the actual issue.

[tanmoyAtb]

Found the issue, The useDrag wasn't re rendering when file contents changed by moving into a folder. It should be good to go now.

[asnaith]

Hey Tanmoy, I'm seeing some strange behaviour but it's kind of difficult to describe some of them. I've captured them on video so hopefully that helps.

• I noticed there's an issue with the appearance of the breadcrumb folders after a browser refresh

breadcrumb.issue.after.refresh.mov

• When you drag a file to the folder on the breadcrumb that it's already residing in it will append a (1) to the file name and also the modal is cut short

Moving.file.into.current.directory.mov

• When you try a regular drag and drop between folders (non breadcrumb) I've noticed the move success toast elongates to the full screen (but I think it's related to these changes as I can't reproduce this on stage).

Elongated.modal.DND.non.breadcrumb.mov

• I managed to somehow get the folder name to appear in the blue element that appeared at the bottom of the screen.

blue.element.weirdness.mov

[Tbaut]

There are weird CSS quirks indeed in the render built preview, but not when you build the branch locally (also there's no funky animation). I cleared the cache from render.com and redeployed. Should be live soon.

I can't reproduce the issue I had before, and from what Andrew saw, I can see the issue with moving to the folder it's already in, we should prevent this if possible

[Tbaut]

I won't lie, the useDrop is pretty magical to me still as I've never played with it. My comments on the code are therefore on everything else :D

[tanmoyAtb]

Alright I've updated The current folder in breadcrumb to not accept drops!

But the breadcrumbs breaking up is a serious issue. Look at this one. This happens when you build it even locally.

!

What happens is JSS re initialises classnames to the dynamic component I'm passing as component to a crumb.
The passed in breadcrumbs have jss1 and jss2 which are existing classnames which are injecting their styles !!!!!

I found this thread on the jss repo.
cssinjs/jss#1458

A couple of hacky solutions in my mind i'll need to check.

[Tbaut]

Wow this is wild. One thing that crossed my mind and you prob thought about, what if we prevent the classes from having generated names, and actually go with our own naming like: className={clsx(classes.duplicated, "unique-identifier")} and then

{
  duplicated: {
    "&.unique-identifier" : {
      ...
    }
  }
}

[tanmoyAtb]

Wow this is wild. One thing that crossed my mind and you prob thought about, what if we prevent the classes from having generated names, and actually go with our own naming like: className={clsx(classes.duplicated, "unique-identifier")} and then

{
  duplicated: {
    "&.unique-identifier" : {
      ...
    }
  }
}

This would have worked, Yes !
But I found the solution in the material docs:
https://mui.com/styles/api/
mui/material-ui#11843

The PR seems to be in order now !

[Tbaut]

Played again with it, including moving and uploading files, and it worked like a charm 🎉
The code looks neat too, just left a small comment for a nit.

[asnaith]

Awesome work Tanmoy, I can't see any of the previous weirdness and the feature is working great for me too