ref(layout): move title to page

Author: JonasBa

static/app/components/layouts/thirds.tsx

@@ -4,22 +4,28 @@ import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/core/layout';
 import {Tabs} from 'sentry/components/core/tabs';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import SentryDocumentTitle, {
+  type DocumentTitleOptions,
+} from 'sentry/components/sentryDocumentTitle';
 import {space} from 'sentry/styles/space';
 
 /**
  * Main container for a page.
  */
 interface PageProps {
   children: NonNullable<React.ReactNode>;
-  title: string | null;
+  title: string | DocumentTitleOptions | null;
   withPadding?: boolean;
 }
 
-export function Page(props: PageProps) {
+export const Page = styled((props: PageProps) => {
   return (
     <Fragment>
-      {props.title ? <SentryDocumentTitle title={props.title} /> : null}
+      {props.title === null ? null : typeof props.title === 'string' ? (
+        <SentryDocumentTitle title={props.title} />
+      ) : (
+        <SentryDocumentTitle {...props.title} />
+      )}
       <Flex
         direction="column"
         flex={1}
@@ -29,7 +35,7 @@ export function Page(props: PageProps) {
       </Flex>
     </Fragment>
   );
-}
+})``;
 
 /**
  * Header container for header content and header actions.

static/app/components/sentryDocumentTitle.tsx

@@ -1,74 +1,35 @@
 import {createContext, useContext, useEffect, useMemo} from 'react';
 
-type Props = {
-  children?: React.ReactNode;
-  /**
-   * Should the ` - Sentry` suffix be excluded?
-   */
-  noSuffix?: boolean;
-  /**
-   * The organization slug to show in the title
-   */
-  orgSlug?: string;
-  /**
-   * The project slug to show in the title.
-   */
-  projectSlug?: string;
-
-  /**
-   * This string will be shown at the very front of the title
-   */
-  title?: string;
-};
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 
 const DEFAULT_PAGE_TITLE = 'Sentry';
-
 const DocumentTitleContext = createContext(DEFAULT_PAGE_TITLE);
 
 export function useDocumentTitle() {
   return useContext(DocumentTitleContext);
 }
 
+interface SentryDocumentTitleProps extends DocumentTitleOptions {
+  children?: React.ReactNode;
+}
+
 /**
  * Assigns the document title. The deepest nested version of this title will be
  * the one which is assigned.
  */
-function SentryDocumentTitle({
-  title = '',
+export default function SentryDocumentTitle({
+  title,
   orgSlug,
   projectSlug,
   noSuffix,
   children,
-}: Props) {
+}: SentryDocumentTitleProps) {
   const parentTitle = useContext(DocumentTitleContext);
-
-  const pageTitle = useMemo(() => {
-    if (orgSlug && projectSlug) {
-      return `${title} — ${orgSlug} — ${projectSlug}`;
-    }
-
-    if (orgSlug) {
-      return `${title} — ${orgSlug}`;
-    }
-
-    if (projectSlug) {
-      return `${title} — ${projectSlug}`;
-    }
-
-    return title;
-  }, [orgSlug, projectSlug, title]);
-
-  const documentTitle = useMemo(() => {
-    if (noSuffix) {
-      return pageTitle;
-    }
-
-    if (pageTitle !== '') {
-      return `${pageTitle} — Sentry`;
-    }
-
-    return DEFAULT_PAGE_TITLE;
-  }, [noSuffix, pageTitle]);
+  const documentTitle = useMemo(
+    () => makeSentryDocumentTitle(title ?? '', orgSlug, projectSlug, noSuffix),
+    [orgSlug, projectSlug, title, noSuffix]
+  );
 
   // NOTE: We do this OUTSIDE of a use effect so that the update order is
   // correct, otherwsie the inner most SentryDocumentTitle will have its
@@ -87,4 +48,30 @@ function SentryDocumentTitle({
   return <DocumentTitleContext value={documentTitle}>{children}</DocumentTitleContext>;
 }
 
-export default SentryDocumentTitle;
+export interface DocumentTitleOptions {
+  title: string;
+  noSuffix?: boolean;
+  orgSlug?: Organization['slug'];
+  projectSlug?: Project['slug'];
+}
+
+export function makeSentryDocumentTitle(
+  title: string,
+  orgSlug?: string,
+  projectSlug?: string,
+  noSuffix?: boolean
+) {
+  if (orgSlug) {
+    if (projectSlug) {
+      return `${title} — ${orgSlug} — ${projectSlug}`;
+    }
+
+    return `${title} — ${orgSlug}`;
+  }
+
+  if (projectSlug) {
+    return `${title} — ${projectSlug}`;
+  }
+
+  return noSuffix ? title : `${title} — Sentry`;
+}

static/app/views/alerts/rules/metric/details/index.tsx

@@ -10,7 +10,6 @@ import {Alert} from 'sentry/components/core/alert';
 import {DateTime} from 'sentry/components/dateTime';
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import type {Organization} from 'sentry/types/organization';
@@ -246,7 +245,7 @@ class MetricAlertDetails extends Component<Props, State> {
     const {error} = this.state;
 
     return (
-      <Layout.Page withPadding>
+      <Layout.Page title={t('Alert Rule')} withPadding>
         <Alert.Container>
           <Alert type="error">
             {error?.status === 404
@@ -282,22 +281,23 @@ class MetricAlertDetails extends Component<Props, State> {
             <Alert type="warning">{warning}</Alert>
           </Alert.Container>
         )}
-        <SentryDocumentTitle title={rule?.name ?? ''} />
 
-        <DetailsHeader
-          hasMetricRuleDetailsError={hasError}
-          organization={organization}
-          rule={rule}
-          project={project}
-          onSnooze={this.onSnooze}
-        />
-        <MetricDetailsBody
-          rule={rule}
-          project={project}
-          incidents={incidents}
-          timePeriod={timePeriod}
-          selectedIncident={selectedIncident}
-        />
+        <Layout.Page title={rule?.name ?? t('Alert Rule')} withPadding>
+          <DetailsHeader
+            hasMetricRuleDetailsError={hasError}
+            organization={organization}
+            rule={rule}
+            project={project}
+            onSnooze={this.onSnooze}
+          />
+          <MetricDetailsBody
+            rule={rule}
+            project={project}
+            incidents={incidents}
+            timePeriod={timePeriod}
+            selectedIncident={selectedIncident}
+          />
+        </Layout.Page>
       </PageFiltersContainer>
     );
   }

static/app/views/alerts/rules/uptime/details.tsx

@@ -14,7 +14,6 @@ import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconEdit} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -114,8 +113,7 @@ export default function UptimeAlertDetails({params}: UptimeAlertDetailsProps) {
   );
 
   return (
-    <Layout.Page>
-      <SentryDocumentTitle title={`${uptimeRule.name} — Alerts`} />
+    <Layout.Page title={`${uptimeRule.name} — Alerts`}>
       <Layout.Header>
         <Layout.HeaderContent>
           <Breadcrumbs

static/app/views/alerts/wizard/index.tsx

@@ -12,7 +12,6 @@ import ListItem from 'sentry/components/list/listItem';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
@@ -147,9 +146,7 @@ function AlertWizard({organization, params, location, projectId}: AlertWizardPro
 
   const panelContent = AlertWizardPanelContent[alertOption];
   return (
-    <Layout.Page>
-      <SentryDocumentTitle title={t('Alert Creation Wizard')} projectSlug={projectSlug} />
-
+    <Layout.Page title={t('Alert Creation Wizard')}>
       <Layout.Header>
         <StyledHeaderContent>
           <BuilderBreadCrumbs

static/app/views/automations/edit.tsx

@@ -9,7 +9,6 @@ import type {OnSubmitCallback} from 'sentry/components/forms/types';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {FullHeightForm} from 'sentry/components/workflowEngine/form/fullHeightForm';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {useWorkflowEngineFeatureGate} from 'sentry/components/workflowEngine/useWorkflowEngineFeatureGate';
@@ -40,11 +39,6 @@ import {
   makeAutomationDetailsPathname,
 } from 'sentry/views/automations/pathnames';
 
-function AutomationDocumentTitle() {
-  const title = useFormField('name');
-  return <SentryDocumentTitle title={title ?? t('Edit Automation')} />;
-}
-
 function AutomationBreadcrumbs({automationId}: {automationId: string}) {
   const title = useFormField('name');
   const organization = useOrganization();
@@ -151,8 +145,7 @@ function AutomationEditForm({automation}: {automation: Automation}) {
       initialData={initialData}
       onSubmit={handleFormSubmit}
     >
-      <AutomationDocumentTitle />
-      <Layout.Page>
+      <Layout.Page title={useFormField('name') ?? t('Edit Automation')}>
         <StyledLayoutHeader>
           <Layout.HeaderContent>
             <AutomationBreadcrumbs automationId={params.automationId} />

static/app/views/automations/new-settings.tsx

@@ -8,7 +8,6 @@ import {Flex} from 'sentry/components/core/layout';
 import FormModel from 'sentry/components/forms/model';
 import type {OnSubmitCallback} from 'sentry/components/forms/types';
 import * as Layout from 'sentry/components/layouts/thirds';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {FullHeightForm} from 'sentry/components/workflowEngine/form/fullHeightForm';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {
@@ -38,15 +37,6 @@ import {
   makeAutomationDetailsPathname,
 } from 'sentry/views/automations/pathnames';
 
-function AutomationDocumentTitle() {
-  const title = useFormField('name');
-  return (
-    <SentryDocumentTitle
-      title={title ? t('%s - New Automation', title) : t('New Automation')}
-    />
-  );
-}
-
 function AutomationBreadcrumbs() {
   const title = useFormField('name');
   const organization = useOrganization();
@@ -74,6 +64,10 @@ export default function AutomationNewSettings() {
   const model = useMemo(() => new FormModel(), []);
   const {state, actions} = useAutomationBuilderReducer();
 
+  const formName = useFormField('name');
+
+  const formTitle = formName ? t('%s - New Automation', formName) : t('New Automation');
+
   const [automationBuilderErrors, setAutomationBuilderErrors] = useState<
     Record<string, string>
   >({});
@@ -122,8 +116,7 @@ export default function AutomationNewSettings() {
       onSubmit={handleSubmit}
       model={model}
     >
-      <AutomationDocumentTitle />
-      <Layout.Page>
+      <Layout.Page title={{title: formTitle}}>
         <StyledLayoutHeader>
           <Layout.HeaderContent>
             <AutomationBreadcrumbs />

static/app/views/automations/new.tsx

@@ -1,11 +1,10 @@
-import {useState} from 'react';
+import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import * as Layout from 'sentry/components/layouts/thirds';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {
   StickyFooter,
   StickyFooterLabel,
@@ -52,8 +51,8 @@ export default function AutomationNew() {
   });
 
   return (
-    <SentryDocumentTitle title={t('New Automation')} noSuffix>
-      <Layout.Page>
+    <Fragment>
+      <Layout.Page title={t('New Automation')}>
         <StyledLayoutHeader>
           <Layout.HeaderContent>
             <AutomationBreadcrumbs />
@@ -100,7 +99,7 @@ export default function AutomationNew() {
           </LinkButton>
         </Flex>
       </StickyFooter>
-    </SentryDocumentTitle>
+    </Fragment>
   );
 }
 

static/app/views/dashboards/create.tsx

@@ -27,7 +27,7 @@ function CreateDashboard(props: Props) {
   const [newWidget, setNewWidget] = useState<Widget | undefined>();
   function renderDisabled() {
     return (
-      <Layout.Page withPadding>
+      <Layout.Page title={t('Create Dashboard')} withPadding>
         <Alert.Container>
           <Alert type="warning" showIcon={false}>
             {t("You don't have access to this feature")}