ref(monitors): Update onboarding panel with examples of how to create check-ins (#41634)

Code snippets in the previous iteration of this onboarding weren't that
useful, giving curl examples here instead

Before:
<img width="1174" alt="image"
src="https://user-images.githubusercontent.com/9372512/203296449-3f7da140-5848-488a-b56c-151018b5b11a.png">

After:
<img width="1177" alt="image"
src="https://user-images.githubusercontent.com/9372512/203296383-d4db45db-6539-4ad4-9ecf-a3d56ec74661.png">

static/app/views/monitors/onboarding.tsx

@@ -2,11 +2,13 @@ import styled from '@emotion/styled';
 
 import {CodeSnippet} from 'sentry/components/codeSnippet';
 import ExternalLink from 'sentry/components/links/externalLink';
+import Link from 'sentry/components/links/link';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
 import {Panel, PanelBody, PanelHeader} from 'sentry/components/panels';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
+import useOrganization from 'sentry/utils/useOrganization';
 
 import {Monitor} from './types';
 
@@ -16,7 +18,9 @@ type Props = {
 
 const MonitorOnboarding = ({monitor}: Props) => {
   const checkInUrl = `https://sentry.io/api/0/monitors/${monitor.id}/checkins/`;
+  const checkInDetailsUrl = `${checkInUrl}{checkInId}/`;
 
+  const organization = useOrganization();
   return (
     <Panel>
       <PanelHeader>{t('How to instrument monitors')}</PanelHeader>
@@ -25,40 +29,39 @@ const MonitorOnboarding = ({monitor}: Props) => {
           <StyledListItem>
             <OnboardingText>
               {tct(
-                'To report on the status of a job make POST requests using [linkDocs:DSN authentication]',
+                'To report the start of a job execution using [linkDocs:DSN authentication], use the following request (your DSN can be found [linkProjectDSN:here])',
                 {
                   linkDocs: (
                     <ExternalLink href="https://docs.sentry.io/api/auth/#dsn-authentication" />
                   ),
+                  linkProjectDSN: (
+                    <Link
+                      to={`/settings/${organization.slug}/projects/${monitor.project.slug}/keys/`}
+                    />
+                  ),
                 }
               )}
             </OnboardingText>
             <CodeSnippet language="text" hideActionBar>
-              {`POST ${checkInUrl}`}
+              {`curl -X POST \\\n'${checkInUrl}' \\\n--header 'Authorization: DSN {DSN}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"status": "in_progress"}'`}
             </CodeSnippet>
           </StyledListItem>
           <StyledListItem>
             <OnboardingText>
               {t(
-                'Supply one of the following JSON bodies to the POST request depending on the job status to be reported'
+                'The above request will then return a check-in id which you can use to modify the check-in upon job completion'
               )}
             </OnboardingText>
             <OnboardingText>
-              {t('For the start of a job')}
-              <CodeSnippet language="json" hideActionBar>
-                {`{ "status": "in_progress" }`}
-              </CodeSnippet>
-            </OnboardingText>
-            <OnboardingText>
-              {t('For job completion with optional duration in milliseconds')}
+              {t('For reflecting successful execution with optional duration in ms')}
               <CodeSnippet language="json" hideActionBar>
-                {`{ "status": "ok", "duration": 3000 }`}
+                {`curl -X PUT \\\n'${checkInDetailsUrl}' \\\n--header 'Authorization: DSN {DSN}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"status": "ok", "duration": 3000}'`}
               </CodeSnippet>
             </OnboardingText>
             <OnboardingText>
-              {t('For a job failure with optional duration in milliseconds')}
+              {t('For reflecting failed execution with optional duration in ms')}
               <CodeSnippet language="json" hideActionBar>
-                {`{ "status": "error", "duration": 3000 }`}
+                {`curl -X PUT \\\n'${checkInDetailsUrl}' \\\n--header 'Authorization: DSN {DSN}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"status": "error", "duration": 3000}'`}
               </CodeSnippet>
             </OnboardingText>
           </StyledListItem>