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

Avoid trying to render a non-existent tooltip

GitOrigin-RevId: 46591823a3479d0570051e317659de88c7b98159

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

@@ -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>

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

@@ -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}