chore: apply react strict mode and upgrade to React 17 [DET-5325] (#2279

)

webui/react/package.json

@@ -33,9 +33,9 @@
     "portable-fetch": "^3.0.0",
     "pretty-bytes": "^5.4.1",
     "query-string": "^6.13.5",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-helmet": "^6.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet-async": "^1.0.9",
     "react-monaco-editor": "^0.37.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
@@ -82,7 +82,6 @@
     "@types/plotly.js": "^1.50.21",
     "@types/react": "^16.9.52",
     "@types/react-dom": "^16.9.8",
-    "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-transition-group": "^4.4.0",
     "@types/resize-observer-browser": "^0.1.4",

webui/react/src/App.tsx

@@ -1,5 +1,6 @@
 import { Button, notification } from 'antd';
 import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { setupAnalytics } from 'Analytics';
 import Link from 'components/Link';
@@ -74,9 +75,11 @@ const AppView: React.FC = () => {
 
 const App: React.FC = () => {
   return (
-    <StoreProvider>
-      <AppView />
-    </StoreProvider>
+    <HelmetProvider>
+      <StoreProvider>
+        <AppView />
+      </StoreProvider>
+    </HelmetProvider>
   );
 };
 

webui/react/src/components/LogViewer.stories.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 
+import HelmetDecorator from 'storybook/HelmetDecorator';
 import StoreDecorator from 'storybook/StoreDecorator';
 import { downloadText, simulateLogsDownload } from 'utils/browser';
 
 import LogViewer, { LogViewerHandles } from './LogViewer';
 
 export default {
   component: LogViewer,
-  decorators: [ StoreDecorator ],
+  decorators: [ HelmetDecorator, StoreDecorator ],
   parameters: { layout: 'fullscreen' },
   title: 'LogViewer',
 };

webui/react/src/components/NavigationSideBar.tsx

@@ -1,5 +1,5 @@
 import { Button, Menu, Tooltip } from 'antd';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
 
@@ -49,6 +49,8 @@ const NavigationItem: React.FC<ItemProps> = ({ path, status, ...props }: ItemPro
 const STORAGE_KEY = 'collapsed';
 
 const NavigationSideBar: React.FC = () => {
+  // `nodeRef` padding is required for CSSTransition to work with React.StrictMode.
+  const nodeRef = useRef(null);
   const { auth, cluster: overview, ui } = useStore();
   const storeDispatch = useStoreDispatch();
   const storage = useStorage('navigation');
@@ -95,8 +97,9 @@ const NavigationSideBar: React.FC = () => {
         exitDone: css.collapsedExitDone,
       }}
       in={isCollapsed}
+      nodeRef={nodeRef}
       timeout={200}>
-      <nav className={css.base}>
+      <nav className={css.base} ref={nodeRef}>
         <header>
           <div className={css.logo}>
             <div className={css.logoIcon} />

webui/react/src/components/Page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import PageHeader from 'components/PageHeader';
 import { useStore } from 'contexts/Store';

webui/react/src/index.tsx

@@ -13,7 +13,14 @@ import * as serviceWorker from './serviceWorker';
 import 'prototypes';
 import 'dev';
 
-ReactDOM.render(<Router history={history}><App /></Router>, document.getElementById('root'));
+ReactDOM.render(
+  <React.StrictMode>
+    <Router history={history}>
+      <App />
+    </Router>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
 
 /*
  * If you want your app to work offline and load faster, you can change

webui/react/src/pages/SignIn.tsx

@@ -1,7 +1,6 @@
 import { notification } from 'antd';
 import queryString from 'query-string';
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
 
 import AuthToken from 'components/AuthToken';
@@ -75,11 +74,8 @@ const SignIn: React.FC = () => {
    * accessing a page from the browser when the user is already verified.
    */
   return auth.checked ? (
-    <Page>
+    <Page docTitle="Sign In">
       <div className={css.base}>
-        <Helmet>
-          <title>Sign In - Determined</title>
-        </Helmet>
         <div className={css.content}>
           <Logo type={LogoTypes.OnLightVertical} />
           <DeterminedAuth canceler={canceler} />

webui/react/src/storybook/HelmetDecorator.ts

@@ -0,0 +1,9 @@
+import { DecoratorFunction } from '@storybook/addons';
+import React from 'react';
+import { HelmetProvider } from 'react-helmet-async';
+
+const HelmetDecorator: DecoratorFunction<React.ReactNode> = storyFn => {
+  return React.createElement(HelmetProvider, null, storyFn());
+};
+
+export default HelmetDecorator;