From ef4002e4bc8d04e6ffc6c63279b9154a9fa2723e Mon Sep 17 00:00:00 2001
From: Caleb Kang <caleb@determined.ai>
Date: Mon, 26 Apr 2021 12:13:06 -0600
Subject: [PATCH] chore: replace deprecated react-helmet with
 react-helmet-async for strict mode

---
 webui/react/package-lock.json       | 27 ---------------------------
 webui/react/package.json            |  3 +--
 webui/react/src/App.tsx             |  9 ++++++---
 webui/react/src/components/Page.tsx |  2 +-
 webui/react/src/pages/SignIn.tsx    |  6 +-----
 5 files changed, 9 insertions(+), 38 deletions(-)

diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
index f23fe30d463d..80ca1d59cedb 100644
--- a/webui/react/package-lock.json
+++ b/webui/react/package-lock.json
@@ -5220,15 +5220,6 @@
         "@types/react": "^16"
       }
     },
-    "@types/react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-PYRoU1XJFOzQ3BHvWL1T8iDNbRjdMDJMT5hFmZKGbsq09kbSqJy61uwEpTrbTNWDopVphUT34zUSVLK9pjsgYQ==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/react-router": {
       "version": "5.1.13",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -14751,7 +14742,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -21964,22 +21954,10 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
-    "react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      }
-    },
     "react-helmet-async": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.0.9.tgz",
       "integrity": "sha512-N+iUlo9WR3/u9qGMmP4jiYfaD6pe9IvDTapZLFJz2D3xlTlCM1Bzy4Ab3g72Nbajo/0ZyW+W9hdz8Hbe4l97pQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
         "invariant": "^2.2.4",
@@ -22211,11 +22189,6 @@
         "react-transition-group": "^4.3.0"
       }
     },
-    "react-side-effect": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
-    },
     "react-sizeme": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.1.tgz",
diff --git a/webui/react/package.json b/webui/react/package.json
index 01e696a39788..6b6722167ad2 100644
--- a/webui/react/package.json
+++ b/webui/react/package.json
@@ -35,7 +35,7 @@
     "query-string": "^6.13.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-helmet": "^6.1.0",
+    "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",
diff --git a/webui/react/src/App.tsx b/webui/react/src/App.tsx
index 04b8eb5ea7c2..6ca9ee80ec38 100644
--- a/webui/react/src/App.tsx
+++ b/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>
   );
 };
 
diff --git a/webui/react/src/components/Page.tsx b/webui/react/src/components/Page.tsx
index eaafd5785f6c..68b112209d74 100644
--- a/webui/react/src/components/Page.tsx
+++ b/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';
diff --git a/webui/react/src/pages/SignIn.tsx b/webui/react/src/pages/SignIn.tsx
index 6913311191de..695742e2590b 100644
--- a/webui/react/src/pages/SignIn.tsx
+++ b/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} />