feat(workflow_engine): Add useSetAutomaticName hook for detector forms (#101221)

Introduces a new useSetAutomaticName hook that enables automatic name
generation for detector forms based on field values. This hook uses mobx
autorun to reactively watch form fields and automatically set the
detector name until the user manually edits it.

Key changes:
- Created useSetAutomaticName hook in detector forms common directory
- Extended DetectorFormContext to track hasSetDetectorName state and
optionally include the detector being edited
- Updated DetectorBaseFields to set hasSetDetectorName when user edits
the name field
- Integrated automatic naming into uptime detector form to generate
names from URL field (e.g., "Uptime check for example.com/path")
- Uses URL.parse() for safe URL parsing without try-catch

The hook automatically stops name generation when:
- User manually edits the detector name
- Editing an existing detector (detector prop passed to context)

This pattern can be easily extended to other detector types by calling
useSetAutomaticName with a custom name generation function.

Fixes [NEW-556: Entering a URL should auto-fill the title of the
detector](https://linear.app/getsentry/issue/NEW-556/entering-a-url-should-auto-fill-the-title-of-the-detector)

Author: evanpurkhiser

static/app/views/detectors/components/forms/common/useSetAutomaticName.spec.tsx

@@ -0,0 +1,117 @@
+import {ErrorDetectorFixture} from 'sentry-fixture/detectors';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import TextField from 'sentry/components/forms/fields/textField';
+import ProjectsStore from 'sentry/stores/projectsStore';
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {useSetAutomaticName} from 'sentry/views/detectors/components/forms/common/useSetAutomaticName';
+import {DetectorFormProvider} from 'sentry/views/detectors/components/forms/context';
+import {NewDetectorLayout} from 'sentry/views/detectors/components/forms/newDetectorLayout';
+
+// Test component that uses the hook
+function TestDetectorForm() {
+  useSetAutomaticName(form => {
+    const testField = form.getValue('testField');
+    if (typeof testField !== 'string' || !testField) {
+      return null;
+    }
+    return `Monitor for ${testField}`;
+  });
+
+  return (
+    <div>
+      <TextField name="testField" label="Test Field" />
+    </div>
+  );
+}
+
+describe('useSetAutomaticName', () => {
+  const organization = OrganizationFixture();
+  const project = ProjectFixture();
+
+  const renderDetectorForm = (detector?: Detector, initialFormData = {}) => {
+    return render(
+      <DetectorFormProvider detectorType="error" project={project} detector={detector}>
+        <NewDetectorLayout
+          detectorType="error"
+          formDataToEndpointPayload={data => data as any}
+          initialFormData={initialFormData}
+        >
+          <TestDetectorForm />
+        </NewDetectorLayout>
+      </DetectorFormProvider>,
+      {organization}
+    );
+  };
+
+  beforeEach(() => {
+    ProjectsStore.loadInitialData([project]);
+  });
+
+  it('automatically generates and updates name from field value', async () => {
+    renderDetectorForm();
+
+    await screen.findByText('New Monitor');
+
+    const testField = screen.getByRole('textbox', {name: 'Test Field'});
+
+    // Type first value
+    await userEvent.type(testField, 'service-1');
+    await screen.findByText('Monitor for service-1');
+
+    // Change the value
+    await userEvent.clear(testField);
+    await userEvent.type(testField, 'service-2');
+    await screen.findByText('Monitor for service-2');
+  });
+
+  it('stops auto-generating after user manually edits name', async () => {
+    renderDetectorForm();
+
+    await screen.findByText('New Monitor');
+
+    // Type into test field - name should auto-generate
+    const testField = screen.getByRole('textbox', {name: 'Test Field'});
+    await userEvent.type(testField, 'my-service');
+
+    const nameField = await screen.findByText('Monitor for my-service');
+
+    // Manually edit the name
+    await userEvent.click(nameField);
+    const nameInput = screen.getByRole('textbox', {name: 'Monitor Name'});
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'Custom Monitor Name{Enter}');
+
+    await screen.findByText('Custom Monitor Name');
+
+    // Change test field - name should NOT update
+    await userEvent.clear(testField);
+    await userEvent.type(testField, 'different-service');
+
+    // Verify name didn't change
+    expect(screen.getByText('Custom Monitor Name')).toBeInTheDocument();
+    expect(screen.queryByText('Monitor for different-service')).not.toBeInTheDocument();
+  });
+
+  it('does not auto-generate name when editing existing detector', async () => {
+    const detector = ErrorDetectorFixture({
+      name: 'Existing Monitor',
+      projectId: project.id,
+    });
+
+    renderDetectorForm(detector, {name: detector.name});
+
+    await screen.findByText(detector.name);
+
+    // Type into test field - name should NOT auto-generate
+    const testField = screen.getByRole('textbox', {name: 'Test Field'});
+    await userEvent.type(testField, 'my-service');
+
+    // Verify name didn't change
+    expect(screen.getByText(detector.name)).toBeInTheDocument();
+    expect(screen.queryByText('Monitor for my-service')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,49 @@
+import {useContext, useEffect} from 'react';
+import {autorun} from 'mobx';
+
+import FormContext from 'sentry/components/forms/formContext';
+import type FormModel from 'sentry/components/forms/model';
+import {useDetectorFormContext} from 'sentry/views/detectors/components/forms/context';
+
+/**
+ * Hook to automatically set the detector name based on form values.
+ *
+ * The provided function is called with a mobx autorun, so any access to
+ * getters on the prvided form model will automatically act reactively.
+ *
+ * @example
+ * ```tsx
+ * useSetAutomaticName((form) => {
+ *   const metricType = form.getValue('metricType');
+ *   const interval = form.getValue('interval');
+ *
+ *   if (!metricType || !interval) {
+ *     return null;
+ *   }
+ *
+ *   return t('Check %s every %s', metricType, getDuration(interval));
+ * });
+ * ```
+ */
+export function useSetAutomaticName(getNameFn: (form: FormModel) => string | null) {
+  const {form} = useContext(FormContext);
+  const {hasSetDetectorName, detector} = useDetectorFormContext();
+
+  useEffect(() => {
+    if (form === undefined || hasSetDetectorName) {
+      return () => {};
+    }
+
+    // Don't auto-generate name if we're editing an existing detector
+    if (detector) {
+      return () => {};
+    }
+
+    return autorun(() => {
+      const generatedName = getNameFn(form);
+      if (generatedName) {
+        form.setValue('name', generatedName);
+      }
+    });
+  }, [form, hasSetDetectorName, getNameFn, detector]);
+}

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

@@ -1,26 +1,39 @@
-import {createContext, useContext} from 'react';
+import {createContext, useContext, useState} from 'react';
 
 import type {Project} from 'sentry/types/project';
-import type {DetectorType} from 'sentry/types/workflowEngine/detectors';
+import type {Detector, DetectorType} from 'sentry/types/workflowEngine/detectors';
 
 type DetectorFormContextType = {
   detectorType: DetectorType;
+  /**
+   * Tracks whether the user has manually set the detector name.
+   * Used by useSetAutomaticName to disable automatic name generation.
+   */
+  hasSetDetectorName: boolean;
   project: Project;
+  setHasSetDetectorName: (value: boolean) => void;
+  detector?: Detector;
 };
 
 const DetectorFormContext = createContext<DetectorFormContextType | null>(null);
 
 export function DetectorFormProvider({
   detectorType,
   project,
+  detector,
   children,
 }: {
   children: React.ReactNode;
   detectorType: DetectorType;
   project: Project;
+  detector?: Detector;
 }) {
+  const [hasSetDetectorName, setHasSetDetectorName] = useState(false);
+
   return (
-    <DetectorFormContext.Provider value={{detectorType, project}}>
+    <DetectorFormContext.Provider
+      value={{detectorType, project, hasSetDetectorName, setHasSetDetectorName, detector}}
+    >
       {children}
     </DetectorFormContext.Provider>
   );

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

@@ -13,6 +13,8 @@ import {useDetectorFormContext} from 'sentry/views/detectors/components/forms/co
 import {useCanEditDetector} from 'sentry/views/detectors/utils/useCanEditDetector';
 
 export function DetectorBaseFields() {
+  const {setHasSetDetectorName} = useDetectorFormContext();
+
   return (
     <Flex gap="md" direction="column">
       <Layout.Title>
@@ -27,6 +29,7 @@ export function DetectorBaseFields() {
                     value: newValue,
                   },
                 });
+                setHasSetDetectorName(true);
               }}
               errorMessage={t('Please set a title')}
               placeholder={t('New Monitor')}

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

@@ -1,8 +1,10 @@
 import styled from '@emotion/styled';
 
+import {t} from 'sentry/locale';
 import type {UptimeDetector} from 'sentry/types/workflowEngine/detectors';
 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';
 import {EditDetectorLayout} from 'sentry/views/detectors/components/forms/editDetectorLayout';
 import {NewDetectorLayout} from 'sentry/views/detectors/components/forms/newDetectorLayout';
 import {UptimeDetectorFormDetectSection} from 'sentry/views/detectors/components/forms/uptime/detect';
@@ -14,6 +16,24 @@ import {UptimeRegionWarning} from 'sentry/views/detectors/components/forms/uptim
 import {UptimeDetectorResolveSection} from 'sentry/views/detectors/components/forms/uptime/resolve';
 
 function UptimeDetectorForm() {
+  useSetAutomaticName(form => {
+    const url = form.getValue('url');
+
+    if (typeof url !== 'string') {
+      return null;
+    }
+
+    const parsedUrl = URL.parse(url);
+    if (!parsedUrl) {
+      return null;
+    }
+
+    const path = parsedUrl.pathname === '/' ? '' : parsedUrl.pathname;
+    const urlName = `${parsedUrl.hostname}${path}`.replace(/\/$/, '');
+
+    return t('Uptime check for %s', urlName);
+  });
+
   return (
     <FormStack>
       <UptimeRegionWarning />

static/app/views/detectors/edit.tsx

@@ -41,7 +41,11 @@ export default function DetectorEdit() {
   }
 
   return (
-    <DetectorFormProvider detectorType={detector.type} project={project}>
+    <DetectorFormProvider
+      detectorType={detector.type}
+      project={project}
+      detector={detector}
+    >
       <EditExistingDetectorForm detector={detector} />
     </DetectorFormProvider>
   );

static/app/views/detectors/new-setting.spec.tsx

@@ -461,12 +461,56 @@ describe('DetectorEdit', () => {
               traceSampling: undefined,
               url: 'https://uptime-custom.example.com',
             },
-            name: 'New Monitor',
+            name: 'Uptime check for uptime-custom.example.com',
             projectId: '2',
             type: 'uptime_domain_failure',
           }),
         })
       );
     });
+
+    it('automatically sets monitor name from URL and stops after manual edit', async () => {
+      render(<DetectorNewSettings />, {
+        organization,
+        initialRouterConfig: uptimeRouterConfig,
+      });
+
+      const nameField = await screen.findByText('New Monitor');
+
+      // Type a simple hostname
+      await userEvent.type(
+        screen.getByRole('textbox', {name: 'URL'}),
+        'https://my-cool-site.com/'
+      );
+
+      await screen.findByText('Uptime check for my-cool-site.com');
+
+      // Clear and type a URL with a path - name should update
+      let urlInput = screen.getByRole('textbox', {name: 'URL'});
+      await userEvent.clear(urlInput);
+      await userEvent.type(urlInput, 'https://example.com/with-path');
+
+      // Name was updated with auto-generated name
+      expect(nameField).toHaveTextContent('Uptime check for example.com/with-path');
+
+      // Manually edit the name
+      await userEvent.click(nameField);
+      const nameInput = screen.getByRole('textbox', {name: 'Monitor Name'});
+      await userEvent.clear(nameInput);
+      await userEvent.type(nameInput, 'My Custom Name{Enter}');
+
+      await screen.findByText('My Custom Name');
+
+      // Change the URL - name should NOT update anymore
+      urlInput = screen.getByRole('textbox', {name: 'URL'});
+      await userEvent.clear(urlInput);
+      await userEvent.type(urlInput, 'https://different-site.com');
+
+      // Verify the name didn't change
+      expect(screen.getByText('My Custom Name')).toBeInTheDocument();
+      expect(
+        screen.queryByText('Uptime check for different-site.com')
+      ).not.toBeInTheDocument();
+    });
   });
 });