feat(monitors): Add onboarding panel when no checkin present (#40386)

Simple monitors onboarding panel which is shown for new monitors or
monitors with no checkins reported.

Eventually when monitors is rolling out to a larger audience I would
move this to our public docs and link into it from here.

<img width="1176" alt="image"
src="https://user-images.githubusercontent.com/9372512/198115874-7ca8b480-6533-411d-9ddb-408b67e196db.png">

Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/views/monitors/details.tsx

@@ -9,6 +9,7 @@ import MonitorCheckIns from './monitorCheckIns';
 import MonitorHeader from './monitorHeader';
 import MonitorIssues from './monitorIssues';
 import MonitorStats from './monitorStats';
+import MonitorOnboarding from './onboarding';
 import {Monitor} from './types';
 
 type Props = AsyncView['props'] &
@@ -49,6 +50,8 @@ class MonitorDetails extends AsyncView<Props, State> {
           onUpdate={this.onUpdate}
         />
 
+        {!monitor.lastCheckIn && <MonitorOnboarding monitor={monitor} />}
+
         <MonitorStats monitor={monitor} />
 
         <MonitorIssues monitor={monitor} orgId={this.props.params.orgId} />

static/app/views/monitors/onboarding.tsx

@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+
+import {CodeSnippet} from 'sentry/components/codeSnippet';
+import ExternalLink from 'sentry/components/links/externalLink';
+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 {Monitor} from './types';
+
+type Props = {
+  monitor: Monitor;
+};
+
+const MonitorOnboarding = ({monitor}: Props) => {
+  const checkInUrl = `https://sentry.io/api/0/monitors/${monitor.id}/checkins/`;
+
+  return (
+    <Panel>
+      <PanelHeader>{t('How to instrument monitors')}</PanelHeader>
+      <PanelBody withPadding>
+        <List symbol="bullet">
+          <StyledListItem>
+            <OnboardingText>
+              {tct(
+                'To report on the status of a job make POST requests using [linkDocs:DSN authentication]',
+                {
+                  linkDocs: (
+                    <ExternalLink href="https://docs.sentry.io/api/auth/#dsn-authentication" />
+                  ),
+                }
+              )}
+            </OnboardingText>
+            <CodeSnippet language="text" hideActionBar>
+              {`POST ${checkInUrl}`}
+            </CodeSnippet>
+          </StyledListItem>
+          <StyledListItem>
+            <OnboardingText>
+              {t(
+                'Supply one of the following JSON bodies to the POST request depending on the job status to be reported'
+              )}
+            </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')}
+              <CodeSnippet language="json" hideActionBar>
+                {`{ "status": "ok", "duration": 3000 }`}
+              </CodeSnippet>
+            </OnboardingText>
+            <OnboardingText>
+              {t('For a job failure with optional duration in milliseconds')}
+              <CodeSnippet language="json" hideActionBar>
+                {`{ "status": "error", "duration": 3000 }`}
+              </CodeSnippet>
+            </OnboardingText>
+          </StyledListItem>
+        </List>
+      </PanelBody>
+    </Panel>
+  );
+};
+
+const OnboardingText = styled('p')`
+  font-size: ${p => p.theme.fontSizeLarge};
+`;
+
+const StyledListItem = styled(ListItem)`
+  margin-bottom: ${space(2)};
+`;
+
+export default MonitorOnboarding;