File rename refactor

[Tbaut]

closes #2050

Since the edition isn't exactly instant even with good internet, I find it good to have a spinner to show something is happening

---

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-2054.onrender.com.

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

[render]

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

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

[render]

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

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

[asnaith]

I think this feels more natural 👍.

There is no way for a user to cancel once they have made their change now though.

We also need to apply the same change to the Shared page, when renaming a Shared Folder it did not save when I clicked outside the input.

It would be good to apply the same change to files within buckets on Storage UI too (or create a seperate issue), what do you think?

I wasn't able to see the spinner when I throttled the connection in the dev tools.

[Tbaut]

There is no way for a user to cancel once they have made their change now though.

There is by pressing the esc key, like on an os.

Thanks for checking it out, I'll apply these changes to the other areas where we rename stuff.

[Tbaut]

Storage needed some small refactor. This is being a big PR now. I tried to test all cases, and couldn't spot anything missing, feel free to play around and rename anything you can rename :)

I did not change the mobile way with a loader on the modal, just to keep things from exploding totally.

[asnaith]

Just checked out the latest changes. Share folder renaming in Files UI and file renaming in Storage UI buckets are both good now.

I did notice on storage ui that we're not doing the same thing with file extensions when we're renaming so I'll create a separate issue as it would be good to have them behaving the same.

I realized I was seeing the spinner before but in dark mode it's really difficult to see:

[tanmoyAtb]

The implementation is really great, here are some thoughts that came into my mind.
These are really borderline nitpicking though.

1. on hitting rename, the editing field should get in focus (I start typing right after hitting rename).
2. If you clear the field, and click outside, this should cancel the rename operation (This is common OS behaviour as well, sth I noticed when I didn't want to hit esc).

[Tbaut]

@tanmoyAtb

the editing field should get in focus

Agreed, I looked for this, the autofocus is set properly, but there's generally a focus problem linked to the drag and drop IMHO, so formik fails at focusing the field. We should double check this with #2051

If you clear the field, and click outside, this should cancel the rename operation (This is common OS behaviour as well, sth I noticed when I didn't want to hit esc).

Ah good point! Definitely something I can do

@asnaith I hadn't tested dark mode yet (and didn't check the box in the first post :D ), it's fixed now :)

[asnaith]

If you clear the field, and click outside, this should cancel the rename operation (This is common OS behaviour as well, sth I noticed when I didn't want to hit esc).

Ah good point! Definitely something I can do

This seems implemented already :)

canren.mov

@asnaith I hadn't tested dark mode yet (and didn't check the box in the first post :D ), it's fixed now :)

That's why I switched to dark mode straight away 😂. Looks great now.

[Tbaut]

yup that's in the code, if newName is "" it'll be falsy and go to the else and stop editing.

[Tbaut]

Thanks Andrew for checking, it's indeed already supported :)

[tanmoyAtb]

The rename functionality feels fully intuitive now. 💯