ref(ui): Consistently use SentryDocumentTitle (#30338)

static/app/components/sentryDocumentTitle.tsx

@@ -2,18 +2,38 @@ import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 
 type Props = {
+  /**
+   * This string will be shown at the very front of the title
+   */
   title?: string;
+  /**
+   * The organization slug to show in the title
+   */
   orgSlug?: string;
+  /**
+   * The project slug to show in the title.
+   */
   projectSlug?: string;
+  /**
+   * Should the ` - Sentry` suffix be excluded?
+   */
+  noSuffix?: boolean;
+
   children?: React.ReactChild;
 };
 
-function SentryDocumentTitle({title, orgSlug, projectSlug, children}: Props) {
+/**
+ * Assigns the document title. The deepest nested version of this title will be
+ * the one which is assigned.
+ */
+function SentryDocumentTitle({
+  title = '',
+  orgSlug,
+  projectSlug,
+  noSuffix,
+  children,
+}: Props) {
   function getPageTitle() {
-    if (!orgSlug && !projectSlug) {
-      return title;
-    }
-
     if (orgSlug && projectSlug) {
       return `${title} - ${orgSlug} - ${projectSlug}`;
     }
@@ -22,11 +42,20 @@ function SentryDocumentTitle({title, orgSlug, projectSlug, children}: Props) {
       return `${title} - ${orgSlug}`;
     }
 
-    return `${title} - ${projectSlug}`;
+    if (projectSlug) {
+      return `${title} - ${projectSlug}`;
+    }
+
+    return title;
   }
 
   const pageTitle = getPageTitle();
-  const documentTitle = pageTitle ? `${pageTitle} - Sentry` : 'Sentry';
+
+  const documentTitle = noSuffix
+    ? pageTitle
+    : pageTitle !== ''
+    ? `${pageTitle} - Sentry`
+    : 'Sentry';
 
   return <DocumentTitle title={documentTitle}>{children}</DocumentTitle>;
 }

static/app/views/admin/adminLayout.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import DocumentTitle from 'react-document-title';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {t} from 'sentry/locale';
 import SettingsLayout from 'sentry/views/settings/components/settingsLayout';
 import SettingsNavigation from 'sentry/views/settings/components/settingsNavigation';
 
@@ -42,13 +43,13 @@ type Props = {
 
 function AdminLayout({children, ...props}: Props) {
   return (
-    <DocumentTitle title="Sentry Admin">
+    <SentryDocumentTitle noSuffix title={t('Sentry Admin')}>
       <Page>
         <SettingsLayout renderNavigation={AdminNavigation} {...props}>
           {children}
         </SettingsLayout>
       </Page>
-    </DocumentTitle>
+    </SentryDocumentTitle>
   );
 }
 

static/app/views/admin/adminOverview/index.tsx

@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
-import DocumentTitle from 'react-document-title';
 
 import {Panel, PanelBody, PanelHeader} from 'sentry/components/panels';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 
 import ApiChart from './apiChart';
@@ -12,7 +12,7 @@ const AdminOverview = () => {
   const since = new Date().getTime() / 1000 - 3600 * 24 * 7;
 
   return (
-    <DocumentTitle title="Admin Overview - Sentry">
+    <SentryDocumentTitle title={t('Admin Overview')}>
       <Fragment>
         <h3>{t('System Overview')}</h3>
 
@@ -30,7 +30,7 @@ const AdminOverview = () => {
           </PanelBody>
         </Panel>
       </Fragment>
-    </DocumentTitle>
+    </SentryDocumentTitle>
   );
 };
 

static/app/views/admin/installWizard/index.tsx

@@ -1,10 +1,10 @@
-import DocumentTitle from 'react-document-title';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import sentryPattern from 'sentry-images/pattern/sentry-pattern.png';
 
 import Alert from 'sentry/components/alert';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
@@ -89,7 +89,7 @@ export default class InstallWizard extends AsyncView<Props, State> {
   render() {
     const version = ConfigStore.get('version');
     return (
-      <DocumentTitle title={this.getTitle()}>
+      <SentryDocumentTitle noSuffix title={this.getTitle()}>
         <Wrapper>
           <Pattern />
           <SetupWizard>
@@ -104,7 +104,7 @@ export default class InstallWizard extends AsyncView<Props, State> {
               : this.renderBody()}
           </SetupWizard>
         </Wrapper>
-      </DocumentTitle>
+      </SentryDocumentTitle>
     );
   }
 

static/app/views/asyncView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import DocumentTitle from 'react-document-title';
 
 import AsyncComponent from 'sentry/components/asyncComponent';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 
 type AsyncViewState = AsyncComponent['state'];
 type AsyncViewProps = AsyncComponent['props'];
@@ -15,11 +15,10 @@ export default class AsyncView<
   }
 
   render() {
-    const title = this.getTitle();
     return (
-      <DocumentTitle title={`${title ? `${title} - ` : ''}Sentry`}>
+      <SentryDocumentTitle title={this.getTitle()}>
         {this.renderComponent() as React.ReactChild}
-      </DocumentTitle>
+      </SentryDocumentTitle>
     );
   }
 }

static/app/views/onboarding/onboarding.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import DocumentTitle from 'react-document-title';
 import {browserHistory, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion, MotionProps, useAnimation} from 'framer-motion';
@@ -7,6 +6,7 @@ import {AnimatePresence, motion, MotionProps, useAnimation} from 'framer-motion'
 import Button from 'sentry/components/button';
 import Hook from 'sentry/components/hook';
 import LogoSentry from 'sentry/components/logoSentry';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -24,7 +24,7 @@ import OnboardingWelcome from './welcome';
 const ONBOARDING_STEPS: StepDescriptor[] = [
   {
     id: 'welcome',
-    title: t('Welcome to Sentry'),
+    title: t('Welcome'),
     Component: OnboardingWelcome,
     centered: true,
   },
@@ -188,7 +188,7 @@ class Onboarding extends React.Component<Props, State> {
 
     return (
       <OnboardingWrapper>
-        <DocumentTitle title={this.activeStep.title} />
+        <SentryDocumentTitle title={this.activeStep.title} />
         <Header>
           <LogoSvg />
           <HeaderRight>

static/app/views/organizationContext.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {createContext} from 'react';
-import DocumentTitle from 'react-document-title';
 import {PlainRoute, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
@@ -12,6 +11,7 @@ import {Client} from 'sentry/api';
 import Alert from 'sentry/components/alert';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import Sidebar from 'sentry/components/sidebar';
 import {ORGANIZATION_FETCH_ERROR_TYPES} from 'sentry/constants';
 import {t} from 'sentry/locale';
@@ -288,10 +288,7 @@ class OrganizationContextContainer extends React.Component<Props, State> {
   }
 
   getTitle() {
-    if (this.state.organization) {
-      return this.state.organization.name;
-    }
-    return 'Sentry';
+    return this.state.organization?.name ?? 'Sentry';
   }
 
   renderSidebar(): React.ReactNode {
@@ -327,7 +324,7 @@ class OrganizationContextContainer extends React.Component<Props, State> {
 
   renderBody() {
     return (
-      <DocumentTitle title={this.getTitle()}>
+      <SentryDocumentTitle noSuffix title={this.getTitle()}>
         <OrganizationContext.Provider value={this.state.organization}>
           <div className="app">
             {this.state.hooks}
@@ -335,7 +332,7 @@ class OrganizationContextContainer extends React.Component<Props, State> {
             {this.props.children}
           </div>
         </OrganizationContext.Provider>
-      </DocumentTitle>
+      </SentryDocumentTitle>
     );
   }
 

static/app/views/organizationGroupDetails/groupDetails.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import DocumentTitle from 'react-document-title';
 import {browserHistory, RouteComponentProps} from 'react-router';
 import * as Sentry from '@sentry/react';
 import PropTypes from 'prop-types';
@@ -9,6 +8,7 @@ import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import GlobalSelectionHeader from 'sentry/components/organizations/globalSelectionHeader';
 import MissingProjectMembership from 'sentry/components/projects/missingProjectMembership';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import SentryTypes from 'sentry/sentryTypes';
 import GroupStore from 'sentry/stores/groupStore';
@@ -547,7 +547,7 @@ class GroupDetails extends React.Component<Props, State> {
     const {project} = this.state;
 
     return (
-      <DocumentTitle title={this.getTitle()}>
+      <SentryDocumentTitle noSuffix title={this.getTitle()}>
         <GlobalSelectionHeader
           skipLoadLastUsed
           forceProject={project}
@@ -559,7 +559,7 @@ class GroupDetails extends React.Component<Props, State> {
         >
           <PageContent>{this.renderPageContent()}</PageContent>
         </GlobalSelectionHeader>
-      </DocumentTitle>
+      </SentryDocumentTitle>
     );
   }
 }

static/app/views/permissionDenied.tsx

@@ -1,10 +1,10 @@
 import {Component} from 'react';
-import DocumentTitle from 'react-document-title';
 import {withRouter, WithRouterProps} from 'react-router';
 import * as Sentry from '@sentry/react';
 
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingError from 'sentry/components/loadingError';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import {PageContent} from 'sentry/styles/organization';
 import {Organization, Project} from 'sentry/types';
@@ -36,7 +36,7 @@ class PermissionDenied extends Component<Props> {
 
   render() {
     return (
-      <DocumentTitle title={t('Permission Denied')}>
+      <SentryDocumentTitle title={t('Permission Denied')}>
         <PageContent>
           <LoadingError
             message={tct(
@@ -50,7 +50,7 @@ class PermissionDenied extends Component<Props> {
             )}
           />
         </PageContent>
-      </DocumentTitle>
+      </SentryDocumentTitle>
     );
   }
 }

static/app/views/projectInstall/newProject.tsx

@@ -1,18 +1,19 @@
-import DocumentTitle from 'react-document-title';
 import styled from '@emotion/styled';
 
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import space from 'sentry/styles/space';
 import CreateProject from 'sentry/views/projectInstall/createProject';
 
 const NewProject = () => (
-  <Container>
-    <div className="container">
-      <Content>
-        <DocumentTitle title="Sentry" />
-        <CreateProject />
-      </Content>
-    </div>
-  </Container>
+  <SentryDocumentTitle>
+    <Container>
+      <div className="container">
+        <Content>
+          <CreateProject />
+        </Content>
+      </div>
+    </Container>
+  </SentryDocumentTitle>
 );
 
 const Container = styled('div')`