plg(feat): Make page headers the same style (#63380)

**Note:** This PR also makes sure that we use `CodyProRoutes` everywhere
for URLs.

Author: vdavid

client/web/src/cody/chat/CodyChatPage.tsx

@@ -42,6 +42,7 @@ import { PageTitle } from '../../components/PageTitle'
 import { useFeatureFlag } from '../../featureFlags/useFeatureFlag'
 import type { SourcegraphContext } from '../../jscontext'
 import { EventName } from '../../util/constants'
+import { CodyProRoutes } from '../codyProRoutes'
 import { ChatUI } from '../components/ChatUI'
 import { CodyMarketingPage } from '../components/CodyMarketingPage'
 import { HistoryList } from '../components/HistoryList'
@@ -160,7 +161,7 @@ export const CodyChatPage: React.FunctionComponent<CodyChatPageProps> = ({
         )
     }
 
-    const codyDashboardLink = isSourcegraphDotCom ? '/cody/manage' : '/cody'
+    const codyDashboardLink = isSourcegraphDotCom ? CodyProRoutes.Manage : '/cody'
 
     return (
         <Page className={classNames('d-flex flex-column', styles.page)}>
@@ -287,7 +288,7 @@ export const CodyChatPage: React.FunctionComponent<CodyChatPageProps> = ({
                             </Text>
                             <div className="mb-2">
                                 <Link
-                                    to="/cody/manage"
+                                    to={CodyProRoutes.Manage}
                                     className={classNames(
                                         'd-inline-flex align-items-center text-merged',
                                         styles.ctaLink

client/web/src/cody/management/CodyManagementPage.tsx

@@ -18,6 +18,7 @@ import {
     type UserCodyUsageVariables,
     CodySubscriptionPlan,
 } from '../../graphql-operations'
+import { CodyProRoutes } from '../codyProRoutes'
 import { CodyAlert } from '../components/CodyAlert'
 import { ProIcon } from '../components/CodyIcon'
 import { PageHeaderIcon } from '../components/PageHeaderIcon'
@@ -85,7 +86,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
 
     useEffect(() => {
         if (!!data && !data?.currentUser) {
-            navigate('/sign-in?returnTo=/cody/manage')
+            navigate(`/sign-in?returnTo=${CodyProRoutes.Manage}`)
         }
     }, [data, navigate])
 
@@ -95,7 +96,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
             ? subscriptionSummaryQueryResult.data.teamMaxMembers >
               subscriptionSummaryQueryResult.data.teamCurrentMembers
             : false
-        const targetUrl = hasFreeSeats ? '/cody/team/manage' : '/cody/manage/subscription/new?addSeats=1'
+        const targetUrl = hasFreeSeats ? CodyProRoutes.ManageTeam : `${CodyProRoutes.NewProSubscription}?addSeats=1`
         const label = isSoloUser || hasFreeSeats ? 'Invite co-workers' : 'Add seats'
 
         if (!subscriptionSummaryQueryResult?.data) {
@@ -141,13 +142,12 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                     </CodyAlert>
                 )}
                 <PageHeader
-                    className="mb-4 mt-4"
+                    className="my-4 d-inline-flex align-items-center"
                     actions={isAdmin && <div className="d-flex">{getTeamInviteButton()}</div>}
                 >
-                    <PageHeader.Heading as="h2" styleAs="h1">
-                        <div className="d-inline-flex align-items-center">
-                            <PageHeaderIcon className="mr-2" name="dashboard" /> Dashboard
-                        </div>
+                    <PageHeader.Heading as="h1" className="text-3xl font-medium">
+                        <PageHeaderIcon name="dashboard" className="mr-3" />
+                        <Text as="span">Dashboard</Text>
                     </PageHeader.Heading>
                 </PageHeader>
 
@@ -170,7 +170,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                                 ) : (
                                     <span>
                                         You are on the Free tier.{' '}
-                                        <Link to="/cody/subscription">Upgrade to the Pro tier.</Link>
+                                        <Link to={CodyProRoutes.Subscription}>Upgrade to the Pro tier.</Link>
                                     </span>
                                 )}
                             </Text>
@@ -225,7 +225,7 @@ const UpgradeToProBanner: React.FunctionComponent<{
                 </ul>
             </div>
             <div>
-                <ButtonLink to="/cody/subscription" variant="primary" size="sm" onClick={onClick}>
+                <ButtonLink to={CodyProRoutes.Subscription} variant="primary" size="sm" onClick={onClick}>
                     <ProIcon className="mr-1" />
                     Upgrade now
                 </ButtonLink>

client/web/src/cody/management/subscription/manage/CodySubscriptionManagePage.tsx

@@ -69,6 +69,14 @@ const AuthenticatedCodySubscriptionManagePage: React.FC<Props> = ({ telemetryRec
 
     return (
         <Page className="d-flex flex-column">
+            <PageTitle title="Manage subscription" />
+            <PageHeader className="my-4 d-inline-flex align-items-center">
+                <PageHeader.Heading as="h1" className="text-3xl font-medium">
+                    <PageHeaderIcon name="cody-logo" className="mr-3" />
+                    <Text as="span">Manage subscription</Text>
+                </PageHeader.Heading>
+            </PageHeader>
+
             <PageContent />
         </Page>
     )
@@ -92,14 +100,6 @@ const PageContent: React.FC = () => {
 
     return (
         <>
-            <PageTitle title="Manage Subscription" />
-            <PageHeader className="mt-4">
-                <PageHeader.Heading as="h2" styleAs="h1" className="mb-4 d-flex align-items-center">
-                    <PageHeaderIcon name="cody-logo" className="mr-2" />
-                    <Text as="span">Manage subscription</Text>
-                </PageHeader.Heading>
-            </PageHeader>
-
             <Card className={classNames('p-4', styles.card)}>
                 <SubscriptionDetails subscription={subscription} />
 

client/web/src/cody/management/subscription/new/CodyProCheckoutForm.tsx

@@ -25,6 +25,7 @@ import {
     CollapsePanel,
 } from '@sourcegraph/wildcard'
 
+import { CodyProRoutes } from '../../../codyProRoutes'
 import { CodyAlert } from '../../../components/CodyAlert'
 import {
     useCreateTeam,
@@ -230,7 +231,7 @@ export const CodyProCheckoutForm: React.FunctionComponent<CodyProCheckoutFormPro
                     creditCardToken: token,
                 })
 
-                navigate('/cody/manage?welcome=1')
+                navigate(`${CodyProRoutes.Manage}?welcome=1`)
 
                 setSubmitting(false)
             } catch (error) {
@@ -264,7 +265,7 @@ export const CodyProCheckoutForm: React.FunctionComponent<CodyProCheckoutFormPro
                 return
             }
 
-            navigate('/cody/team/manage')
+            navigate(CodyProRoutes.ManageTeam)
 
             setSubmitting(false)
         },

client/web/src/cody/management/subscription/new/NewCodyProSubscriptionPage.tsx

@@ -11,7 +11,7 @@ import { Navigate, useSearchParams } from 'react-router-dom'
 
 import { useQuery } from '@sourcegraph/http-client'
 import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
-import { PageHeader, LoadingSpinner, Alert, logger } from '@sourcegraph/wildcard'
+import { PageHeader, Text, LoadingSpinner, Alert, logger } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../../../../auth'
 import { withAuthenticatedUser } from '../../../../auth/withAuthenticatedUser'
@@ -89,19 +89,17 @@ const AuthenticatedNewCodyProSubscriptionPage: FunctionComponent<NewCodyProSubsc
     const PageWithHeader = ({ children }: { children: React.ReactNode }): React.ReactElement => (
         <Page className={classNames('d-flex flex-column', styles.page)}>
             <PageTitle title={addSeats ? 'Add seats' : 'New subscription'} />
-            <PageHeader className="my-4">
-                <PageHeader.Heading as="h1" className={styles.h1}>
-                    <div className="d-inline-flex align-items-center">
-                        <PageHeaderIcon
-                            name={isTeam ? 'mdi-account-multiple-plus-gradient' : 'cody-logo'}
-                            className="mr-3"
-                        />{' '}
-                        {isTeam ? 'Give your team Cody Pro' : 'Upgrade to Cody Pro'}
-                    </div>
+            <PageHeader className="my-4 d-inline-flex align-items-center">
+                <PageHeader.Heading as="h1" className="text-3xl font-medium">
+                    <PageHeaderIcon
+                        name={isTeam ? 'mdi-account-multiple-plus-gradient' : 'cody-logo'}
+                        className="mr-3"
+                    />{' '}
+                    <Text as="span">{isTeam ? 'Give your team Cody Pro' : 'Upgrade to Cody Pro'}</Text>
                 </PageHeader.Heading>
-
-                {children}
             </PageHeader>
+
+            {children}
         </Page>
     )
 

client/web/src/cody/subscription/CodySubscriptionPage.tsx

@@ -25,8 +25,9 @@ import { Page } from '../../components/Page'
 import { PageTitle } from '../../components/PageTitle'
 import { CodySubscriptionPlan } from '../../graphql-operations'
 import type { UserCodyPlanResult, UserCodyPlanVariables } from '../../graphql-operations'
-import { CodyColorIcon } from '../chat/CodyPageIcon'
+import { CodyProRoutes } from '../codyProRoutes'
 import { ProIcon } from '../components/CodyIcon'
+import { PageHeaderIcon } from '../components/PageHeaderIcon'
 import { isCodyEnabled } from '../isCodyEnabled'
 import { getManageSubscriptionPageURL, isEmbeddedCodyProUIEnabled, manageSubscriptionRedirectURL } from '../util'
 
@@ -56,7 +57,7 @@ export const CodySubscriptionPage: React.FunctionComponent<CodySubscriptionPageP
 
     useEffect(() => {
         if (!!data && !data?.currentUser) {
-            navigate('/sign-in?returnTo=/cody/subscription')
+            navigate(`/sign-in?returnTo=${CodyProRoutes.Subscription}`)
         }
     }, [data, navigate])
 
@@ -73,9 +74,9 @@ export const CodySubscriptionPage: React.FunctionComponent<CodySubscriptionPageP
     return (
         <>
             <Page className={classNames('d-flex flex-column')}>
-                <PageTitle title="Cody Subscription" />
+                <PageTitle title="Cody subscription" />
                 <PageHeader
-                    className="mb-4"
+                    className="my-4 d-inline-flex align-items-center"
                     actions={
                         isProUser && (
                             <ButtonLink
@@ -93,13 +94,12 @@ export const CodySubscriptionPage: React.FunctionComponent<CodySubscriptionPageP
                         )
                     }
                 >
-                    <PageHeader.Heading as="h2" styleAs="h1">
-                        <div className="d-inline-flex align-items-center">
-                            <CodyColorIcon width={40} height={40} className="mr-2" /> Subscription plans
-                        </div>
+                    <PageHeader.Heading as="h1" className="text-3xl font-medium">
+                        <PageHeaderIcon name="cody-logo" className="mr-3" />
+                        <Text as="span">Subscription plans</Text>
                     </PageHeader.Heading>
                 </PageHeader>
-                <Link to="/cody/manage" className="my-4">
+                <Link to={CodyProRoutes.Manage}>
                     <Icon className="mr-1 text-link" svgPath={mdiArrowLeft} aria-hidden={true} />
                     Back to Cody Dashboard
                 </Link>
@@ -227,7 +227,7 @@ export const CodySubscriptionPage: React.FunctionComponent<CodySubscriptionPageP
                                                 })
                                                 // We add ?seats=2 to the URL to initiate creating a team.
                                                 const url = new URL(
-                                                    '/cody/manage/subscription/new',
+                                                    CodyProRoutes.NewProSubscription,
                                                     window.location.origin
                                                 )
                                                 url.searchParams.append('seats', '2')
@@ -239,15 +239,15 @@ export const CodySubscriptionPage: React.FunctionComponent<CodySubscriptionPageP
                                         </Button>
                                         <Link
                                             className="text-center"
-                                            to="/cody/manage/subscription/new"
+                                            to={CodyProRoutes.NewProSubscription}
                                             target="_blank"
                                             rel="noreferrer noopener"
                                             onClick={event => {
                                                 event.preventDefault()
                                                 telemetryRecorder.recordEvent('cody.planSelection', 'click', {
                                                     metadata: { tier: 1, team: 0 },
                                                 })
-                                                navigate('/cody/manage/subscription/new')
+                                                navigate(CodyProRoutes.NewProSubscription)
                                             }}
                                         >
                                             Upgrade yourself to Pro

client/web/src/cody/team/CodyManageTeamPage.tsx

@@ -53,7 +53,7 @@ const AuthenticatedCodyManageTeamPage: React.FunctionComponent<CodyManageTeamPag
 
     useEffect(() => {
         if (subscriptionQueryResult.data?.subscriptionStatus === 'canceled') {
-            navigate('/cody/subscription')
+            navigate(CodyProRoutes.Subscription)
         }
     }, [navigate, subscriptionQueryResult.data])
 
@@ -67,7 +67,7 @@ const AuthenticatedCodyManageTeamPage: React.FunctionComponent<CodyManageTeamPag
                         isAdmin && (
                             <div className="d-flex">
                                 <Link
-                                    to="/cody/manage"
+                                    to={CodyProRoutes.Manage}
                                     className="d-inline-flex align-items-center mr-3"
                                     onClick={() =>
                                         telemetryRecorder.recordEvent('cody.team.manage.subscription', 'click', {

client/web/src/cody/widgets/CodyRecipesWidget.tsx

@@ -7,6 +7,7 @@ import type { TelemetryRecorder } from '@sourcegraph/shared/src/telemetry'
 import { EVENT_LOGGER } from '@sourcegraph/shared/src/telemetry/web/eventLogger'
 
 import { EventName } from '../../util/constants'
+import { CodyProRoutes } from '../codyProRoutes'
 import type { CodeMirrorEditor } from '../components/CodeMirrorEditor'
 import type { useCodySidebar } from '../sidebar/Provider'
 
@@ -90,7 +91,11 @@ export const CodyRecipesWidget: React.FC<{ editor?: CodeMirrorEditor; telemetryR
                     onClick={() => void executeRecipe('find-code-smells', { scope: { editor } })}
                     disabled={isMessageInProgress}
                 />
-                <RecipeAction title="Get Cody in your editor" to="/cody/manage" disabled={isMessageInProgress} />
+                <RecipeAction
+                    title="Get Cody in your editor"
+                    to={CodyProRoutes.Manage}
+                    disabled={isMessageInProgress}
+                />
             </Recipe>
         </Recipes>
     )

client/web/src/get-cody/GetCodyPage.tsx

@@ -4,6 +4,8 @@ import { useNavigate, useLocation } from 'react-router-dom'
 
 import type { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 
+import { CodyProRoutes } from '../cody/codyProRoutes'
+
 interface GetCodyPageProps {
     authenticatedUser: AuthenticatedUser | null
 }
@@ -14,7 +16,7 @@ export const GetCodyPage: React.FunctionComponent<GetCodyPageProps> = ({ authent
     const [search] = useState(location.search)
 
     if (authenticatedUser) {
-        navigate(`/cody/manage${search || ''}`)
+        navigate(`${CodyProRoutes.Manage}${search || ''}`)
     } else {
         window.location.href = '/cody'
     }