mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-12 16:23:36 -05:00
30860ae9f9
* [web] Migrate Logs components JSX to Bootstrap 5 * [web] Migrate logs.less to logs.scss * [web] Remove unused class names * [storybook] Define default Bootstrap version in Storybook This prevents some warning in the console * [storybook] Update pdf-preview.stories.jsx * [storybook] Add pdf-log-entry.stories.tsx * [storybook] Force re-renders when switching BS version * [web] Keep files dropdown menu in bounds * [web] Make files dropdown items not bold in BS5 * [web] Revert unrelated change * [web] Fixup PreviewLogsPaneMaxEntries * [web] Add style for log-entry-content-link * [web] Replace log-entry by OLNotification in `PdfCodeCheckFailedNotice` * [web] Use `BootstrapVersionSwitcher` instead of `isBootstrap5` * [web] Rename `DropdownBS3` to `BS3Dropdown` * [web] Reuse variables for `toolbar-height` and `toolbar-small-height` * [web] Set `id` on `DropdownToggle` not `Dropdown` * [web] Set `log-entry-btn-expand-collapse` in BS3 only * [web] Remove `block: true` from StartFreeTrialButton in BS3 * [web] Remove unnecessary CSS in `.log-entry-header-link` * [web] Use semantic color names * Migrate the downloadable pdf file list to Bootstrap 5 * Remove nested BootstrapVersionSwitcher, fix "key" prop * Update roles to: `<li role="menuitem">` `<a role="link">` * Update `log-entry-header-link`: variant ghost and fix colors --------- Co-authored-by: Rebeka <o.dekany@gmail.com> GitOrigin-RevId: 89848970ab5d8a8c135335386caf24363f69a34c
152 lines
5.6 KiB
JavaScript
152 lines
5.6 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import classNames from 'classnames'
|
|
import { useState, useRef } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import useResizeObserver from '../hooks/use-resize-observer'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
import Icon from '../../../shared/components/icon'
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
|
|
function PreviewLogEntryHeader({
|
|
sourceLocation,
|
|
level,
|
|
headerTitle,
|
|
headerIcon,
|
|
logType,
|
|
showSourceLocationLink = true,
|
|
showCloseButton = false,
|
|
onSourceLocationClick,
|
|
onClose,
|
|
}) {
|
|
const { t } = useTranslation()
|
|
const logLocationSpanRef = useRef()
|
|
const [locationSpanOverflown, setLocationSpanOverflown] = useState(false)
|
|
|
|
useResizeObserver(
|
|
logLocationSpanRef,
|
|
locationSpanOverflown,
|
|
checkLocationSpanOverflow
|
|
)
|
|
|
|
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-info': level === 'info',
|
|
'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-info': level === 'info',
|
|
'log-entry-header-link-success': level === 'success',
|
|
})
|
|
const headerLogLocationTitle = t('navigate_log_source', {
|
|
location: file + (line ? `, ${line}` : ''),
|
|
})
|
|
|
|
function checkLocationSpanOverflow(observedElement) {
|
|
const spanEl = observedElement.target
|
|
const isOverflowing = spanEl.scrollWidth > spanEl.clientWidth
|
|
setLocationSpanOverflown(isOverflowing)
|
|
}
|
|
|
|
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 ? (
|
|
<OLButton
|
|
variant="ghost"
|
|
className={logEntryLocationBtnClasses}
|
|
aria-label={headerLogLocationTitle}
|
|
onClick={onSourceLocationClick}
|
|
>
|
|
<BootstrapVersionSwitcher
|
|
bs3={
|
|
<>
|
|
<Icon type="chain" />
|
|
|
|
</>
|
|
}
|
|
bs5={<MaterialIcon type="link" />}
|
|
/>
|
|
<span ref={logLocationSpanRef} className="log-entry-header-link-location">
|
|
{`\u202A${locationLinkText}\u202C`}
|
|
</span>
|
|
</OLButton>
|
|
) : null
|
|
|
|
const 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>
|
|
{locationSpanOverflown && locationLinkText ? (
|
|
<OLTooltip
|
|
id={locationLinkText}
|
|
description={locationLinkText}
|
|
overlayProps={{ placement: 'left' }}
|
|
tooltipProps={{ className: 'log-location-tooltip' }}
|
|
>
|
|
{locationLink}
|
|
</OLTooltip>
|
|
) : (
|
|
locationLink
|
|
)}
|
|
{showCloseButton ? (
|
|
<OLButton
|
|
variant="link"
|
|
className="btn-inline-link log-entry-header-link"
|
|
aria-label={t('dismiss_error_popup')}
|
|
onClick={onClose}
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</OLButton>
|
|
) : null}
|
|
</header>
|
|
)
|
|
}
|
|
|
|
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.oneOfType([PropTypes.string, PropTypes.node]),
|
|
headerIcon: PropTypes.element,
|
|
logType: PropTypes.string,
|
|
showSourceLocationLink: PropTypes.bool,
|
|
showCloseButton: PropTypes.bool,
|
|
onSourceLocationClick: PropTypes.func,
|
|
onClose: PropTypes.func,
|
|
}
|
|
|
|
export default PreviewLogEntryHeader
|