Finish migrating to PdfLogEntry component (#5483)

GitOrigin-RevId: 93f1da35dbc80b317964133e0437373dd0af7933

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

@@ -13,8 +13,8 @@ export default function PdfLogEntryRawContent({
   const [expanded, setExpanded] = useState(false)
   const [needsExpander, setNeedsExpander] = useState(false)
 
-  const containerRef = useResizeObserver(entry => {
-    setNeedsExpander(entry.target.scrollHeight > collapsedSize)
+  const containerRef = useResizeObserver(element => {
+    setNeedsExpander(element.scrollHeight > collapsedSize)
   })
 
   const { t } = useTranslation()

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

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import PreviewLogsPaneEntry from '../../preview/components/preview-logs-pane-entry'
 import { memo } from 'react'
 import classnames from 'classnames'
 import PdfValidationIssue from './pdf-validation-issue'
@@ -10,9 +9,10 @@ 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 PdfCodeCheckFailedNotice from '../../preview/components/pdf-code-check-failed-notice'
-import PdfLogsPaneInfoNotice from '../../preview/components/pdf-logs-pane-info-notice'
+import PdfCodeCheckFailedNotice from './pdf-code-check-failed-notice'
+import PdfLogsPaneInfoNotice from './pdf-logs-pane-info-notice'
 import { useCompileContext } from '../../../shared/context/compile-context'
+import PdfLogEntry from './pdf-log-entry'
 
 function PdfLogsViewer() {
   const {
@@ -45,7 +45,7 @@ function PdfLogsViewer() {
         {logEntries?.all && <PdfLogsEntries entries={logEntries.all} />}
 
         {rawLog && (
-          <PreviewLogsPaneEntry
+          <PdfLogEntry
             headerTitle={t('raw_logs')}
             rawContent={rawLog}
             entryAriaLabel={t('raw_logs_description')}

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useTranslation, Trans } from 'react-i18next'
-import PreviewLogsPaneEntry from '../../preview/components/preview-logs-pane-entry'
 import { memo } from 'react'
+import PdfLogEntry from './pdf-log-entry'
 
 function PdfPreviewError({ error }) {
   const { t } = useTranslation()
@@ -140,7 +140,7 @@ function ErrorLogEntry({ title, children }) {
   const { t } = useTranslation()
 
   return (
-    <PreviewLogsPaneEntry
+    <PdfLogEntry
       headerTitle={title}
       formattedContent={children}
       entryAriaLabel={t('compile_error_entry_description')}

services/web/frontend/js/features/pdf-preview/components/pdf-validation-issue.js

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import PreviewLogsPaneEntry from '../../preview/components/preview-logs-pane-entry'
+import PdfLogEntry from './pdf-log-entry'
 
 PdfValidationIssue.propTypes = {
   name: PropTypes.string.isRequired,
@@ -14,7 +14,7 @@ function PdfValidationIssue({ issue, name }) {
   switch (name) {
     case 'sizeCheck':
       return (
-        <PreviewLogsPaneEntry
+        <PdfLogEntry
           headerTitle={t('project_too_large')}
           formattedContent={
             <>
@@ -36,7 +36,7 @@ function PdfValidationIssue({ issue, name }) {
 
     case 'conflictedPaths':
       return (
-        <PreviewLogsPaneEntry
+        <PdfLogEntry
           headerTitle={t('conflicting_paths_found')}
           formattedContent={
             <>
@@ -55,7 +55,7 @@ function PdfValidationIssue({ issue, name }) {
 
     case 'mainFile':
       return (
-        <PreviewLogsPaneEntry
+        <PdfLogEntry
           headerTitle={t('main_file_not_found')}
           formattedContent={t('please_set_main_file')}
           entryAriaLabel={t('validation_issue_entry_description')}

services/web/frontend/js/features/pdf-preview/components/timeout-upgrade-prompt.js

@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next'
 import { useEditorContext } from '../../../shared/context/editor-context'
-import PreviewLogsPaneEntry from '../../preview/components/preview-logs-pane-entry'
 import Icon from '../../../shared/components/icon'
 import StartFreeTrialButton from '../../../shared/components/start-free-trial-button'
 import { memo } from 'react'
+import PdfLogEntry from './pdf-log-entry'
 
 function TimeoutUpgradePrompt() {
   const { t } = useTranslation()
@@ -15,7 +15,7 @@ function TimeoutUpgradePrompt() {
   }
 
   return (
-    <PreviewLogsPaneEntry
+    <PdfLogEntry
       headerTitle={
         isProjectOwner
           ? t('upgrade_for_longer_compiles')

services/web/frontend/js/features/pdf-preview/hooks/use-resize-observer.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 
-export const useResizeObserver = callback => {
+export const useResizeObserver = handleResize => {
   const resizeRef = useRef(null)
 
   const elementRef = useCallback(
@@ -11,15 +11,17 @@ export const useResizeObserver = callback => {
         }
 
         const observer = new ResizeObserver(([entry]) => {
-          callback(entry)
+          handleResize(entry.target)
         })
 
         resizeRef.current = { element, observer }
 
         observer.observe(element)
+
+        handleResize(element) // trigger the callback once
       }
     },
-    [callback]
+    [handleResize]
   )
 
   useEffect(() => {

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

@@ -317,6 +317,7 @@ describe('<PdfPreview/>', function () {
   it('displays expandable raw logs', async function () {
     mockCompile()
     mockBuildFile()
+    mockValidPdf()
 
     // pretend that the content is large enough to trigger a "collapse"
     // (in jsdom these values are always zero)
@@ -335,11 +336,11 @@ describe('<PdfPreview/>', function () {
     await screen.findByRole('button', { name: 'View PDF' })
 
     // expand the log
-    const expandButton = screen.getByRole('button', { name: 'Expand' })
+    const [expandButton] = screen.getAllByRole('button', { name: 'Expand' })
     expandButton.click()
 
     // collapse the log
-    const collapseButton = screen.getByRole('button', { name: 'Collapse' })
+    const [collapseButton] = screen.getAllByRole('button', { name: 'Collapse' })
     collapseButton.click()
   })