feat(replays): Create a "URLWalker" breadcrumb component #37038
Conversation
github-actions
bot
added
the
Scope: Frontend
ryan953
force-pushed
the
ryan953/url-walker
branch
from
9ae2d1b to
6bb5183
Compare
size-limit report 📦
|
ryan953
force-pushed
the
ryan953/url-walker
branch
from
6bb5183 to
1dc08c1
Compare
…he left re-orders the text!
| startTimestamp={startTimestamp} | ||
| isHovered={false} | ||
| isSelected={false} | ||
| onClick={() => {}} |
There was a problem hiding this comment.
I was thinking to make the segments (and popup) inside the details page clickable, because in that spot we do have timestamps. On the list page i didn't ask for the api to return timestamps. We could ask for it, but i'd rather not throw new requirements in there at this point. So it's like a todo, keep or toss?
| } | ||
|
|
||
| const Span = styled('span')` | ||
| color: ${p => p.theme.gray300}; |
There was a problem hiding this comment.
Could this be
| color: ${p => p.theme.gray300}; | |
| color: ${p => p.theme.subText}; |
| `; | ||
|
|
||
| const Link = styled('a')` | ||
| color: ${p => p.theme.gray300}; |
There was a problem hiding this comment.
same here?
| color: ${p => p.theme.gray300}; | |
| color: ${p => p.theme.subText}; |
|
hey @ryan953 looking good
Heres the figma doc |
done
woah, looks way better!
I'm not sure how to do this tbh. The
|
| grid-template-columns: ${p => | ||
| `minmax(auto, max-content) repeat(${ | ||
| (p.cols - 2) * 2 + 1 | ||
| }, max-content) minmax(auto, max-content)`}; |
There was a problem hiding this comment.
This results in an extra template-column when there is only one segment to display.
This means the gap will still take up space on the right, but the 2nd column itself with have a width of 0.
yeah sure no worries |
ryan953
changed the title
| @@ -86,7 +86,7 @@ function ReplayTable({replayList, idKey, showProjectColumn}: Props) { | |||
| email: replay['user.email'] ?? '', | |||
| }} | |||
| // this is the subheading for the avatar, so displayEmail in this case is a misnomer | |||
| displayEmail={getUrlPathname(replay.url) ?? ''} | |||
| displayEmail={<StringWalker urls={[]} />} | |||
There was a problem hiding this comment.
New api isn't part of this diff, so for now there are no urls on the index page (will say "0 Transactions" every time).
Some permutations in the details page:
And more on the index page:
The big difference between the list page and details, is that on the list page we don't expect to get timestamps for each navigation event. So the relative time doesn't appear in the Hovercard.