feat(components): Add content diff slider common component #88418
Conversation
| const handleDividerMouseDown: React.MouseEventHandler<HTMLElement> = useCallback( | ||
| (event: React.MouseEvent<HTMLElement>) => { | ||
| onDividerMouseDown?.(event); | ||
| resizableDrawer.onMouseDown(event); | ||
| }, | ||
| [onDividerMouseDown, resizableDrawer] |
There was a problem hiding this comment.
note: there’s no need to wrap this function in useCallback. All we do is pass it to a functional component as a prop.
also, we have resizableDrawer as part of the dependency array here, which comes from useResizableDrawer, which returns a non-memoized object:
so this useCallback would be re-computed on every render anyways.
| cursor: ew-resize; | ||
| width: var(--line-width); | ||
| height: 100%; | ||
| background: ${p => p.theme.purple400}; |
There was a problem hiding this comment.
we probably shouldn’t be using the theme colors directly, as they might not work with the chonk re-design. It would be better if we could use semantic tokens instead of the purple palette here.
|
Shouldn't this also update that mentioned hydration error modal to use the same component? |
There was a problem hiding this comment.
can we run the images through an image optimizer feels like they should be 30-40kb
static/app/components/contentSliderDiff/contentSliderDiff.stories.tsx
Outdated
Show resolved
Hide resolved
…ies.tsx Co-authored-by: Ryan Albrecht <[email protected]>
@ryan953 if we merge this component, I plan to do that in a follow-up. |
…thub.com:getsentry/sentry into priscila/feat/components/add-content-diff-slider
| <DiffHeader> | ||
| <BeforeAfter label={t('Before')} help={beforeHelp} /> | ||
| <BeforeAfter label={t('After')} help={afterHelp} /> | ||
| </DiffHeader> |
There was a problem hiding this comment.
I'd probably move this out of the main contentSliderDiff and let people add it themselves. Including it hard-codes some assumptions about the labels, whether this goes above/below or gets hidden at all. The two props that it takes are totally independant from the rest of the slider which will make it easy to be it's own thing.
This PR adds a new common component named 'contentDiffSlider' (happy to rename if we have a better name).
Right now, we compare before-and-after replays for "hydration errors" on the issue details page (example – internal only). We want to use a similar component in the debugger modal to compare a bad and good stack trace.
This PR extracts part of the existing code to create a reusable component. It needs the before and after content, which can be either images or iframes (for session replays), making it flexible.
In a follow-up, it will be added to the debugger modal, and we can also reuse it on the issue details page to remove duplicate code.