github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
services/web/frontend/js/features/preview/components/preview-logs-pane-entry.js
View file

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

10
services/web/frontend/js/features/preview/components/preview-logs-pane.js
View file

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