Migrate log entry component to new PDF preview (#5478)

* Migrate log entry component to new PDF preview
* Add a test for expandable log content

GitOrigin-RevId: 3e2154983c1ea03b5db44c87822e7043c4aa2cfe

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-content.js

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import PdfLogEntryRawContent from './pdf-log-entry-raw-content'
+import PropTypes from 'prop-types'
+
+export default function PdfLogEntryContent({
+  rawContent,
+  formattedContent,
+  extraInfoURL,
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="log-entry-content">
+      {formattedContent && (
+        <div className="log-entry-formatted-content">{formattedContent}</div>
+      )}
+
+      {extraInfoURL && (
+        <div className="log-entry-content-link">
+          <a href={extraInfoURL} target="_blank" rel="noopener">
+            {t('log_hint_extra_info')}
+          </a>
+        </div>
+      )}
+
+      {rawContent && (
+        <PdfLogEntryRawContent rawContent={rawContent} collapsedSize={150} />
+      )}
+    </div>
+  )
+}
+
+PdfLogEntryContent.propTypes = {
+  rawContent: PropTypes.string,
+  formattedContent: PropTypes.node,
+  extraInfoURL: PropTypes.string,
+}

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { useResizeObserver } from '../hooks/use-resize-observer'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import { Button } from 'react-bootstrap'
+import Icon from '../../../shared/components/icon'
+import PropTypes from 'prop-types'
+
+export default function PdfLogEntryRawContent({
+  rawContent,
+  collapsedSize = 0,
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const [needsExpander, setNeedsExpander] = useState(false)
+
+  const containerRef = useResizeObserver(entry => {
+    setNeedsExpander(entry.target.scrollHeight > collapsedSize)
+  })
+
+  const { t } = useTranslation()
+
+  return (
+    <div className="log-entry-content-raw-container">
+      <div
+        className="expand-collapse-container"
+        style={{
+          height: expanded ? 'auto' : collapsedSize,
+        }}
+      >
+        <pre className="log-entry-content-raw" ref={containerRef}>
+          {rawContent.trim()}
+        </pre>
+      </div>
+
+      {needsExpander && (
+        <div
+          className={classNames('log-entry-content-button-container', {
+            'log-entry-content-button-container-collapsed': !expanded,
+          })}
+        >
+          <Button
+            bsSize="xs"
+            bsStyle="default"
+            className="log-entry-btn-expand-collapse"
+            onClick={() => setExpanded(value => !value)}
+          >
+            {expanded ? (
+              <>
+                <Icon type="angle-up" /> {t('collapse')}
+              </>
+            ) : (
+              <>
+                <Icon type="angle-down" /> {t('expand')}
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+PdfLogEntryRawContent.propTypes = {
+  rawContent: PropTypes.string.isRequired,
+  collapsedSize: PropTypes.number,
+}

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { memo, useCallback } from 'react'
+import PreviewLogEntryHeader from '../../preview/components/preview-log-entry-header'
+import PdfLogEntryContent from './pdf-log-entry-content'
+
+function PdfLogEntry({
+  headerTitle,
+  headerIcon,
+  rawContent,
+  logType,
+  formattedContent,
+  extraInfoURL,
+  level,
+  sourceLocation,
+  showSourceLocationLink = true,
+  showCloseButton = false,
+  entryAriaLabel = null,
+  customClass,
+  onSourceLocationClick,
+  onClose,
+}) {
+  const handleLogEntryLinkClick = useCallback(
+    event => {
+      event.preventDefault()
+      onSourceLocationClick(sourceLocation)
+    },
+    [onSourceLocationClick, sourceLocation]
+  )
+
+  return (
+    <div
+      className={classNames('log-entry', customClass)}
+      aria-label={entryAriaLabel}
+    >
+      <PreviewLogEntryHeader
+        level={level}
+        sourceLocation={sourceLocation}
+        headerTitle={headerTitle}
+        headerIcon={headerIcon}
+        logType={logType}
+        showSourceLocationLink={showSourceLocationLink}
+        onSourceLocationClick={handleLogEntryLinkClick}
+        showCloseButton={showCloseButton}
+        onClose={onClose}
+      />
+      {(rawContent || formattedContent) && (
+        <PdfLogEntryContent
+          rawContent={rawContent}
+          formattedContent={formattedContent}
+          extraInfoURL={extraInfoURL}
+        />
+      )}
+    </div>
+  )
+}
+
+PdfLogEntry.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 memo(PdfLogEntry)

services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.js

@@ -1,8 +1,8 @@
 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'
+import PdfLogEntry from './pdf-log-entry'
 
 const LOG_PREVIEW_LIMIT = 100
 
@@ -23,13 +23,12 @@ function PdfLogsEntries({ entries }) {
     <>
       {entries.length > LOG_PREVIEW_LIMIT && (
         <PreviewLogsPaneMaxEntries
-          key={`${entries.length}-${LOG_PREVIEW_LIMIT}`}
           totalEntries={entries.length}
           entriesShown={LOG_PREVIEW_LIMIT}
         />
       )}
       {logEntries.map(logEntry => (
-        <PreviewLogsPaneEntry
+        <PdfLogEntry
           key={logEntry.key}
           headerTitle={logEntry.message}
           rawContent={logEntry.content}

services/web/test/frontend/features/pdf-preview/components/pdf-preview.test.js

@@ -148,6 +148,7 @@ describe('<PdfPreview/>', function () {
     // xhrMock.teardown()
     fetchMock.reset()
     localStorage.clear()
+    sinon.restore()
   })
 
   it('renders the PDF preview', async function () {
@@ -270,6 +271,35 @@ describe('<PdfPreview/>', function () {
     expect(fetchMock.called('express:/build/:file')).to.be.false // TODO: actual path
   })
 
+  it('displays expandable raw logs', async function () {
+    mockCompile()
+    mockBuildFile()
+
+    // pretend that the content is large enough to trigger a "collapse"
+    // (in jsdom these values are always zero)
+    sinon.stub(HTMLElement.prototype, 'scrollHeight').value(500)
+    sinon.stub(HTMLElement.prototype, 'scrollWidth').value(500)
+
+    renderWithEditorContext(<PdfPreview />, { scope })
+
+    // wait for "compile on load" to finish
+    await screen.findByRole('button', { name: 'Compiling…' })
+    await screen.findByRole('button', { name: 'Recompile' })
+
+    const logsButton = screen.getByRole('button', { name: 'View logs' })
+    logsButton.click()
+
+    await screen.findByRole('button', { name: 'View PDF' })
+
+    // expand the log
+    const expandButton = screen.getByRole('button', { name: 'Expand' })
+    expandButton.click()
+
+    // collapse the log
+    const collapseButton = screen.getByRole('button', { name: 'Collapse' })
+    collapseButton.click()
+  })
+
   it('displays error messages if there were validation problems', async function () {
     const validationProblems = {
       sizeCheck: {