ref(breadcrumbs): Update breadcrumbs drawer from feedback

[leeandher]

Lots of fixes here:

• Clicking the icon from issue details will show some focus styles for the control. Currently we cant open the menu as the tooltip will be incorrectly positioned as it tries to appear while the drawer is animating onto the page. For now it at least draws attention to the correct part of the drawer.

• The default crumbs have a new icon

• The replay colors match those chosen for issues.

• HTTP items will fully expand by default in the drawer

• The header is sticky and now contains the nav crumbs in it

• There is no excess space/line on the breadcrumb list for longer entries anymore

• The display time icon changes when toggled.

• [Update] More accurate timestamps that respect user preferences (for 24h clocks, and timezone)

[codecov]

Bundle Report

Changes will increase total bundle size by 6.86kB ⬆️

Bundle name	Size	Change
app-webpack-bundle-array-push	27.29MB	6.86kB ⬆️

[michellewzhang]

looks good from the replay side!

[roggenkemper]

looks good to me! this might be personal preference but i feel like the time button for the breadcrumbs on the details page could benefit from a tooltip or something so the user knows what's happening/what option they currently are on. right now you only know what's going to happen when you press it, since there's no dropdown like there is in the drawer.

[malwilley]

As we increase the customizability of this component, it might be better to give more control to the consumer rather than add a new prop. Perhaps children could render the drawer header and close button as well? That would give the greatest flexibility and simplify the interface a bit.

[leeandher]

Good call, I changed it to pass in a <Header /> component the same way it passes Body. I added a context provider as well so the header button would still fire the onClose handler specified in openDrawer. I'll have to update tests as well since they all expect a close button to be rendered.

[malwilley]

Thanks for making that change!

And now, more unsolicited feedback! Not something to do in this PR surely, but something we may want to do in the future is stop passing in Header and Body in the renderDrawer function. That's how GlobalModal works, but I don't think it's necessary for this component since we are using context which didn't exist when. GlobalModal was originally created. They could directly import Drawer.Body and Drawer.Header, right?

[leeandher]

that's a very good point, makes sense. I'll defer to a later change, but thanks!

[malwilley]

Noticed this on an event: https://sentry-539of4nfw.sentry.dev/issues/2382970109/events/da370e7cf6674bbd829629d9507ca68b/

Seems confusing, not sure if this is expected behavior?

[leeandher]

Noticed this on an event: https://sentry-539of4nfw.sentry.dev/issues/2382970109/events/da370e7cf6674bbd829629d9507ca68b/

Seems confusing, not sure if this is expected behavior?

Long living bug in the util function! fixed it!