feat(aci): Add markdown icon to monitor description input (#112295)

We want to make it more obvious that the description will use markdown
syntax, so this adds a `MarkdownTextArea` component which adds the
"markdown supported" icon in the top right.

Hopefully we can improve this component in the future to use previews
and such, but this is an improvement for now.

Author: malwilley

static/app/components/markdownTextArea.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+import {Container} from '@sentry/scraps/layout';
+import type {TextAreaProps} from '@sentry/scraps/textarea';
+import {TextArea} from '@sentry/scraps/textarea';
+import {Tooltip} from '@sentry/scraps/tooltip';
+
+import {IconMarkdown} from 'sentry/icons';
+import {t} from 'sentry/locale';
+interface MarkdownTextAreaProps extends TextAreaProps {
+  className?: string;
+}
+
+export function MarkdownTextArea({className, ...props}: MarkdownTextAreaProps) {
+  return (
+    <Container position="relative" className={className}>
+      <RightPaddedTextArea autosize rows={5} maxRows={10} {...props} />
+      <Container position="absolute" top="8px " right="10px">
+        <Tooltip title={t('Markdown supported')}>
+          <IconMarkdown size="md" variant="muted" />
+        </Tooltip>
+      </Container>
+    </Container>
+  );
+}
+
+const RightPaddedTextArea = styled(TextArea)`
+  padding-right: ${p => p.theme.space['2xl']};
+`;

static/app/views/detectors/components/forms/common/issueOwnershipSection.tsx

@@ -4,7 +4,8 @@ import styled from '@emotion/styled';
 import {Stack} from '@sentry/scraps/layout';
 
 import {SentryMemberTeamSelectorField} from 'sentry/components/forms/fields/sentryMemberTeamSelectorField';
-import {TextareaField} from 'sentry/components/forms/fields/textareaField';
+import {FormField} from 'sentry/components/forms/formField';
+import {MarkdownTextArea} from 'sentry/components/markdownTextArea';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {Container} from 'sentry/components/workflowEngine/ui/container';
 import {FormSection} from 'sentry/components/workflowEngine/ui/formSection';
@@ -33,21 +34,27 @@ export function IssueOwnershipSection({step}: {step?: number}) {
             flexibleControlStateSize
             memberOfProjectSlugs={memberOfProjectSlugs}
           />
-          <MinHeightTextarea
+          <DescriptionField
             name="description"
             label={t('Describe')}
+            hideControlState
+            flexibleControlStateSize
             help={t(
               'Add any additional context about this monitor for other team members.'
             )}
             stacked
             inline={false}
-            aria-label={t('description')}
-            placeholder={t(
-              'Example monitor description\n\nTo debug follow these steps:\n1. \u2026\n2. \u2026\n3. \u2026'
+          >
+            {fieldProps => (
+              <MarkdownTextArea
+                {...fieldProps}
+                aria-label={t('description')}
+                placeholder={t(
+                  'Example monitor description\n\nTo debug follow these steps:\n1. \u2026\n2. \u2026\n3. \u2026'
+                )}
+              />
             )}
-            rows={6}
-            autosize
-          />
+          </DescriptionField>
         </Stack>
       </FormSection>
     </Container>
@@ -58,10 +65,6 @@ const OwnershipField = styled(SentryMemberTeamSelectorField)`
   padding: ${p => p.theme.space.lg} 0;
 `;
 
-// Min height helps prevent resize after placeholder is replaced with user input
-const MinHeightTextarea = styled(TextareaField)`
+const DescriptionField = styled(FormField)`
   padding: ${p => p.theme.space.lg} 0;
-  textarea {
-    min-height: 140px;
-  }
 `;