From 8766c45362ebe0d813634afdf5c819ba29af4b4f Mon Sep 17 00:00:00 2001
From: Miguel Serrano <mserranom@users.noreply.github.com>
Date: Fri, 8 Oct 2021 11:42:49 +0200
Subject: [PATCH] Add log limit and info notice to PDF Preview log view (#5390)

GitOrigin-RevId: 14764d109dbe13d7e4fb4f79f098c74d4b57d59d
---
 .../pdf-preview/components/pdf-logs-entries.js     | 14 +++++++++++++-
 .../pdf-preview/components/pdf-logs-viewer.js      |  2 ++
 .../preview/components/preview-logs-pane.js        |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.js b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.js
index 5187614377..1587906de2 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.js
+++ b/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}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.js b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.js
index 05f56c846f..6f6ee71a8d 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.js
+++ b/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">
diff --git a/services/web/frontend/js/features/preview/components/preview-logs-pane.js b/services/web/frontend/js/features/preview/components/preview-logs-pane.js
index d9f9c0d6b0..f7c504b8dd 100644
--- a/services/web/frontend/js/features/preview/components/preview-logs-pane.js
+++ b/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`,