fix(profiling) add new hook for table layout (#47651)

Add a new hook that will alter the onboarding panel if user is on AM1 or
MMX plans. We will display different text + upgrade plan instead of
setup profiling.

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

@@ -7,3 +7,7 @@ export const ProfilingBetaAlertBanner = HookOrDefault({
 export const ProfilingUpgradeButton = HookOrDefault({
   hookName: 'component:profiling-upgrade-plan-button',
 });
+
+export const ProfilingAM1OrMMXUpgrade = HookOrDefault({
+  hookName: 'component:profiling-am1-or-mmx-upgrade',
+});

static/app/types/hooks.tsx

@@ -103,6 +103,11 @@ type ProfilingUpgradePlanButtonProps = ButtonProps & {
   organization: Organization;
 };
 
+type ProfilingAM1OrMMXUpgrade = {
+  fallback: React.ReactNode;
+  organization: Organization;
+};
+
 type SetUpSdkDocProps = {
   location: Location;
   organization: Organization;
@@ -157,6 +162,7 @@ export type ComponentHooks = {
   'component:issue-priority-feedback': () => React.ComponentType<QualitativeIssueFeedbackProps>;
   'component:member-list-header': () => React.ComponentType<MemberListHeaderProps>;
   'component:org-stats-banner': () => React.ComponentType<DashboardHeadersProps>;
+  'component:profiling-am1-or-mmx-upgrade': () => React.ComponentType<ProfilingAM1OrMMXUpgrade>;
   'component:profiling-billing-banner': () => React.ComponentType<ProfilingBetaAlertBannerProps>;
   'component:profiling-upgrade-plan-button': () => React.ComponentType<ProfilingUpgradePlanButtonProps>;
   'component:replay-beta-grace-period-alert': () => React.ComponentType<ReplayGracePeriodAlertProps>;

static/app/views/profiling/content.tsx

@@ -16,6 +16,7 @@ import PageFiltersContainer from 'sentry/components/organizations/pageFilters/co
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import Pagination from 'sentry/components/pagination';
 import {
+  ProfilingAM1OrMMXUpgrade,
   ProfilingBetaAlertBanner,
   ProfilingUpgradeButton,
 } from 'sentry/components/profiling/billing/alerts';
@@ -188,12 +189,12 @@ function ProfilingContent({location}: ProfilingContentProps) {
                     organization={organization}
                     size="sm"
                     fallback={
-                      <Button onClick={onSetupProfilingClick} priority="primary">
+                      <Button onClick={onSetupProfilingClick} size="sm">
                         {t('Set Up Profiling')}
                       </Button>
                     }
                   >
-                    {t('Upgrade plan')}
+                    {t('Update plan')}
                   </ProfilingUpgradeButton>
                 ) : (
                   <Button size="sm" onClick={onSetupProfilingClick}>
@@ -251,8 +252,25 @@ function ProfilingContent({location}: ProfilingContentProps) {
                 )}
               </ActionBar>
               {shouldShowProfilingOnboardingPanel ? (
-                <ProfilingOnboardingPanel>
-                  {isProfilingGA ? (
+                isProfilingGA ? (
+                  // If user is on m2, show default
+                  <ProfilingOnboardingPanel
+                    content={
+                      <ProfilingAM1OrMMXUpgrade
+                        organization={organization}
+                        fallback={
+                          <Fragment>
+                            <h3>{t('Function level insights')}</h3>
+                            <p>
+                              {t(
+                                'Discover slow-to-execute or resource intensive functions within your application'
+                              )}
+                            </p>
+                          </Fragment>
+                        }
+                      />
+                    }
+                  >
                     <ProfilingUpgradeButton
                       organization={organization}
                       priority="primary"
@@ -262,17 +280,23 @@ function ProfilingContent({location}: ProfilingContentProps) {
                         </Button>
                       }
                     >
-                      {t('Upgrade plan')}
+                      {t('Update plan')}
                     </ProfilingUpgradeButton>
-                  ) : (
+                    <Button href="https://docs.sentry.io/product/profiling/" external>
+                      {t('Read Docs')}
+                    </Button>
+                  </ProfilingOnboardingPanel>
+                ) : (
+                  // show previous state
+                  <ProfilingOnboardingPanel>
                     <Button onClick={onSetupProfilingClick} priority="primary">
                       {t('Set Up Profiling')}
                     </Button>
-                  )}
-                  <Button href="https://docs.sentry.io/product/profiling/" external>
-                    {t('Read Docs')}
-                  </Button>
-                </ProfilingOnboardingPanel>
+                    <Button href="https://docs.sentry.io/product/profiling/" external>
+                      {t('Read Docs')}
+                    </Button>
+                  </ProfilingOnboardingPanel>
+                )
               ) : (
                 <Fragment>
                   <PanelsGrid>

static/app/views/profiling/profilingOnboardingPanel.tsx

@@ -1,3 +1,4 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import emptyStateImg from 'sentry-images/spot/performance-empty-state.svg';
@@ -8,17 +9,24 @@ import {t} from 'sentry/locale';
 
 interface ProfilingOnboardingPanelProps {
   children: React.ReactNode;
+  content?: React.ReactNode;
 }
 
 export function ProfilingOnboardingPanel(props: ProfilingOnboardingPanelProps) {
   return (
     <OnboardingPanel image={<HeroImage src={emptyStateImg} />}>
-      <h3>{t('Function level insights')}</h3>
-      <p>
-        {t(
-          'Discover slow-to-execute or resource intensive functions within your application'
-        )}
-      </p>
+      {props.content ? (
+        props.content
+      ) : (
+        <Fragment>
+          <h3>{t('Function level insights')}</h3>
+          <p>
+            {t(
+              'Discover slow-to-execute or resource intensive functions within your application'
+            )}
+          </p>
+        </Fragment>
+      )}
       <ButtonList gap={1}>{props.children}</ButtonList>
     </OnboardingPanel>
   );