overleaf/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js
Paulo Jorge Reis 326c63e2af Compile UI improvements for beta release (#3644)
* Increase errors cap in the new compile UI to 99

* Improve messaging for stopped compiles

GitOrigin-RevId: d34973e9ef71562d64cfc8018634753e47e4dee8
2021-02-18 03:05:29 +00:00

163 lines
3.6 KiB
JavaScript

import React from 'react'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
import Icon from '../../../shared/components/icon'
const MAX_ERRORS_COUNT = 99
function PreviewLogsToggleButton({
onToggle,
showLogs,
compileFailed = false,
logsState: { nErrors, nWarnings },
showText
}) {
const { t } = useTranslation()
const toggleButtonClasses = classNames(
'btn',
'btn-xs',
'btn-toggle-logs',
'toolbar-item',
{
'btn-danger': !showLogs && nErrors,
'btn-warning': !showLogs && !nErrors && nWarnings,
'btn-default': showLogs || (!nErrors && !nWarnings)
}
)
let textStyle = {}
if (!showText) {
textStyle = {
position: 'absolute',
right: '-100vw'
}
}
function handleOnClick(e) {
e.currentTarget.blur()
onToggle()
}
const buttonElement = (
<button
id="logs-toggle"
type="button"
disabled={compileFailed}
className={toggleButtonClasses}
onClick={handleOnClick}
>
{showLogs ? (
<ViewPdfButton textStyle={textStyle} />
) : (
<CompilationResultIndicator
textStyle={textStyle}
nErrors={nErrors}
nWarnings={nWarnings}
/>
)}
</button>
)
return showText ? (
buttonElement
) : (
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id="tooltip-logs-toggle">
{showLogs ? t('view_pdf') : t('view_logs')}
</Tooltip>
}
>
{buttonElement}
</OverlayTrigger>
)
}
function CompilationResultIndicator({ textStyle, nErrors, nWarnings }) {
if (nErrors || nWarnings) {
return (
<LogsCompilationResultIndicator
logType={nErrors ? 'errors' : 'warnings'}
nLogs={nErrors || nWarnings}
textStyle={textStyle}
/>
)
} else {
return <ViewLogsButton textStyle={textStyle} />
}
}
function LogsCompilationResultIndicator({ textStyle, logType, nLogs }) {
const { t } = useTranslation()
const label =
logType === 'errors' ? t('your_project_has_errors') : t('view_warnings')
return (
<>
<Icon type="file-text-o" />
<span
className="btn-toggle-logs-label toolbar-text"
aria-label={label}
style={textStyle}
>
{`${label} (${
nLogs > MAX_ERRORS_COUNT ? `${MAX_ERRORS_COUNT}+` : nLogs
})`}
</span>
</>
)
}
function ViewLogsButton({ textStyle }) {
const { t } = useTranslation()
return (
<>
<Icon type="file-text-o" />
<span className="toolbar-text" style={textStyle}>
{t('view_logs')}
</span>
</>
)
}
function ViewPdfButton({ textStyle }) {
const { t } = useTranslation()
return (
<>
<Icon type="file-pdf-o" />
<span className="toolbar-text" style={textStyle}>
{t('view_pdf')}
</span>
</>
)
}
PreviewLogsToggleButton.propTypes = {
onToggle: PropTypes.func.isRequired,
logsState: PropTypes.shape({
nErrors: PropTypes.number.isRequired,
nWarnings: PropTypes.number.isRequired,
nLogEntries: PropTypes.number.isRequired
}),
showLogs: PropTypes.bool.isRequired,
showText: PropTypes.bool.isRequired,
compileFailed: PropTypes.bool
}
LogsCompilationResultIndicator.propTypes = {
logType: PropTypes.string.isRequired,
nLogs: PropTypes.number.isRequired,
textStyle: PropTypes.object.isRequired
}
ViewLogsButton.propTypes = {
textStyle: PropTypes.object.isRequired
}
ViewPdfButton.propTypes = {
textStyle: PropTypes.object.isRequired
}
export default PreviewLogsToggleButton