ref(uptime): Move ConnectedHttpSnippet into Detect panel (#102799)

Fixes: [NEW-585: HTTP check details should be embedded in the detect
panel](https://linear.app/getsentry/issue/NEW-585/http-check-details-should-be-embedded-in-the-detect-panel)

Author: evanpurkhiser

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

@@ -9,10 +9,12 @@ import SelectField from 'sentry/components/forms/fields/selectField';
 import TextareaField from 'sentry/components/forms/fields/textareaField';
 import TextField from 'sentry/components/forms/fields/textField';
 import type FormModel from 'sentry/components/forms/model';
+import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {Container} from 'sentry/components/workflowEngine/ui/container';
 import Section from 'sentry/components/workflowEngine/ui/section';
 import {t, tct} from 'sentry/locale';
 import getDuration from 'sentry/utils/duration/getDuration';
+import {HTTPSnippet} from 'sentry/views/alerts/rules/uptime/httpSnippet';
 import {UptimeHeadersField} from 'sentry/views/detectors/components/forms/uptime/detect/uptimeHeadersField';
 import {UPTIME_DEFAULT_DOWNTIME_THRESHOLD} from 'sentry/views/detectors/components/forms/uptime/fields';
 
@@ -32,6 +34,30 @@ function methodHasBody(model: FormModel) {
   return !HTTP_METHODS_NO_BODY.includes(model.getValue('method'));
 }
 
+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}
+    />
+  );
+}
+
 export function UptimeDetectorFormDetectSection() {
   return (
     <Container>
@@ -152,6 +178,7 @@ export function UptimeDetectorFormDetectSection() {
             flexibleControlStateSize
           />
         </ConfigurationFieldsContainer>
+        <ConnectedHttpSnippet />
       </Section>
     </Container>
   );

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

@@ -1,9 +1,7 @@
 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';
@@ -17,32 +15,6 @@ 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');
@@ -66,7 +38,6 @@ function UptimeDetectorForm() {
     <FormStack>
       <UptimeRegionWarning />
       <UptimeDetectorFormDetectSection />
-      <ConnectedHttpSnippet />
       <UptimeDetectorResolveSection />
       <AssignSection />
       <AutomateSection />