feat(crons): Update HTTP quickstart (#53587)

Before
![clipboard.png](https://i.imgur.com/tv8NETT.png)

After
![clipboard.png](https://i.imgur.com/gaOpIjQ.png)

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

@@ -8,6 +8,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {ProjectKey} from 'sentry/types';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
 import {
   CLICronQuickStart,
   CurlCronQuickStart,
@@ -23,7 +24,6 @@ import {Monitor} from '../types';
 
 interface Props {
   monitor: Monitor;
-  orgId: string;
 }
 
 interface OnboardingGuide {
@@ -82,9 +82,11 @@ const onboardingGuides: Record<string, OnboardingGuide> = {
 
 const guideToSelectOption = ({key, label}) => ({label, value: key});
 
-export default function MonitorQuickStartGuide({monitor, orgId}: Props) {
+export default function MonitorQuickStartGuide({monitor}: Props) {
+  const org = useOrganization();
+
   const {data: projectKeys} = useApiQuery<Array<ProjectKey>>(
-    [`/projects/${orgId}/${monitor.project.slug}/keys/`],
+    [`/projects/${org.slug}/${monitor.project.slug}/keys/`],
     {staleTime: Infinity}
   );
 
@@ -119,7 +121,14 @@ export default function MonitorQuickStartGuide({monitor, orgId}: Props) {
         value={selectedGuide}
         onChange={({value}) => setSelectedGuide(value)}
       />
-      <Guide slug={monitor.slug} orgSlug={orgId} dsnKey={projectKeys?.[0].dsn.public} />
+      <Guide
+        slug={monitor.slug}
+        orgSlug={org.slug}
+        orgId={org.id}
+        projectId={monitor.project.id}
+        publicKey={projectKeys?.[0].public}
+        dsnKey={projectKeys?.[0].dsn.public}
+      />
     </Container>
   );
 }

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

@@ -8,10 +8,9 @@ import MonitorQuickStartGuide from './monitorQuickStartGuide';
 
 interface Props {
   monitor: Monitor;
-  orgId: string;
 }
 
-function MonitorOnboarding({orgId, monitor}: Props) {
+function MonitorOnboarding({monitor}: Props) {
   return (
     <OnboardingPanel noCenter>
       <h3>{t('Instrument your monitor')}</h3>
@@ -25,7 +24,7 @@ function MonitorOnboarding({orgId, monitor}: Props) {
           }
         )}
       </p>
-      <MonitorQuickStartGuide orgId={orgId} monitor={monitor} />
+      <MonitorQuickStartGuide monitor={monitor} />
     </OnboardingPanel>
   );
 }

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

@@ -7,13 +7,19 @@ import {t, tct} from 'sentry/locale';
 
 export interface QuickStartProps {
   dsnKey?: string;
+  orgId?: string;
   orgSlug?: string;
+  projectId?: string;
+  publicKey?: string;
   slug?: string;
 }
 
 const VALUE_DEFAULTS = {
   dsnKey: '<my-dsn-key>',
+  orgId: '<my-organziation-id>',
   orgSlug: '<my-organization-slug>',
+  projectId: '<my-project-id>',
+  publicKey: '<my-dsn-public-key>',
   slug: '<my-monitor-slug>',
 };
 
@@ -115,30 +121,21 @@ sentry-cli monitors run ${slug} -- python path/to/file`;
 }
 
 export function CurlCronQuickStart(props: QuickStartProps) {
-  const {slug, orgSlug, dsnKey} = withDefaultProps(props);
+  const {projectId, orgId, slug, publicKey} = withDefaultProps(props);
 
-  const checkInSuccessCode = `# Notify Sentry your job is running:
-curl -X POST \\
-    'https://sentry.io/api/0/organizations/${orgSlug}/monitors/${slug}/checkins/' \\
-    --header 'Authorization: DSN ${dsnKey}' \\
-    --header 'Content-Type: application/json' \\
-    --data-raw '{"status": "in_progress"}'
+  const checkInSuccessCode = `SENTRY_INGEST="https://o${orgId}.ingest.sentry.io"
+SENTRY_CRONS="\${SENTRY_INGEST}/api/${projectId}/cron/${slug}/${publicKey}/"
+
+# 🟡 Notify Sentry your job is running:
+curl "\${SENTRY_CRONS}?status=in_progress"
 
 # Execute your scheduled task here...
 
-# Notify Sentry your job has completed successfully:
-curl -X PUT \\
-    'https://sentry.io/api/0/organizations/${orgSlug}/monitors/${slug}/checkins/latest/' \\
-    --header 'Authorization: DSN ${dsnKey}' \\
-    --header 'Content-Type: application/json' \\
-    --data-raw '{"status": "ok"}'`;
-
-  const checkInFailCode = `# Notify Sentry your job has failed:
-curl -X PUT \\
-    'https://sentry.io/api/0/organizations/${orgSlug}/monitors/${slug}/checkins/latest/' \\
-    --header 'Authorization: DSN ${dsnKey}' \\
-    --header 'Content-Type: application/json' \\
-    --data-raw '{"status": "error"}'`;
+# 🟢 Notify Sentry your job has completed successfully:
+curl "\${SENTRY_CRONS}?status=ok"`;
+
+  const checkInFailCode = `# 🔴 Notify Sentry your job has failed:
+curl "\${SENTRY_CRONS}?status=error"`;
 
   return (
     <Fragment>

static/app/views/monitors/details.tsx

@@ -90,7 +90,7 @@ function MonitorDetails({params, location}: Props) {
               <EnvironmentPageFilter />
             </StyledPageFilterBar>
             {!hasLastCheckIn(monitor) ? (
-              <MonitorOnboarding orgId={organization.slug} monitor={monitor} />
+              <MonitorOnboarding monitor={monitor} />
             ) : (
               <Fragment>
                 <MonitorStats