Fix sass deprecation in Bootstrap

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;