feat(profiling): use upgrade button if available (#47169)

Add a toggle component which will display proper upgrade button or
fallback setup button once GA is ready

static/app/components/profiling/billing/alerts.tsx

@@ -3,3 +3,7 @@ import HookOrDefault from 'sentry/components/hookOrDefault';
 export const ProfilingBetaAlertBanner = HookOrDefault({
   hookName: 'component:profiling-billing-banner',
 });
+
+export const ProfilingUpgradeButton = HookOrDefault({
+  hookName: 'component:profiling-upgrade-plan-button',
+});

static/app/types/hooks.tsx

@@ -3,7 +3,7 @@ import {Location} from 'history';
 
 import type {ChildrenRenderFn} from 'sentry/components/acl/feature';
 import type {Guide} from 'sentry/components/assistant/types';
-import {ButtonProps} from 'sentry/components/button';
+import type {ButtonProps} from 'sentry/components/button';
 import type DateRange from 'sentry/components/organizations/timeRangeSelector/dateRange';
 import type SelectorItems from 'sentry/components/organizations/timeRangeSelector/selectorItems';
 import type SidebarItem from 'sentry/components/sidebar/sidebarItem';
@@ -90,6 +90,12 @@ type ProfilingBetaAlertBannerProps = {
   organization: Organization;
 };
 
+type ProfilingUpgradePlanButtonProps = ButtonProps & {
+  children: React.ReactNode;
+  fallback: React.ReactNode;
+  organization: Organization;
+};
+
 type SetUpSdkDocProps = {
   location: Location;
   organization: Organization;
@@ -145,6 +151,7 @@ export type ComponentHooks = {
   'component:member-list-header': () => React.ComponentType<MemberListHeaderProps>;
   'component:org-stats-banner': () => React.ComponentType<DashboardHeadersProps>;
   'component:profiling-billing-banner': () => React.ComponentType<ProfilingBetaAlertBannerProps>;
+  'component:profiling-upgrade-plan-button': () => React.ComponentType<ProfilingUpgradePlanButtonProps>;
   'component:replay-beta-grace-period-alert': () => React.ComponentType<ReplayGracePeriodAlertProps>;
   'component:replay-feedback-button': () => React.ComponentType<{}>;
   'component:replay-onboarding-alert': () => React.ComponentType<ReplayOnboardingAlertProps>;

static/app/views/profiling/content.tsx

@@ -15,7 +15,10 @@ import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import Pagination from 'sentry/components/pagination';
-import {ProfilingBetaAlertBanner} from 'sentry/components/profiling/billing/alerts';
+import {
+  ProfilingBetaAlertBanner,
+  ProfilingUpgradeButton,
+} from 'sentry/components/profiling/billing/alerts';
 import {ProfileEventsTable} from 'sentry/components/profiling/profileEventsTable';
 import ProjectPageFilter from 'sentry/components/projectPageFilter';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
@@ -177,9 +180,23 @@ function ProfilingContent({location}: ProfilingContentProps) {
             </Layout.HeaderContent>
             <Layout.HeaderActions>
               <ButtonBar gap={1}>
-                <Button size="sm" onClick={onSetupProfilingClick}>
-                  {t('Set Up Profiling')}
-                </Button>
+                {isProfilingGA ? (
+                  <ProfilingUpgradeButton
+                    organization={organization}
+                    size="sm"
+                    fallback={
+                      <Button onClick={onSetupProfilingClick} priority="primary">
+                        {t('Set Up Profiling')}
+                      </Button>
+                    }
+                  >
+                    {t('Upgrade plan')}
+                  </ProfilingUpgradeButton>
+                ) : (
+                  <Button size="sm" onClick={onSetupProfilingClick}>
+                    {t('Set Up Profiling')}
+                  </Button>
+                )}
                 <Button
                   size="sm"
                   priority="primary"
@@ -232,9 +249,23 @@ function ProfilingContent({location}: ProfilingContentProps) {
               </ActionBar>
               {shouldShowProfilingOnboardingPanel ? (
                 <ProfilingOnboardingPanel>
-                  <Button onClick={onSetupProfilingClick} priority="primary">
-                    {t('Set Up Profiling')}
-                  </Button>
+                  {isProfilingGA ? (
+                    <ProfilingUpgradeButton
+                      organization={organization}
+                      priority="primary"
+                      fallback={
+                        <Button onClick={onSetupProfilingClick} priority="primary">
+                          {t('Set Up Profiling')}
+                        </Button>
+                      }
+                    >
+                      {t('Upgrade plan')}
+                    </ProfilingUpgradeButton>
+                  ) : (
+                    <Button onClick={onSetupProfilingClick} priority="primary">
+                      {t('Set Up Profiling')}
+                    </Button>
+                  )}
                   <Button href="https://docs.sentry.io/product/profiling/" external>
                     {t('Read Docs')}
                   </Button>