fix: Update Hot reloading and react Helmet

babel.config.json

@@ -25,12 +25,16 @@
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",
-    "react-hot-loader/babel",
     [
       "@babel/plugin-proposal-class-properties",
       {
         "loose": true
       }
     ]
-  ]
+  ],
+  "env": {
+    "development": {
+      "plugins": ["react-refresh/babel"]
+    }
+  }
 }

package.json

@@ -46,10 +46,9 @@
     "react-bootstrap": "2.10.10",
     "react-dates": "21.8.0",
     "react-dom": "18.3.1",
-    "react-helmet": "6.1.0",
+    "react-helmet-async": "2.0.5",
     "react-highlight-words": "0.20.0",
     "react-hot-keys": "2.7.3",
-    "react-hot-loader": "4.13.1",
     "react-lazylog": "4.5.3",
     "react-linkify": "0.2.2",
     "react-redux": "8.0.7",
@@ -78,6 +77,7 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.27.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@pollyjs/adapter-fetch": "6.0.7",
     "@pollyjs/adapter-node-http": "6.0.6",
     "@pollyjs/adapter-puppeteer": "6.0.6",
@@ -113,6 +113,7 @@
     "path": "0.12.7",
     "prettier": "2.2.1",
     "puppeteer": "24.2.1",
+    "react-refresh": "0.17.0",
     "sass": "1.93.2",
     "sass-loader": "16.0.6",
     "setup-polly-jest": "0.11.0",

tests/ui/push-health/Health_test.jsx

@@ -10,6 +10,7 @@ import {
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
 import { Provider } from 'react-redux';
+import { HelmetProvider } from 'react-helmet-async';
 
 import Health from '../../../ui/push-health/Health';
 import pushHealth from '../mock/push_health';
@@ -126,15 +127,17 @@ describe('Health', () => {
   const testHealth = () => {
     const store = configureStore(history);
     return (
-      <Provider store={store}>
-        <ConnectedRouter history={history}>
-          <Health
-            location={history.location}
-            notify={() => {}}
-            clearNotification={() => {}}
-          />
-        </ConnectedRouter>
-      </Provider>
+      <HelmetProvider>
+        <Provider store={store}>
+          <ConnectedRouter history={history}>
+            <Health
+              location={history.location}
+              notify={() => {}}
+              clearNotification={() => {}}
+            />
+          </ConnectedRouter>
+        </Provider>
+      </HelmetProvider>
     );
   };
 

tests/ui/push-health/MyPushes_test.jsx

@@ -4,6 +4,7 @@ import { render, waitFor, fireEvent } from '@testing-library/react';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
 import { Provider } from 'react-redux';
+import { HelmetProvider } from 'react-helmet-async';
 
 import MyPushes from '../../../ui/push-health/MyPushes';
 import pushHealthSummaryTryData from '../mock/push_health_summary_try';
@@ -35,17 +36,19 @@ describe('My Pushes', () => {
   const testMyPushes = (user = testUser) => {
     const store = configureStore(history);
     return (
-      <Provider store={store}>
-        <ConnectedRouter history={history}>
-          <MyPushes
-            user={user}
-            location={history.location}
-            notify={() => {}}
-            clearNotification={() => {}}
-            history={history}
-          />
-        </ConnectedRouter>
-      </Provider>
+      <HelmetProvider>
+        <Provider store={store}>
+          <ConnectedRouter history={history}>
+            <MyPushes
+              user={user}
+              location={history.location}
+              notify={() => {}}
+              clearNotification={() => {}}
+              history={history}
+            />
+          </ConnectedRouter>
+        </Provider>
+      </HelmetProvider>
     );
   };
 

ui/App.jsx

@@ -1,8 +1,8 @@
 import React, { Suspense, lazy } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { hot } from 'react-hot-loader/root';
 import { ConnectedRouter } from 'connected-react-router';
 import { Provider } from 'react-redux';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { permaLinkPrefix } from './perfherder/perf-helpers/constants';
 import { configureStore, history } from './job-view/redux/configureStore';
@@ -118,71 +118,76 @@ const withFavicon = (element, route) => {
 const App = () => {
   updateUrls();
   return (
-    <Provider store={configureStore()}>
-      <ConnectedRouter history={history}>
-        <Suspense fallback={<LoadingSpinner />}>
-          <Switch>
-            <Route
-              exact
-              path="/login"
-              render={(props) => <LoginCallback {...props} />}
-            />
-            <Route
-              exact
-              path="/taskcluster-auth"
-              render={(props) => <TaskclusterCallback {...props} />}
-            />
-            <Route
-              path="/jobs"
-              render={(props) =>
-                withFavicon(<JobsViewApp {...props} />, props.location.pathname)
-              }
-            />
-            <Route
-              path="/logviewer"
-              render={(props) =>
-                withFavicon(
-                  <LogviewerApp {...props} />,
-                  props.location.pathname,
-                )
-              }
-            />
-            <Route
-              path="/userguide"
-              render={(props) =>
-                withFavicon(
-                  <UserGuideApp {...props} />,
-                  props.location.pathname,
-                )
-              }
-            />
-            <Route
-              path="/push-health"
-              render={(props) =>
-                withFavicon(<PushHealthApp {...props} />, '/push-health')
-              }
-            />
-            <Route
-              path="/intermittent-failures"
-              render={(props) =>
-                withFavicon(
-                  <IntermittentFailuresApp {...props} />,
-                  '/intermittent-failures',
-                )
-              }
-            />
-            <Route
-              path="/perfherder"
-              render={(props) =>
-                withFavicon(<PerfherderApp {...props} />, '/perfherder')
-              }
-            />
-            <Route path="/docs" render={(props) => <RedocApp {...props} />} />
-          </Switch>
-        </Suspense>
-      </ConnectedRouter>
-    </Provider>
+    <HelmetProvider>
+      <Provider store={configureStore()}>
+        <ConnectedRouter history={history}>
+          <Suspense fallback={<LoadingSpinner />}>
+            <Switch>
+              <Route
+                exact
+                path="/login"
+                render={(props) => <LoginCallback {...props} />}
+              />
+              <Route
+                exact
+                path="/taskcluster-auth"
+                render={(props) => <TaskclusterCallback {...props} />}
+              />
+              <Route
+                path="/jobs"
+                render={(props) =>
+                  withFavicon(
+                    <JobsViewApp {...props} />,
+                    props.location.pathname,
+                  )
+                }
+              />
+              <Route
+                path="/logviewer"
+                render={(props) =>
+                  withFavicon(
+                    <LogviewerApp {...props} />,
+                    props.location.pathname,
+                  )
+                }
+              />
+              <Route
+                path="/userguide"
+                render={(props) =>
+                  withFavicon(
+                    <UserGuideApp {...props} />,
+                    props.location.pathname,
+                  )
+                }
+              />
+              <Route
+                path="/push-health"
+                render={(props) =>
+                  withFavicon(<PushHealthApp {...props} />, '/push-health')
+                }
+              />
+              <Route
+                path="/intermittent-failures"
+                render={(props) =>
+                  withFavicon(
+                    <IntermittentFailuresApp {...props} />,
+                    '/intermittent-failures',
+                  )
+                }
+              />
+              <Route
+                path="/perfherder"
+                render={(props) =>
+                  withFavicon(<PerfherderApp {...props} />, '/perfherder')
+                }
+              />
+              <Route path="/docs" render={(props) => <RedocApp {...props} />} />
+            </Switch>
+          </Suspense>
+        </ConnectedRouter>
+      </Provider>
+    </HelmetProvider>
   );
 };
 
-export default hot(App);
+export default App;

ui/intermittent-failures/App.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { Container } from 'react-bootstrap';
-import { hot } from 'react-hot-loader/root';
 
 import ErrorMessages from '../shared/ErrorMessages';
 
@@ -107,4 +106,4 @@ class IntermittentFailuresApp extends React.Component {
   }
 }
 
-export default hot(IntermittentFailuresApp);
+export default IntermittentFailuresApp;

ui/intermittent-failures/BugDetailsView.jsx

@@ -3,7 +3,7 @@ import { Row, Col, Breadcrumb, BreadcrumbItem } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import ReactTable from 'react-table-6';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import {
   bugDetailsEndpoint,

ui/job-view/App.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Modal } from 'react-bootstrap';
-import { hot } from 'react-hot-loader/root';
 import SplitPane from 'react-split-pane';
 import pick from 'lodash/pick';
 import isEqual from 'lodash/isEqual';
@@ -532,4 +531,4 @@ export default connect(mapStateToProps, {
   pushRoute,
   clearExpiredNotifications,
   fetchPushes,
-})(hot(App));
+})(App);

ui/login-callback/LoginCallback.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { hot } from 'react-hot-loader/root';
 import moment from 'moment';
 
 import AuthService from '../shared/auth/AuthService';
@@ -82,4 +81,4 @@ class LoginCallback extends React.PureComponent {
   }
 }
 
-export default hot(LoginCallback);
+export default LoginCallback;

ui/logviewer/App.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { hot } from 'react-hot-loader/root';
 import { LazyLog } from 'react-lazylog';
 import isEqual from 'lodash/isEqual';
 
@@ -477,4 +476,4 @@ class App extends React.PureComponent {
   }
 }
 
-export default hot(App);
+export default App;

ui/perfherder/App.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
-import { hot } from 'react-hot-loader/root';
 import { Container } from 'react-bootstrap';
 
 import { getData, processResponse } from '../helpers/http';
@@ -144,4 +143,4 @@ class App extends React.Component {
   }
 }
 
-export default hot(App);
+export default App;

ui/push-health/App.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { hot } from 'react-hot-loader/root';
 import { Route, Switch } from 'react-router-dom';
 
 import {
@@ -119,4 +118,4 @@ class App extends React.Component {
   }
 }
 
-export default hot(App);
+export default App;

ui/push-health/Health.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Container, Spinner, Navbar, Nav, Alert } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import camelCase from 'lodash/camelCase';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 
 import faviconBroken from '../img/push-health-broken.png';

ui/push-health/MyPushes.jsx

@@ -7,7 +7,7 @@ import {
   Navbar,
   Nav,
 } from 'react-bootstrap';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import faviconBroken from '../img/push-health-broken.png';
 import faviconOk from '../img/push-health-ok.png';

ui/shared/ComparePageTitle.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import { Button, Form, InputGroup } from 'react-bootstrap';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';

ui/userguide/App.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { hot } from 'react-hot-loader/root';
 
 import PerfherderUserGuide from '../perfherder/userguide/PerherderUserGuide';
 
@@ -24,4 +23,4 @@ const App = () => (
   </div>
 );
 
-export default hot(App);
+export default App;