[Files] Breadcrumb enhancement for shared folders

[Tbaut]

closes #1284

---

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://chainsafe-components-stage-pr-2195.onrender.com.

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

[render]

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

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

[render]

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

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

[Tbaut]

Tests failing is unrelated, I opened #2198
Also the SVG is not nice in the Breadcrumb for shared folders, but we'll get this fixed before merging.

edit: fixed

[juans-chainsafe]

EDIT: I put the review for other PR, my bad

[juans-chainsafe]

@Tbaut Looking good in Chrome! I need to test in other browsers too and mobile, but seems good so far. I only have one question:

If I understood correctly, based on #1284 (comment) comment, the last folder name should be complete and not with elipsis:

Maybe we need more clarification there.

[Tbaut]

Ah I didn't take this into account here. I didn't touch this part and just went for the Breadcrumb enhancement for shared folders and the root. Any folder with a too long name will have ellipsis as before. I guess we can tackle that in another issue if that's really an issue (which I don't really think it is).

[juans-chainsafe]

Ah I didn't take this into account here. I didn't touch this part and just went for the Breadcrumb enhancement for shared folders and the root. Any folder with a too long name will have ellipsis as before. I guess we can tackle that in another issue if that's really an issue (which I don't really think it is).

Yes, make sense, I can create another ticket and we can discuss it tomorrow

[juans-chainsafe]

Functionality is working as expected in all browsers but we have an issue inside the dropdown menu in 'Manage access' option:

Seems that something happened in the design, in stage is displayed correctly.

[Tbaut]

Nice catch, this is an issue with the svg as well. Added a quick fix for this particular issue, but the svg still needs attention.

[Tbaut]

The icon is now fixed and it scales correctly 🎉

[juans-chainsafe]

all working perfect now! awesome

[tanmoyAtb]

Overall the code looks tight.

I still feel the svgs and icons could get some improvement.

The storybooks icon looks big (not a big deal though)!

In files they look smaller that usual.

[FSM1]

works great 🎉

[Tbaut]

In files they look smaller that usual.

I missed that sorry. So the home icon should be 20px size, and this shouldn't have changed (in the app, I didn't check storybook).
The shared-folder group icon is new , we can make it more than 20px but this is what we had so far afaik.