fix(profiling): Empty state fallbacks (#60276)

The fallbacks here weren't correctly setup so it renders nothing in the
case of a fallback.

Closes #59972

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

@@ -1,4 +1,8 @@
+import {Fragment} from 'react';
+
+import {Button} from 'sentry/components/button';
 import HookOrDefault from 'sentry/components/hookOrDefault';
+import {t} from 'sentry/locale';
 
 export const ProfilingBetaAlertBanner = HookOrDefault({
   hookName: 'component:profiling-billing-banner',
@@ -6,8 +10,19 @@ export const ProfilingBetaAlertBanner = HookOrDefault({
 
 export const ProfilingUpgradeButton = HookOrDefault({
   hookName: 'component:profiling-upgrade-plan-button',
+  defaultComponent: ({children, ...props}) => <Button {...props}>{children}</Button>,
 });
 
 export const ProfilingAM1OrMMXUpgrade = HookOrDefault({
   hookName: 'component:profiling-am1-or-mmx-upgrade',
+  defaultComponent: () => (
+    <Fragment>
+      <h3>{t('Function level insights')}</h3>
+      <p>
+        {t(
+          'Discover slow-to-execute or resource intensive functions within your application'
+        )}
+      </p>
+    </Fragment>
+  ),
 });

static/app/types/hooks.tsx

@@ -104,7 +104,7 @@ type ProfilingUpgradePlanButtonProps = ButtonProps & {
   organization: Organization;
 };
 
-type ProfilingAM1OrMMXUpgrade = {
+type ProfilingAM1OrMMXUpgradeProps = {
   fallback: React.ReactNode;
   organization: Organization;
 };
@@ -168,7 +168,7 @@ export type ComponentHooks = {
   'component:org-stats-banner': () => React.ComponentType<DashboardHeadersProps>;
   'component:product-selection-availability': () => React.ComponentType<ProductSelectionAvailabilityProps>;
   'component:product-unavailable-cta': () => React.ComponentType<ProductUnavailableCTAProps>;
-  'component:profiling-am1-or-mmx-upgrade': () => React.ComponentType<ProfilingAM1OrMMXUpgrade>;
+  'component:profiling-am1-or-mmx-upgrade': () => React.ComponentType<ProfilingAM1OrMMXUpgradeProps>;
   'component:profiling-billing-banner': () => React.ComponentType<ProfilingBetaAlertBannerProps>;
   'component:profiling-upgrade-plan-button': () => React.ComponentType<ProfilingUpgradePlanButtonProps>;
   'component:replay-feedback-button': () => React.ComponentType<ReplayFeedbackButton>;

static/app/views/profiling/content.tsx

@@ -234,13 +234,14 @@ function ProfilingContent({location}: ProfilingContentProps) {
                   <ProfilingUpgradeButton
                     organization={organization}
                     priority="primary"
+                    onClick={onSetupProfilingClick}
                     fallback={
                       <Button onClick={onSetupProfilingClick} priority="primary">
                         {t('Set Up Profiling')}
                       </Button>
                     }
                   >
-                    {t('Update plan')}
+                    {t('Set Up Profiling')}
                   </ProfilingUpgradeButton>
                   <Button href="https://docs.sentry.io/product/profiling/" external>
                     {t('Read Docs')}