feat(crons): Add feedback button (#42455)

Adds feedback button like so (top-right):

<img width="1193" alt="image"
src="https://user-images.githubusercontent.com/9372512/208517106-37563c11-d370-49e4-9f77-e16d26d3d4e2.png">

static/app/views/monitors/create.tsx

@@ -1,3 +1,4 @@
+import {Fragment} from 'react';
 import {browserHistory, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
@@ -8,6 +9,7 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import withOrganization from 'sentry/utils/withOrganization';
 import AsyncView from 'sentry/views/asyncView';
 
+import CronsFeedbackButton from './cronsFeedbackButton';
 import MonitorForm from './monitorForm';
 import {Monitor} from './types';
 
@@ -32,27 +34,40 @@ class CreateMonitor extends AsyncView<Props, AsyncView['state']> {
 
   renderBody() {
     return (
-      <Layout.Body>
-        <Layout.Main fullWidth>
-          <h1>{t('Set Up Cron Monitor')}</h1>
-          <HelpText>
-            {t(
-              `Sentry will tell you if your recurring jobs are running on schedule, failing, or succeeding.`
-            )}
-          </HelpText>
-          <MonitorForm
-            apiMethod="POST"
-            apiEndpoint={`/organizations/${this.orgSlug}/monitors/`}
-            onSubmitSuccess={this.onSubmitSuccess}
-            submitLabel={t('Next Steps')}
-          />
-        </Layout.Main>
-      </Layout.Body>
+      <Fragment>
+        <Layout.Header>
+          <Layout.HeaderContent>
+            <HeaderTitle>{t('Set Up Cron Monitor')}</HeaderTitle>
+          </Layout.HeaderContent>
+          <Layout.HeaderActions>
+            <CronsFeedbackButton />
+          </Layout.HeaderActions>
+        </Layout.Header>
+        <Layout.Body>
+          <Layout.Main fullWidth>
+            <HelpText>
+              {t(
+                `Sentry will tell you if your recurring jobs are running on schedule, failing, or succeeding.`
+              )}
+            </HelpText>
+            <MonitorForm
+              apiMethod="POST"
+              apiEndpoint={`/organizations/${this.orgSlug}/monitors/`}
+              onSubmitSuccess={this.onSubmitSuccess}
+              submitLabel={t('Next Steps')}
+            />
+          </Layout.Main>
+        </Layout.Body>
+      </Fragment>
     );
   }
 }
 export default withOrganization(CreateMonitor);
 
+const HeaderTitle = styled(Layout.Title)`
+  margin-top: 0;
+`;
+
 const HelpText = styled('p')`
   color: ${p => p.theme.subText};
   max-width: 760px;

static/app/views/monitors/cronsFeedbackButton.tsx

@@ -0,0 +1,9 @@
+import {FeatureFeedback} from 'sentry/components/featureFeedback';
+
+const CRONS_FEEDBACK_NAME = 'crons';
+
+const CronsFeedbackButton = () => (
+  <FeatureFeedback featureName={CRONS_FEEDBACK_NAME} buttonProps={{size: 'sm'}} />
+);
+
+export default CronsFeedbackButton;

static/app/views/monitors/monitorHeaderActions.tsx

@@ -15,6 +15,7 @@ import space from 'sentry/styles/space';
 import {logException} from 'sentry/utils/logging';
 import useApi from 'sentry/utils/useApi';
 
+import CronsFeedbackButton from './cronsFeedbackButton';
 import {Monitor} from './types';
 
 type Props = {
@@ -85,6 +86,7 @@ const MonitorHeaderActions = ({monitor, orgId, onUpdate}: Props) => {
             {t('Delete')}
           </Button>
         </Confirm>
+        <CronsFeedbackButton />
       </ButtonBar>
     </ButtonContainer>
   );

static/app/views/monitors/monitors.tsx

@@ -6,6 +6,7 @@ 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 FeatureBadge from 'sentry/components/featureBadge';
 import IdBadge from 'sentry/components/idBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -30,6 +31,7 @@ import withOrganization from 'sentry/utils/withOrganization';
 import withSentryRouter from 'sentry/utils/withSentryRouter';
 import AsyncView from 'sentry/views/asyncView';
 
+import CronsFeedbackButton from './cronsFeedbackButton';
 import MonitorIcon from './monitorIcon';
 import {Monitor} from './types';
 
@@ -105,7 +107,10 @@ class Monitors extends AsyncView<Props, State> {
             </HeaderTitle>
           </Layout.HeaderContent>
           <Layout.HeaderActions>
-            <NewMonitorButton size="sm">{t('Set Up Cron Monitor')}</NewMonitorButton>
+            <ButtonBar gap={1}>
+              <NewMonitorButton size="sm">{t('Set Up Cron Monitor')}</NewMonitorButton>
+              <CronsFeedbackButton />
+            </ButtonBar>
           </Layout.HeaderActions>
         </Layout.Header>
         <Layout.Body>