|
| 1 | +import { useActions, useValues } from 'kea' |
| 2 | +import { useLayoutEffect, useRef } from 'react' |
| 3 | + |
| 4 | +import { Language } from 'lib/components/CodeSnippet' |
| 5 | +import { Spinner } from 'lib/lemon-ui/Spinner' |
| 6 | + |
| 7 | +import { ErrorTrackingStackFrameContext } from '../types' |
| 8 | +import { FrameContext } from './FrameContext' |
| 9 | +import { FrameSourceFileTarget, frameSourceFileLogic } from './frameSourceFileLogic' |
| 10 | + |
| 11 | +// How close to an edge of the box, in pixels, a scroll shows more lines. |
| 12 | +const EDGE_PX = 48 |
| 13 | + |
| 14 | +export function FrameSourceFile({ |
| 15 | + target, |
| 16 | + context, |
| 17 | + language, |
| 18 | +}: { |
| 19 | + target: FrameSourceFileTarget |
| 20 | + context: ErrorTrackingStackFrameContext | null |
| 21 | + language: Language |
| 22 | +}): JSX.Element { |
| 23 | + const logic = frameSourceFileLogic({ ...target, capturedLine: context?.line.line ?? null }) |
| 24 | + const { sourceFile, sourceFileLoading, fileWindow, capturedCodeCheck } = useValues(logic) |
| 25 | + const { showMoreAbove, showMoreBelow } = useActions(logic) |
| 26 | + const boxRef = useRef<HTMLDivElement>(null) |
| 27 | + const heightBeforeLinesAbove = useRef<number | null>(null) |
| 28 | + const centered = useRef(false) |
| 29 | + |
| 30 | + useLayoutEffect(() => { |
| 31 | + const box = boxRef.current |
| 32 | + if (!box || !fileWindow || centered.current) { |
| 33 | + return |
| 34 | + } |
| 35 | + const { before, after } = fileWindow.context |
| 36 | + const rowHeight = box.scrollHeight / (before.length + 1 + after.length) |
| 37 | + box.scrollTop = rowHeight * before.length - (box.clientHeight - rowHeight) / 2 |
| 38 | + centered.current = true |
| 39 | + }, [fileWindow]) |
| 40 | + |
| 41 | + // Lines added above would push the visible lines down, so the scroll moves by the same height. |
| 42 | + const linesBefore = fileWindow?.context.before.length |
| 43 | + useLayoutEffect(() => { |
| 44 | + const box = boxRef.current |
| 45 | + if (box && heightBeforeLinesAbove.current !== null) { |
| 46 | + box.scrollTop += box.scrollHeight - heightBeforeLinesAbove.current |
| 47 | + heightBeforeLinesAbove.current = null |
| 48 | + } |
| 49 | + }, [linesBefore]) |
| 50 | + |
| 51 | + const onScroll = (): void => { |
| 52 | + const box = boxRef.current |
| 53 | + if (!box || !fileWindow) { |
| 54 | + return |
| 55 | + } |
| 56 | + if (box.scrollTop < EDGE_PX && fileWindow.hasMoreAbove && heightBeforeLinesAbove.current === null) { |
| 57 | + heightBeforeLinesAbove.current = box.scrollHeight |
| 58 | + showMoreAbove() |
| 59 | + } else if (box.scrollHeight - box.scrollTop - box.clientHeight < EDGE_PX && fileWindow.hasMoreBelow) { |
| 60 | + showMoreBelow() |
| 61 | + } |
| 62 | + } |
| 63 | + |
| 64 | + if (!sourceFile || !fileWindow || capturedCodeCheck === 'differs') { |
| 65 | + return ( |
| 66 | + <> |
| 67 | + {context ? ( |
| 68 | + <FrameContext context={context} language={language} /> |
| 69 | + ) : sourceFileLoading ? ( |
| 70 | + <div className="p-2"> |
| 71 | + <Spinner /> |
| 72 | + </div> |
| 73 | + ) : ( |
| 74 | + <p className="m-0 p-2 text-xs text-muted">The source of this frame isn't available.</p> |
| 75 | + )} |
| 76 | + {capturedCodeCheck === 'differs' && ( |
| 77 | + <p className="m-0 border-t px-2 py-1 text-xs text-muted"> |
| 78 | + The file at the release commit doesn't match the captured code, so only the captured lines are |
| 79 | + shown. |
| 80 | + </p> |
| 81 | + )} |
| 82 | + </> |
| 83 | + ) |
| 84 | + } |
| 85 | + |
| 86 | + return ( |
| 87 | + <div> |
| 88 | + <div className="flex items-center justify-between gap-2 border-b px-2 py-1 text-xs text-muted"> |
| 89 | + <span className="truncate font-mono" title={sourceFile.repo_path}> |
| 90 | + {sourceFile.repo_path} at {sourceFile.commit.slice(0, 7)} |
| 91 | + </span> |
| 92 | + {capturedCodeCheck === 'unchecked' && ( |
| 93 | + <span className="shrink-0">Not compared with the captured code</span> |
| 94 | + )} |
| 95 | + </div> |
| 96 | + <div |
| 97 | + ref={boxRef} |
| 98 | + onScroll={onScroll} |
| 99 | + className="max-h-96 overflow-y-auto" |
| 100 | + data-attr="error-tracking-frame-source-file" |
| 101 | + > |
| 102 | + <FrameContext context={fileWindow.context} language={language} /> |
| 103 | + </div> |
| 104 | + </div> |
| 105 | + ) |
| 106 | +} |
0 commit comments