Merge pull request #25093 from overleaf/td-upgrade-react-error-boundary-second-attempt

Upgrade react-error-boundary to version 5, second attempt

GitOrigin-RevId: 2b88334b66f0ace383211c147279ff88e9f956bb

services/web/test/frontend/features/history/components/change-list.spec.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, FC } from 'react'
 import ToggleSwitch from '../../../../../frontend/js/features/history/components/change-list/toggle-switch'
 import ChangeList from '../../../../../frontend/js/features/history/components/change-list/change-list'
 import {
@@ -10,13 +10,14 @@ import { HistoryProvider } from '../../../../../frontend/js/features/history/con
 import { updates } from '../fixtures/updates'
 import { labels } from '../fixtures/labels'
 import { formatTime, relativeDate } from '@/features/utils/format-date'
+import { withTestContainerErrorBoundary } from '../../../helpers/error-boundary'
 
-const mountWithEditorProviders = (
-  component: React.ReactNode,
-  scope: Record<string, unknown> = {},
-  props: Record<string, unknown> = {}
-) => {
-  cy.mount(
+const TestContainerWithoutErrorBoundary: FC<{
+  component: React.ReactNode
+  scope: Record<string, unknown>
+  props: Record<string, unknown>
+}> = ({ component, scope, props }) => {
+  return (
     <EditorProviders scope={scope} {...props}>
       <HistoryProvider>
         <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -27,6 +28,18 @@ const mountWithEditorProviders = (
   )
 }
 
+const TestContainer = withTestContainerErrorBoundary(
+  TestContainerWithoutErrorBoundary
+)
+
+const mountWithEditorProviders = (
+  component: React.ReactNode,
+  scope: Record<string, unknown> = {},
+  props: Record<string, unknown> = {}
+) => {
+  cy.mount(<TestContainer component={component} scope={scope} props={props} />)
+}
+
 describe('change list (Bootstrap 5)', function () {
   const scope = {
     ui: { view: 'history', pdfLayout: 'sideBySide', chatOpen: true },

services/web/test/frontend/features/history/components/toolbar.spec.tsx

@@ -3,6 +3,28 @@ import { HistoryProvider } from '../../../../../frontend/js/features/history/con
 import { HistoryContextValue } from '../../../../../frontend/js/features/history/context/types/history-context-value'
 import { Diff } from '../../../../../frontend/js/features/history/services/types/doc'
 import { EditorProviders } from '../../../helpers/editor-providers'
+import { FC } from 'react'
+import { withTestContainerErrorBoundary } from '../../../helpers/error-boundary'
+
+const TestContainerWithoutErrorBoundary: FC<{
+  scope: Record<string, unknown>
+  diff: Diff
+  selection: HistoryContextValue['selection']
+}> = ({ scope, diff, selection }) => {
+  return (
+    <EditorProviders scope={scope}>
+      <HistoryProvider>
+        <div className="history-react">
+          <Toolbar diff={diff} selection={selection} />
+        </div>
+      </HistoryProvider>
+    </EditorProviders>
+  )
+}
+
+const TestContainer = withTestContainerErrorBoundary(
+  TestContainerWithoutErrorBoundary
+)
 
 describe('history toolbar', function () {
   const editorProvidersScope = {
@@ -58,13 +80,11 @@ describe('history toolbar', function () {
     }
 
     cy.mount(
-      <EditorProviders scope={editorProvidersScope}>
-        <HistoryProvider>
-          <div className="history-react">
-            <Toolbar diff={diff} selection={selection} />
-          </div>
-        </HistoryProvider>
-      </EditorProviders>
+      <TestContainer
+        scope={editorProvidersScope}
+        diff={diff}
+        selection={selection}
+      />
     )
 
     cy.get('.history-react-toolbar').within(() => {
@@ -108,13 +128,11 @@ describe('history toolbar', function () {
     }
 
     cy.mount(
-      <EditorProviders scope={editorProvidersScope}>
-        <HistoryProvider>
-          <div className="history-react">
-            <Toolbar diff={diff} selection={selection} />
-          </div>
-        </HistoryProvider>
-      </EditorProviders>
+      <TestContainer
+        scope={editorProvidersScope}
+        diff={diff}
+        selection={selection}
+      />
     )
 
     cy.get('.history-react-toolbar').within(() => {

services/web/test/frontend/features/source-editor/helpers/test-container.tsx

@@ -1,12 +1,18 @@
-import { FC, ComponentProps, Suspense } from 'react'
+import { FC, ComponentProps, PropsWithChildren, Suspense } from 'react'
+import { withTestContainerErrorBoundary } from '../../../helpers/error-boundary'
 
 const style = { width: 785, height: 785 }
 
-export const TestContainer: FC<ComponentProps<'div'>> = ({
-  children,
-  ...rest
-}) => (
+const TestContainerWithoutErrorBoundary: FC<
+  PropsWithChildren<ComponentProps<'div'>>
+> = ({ children, ...rest }) => (
   <div style={style} {...rest}>
     <Suspense fallback={null}>{children}</Suspense>
   </div>
 )
+
+// react-error-boundary version 5 requires an error boundary when using
+// useErrorBoundary, which we do in several components
+export const TestContainer = withTestContainerErrorBoundary(
+  TestContainerWithoutErrorBoundary
+)

services/web/test/frontend/helpers/error-boundary.tsx

@@ -0,0 +1,12 @@
+import { ComponentType, FC } from 'react'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+
+const FallbackComponent: FC = () => {
+  return <>An error occurred within the test container</>
+}
+
+export const withTestContainerErrorBoundary = function <T>(
+  Component: ComponentType<T>
+) {
+  return withErrorBoundary(Component, FallbackComponent)
+}