fix(aci): update monitor form logic

Author: natemoo-re

static/app/views/detectors/components/forms/metric.tsx

@@ -8,6 +8,7 @@ import SegmentedRadioField from 'sentry/components/forms/fields/segmentedRadioFi
 import SelectField from 'sentry/components/forms/fields/selectField';
 import SentryMemberTeamSelectorField from 'sentry/components/forms/fields/sentryMemberTeamSelectorField';
 import Form from 'sentry/components/forms/form';
+import type FormModel from 'sentry/components/forms/model';
 import {SearchQueryBuilder} from 'sentry/components/searchQueryBuilder';
 import type {FilterKeySection} from 'sentry/components/searchQueryBuilder/types';
 import PriorityControl from 'sentry/components/workflowEngine/form/control/priorityControl';
@@ -32,9 +33,9 @@ import {
 
 type MetricDetectorKind = 'threshold' | 'change' | 'dynamic';
 
-export function MetricDetectorForm() {
+export function MetricDetectorForm({model}: {model: FormModel}) {
   return (
-    <Form hideFooter>
+    <Form hideFooter model={model}>
       <ChartContainer>
         <MockChart />
       </ChartContainer>

static/app/views/detectors/edit.tsx

@@ -2,6 +2,7 @@
 import {Fragment, useState} from 'react';
 
 import {Button} from 'sentry/components/core/button';
+import FormModel from 'sentry/components/forms/model';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {ActionsProvider} from 'sentry/components/workflowEngine/layout/actions';
 import {BreadcrumbsProvider} from 'sentry/components/workflowEngine/layout/breadcrumbs';
@@ -16,6 +17,7 @@ export default function DetectorEdit() {
   const organization = useOrganization();
   useWorkflowEngineFeatureGate({redirect: true});
   const [title, setTitle] = useState(t('Edit Monitor'));
+  const model = new FormModel();
 
   return (
     <SentryDocumentTitle title={title} noSuffix>
@@ -24,7 +26,7 @@ export default function DetectorEdit() {
       >
         <ActionsProvider actions={<Actions />}>
           <EditLayout onTitleChange={setTitle}>
-            <MetricDetectorForm />
+            <MetricDetectorForm model={model} />
           </EditLayout>
         </ActionsProvider>
       </BreadcrumbsProvider>

static/app/views/detectors/hooks/index.ts

@@ -1,5 +1,13 @@
+import {t} from 'sentry/locale';
+import AlertStore from 'sentry/stores/alertStore';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
-import {useApiQueries, useApiQuery} from 'sentry/utils/queryClient';
+import {
+  useApiQueries,
+  useApiQuery,
+  useMutation,
+  useQueryClient,
+} from 'sentry/utils/queryClient';
+import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 
 export interface UseDetectorsQueryOptions {
@@ -18,6 +26,27 @@ export const makeDetectorQueryKey = (orgSlug: string, detectorId = ''): [url: st
   `/organizations/${orgSlug}/detectors/${detectorId ? `${detectorId}/` : ''}`,
 ];
 
+export function useCreateDetector() {
+  const org = useOrganization();
+  const api = useApi({persistInFlight: true});
+  const queryClient = useQueryClient();
+  const queryKey = makeDetectorQueryKey(org.slug);
+
+  return useMutation<Detector, void, Detector>({
+    mutationFn: data =>
+      api.requestPromise(queryKey[0], {
+        method: 'POST',
+        data,
+      }),
+    onSuccess: _ => {
+      queryClient.invalidateQueries({queryKey});
+    },
+    onError: _ => {
+      AlertStore.addAlert({type: 'error', message: t('Unable to create monitor')});
+    },
+  });
+}
+
 export function useDetectorQuery(detectorId: string) {
   const org = useOrganization();
 

static/app/views/detectors/new-settings.tsx

@@ -1,24 +1,41 @@
+import {useCallback, useMemo} from 'react';
+
 import {Flex} from 'sentry/components/container/flex';
+import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import FormModel from 'sentry/components/forms/model';
 import {
   StickyFooter,
   StickyFooterLabel,
 } from 'sentry/components/workflowEngine/ui/footer';
 import {useWorkflowEngineFeatureGate} from 'sentry/components/workflowEngine/useWorkflowEngineFeatureGate';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {MetricDetectorForm} from 'sentry/views/detectors/components/forms/metric';
+import {useCreateDetector} from 'sentry/views/detectors/hooks';
 import NewDetectorLayout from 'sentry/views/detectors/layouts/new';
 import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
 
 export default function DetectorNewSettings() {
   const organization = useOrganization();
   useWorkflowEngineFeatureGate({redirect: true});
+  const navigate = useNavigate();
+  const model = useMemo(() => new FormModel(), []);
+
+  const {mutateAsync: createDetector} = useCreateDetector();
+
+  const handleSubmit = useCallback(async () => {
+    const data = model.getData() as unknown as Detector;
+    const result = await createDetector(data);
+    navigate(`${makeMonitorBasePathname(organization.slug)}${result.id}`);
+  }, [createDetector, model, navigate, organization]);
 
   return (
     <NewDetectorLayout>
-      <MetricDetectorForm />
+      <MetricDetectorForm model={model} />
       <StickyFooter>
         <StickyFooterLabel>{t('Step 2 of 2')}</StickyFooterLabel>
         <Flex gap={space(1)}>
@@ -28,9 +45,9 @@ export default function DetectorNewSettings() {
           >
             {t('Back')}
           </LinkButton>
-          <LinkButton priority="primary" to="/issues/monitors/1">
+          <Button priority="primary" onClick={handleSubmit}>
             {t('Create Monitor')}
-          </LinkButton>
+          </Button>
         </Flex>
       </StickyFooter>
     </NewDetectorLayout>