Add log limit and info notice to PDF Preview log view (#5390)

GitOrigin-RevId: 14764d109dbe13d7e4fb4f79f098c74d4b57d59d

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

@@ -2,6 +2,9 @@ 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()
@@ -14,9 +17,18 @@ function PdfLogsEntries({ entries }) {
     )
   }, [])
 
+  const logEntries = entries.slice(0, LOG_PREVIEW_LIMIT)
+
   return (
     <>
-      {entries.map(logEntry => (
+      {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}

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

@@ -11,6 +11,7 @@ import PdfDownloadFilesButton from './pdf-download-files-button'
 import PdfLogsEntries from './pdf-logs-entries'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import ErrorBoundaryFallback from './error-boundary-fallback'
+import { LogsPaneInfoNotice } from '../../preview/components/preview-logs-pane'
 
 function PdfLogsViewer() {
   const {
@@ -26,6 +27,7 @@ function PdfLogsViewer() {
   return (
     <div className="logs-pane">
       <div className="logs-pane-content">
+        <LogsPaneInfoNotice />
         {codeCheckFailed && (
           <div className="log-entry">
             <div className="log-entry-header log-entry-header-error">

services/web/frontend/js/features/preview/components/preview-logs-pane.js

@@ -182,7 +182,8 @@ function AutoCompileLintingErrorEntry() {
   )
 }
 
-function LogsPaneInfoNotice({ variantWithFirstErrorPopup }) {
+// exported to be used by pdf-viewer during React migration
+export function LogsPaneInfoNotice({ variantWithFirstErrorPopup }) {
   const { t } = useTranslation()
   const [dismissedInfoNotice, setDismissedInfoNotice] = usePersistedState(
     `logs_pane.dismissed_info_notice`,