fix(front): opt the PDF viewers out of the React-PDF 11 Suspense flow

React-PDF 11 suspends while loading and rethrows load failures by default,
so `Document` no longer honours the `loading` and `onLoadError` props the two
viewers are built on. `PdfViewer` would hand its wait to the nearest route
fallback, and `StixCoreObjectContent` would send a password-protected file to
the page Error Boundary instead of rendering its own placeholder.

Both viewers now pass `suspense={false}`, which is the documented way to keep
the previous behaviour. `Page` inherits the flag through the document context,
so the pages inside need no change.

The new tests cover both regressions: they pass on 10.5.0, fail on 11.0.0
without this change, and pass again with it. They need a DOMMatrix stub, which
PDF.js reads at import time and jsdom does not provide.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: xfournet

opencti-platform/opencti-front/setup-vitest.ts

@@ -47,3 +47,21 @@ if (!Element.prototype.releasePointerCapture) {
 if (!Element.prototype.scrollIntoView) {
   Element.prototype.scrollIntoView = () => {};
 }
+
+// jsdom ships no DOMMatrix, and PDF.js reads it at import time in its canvas
+// module. Without this stub any test importing react-pdf fails on
+// `ReferenceError: DOMMatrix is not defined` before a component is even rendered.
+if (!('DOMMatrix' in globalThis)) {
+  class DOMMatrixStub {
+    translate() {
+      return new DOMMatrixStub();
+    }
+
+    scale() {
+      return new DOMMatrixStub();
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  globalThis.DOMMatrix = DOMMatrixStub;
+}

opencti-platform/opencti-front/src/components/PdfViewer.test.tsx

@@ -0,0 +1,71 @@
+import React, { Component, ReactNode, Suspense } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Document } from 'react-pdf';
+import PdfViewer from './PdfViewer';
+
+// The PDF viewers rely on `Document` resolving through its own props rather than
+// through React's Suspense and Error Boundary machinery: `PdfViewer` passes a
+// `loading` element, and `StixCoreObjectContent` additionally relies on
+// `onLoadError` to swap in its "password protected" placeholder. React-PDF 11
+// suspends and rethrows by default, which silently defeats both, so these tests
+// pin the behaviour the viewers are written against.
+
+const brokenPdf = () => new File(
+  [new Uint8Array([1, 2, 3, 4])],
+  'broken.pdf',
+  { type: 'application/pdf' },
+);
+
+class TestErrorBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { failed: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  render() {
+    if (this.state.failed) return <div>BOUNDARY</div>;
+    return this.props.children;
+  }
+}
+
+describe('PdfViewer', () => {
+  it('renders its own loader instead of suspending to the surrounding fallback', () => {
+    render(
+      <Suspense fallback={<div>ROUTE_FALLBACK</div>}>
+        <PdfViewer pdf={brokenPdf()} />
+      </Suspense>,
+    );
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.queryByText('ROUTE_FALLBACK')).not.toBeInTheDocument();
+  });
+});
+
+// Mirrors how StixCoreObjectContent renders a PDF: a load failure has to reach
+// `onLoadError` so the component can render its own placeholder, and must not
+// escape to the Error Boundary wrapping the page.
+describe('Document load failure', () => {
+  it('reaches onLoadError without escaping to the Error Boundary', async () => {
+    const onLoadError = vi.fn();
+
+    render(
+      <TestErrorBoundary>
+        <Document
+          file={brokenPdf()}
+          suspense={false}
+          loading={<div>DOCUMENT_LOADING</div>}
+          onLoadError={onLoadError}
+        />
+      </TestErrorBoundary>,
+    );
+
+    expect(screen.getByText('DOCUMENT_LOADING')).toBeInTheDocument();
+    await waitFor(() => expect(onLoadError).toHaveBeenCalled());
+    expect(screen.queryByText('BOUNDARY')).not.toBeInTheDocument();
+  });
+});

opencti-platform/opencti-front/src/components/PdfViewer.tsx

@@ -21,6 +21,9 @@ const PdfViewer = ({ pdf }: PdfViewerProps) => {
     >
       <Document
         file={pdf}
+        // React-PDF 11 suspends by default, which ignores `loading` and hands the
+        // wait to the nearest route-level fallback.
+        suspense={false}
         loading={<Loader />}
         onLoadSuccess={({ numPages }) => setNbPages(numPages)}
       >

opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectContent.jsx

@@ -726,6 +726,10 @@ class StixCoreObjectContentComponent extends Component {
                   }
                 >
                   <Document
+                    // React-PDF 11 suspends and rethrows by default, which ignores
+                    // `loading` and sends a password-protected file to the page Error
+                    // Boundary instead of the placeholder handlePdfLoadError renders.
+                    suspense={false}
                     onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
                     onLoadError={this.handlePdfLoadError.bind(this)}
                     onPassword={this.handlePdfPasswordRequest.bind(this)}