feat(detectors): Show HTTPSnippet on uptime forms (#101227)

We can iterate on these in the future

Fixes [NEW-558: Form should show request
previews](https://linear.app/getsentry/issue/NEW-558/form-should-show-request-previews)

Author: evanpurkhiser

static/app/views/detectors/components/forms/uptime/index.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
+import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {t} from 'sentry/locale';
 import type {UptimeDetector} from 'sentry/types/workflowEngine/detectors';
+import {HTTPSnippet} from 'sentry/views/alerts/rules/uptime/httpSnippet';
 import {AutomateSection} from 'sentry/views/detectors/components/forms/automateSection';
 import {AssignSection} from 'sentry/views/detectors/components/forms/common/assignSection';
 import {useSetAutomaticName} from 'sentry/views/detectors/components/forms/common/useSetAutomaticName';
@@ -15,6 +17,32 @@ import {
 import {UptimeRegionWarning} from 'sentry/views/detectors/components/forms/uptime/regionWarning';
 import {UptimeDetectorResolveSection} from 'sentry/views/detectors/components/forms/uptime/resolve';
 
+const HTTP_METHODS_NO_BODY = ['GET', 'HEAD', 'OPTIONS'];
+
+function ConnectedHttpSnippet() {
+  const url = useFormField<string>('url');
+  const method = useFormField<string>('method');
+  const headers = useFormField<Array<[string, string]>>('headers');
+  const body = useFormField<string>('body');
+  const traceSampling = useFormField<boolean>('traceSampling');
+
+  if (!url || !method) {
+    return null;
+  }
+
+  const shouldIncludeBody = !HTTP_METHODS_NO_BODY.includes(method);
+
+  return (
+    <HTTPSnippet
+      url={url}
+      method={method}
+      headers={headers ?? []}
+      body={shouldIncludeBody ? (body ?? null) : null}
+      traceSampling={traceSampling ?? false}
+    />
+  );
+}
+
 function UptimeDetectorForm() {
   useSetAutomaticName(form => {
     const url = form.getValue('url');
@@ -38,6 +66,7 @@ function UptimeDetectorForm() {
     <FormStack>
       <UptimeRegionWarning />
       <UptimeDetectorFormDetectSection />
+      <ConnectedHttpSnippet />
       <UptimeDetectorResolveSection />
       <AssignSection />
       <AutomateSection />