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

279 lines
8.7 KiB
JavaScript
Raw Normal View History

import React, { useState, useRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import useExpandCollapse from '../../../shared/hooks/use-expand-collapse'
import useResizeObserver from '../../../shared/hooks/use-resize-observer'
import Icon from '../../../shared/components/icon'
function PreviewLogsPaneEntry({
headerTitle,
headerIcon,
rawContent,
logType,
formattedContent,
extraInfoURL,
level,
sourceLocation,
showSourceLocationLink = true,
showCloseButton = false,
entryAriaLabel = null,
customClass,
onSourceLocationClick,
onClose
}) {
const logEntryClasses = classNames('log-entry', customClass)
function handleLogEntryLinkClick(e) {
e.preventDefault()
onSourceLocationClick(sourceLocation)
}
return (
<div className={logEntryClasses} aria-label={entryAriaLabel}>
<PreviewLogEntryHeader
level={level}
sourceLocation={sourceLocation}
headerTitle={headerTitle}
headerIcon={headerIcon}
logType={logType}
showSourceLocationLink={showSourceLocationLink}
onSourceLocationClick={handleLogEntryLinkClick}
showCloseButton={showCloseButton}
onClose={onClose}
/>
{rawContent || formattedContent ? (
<PreviewLogEntryContent
rawContent={rawContent}
formattedContent={formattedContent}
extraInfoURL={extraInfoURL}
/>
) : null}
</div>
)
}
function PreviewLogEntryHeader({
sourceLocation,
level,
headerTitle,
headerIcon,
logType,
showSourceLocationLink = true,
showCloseButton = false,
onSourceLocationClick,
onClose
}) {
const { t } = useTranslation()
const logLocationSpanRef = useRef()
const [showLocationTooltip, setShowLocationTooltip] = useState(false)
useResizeObserver(
logLocationSpanRef,
showLocationTooltip,
setTooltipForLogLocationLinkIfNeeded
)
const file = sourceLocation ? sourceLocation.file : null
const line = sourceLocation ? sourceLocation.line : null
const logEntryHeaderClasses = classNames('log-entry-header', {
'log-entry-header-error': level === 'error',
'log-entry-header-warning': level === 'warning',
'log-entry-header-typesetting': level === 'typesetting',
'log-entry-header-raw': level === 'raw',
'log-entry-header-success': level === 'success'
})
const logEntryLocationBtnClasses = classNames('log-entry-header-link', {
'log-entry-header-link-error': level === 'error',
'log-entry-header-link-warning': level === 'warning',
'log-entry-header-link-typesetting': level === 'typesetting',
'log-entry-header-link-raw': level === 'raw',
'log-entry-header-link-success': level === 'success'
})
const headerLogLocationTitle = t('navigate_log_source', {
location: file + (line ? `, ${line}` : '')
})
function setTooltipForLogLocationLinkIfNeeded(observedElement) {
const spanEl = observedElement.target
const shouldShowTooltip = spanEl.scrollWidth > spanEl.clientWidth
setShowLocationTooltip(shouldShowTooltip)
}
const locationLinkText =
showSourceLocationLink && file ? `${file}${line ? `, ${line}` : ''}` : null
// Because we want an ellipsis on the left-hand side (e.g. "...longfilename.tex"), the
// `log-entry-header-link-location` class has text laid out from right-to-left using the CSS
// rule `direction: rtl;`.
// This works most of the times, except when the first character of the filename is considered
// a punctuation mark, like `/` (e.g. `/foo/bar/baz.sty`). In this case, because of
// right-to-left writing rules, the punctuation mark is moved to the right-side of the string,
// resulting in `...bar/baz.sty/` instead of `...bar/baz.sty`.
// To avoid this edge-case, we wrap the `logLocationLinkText` in two directional formatting
// characters:
// * \u202A LEFT-TO-RIGHT EMBEDDING Treat the following text as embedded left-to-right.
// * \u202C POP DIRECTIONAL FORMATTING End the scope of the last LRE, RLE, RLO, or LRO.
// This essentially tells the browser that, althought the text is laid out from right-to-left,
// the wrapped portion of text should follow left-to-right writing rules.
const locationLink = locationLinkText ? (
<button
className={logEntryLocationBtnClasses}
type="button"
aria-label={headerLogLocationTitle}
onClick={onSourceLocationClick}
>
<Icon type="chain" />
&nbsp;
<span ref={logLocationSpanRef} className="log-entry-header-link-location">
{`\u202A${locationLinkText}\u202C`}
</span>
</button>
) : null
const locationTooltip = showLocationTooltip ? (
<Tooltip id={locationLinkText} className="log-location-tooltip">
{locationLinkText}
</Tooltip>
) : null
var headerTitleText = logType ? `${logType} ${headerTitle}` : headerTitle
return (
<header className={logEntryHeaderClasses}>
{headerIcon ? (
<div className="log-entry-header-icon-container">{headerIcon}</div>
) : null}
<h3 className="log-entry-header-title">{headerTitleText}</h3>
{showLocationTooltip ? (
<OverlayTrigger placement="left" overlay={locationTooltip}>
{locationLink}
</OverlayTrigger>
) : (
locationLink
)}
{showCloseButton ? (
<button
className="btn-inline-link log-entry-header-link"
type="button"
aria-label={t('dismiss_error_popup')}
onClick={onClose}
>
<span aria-hidden="true">&times;</span>
</button>
) : null}
</header>
)
}
function PreviewLogEntryContent({
rawContent,
formattedContent,
extraInfoURL
}) {
const {
isExpanded,
needsExpandCollapse,
expandableProps,
toggleProps
} = useExpandCollapse({
collapsedSize: 150
})
const buttonContainerClasses = classNames(
'log-entry-content-button-container',
{
'log-entry-content-button-container-collapsed': !isExpanded
}
)
const { t } = useTranslation()
return (
<div className="log-entry-content">
{rawContent ? (
<div className="log-entry-content-raw-container">
<div {...expandableProps}>
<pre className="log-entry-content-raw">{rawContent.trim()}</pre>
</div>
{needsExpandCollapse ? (
<div className={buttonContainerClasses}>
<button
type="button"
className="btn btn-xs btn-default log-entry-btn-expand-collapse"
{...toggleProps}
>
{isExpanded ? (
<>
<Icon type="angle-up" /> {t('collapse')}
</>
) : (
<>
<Icon type="angle-down" /> {t('expand')}
</>
)}
</button>
</div>
) : null}
</div>
) : null}
{formattedContent ? (
<div className="log-entry-formatted-content">{formattedContent}</div>
) : null}
{extraInfoURL ? (
<div className="log-entry-content-link">
<a href={extraInfoURL} target="_blank">
{t('log_hint_extra_info')}
</a>
</div>
) : null}
</div>
)
}
PreviewLogEntryHeader.propTypes = {
sourceLocation: PropTypes.shape({
file: PropTypes.string,
// `line should be either a number or null (i.e. not required), but currently sometimes we get
// an empty string (from BibTeX errors), which is why we're using `any` here. We should revert
// to PropTypes.number (not required) once we fix that.
line: PropTypes.any,
column: PropTypes.any
}),
level: PropTypes.string.isRequired,
headerTitle: PropTypes.string,
headerIcon: PropTypes.element,
logType: PropTypes.string,
showSourceLocationLink: PropTypes.bool,
showCloseButton: PropTypes.bool,
onSourceLocationClick: PropTypes.func,
onClose: PropTypes.func
}
PreviewLogEntryContent.propTypes = {
rawContent: PropTypes.string,
formattedContent: PropTypes.node,
extraInfoURL: PropTypes.string
}
PreviewLogsPaneEntry.propTypes = {
sourceLocation: PreviewLogEntryHeader.propTypes.sourceLocation,
headerTitle: PropTypes.string,
headerIcon: PropTypes.element,
rawContent: PropTypes.string,
logType: PropTypes.string,
formattedContent: PropTypes.node,
extraInfoURL: PropTypes.string,
level: PropTypes.oneOf(['error', 'warning', 'typesetting', 'raw', 'success'])
.isRequired,
customClass: PropTypes.string,
showSourceLocationLink: PropTypes.bool,
showCloseButton: PropTypes.bool,
entryAriaLabel: PropTypes.string,
onSourceLocationClick: PropTypes.func,
onClose: PropTypes.func
}
export default PreviewLogsPaneEntry