mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
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:
parent
823960f763
commit
dbdc56f2c0
2 changed files with 18 additions and 17 deletions
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue