Upgrade React to v19.1.1

package.json

@@ -34,9 +34,9 @@
     "mini-css-extract-plugin": "^2.9.4",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.2.0",
-    "react": "^18.3.1",
+    "react": "^19.1.1",
     "react-aria-modal": "^5.0.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.1",
     "react-router": "^7.8.2",
     "react-tooltip": "^5.29.1",
     "style-loader": "^4.0.0",

src/components/__tests__/change-view.test.jsx

@@ -62,14 +62,14 @@ describe('change-view', () => {
     }
 
     return (
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <ChangeView
           page={simplePage}
           from={{ ...mockChangeFrom, media_type: fromMediaType }}
           to={{ ...mockChangeTo, media_type: toMediaType }}
           user={{ email: 'me' }}
         />
-      </ApiContext.Provider>
+      </ApiContext>
     );
   }
 

src/components/__tests__/diff-view.test.jsx

@@ -20,14 +20,14 @@ describe('diff-view', () => {
 
   it('can render', async () => {
     const { container } = render(
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <DiffView
           diffType="HIGHLIGHTED_TEXT"
           page={simplePage}
           a={simplePage.versions[1]}
           b={simplePage.versions[0]}
         />
-      </ApiContext.Provider>
+      </ApiContext>
     );
 
     expect(container).not.toBeEmptyDOMElement();
@@ -39,29 +39,29 @@ describe('diff-view', () => {
     mockApi.getDiff.mockResolvedValue({ change_count: 0, diff: [] });
 
     render(
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <DiffView
           diffType="HIGHLIGHTED_TEXT"
           page={simplePage}
           a={simplePage.versions[1]}
           b={simplePage.versions[0]}
         />
-      </ApiContext.Provider>
+      </ApiContext>
     );
 
     await screen.findByRole('alert');
   });
 
   it('renders no alert if there are changes in the diff', async () => {
     render(
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <DiffView
           diffType="HIGHLIGHTED_TEXT"
           page={simplePage}
           a={simplePage.versions[1]}
           b={simplePage.versions[0]}
         />
-      </ApiContext.Provider>
+      </ApiContext>
     );
 
     await waitFor(() => expect(mockApi.getDiff).toHaveBeenCalled());

src/components/__tests__/login-form.test.jsx

@@ -50,9 +50,9 @@ describe('login-form', () => {
     it('Calls "logIn" on the api service if email and password are present', async () => {
       const api = getMockedApi({ logIn: jest.fn().mockResolvedValue({}) });
       render(
-        <ApiContext.Provider value={{ api }}>
+        <ApiContext value={{ api }}>
           <LoginPanel />
-        </ApiContext.Provider>
+        </ApiContext>
       );
 
       await act(() => {
@@ -68,9 +68,9 @@ describe('login-form', () => {
       const onLogin = jest.fn();
       const api = getMockedApi({ logIn: jest.fn().mockResolvedValue({ id: 5 }) });
       render(
-        <ApiContext.Provider value={{ api }}>
+        <ApiContext value={{ api }}>
           <LoginPanel onLogin={onLogin} />
-        </ApiContext.Provider>
+        </ApiContext>
       );
 
       await act(() => {
@@ -86,9 +86,9 @@ describe('login-form', () => {
       const onLogin = jest.fn();
       const api = getMockedApi({ logIn: jest.fn().mockRejectedValue(new Error('Login unsuccessful')) });
       render(
-        <ApiContext.Provider value={{ api }}>
+        <ApiContext value={{ api }}>
           <LoginPanel onLogin={onLogin} />
-        </ApiContext.Provider>
+        </ApiContext>
       );
 
       await act(() => {
@@ -103,9 +103,9 @@ describe('login-form', () => {
     it('Does not call "logIn" if email and password are not both present', async () => {
       const api = getMockedApi({ logIn: jest.fn().mockResolvedValue({}) });
       render(
-        <ApiContext.Provider value={{ api }}>
+        <ApiContext value={{ api }}>
           <LoginPanel />
-        </ApiContext.Provider>
+        </ApiContext>
       );
 
       await act(() => {

src/components/__tests__/page-details.test.jsx

@@ -46,9 +46,9 @@ describe('page-details', () => {
   it('can render', async () => {
     const mockApi = createMockApi();
     render(
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <PageDetails urlParams={urlParams} />
-      </ApiContext.Provider>
+      </ApiContext>
     );
 
     await screen.findByText(simplePage.title);
@@ -57,9 +57,9 @@ describe('page-details', () => {
   it('shows correct title', async () => {
     const mockApi = createMockApi();
     const { unmount } = render(
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <PageDetails urlParams={urlParams} />
-      </ApiContext.Provider>
+      </ApiContext>
     );
 
     await waitFor(() => expect(mockApi.getPage).toHaveBeenCalled());
@@ -74,14 +74,14 @@ describe('page-details', () => {
     const allVersions = simplePage.versions;
     const mockApi = createMockApi();
     const { container } = render(
-      <ApiContext.Provider value={{ api: mockApi }}>
+      <ApiContext value={{ api: mockApi }}>
         <PageDetails
           urlParams={{
             ...urlParams,
             change: `${allVersions.at(-1).uuid}..${allVersions[0].uuid}`
           }}
         />,
-      </ApiContext.Provider>
+      </ApiContext>
     );
 
     await waitFor(() => expect(mockApi.getPage).toHaveBeenCalled());

src/components/sandboxed-html.jsx

@@ -33,7 +33,7 @@ export default class SandboxedHtml extends PureComponent {
     // 'allow-popups' is needed for addTargetBlank for html-transforms.js
     return <iframe
       sandbox="allow-forms allow-scripts allow-popups"
-      ref={frame => this._frame = frame}
+      ref={frame => { this._frame = frame; }}
     />;
   }
 

src/components/side-by-side-rendered-diff.jsx

@@ -71,13 +71,13 @@ export default class SideBySideRenderedDiff extends Component {
           html={this.props.diffData.deletions}
           baseUrl={versionUrl(this.props.a)}
           transform={transformA}
-          ref={node => this._htmlViewA = node}
+          ref={node => { this._htmlViewA = node; }}
         />
         <SandboxedHtml
           html={this.props.diffData.insertions}
           baseUrl={versionUrl(this.props.b)}
           transform={transformB}
-          ref={node => this._htmlViewB = node}
+          ref={node => { this._htmlViewB = node; }}
         />
       </div>
     );

src/components/version-redirect.jsx

@@ -1,12 +1,12 @@
 import Loading from './loading';
-import { useContext, useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 import { Navigate, useParams } from 'react-router';
 import { ApiContext } from './api-context';
 
 import styles from '../css/base.css';
 
 export default function VersionRedirect () {
-  const api = useContext(ApiContext);
+  const api = use(ApiContext);
   const { versionId } = useParams();
   const [pageId, setPageId] = useState('');
   const [error, setError] = useState(null);

src/components/web-monitoring-ui.jsx

@@ -167,7 +167,7 @@ export default class WebMonitoringUi extends Component {
     const modal = this.state.showLogin ? this.renderLoginDialog() : null;
 
     return (
-      <ApiContext.Provider value={{ api, localApi }}>
+      <ApiContext value={{ api, localApi }}>
         <Router>
           <div id="application">
             <NavBar
@@ -205,7 +205,7 @@ export default class WebMonitoringUi extends Component {
             {modal}
           </div>
         </Router>
-      </ApiContext.Provider>
+      </ApiContext>
     );
   }