Chore/request upgrade plan modal (#40889)

* init request upgrade plan modal

* Consolidate UpgradeToPro components across UI + use UpgradePlanButton, UpgradePlanButton determines whether to show request upgrade CTA

* Allow to pass icon to Admonition

* Tiny fix on upgrade plan button CTA to consider addons

* Hook up upgrade request endpoint

* Update API types

* remove hardcode

* Add request upgrade CTA in plan side panel

* Fix disk compute

* Show request upgrade button for change to large compute

* Nit
This commit is contained in:
Joshen Lim
2025-12-04 16:02:01 +08:00
committed by GitHub
parent 4a93272682
commit de50740b04
31 changed files with 708 additions and 412 deletions

View File

@@ -9,7 +9,7 @@ import {
ScaffoldSectionDetail,
} from 'components/layouts/Scaffold'
import NoPermission from 'components/ui/NoPermission'
import UpgradeToPro from 'components/ui/UpgradeToPro'
import { UpgradeToPro } from 'components/ui/UpgradeToPro'
import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
@@ -71,18 +71,20 @@ const GitHubSection = () => {
branch, keep your production branch in sync, and automatically create preview
branches for every pull request.
</p>
{promptProPlanUpgrade && (
{promptProPlanUpgrade ? (
<div className="mb-6">
<UpgradeToPro
source="github-integration"
featureProposition="use GitHub integrations"
primaryText="Upgrade to unlock GitHub integration"
secondaryText="Connect your GitHub repository to automatically sync preview branches and deploy changes."
source="github-integration"
/>
</div>
) : (
<div className={cn(promptProPlanUpgrade && 'opacity-25 pointer-events-none')}>
<GitHubIntegrationConnectionForm connection={existingConnection} />
</div>
)}
<div className={cn(promptProPlanUpgrade && 'opacity-25 pointer-events-none')}>
<GitHubIntegrationConnectionForm connection={existingConnection} />
</div>
</div>
</div>
)}