overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.js
Miguel Serrano 8766c45362 Add log limit and info notice to PDF Preview log view (#5390)
GitOrigin-RevId: 14764d109dbe13d7e4fb4f79f098c74d4b57d59d
2021-10-11 08:03:13 +00:00

58 lines
1.7 KiB
JavaScript

import { memo, useCallback } from 'react'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import PreviewLogsPaneEntry from '../../preview/components/preview-logs-pane-entry'
import PreviewLogsPaneMaxEntries from '../../preview/components/preview-logs-pane-max-entries'
const LOG_PREVIEW_LIMIT = 100
function PdfLogsEntries({ entries }) {
const { t } = useTranslation()
const syncToEntry = useCallback(entry => {
window.dispatchEvent(
new CustomEvent('synctex:sync-to-entry', {
detail: entry,
})
)
}, [])
const logEntries = entries.slice(0, LOG_PREVIEW_LIMIT)
return (
<>
{entries.length > LOG_PREVIEW_LIMIT && (
<PreviewLogsPaneMaxEntries
key={`${entries.length}-${LOG_PREVIEW_LIMIT}`}
totalEntries={entries.length}
entriesShown={LOG_PREVIEW_LIMIT}
/>
)}
{logEntries.map(logEntry => (
<PreviewLogsPaneEntry
key={logEntry.key}
headerTitle={logEntry.message}
rawContent={logEntry.content}
logType={logEntry.type}
formattedContent={logEntry.humanReadableHintComponent}
extraInfoURL={logEntry.extraInfoURL}
level={logEntry.level}
entryAriaLabel={t('log_entry_description', {
level: logEntry.level,
})}
sourceLocation={{
file: logEntry.file,
line: logEntry.line,
column: logEntry.column,
}}
onSourceLocationClick={syncToEntry}
/>
))}
</>
)
}
PdfLogsEntries.propTypes = {
entries: PropTypes.arrayOf(PropTypes.object),
}
export default memo(PdfLogsEntries)