Merge pull request #4056 from overleaf/pr-fix-compile-ui-tooltip-bug

Avoid trying to render a non-existent tooltip

GitOrigin-RevId: 46591823a3479d0570051e317659de88c7b98159
This commit is contained in:
Alf Eaton 2021-05-25 10:57:34 +01:00 committed by Copybot
parent 823960f763
commit dbdc56f2c0
2 changed files with 18 additions and 17 deletions

View file

@ -67,12 +67,12 @@ function PreviewLogEntryHeader({
}) {
const { t } = useTranslation()
const logLocationSpanRef = useRef()
const [showLocationTooltip, setShowLocationTooltip] = useState(false)
const [locationSpanOverflown, setLocationSpanOverflown] = useState(false)
useResizeObserver(
logLocationSpanRef,
showLocationTooltip,
setTooltipForLogLocationLinkIfNeeded
locationSpanOverflown,
checkLocationSpanOverflow
)
const file = sourceLocation ? sourceLocation.file : null
@ -95,10 +95,10 @@ function PreviewLogEntryHeader({
location: file + (line ? `, ${line}` : ''),
})
function setTooltipForLogLocationLinkIfNeeded(observedElement) {
function checkLocationSpanOverflow(observedElement) {
const spanEl = observedElement.target
const shouldShowTooltip = spanEl.scrollWidth > spanEl.clientWidth
setShowLocationTooltip(shouldShowTooltip)
const isOverflowing = spanEl.scrollWidth > spanEl.clientWidth
setLocationSpanOverflown(isOverflowing)
}
const locationLinkText =
@ -132,11 +132,12 @@ function PreviewLogEntryHeader({
</button>
) : null
const locationTooltip = showLocationTooltip ? (
<Tooltip id={locationLinkText} className="log-location-tooltip">
{locationLinkText}
</Tooltip>
) : null
const locationTooltip =
locationSpanOverflown && locationLinkText ? (
<Tooltip id={locationLinkText} className="log-location-tooltip">
{locationLinkText}
</Tooltip>
) : null
var headerTitleText = logType ? `${logType} ${headerTitle}` : headerTitle
@ -146,7 +147,7 @@ function PreviewLogEntryHeader({
<div className="log-entry-header-icon-container">{headerIcon}</div>
) : null}
<h3 className="log-entry-header-title">{headerTitleText}</h3>
{showLocationTooltip ? (
{locationTooltip ? (
<OverlayTrigger placement="left" overlay={locationTooltip}>
{locationLink}
</OverlayTrigger>

View file

@ -23,6 +23,7 @@ function PreviewLogsPane({
onClearCache,
}) {
const { t } = useTranslation()
const nowTS = Date.now()
const {
all: allCompilerIssues = [],
errors: compilerErrors = [],
@ -31,26 +32,25 @@ function PreviewLogsPane({
} = logEntries
const errorsUI = Object.keys(errors).map((name, index) => (
<PreviewError key={index} name={name} />
<PreviewError key={`${nowTS}-${index}`} name={name} />
))
const validationIssuesUI = Object.keys(
validationIssues
).map((name, index) => (
<PreviewValidationIssue
key={index}
key={`${nowTS}-${index}`}
name={name}
details={validationIssues[name]}
/>
))
const logEntriesUI = [
...compilerErrors,
...compilerWarnings,
...compilerTypesettingIssues,
].map((logEntry, idx) => (
].map((logEntry, index) => (
<PreviewLogsPaneEntry
key={idx}
key={`${nowTS}-${index}`}
headerTitle={logEntry.message}
rawContent={logEntry.content}
logType={logEntry.type}