ref(js): Remove usage of react-document-title

Author: evanpurkhiser

package.json

@@ -70,7 +70,6 @@
     "@types/prismjs": "^1.26.0",
     "@types/react": "~17.0.14",
     "@types/react-date-range": "^1.4.4",
-    "@types/react-document-title": "^2.0.5",
     "@types/react-dom": "~17.0.9",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-mentions": "4.1.6",
@@ -140,7 +139,6 @@
     "react": "17.0.2",
     "react-autosize-textarea": "7.1.0",
     "react-date-range": "^1.4.0",
-    "react-document-title": "2.0.3",
     "react-dom": "17.0.2",
     "react-grid-layout": "^1.3.4",
     "react-lazyload": "^2.3.0",

static/app/components/sentryDocumentTitle.spec.tsx

@@ -0,0 +1,48 @@
+import {render} from 'sentry-test/reactTestingLibrary';
+
+import SentryDocumentTitle from './sentryDocumentTitle';
+
+describe('SentryDocumentTitle', () => {
+  it('sets the docuemnt title', () => {
+    render(<SentryDocumentTitle title="This is a test" />);
+    expect(document.title).toBe('This is a test - Sentry');
+  });
+
+  it('adds a organization slug', () => {
+    render(<SentryDocumentTitle orgSlug="org" title="This is a test" />);
+    expect(document.title).toBe('This is a test - org - Sentry');
+  });
+
+  it('adds a project slug', () => {
+    render(<SentryDocumentTitle projectSlug="project" title="This is a test" />);
+    expect(document.title).toBe('This is a test - project - Sentry');
+  });
+
+  it('adds a organization and project slug', () => {
+    render(
+      <SentryDocumentTitle orgSlug="org" projectSlug="project" title="This is a test" />
+    );
+    expect(document.title).toBe('This is a test - org - project - Sentry');
+  });
+
+  it('sets the title without suffix', () => {
+    render(<SentryDocumentTitle title="This is a test" noSuffix />);
+    expect(document.title).toBe('This is a test');
+  });
+
+  it('reverts to the parent title', () => {
+    const {rerender} = render(
+      <SentryDocumentTitle title="This is a test">
+        <SentryDocumentTitle title="child title">Content</SentryDocumentTitle>
+      </SentryDocumentTitle>
+    );
+
+    expect(document.title).toBe('child title - Sentry');
+
+    rerender(
+      <SentryDocumentTitle title="This is a test">new Content</SentryDocumentTitle>
+    );
+
+    expect(document.title).toBe('This is a test - Sentry');
+  });
+});

static/app/components/sentryDocumentTitle.tsx

@@ -1,4 +1,4 @@
-import DocumentTitle from 'react-document-title';
+import {createContext, useContext, useEffect, useMemo} from 'react';
 
 type Props = {
   children?: React.ReactChild;
@@ -21,6 +21,10 @@ type Props = {
   title?: string;
 };
 
+const DEFAULT_PAGE_TITLE = 'Sentry';
+
+const DocumentTitleContext = createContext(DEFAULT_PAGE_TITLE);
+
 /**
  * Assigns the document title. The deepest nested version of this title will be
  * the one which is assigned.
@@ -32,7 +36,9 @@ function SentryDocumentTitle({
   noSuffix,
   children,
 }: Props) {
-  function getPageTitle() {
+  const parentTitle = useContext(DocumentTitleContext);
+
+  const pageTitle = useMemo(() => {
     if (orgSlug && projectSlug) {
       return `${title} - ${orgSlug} - ${projectSlug}`;
     }
@@ -46,17 +52,39 @@ function SentryDocumentTitle({
     }
 
     return title;
-  }
+  }, [orgSlug, projectSlug, title]);
+
+  const documentTitle = useMemo(() => {
+    if (noSuffix) {
+      return pageTitle;
+    }
+
+    if (pageTitle !== '') {
+      return `${pageTitle} - Sentry`;
+    }
 
-  const pageTitle = getPageTitle();
+    return DEFAULT_PAGE_TITLE;
+  }, [noSuffix, pageTitle]);
+
+  // NOTE: We do this OUTSIDE of a use effect so that the update order is
+  // correct, otherwsie the inner most SentryDocumentTitle will have it's
+  // useEffect called first followed by the parents, which will cause the wrong
+  // title be set.
+  if (document.title !== documentTitle) {
+    document.title = documentTitle;
+  }
 
-  const documentTitle = noSuffix
-    ? pageTitle
-    : pageTitle !== ''
-    ? `${pageTitle} - Sentry`
-    : 'Sentry';
+  useEffect(() => {
+    return () => {
+      document.title = parentTitle;
+    };
+  }, [parentTitle]);
 
-  return <DocumentTitle title={documentTitle}>{children}</DocumentTitle>;
+  return (
+    <DocumentTitleContext.Provider value={documentTitle}>
+      {children}
+    </DocumentTitleContext.Provider>
+  );
 }
 
 export default SentryDocumentTitle;

yarn.lock

@@ -2840,13 +2840,6 @@
     "@types/react" "*"
     date-fns "^2.16.1"
 
-"@types/react-document-title@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react-document-title/-/react-document-title-2.0.5.tgz#5093e25420c918066bb94efff1cb08a894289cce"
-  integrity sha512-EZ8uj09zBkqkKms2i0OPVYBb4iOLg+GWG1GegDOIDurQqJz+dc2ZMtJU+bgxmm01BjqHYq38XRj0/eC1kChLIw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-dom@*", "@types/react-dom@>=16", "@types/react-dom@~17.0.9":
   version "17.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
@@ -9163,14 +9156,6 @@ react-date-range@^1.4.0:
     react-list "^0.8.13"
     shallow-equal "^1.2.1"
 
-[email protected]:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/react-document-title/-/react-document-title-2.0.3.tgz#bbf922a0d71412fc948245e4283b2412df70f2b9"
-  integrity sha1-u/kioNcUEvyUgkXkKDskEt9w8rk=
-  dependencies:
-    prop-types "^15.5.6"
-    react-side-effect "^1.0.2"
-
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -9322,13 +9307,6 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
-react-side-effect@^1.0.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.2.0.tgz#0e940c78faba0c73b9b0eba9cd3dda8dfb7e7dae"
-  integrity sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==
-  dependencies:
-    shallowequal "^1.0.1"
-
 [email protected]:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/react-sparklines/-/react-sparklines-1.7.0.tgz#9b1d97e8c8610095eeb2ad658d2e1fcf91f91a60"
@@ -9820,11 +9798,6 @@ shallow-equal@^1.2.1:
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
-shallowequal@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"