artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 17:31:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
**Note:** This PR also makes sure that we use `CodyProRoutes` everywhere
for URLs.
This commit is contained in:
David Veszelovszki 2024-06-20 12:50:33 +02:00 committed by GitHub
parent 2a02d7c88b
commit 625e188512
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 56 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/web/src/cody/chat/CodyChatPage.tsx
View File

@ -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

18
client/web/src/cody/management/CodyManagementPage.tsx
View File

@ -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>

16
client/web/src/cody/management/subscription/manage/CodySubscriptionManagePage.tsx
View File

@ -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} />

5
client/web/src/cody/management/subscription/new/CodyProCheckoutForm.tsx
View File

@ -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)
},

22
client/web/src/cody/management/subscription/new/NewCodyProSubscriptionPage.tsx
View File

@ -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>
)

24
client/web/src/cody/subscription/CodySubscriptionPage.tsx
View File

@ -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,7 +239,7 @@ 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 => {
@ -247,7 +247,7 @@ export const CodySubscriptionPage: React.FunctionComponent<CodySubscriptionPageP
telemetryRecorder.recordEvent('cody.planSelection', 'click', {
metadata: { tier: 1, team: 0 },
})
navigate('/cody/manage/subscription/new')
navigate(CodyProRoutes.NewProSubscription)
}}
>
Upgrade yourself to Pro

4
client/web/src/cody/team/CodyManageTeamPage.tsx
View File

@ -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', {

7
client/web/src/cody/widgets/CodyRecipesWidget.tsx
View File

@ -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>
)

4
client/web/src/get-cody/GetCodyPage.tsx
View File

@ -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'
}