ref(crons): Refactor out landing page onboarding panel (#55410)

No functional changes, just refactors this component out of
`monitors/overview.tsx` to make way for the new platform-based
onboarding changes.

static/app/views/monitors/components/cronsLandingPanel.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import onboardingImg from 'sentry-images/spot/onboarding-preview.svg';
+
+import {LinkButton} from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
+import OnboardingPanel from 'sentry/components/onboardingPanel';
+import {t} from 'sentry/locale';
+
+import {NewMonitorButton} from './newMonitorButton';
+
+export function CronsLandingPanel() {
+  return (
+    <OnboardingPanel image={<img src={onboardingImg} />}>
+      <h3>{t('Let Sentry monitor your recurring jobs')}</h3>
+      <p>
+        {t(
+          "We'll tell you if your recurring jobs are running on schedule, failing, or succeeding."
+        )}
+      </p>
+      <OnboardingActions gap={1}>
+        <NewMonitorButton>{t('Set up first cron monitor')}</NewMonitorButton>
+        <LinkButton href="https://docs.sentry.io/product/crons" external>
+          {t('Read docs')}
+        </LinkButton>
+      </OnboardingActions>
+    </OnboardingPanel>
+  );
+}
+
+const OnboardingActions = styled(ButtonBar)`
+  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
+`;

static/app/views/monitors/components/newMonitorButton.tsx

@@ -0,0 +1,21 @@
+import {ButtonProps, LinkButton} from 'sentry/components/button';
+import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+
+export function NewMonitorButton(props: ButtonProps) {
+  const organization = useOrganization();
+  const {selection} = usePageFilters();
+
+  return (
+    <LinkButton
+      to={{
+        pathname: `/organizations/${organization.slug}/crons/create/`,
+        query: {project: selection.projects},
+      }}
+      priority="primary"
+      {...props}
+    >
+      {props.children}
+    </LinkButton>
+  );
+}

static/app/views/monitors/overview.tsx

@@ -2,15 +2,11 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 import * as qs from 'query-string';
 
-import onboardingImg from 'sentry-images/spot/onboarding-preview.svg';
-
-import {Button, ButtonProps} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import FeatureBadge from 'sentry/components/featureBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import OnboardingPanel from 'sentry/components/onboardingPanel';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
@@ -26,32 +22,15 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import useOrganization from 'sentry/utils/useOrganization';
-import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
 
 import CronsFeedbackButton from './components/cronsFeedbackButton';
+import {CronsLandingPanel} from './components/cronsLandingPanel';
+import {NewMonitorButton} from './components/newMonitorButton';
 import {OverviewTimeline} from './components/overviewTimeline';
 import {Monitor} from './types';
 import {makeMonitorListQueryKey} from './utils';
 
-function NewMonitorButton(props: ButtonProps) {
-  const organization = useOrganization();
-  const {selection} = usePageFilters();
-
-  return (
-    <Button
-      to={{
-        pathname: `/organizations/${organization.slug}/crons/create/`,
-        query: {project: selection.projects},
-      }}
-      priority="primary"
-      {...props}
-    >
-      {props.children}
-    </Button>
-  );
-}
-
 export default function Monitors() {
   const organization = useOrganization();
   const router = useRouter();
@@ -125,20 +104,7 @@ export default function Monitors() {
                 {monitorListPageLinks && <Pagination pageLinks={monitorListPageLinks} />}
               </Fragment>
             ) : (
-              <OnboardingPanel image={<img src={onboardingImg} />}>
-                <h3>{t('Let Sentry monitor your recurring jobs')}</h3>
-                <p>
-                  {t(
-                    "We'll tell you if your recurring jobs are running on schedule, failing, or succeeding."
-                  )}
-                </p>
-                <OnboardingActions gap={1}>
-                  <NewMonitorButton>{t('Set up first cron monitor')}</NewMonitorButton>
-                  <Button href="https://docs.sentry.io/product/crons" external>
-                    {t('Read docs')}
-                  </Button>
-                </OnboardingActions>
-              </OnboardingPanel>
+              <CronsLandingPanel />
             )}
           </Layout.Main>
         </Layout.Body>
@@ -153,7 +119,3 @@ const Filters = styled('div')`
   gap: ${space(1.5)};
   margin-bottom: ${space(2)};
 `;
-
-const OnboardingActions = styled(ButtonBar)`
-  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
-`;