feat(crons): Hide 'Add Monitor' button on landing guide (#58047)

Suggestion from Vu
"Add Monitor" no longer shown in top right corner when in a guide page
as it distracts from the intended purpose of creating a monitor via
upsert or manually

Before:
<img width="1257" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/6fbd3d04-3834-49a7-a38d-8fc70a68f3fa">

After:
<img width="1265" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/2c0e6967-b3df-475f-b150-7d06833962f4">

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

@@ -91,11 +91,11 @@ const platformGuides: Record<SupportedPlatform, PlatformGuide[]> = {
   'java-spring-boot': [],
 };
 
-function isValidPlatform(platform?: string | null): platform is SupportedPlatform {
+export function isValidPlatform(platform?: string | null): platform is SupportedPlatform {
   return !!(platform && platform in platformGuides);
 }
 
-function isValidGuide(guide?: string): guide is GuideKey {
+export function isValidGuide(guide?: string): guide is GuideKey {
   return !!(guide && Object.values<string>(GuideKey).includes(guide));
 }
 

static/app/views/monitors/overview.tsx

@@ -25,7 +25,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 
 import CronsFeedbackButton from './components/cronsFeedbackButton';
-import {CronsLandingPanel} from './components/cronsLandingPanel';
+import {
+  CronsLandingPanel,
+  isValidGuide,
+  isValidPlatform,
+} from './components/cronsLandingPanel';
 import {NewMonitorButton} from './components/newMonitorButton';
 import {OverviewTimeline} from './components/overviewTimeline';
 import {Monitor} from './types';
@@ -34,6 +38,8 @@ import {makeMonitorListQueryKey} from './utils';
 export default function Monitors() {
   const organization = useOrganization();
   const router = useRouter();
+  const platform = decodeScalar(router.location.query?.platform) ?? null;
+  const guide = decodeScalar(router.location.query?.guide);
 
   const queryKey = makeMonitorListQueryKey(organization, router.location);
 
@@ -58,6 +64,9 @@ export default function Monitors() {
     });
   };
 
+  // Only show the add monitor button if there is no currently displayed guide
+  const showAddMonitor = !isValidPlatform(platform) || !isValidGuide(guide);
+
   return (
     <SentryDocumentTitle title={`Crons — ${organization.slug}`}>
       <Layout.Page>
@@ -77,9 +86,11 @@ export default function Monitors() {
           <Layout.HeaderActions>
             <ButtonBar gap={1}>
               <CronsFeedbackButton />
-              <NewMonitorButton size="sm" icon={<IconAdd isCircled size="xs" />}>
-                {t('Add Monitor')}
-              </NewMonitorButton>
+              {showAddMonitor && (
+                <NewMonitorButton size="sm" icon={<IconAdd isCircled size="xs" />}>
+                  {t('Add Monitor')}
+                </NewMonitorButton>
+              )}
             </ButtonBar>
           </Layout.HeaderActions>
         </Layout.Header>