overleaf/services/web/frontend/js/features/preview/components/preview-first-error-pop-up.js
Paulo Jorge Reis 4e74fb2694 Log pane improvements (#3418)
* Ordering of log entries in the new errors UI

* Don't show the expand-collapse widget when not needed; smaller font size in the raw log output

* Expose log actions in the log pane.

* Use "This project" instead of "Your project" in the new errors UI

* Better handling of long log messages; left-ellipsize the file/line number button

* Make log location more button-like; add tooltip when needed.

* Add a PDF expand button to the toolbar.

* Add a stop compilation button to the new compile UI

* Use aria-label for button accessible text; improve handling of long filenames in the log location button

* Set max-height correctly for the logs pane dropdown

* Avoid changing raw logs sizing when expanded and collapsed

* Add comment on the solution for right-to-left text and ellipsis

* Improve logs pane actions

GitOrigin-RevId: 4098d77a9ee6d333644906876b9ff27035b79319
2020-12-03 03:04:28 +00:00

68 lines
1.8 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import Icon from '../../../shared/components/icon'
import PreviewLogsPaneEntry from './preview-logs-pane-entry'
function PreviewFirstErrorPopUp({
logEntry,
onGoToErrorLocation,
onViewLogs,
onClose
}) {
const { t } = useTranslation()
function handleGoToErrorLocation() {
const { file, line, column } = logEntry
onGoToErrorLocation({ file, line, column })
}
return (
<div
className="first-error-popup"
role="alertdialog"
aria-label={t('first_error_popup_label')}
>
<PreviewLogsPaneEntry
headerTitle={logEntry.message}
rawContent={logEntry.content}
formattedContent={logEntry.humanReadableHintComponent}
extraInfoURL={logEntry.extraInfoURL}
level={logEntry.level}
showLineAndNoLink={false}
showCloseButton
customClass="log-entry-first-error-popup"
onClose={onClose}
/>
<div className="first-error-popup-actions">
<button
className="btn btn-info btn-xs first-error-btn"
type="button"
onClick={handleGoToErrorLocation}
>
<Icon type="chain" />
&nbsp;
{t('go_to_error_location')}
</button>
<button
className="btn btn-info btn-xs first-error-btn"
type="button"
onClick={onViewLogs}
>
<Icon type="file-text-o" />
&nbsp;
{t('view_all_errors')}
</button>
</div>
</div>
)
}
PreviewFirstErrorPopUp.propTypes = {
logEntry: PropTypes.object.isRequired,
onGoToErrorLocation: PropTypes.func.isRequired,
onViewLogs: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired
}
export default PreviewFirstErrorPopUp