feat(crons): Add hook for banner that can appear at the top of the crons page (#62758)

static/app/types/hooks.tsx

@@ -110,6 +110,10 @@ type ProfilingAM1OrMMXUpgradeProps = {
   organization: Organization;
 };
 
+type CronsBillingBannerProps = {
+  organization: Organization;
+};
+
 type ProductSelectionAvailabilityProps = Pick<
   ProductSelectionProps,
   'lazyLoader' | 'skipLazyLoader' | 'platform' | 'withBottomMargin'
@@ -153,6 +157,7 @@ export type ComponentHooks = {
   'component:codecov-integration-settings-link': () => React.ComponentType<CodecovLinkProps>;
   'component:codecov-integration-stacktrace-link': () => React.ComponentType<CodecovLinkProps>;
   'component:confirm-account-close': () => React.ComponentType<AttemptCloseAttemptProps>;
+  'component:crons-list-page-header': () => React.ComponentType<CronsBillingBannerProps>;
   'component:dashboards-header': () => React.ComponentType<DashboardHeadersProps>;
   'component:disabled-app-store-connect-multiple': () => React.ComponentType<DisabledAppStoreConnectMultiple>;
   'component:disabled-custom-symbol-sources': () => React.ComponentType<DisabledCustomSymbolSources>;

static/app/views/monitors/overview.tsx

@@ -8,6 +8,7 @@ import Alert from 'sentry/components/alert';
 import ButtonBar from 'sentry/components/buttonBar';
 import FeatureBadge from 'sentry/components/featureBadge';
 import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
+import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import OnboardingPanel from 'sentry/components/onboardingPanel';
@@ -52,6 +53,10 @@ function DisabledMonitorCreationPanel() {
   );
 }
 
+const CronsListPageHeader = HookOrDefault({
+  hookName: 'component:crons-list-page-header',
+});
+
 export default function Monitors() {
   const organization = useOrganization();
   const router = useRouter();
@@ -88,6 +93,7 @@ export default function Monitors() {
 
   return (
     <SentryDocumentTitle title={`Crons — ${organization.slug}`}>
+      <CronsListPageHeader organization={organization} />
       <Layout.Page>
         <Layout.Header>
           <Layout.HeaderContent>