feat(uptime): Set default name from url (#95164)

Split out and added a test from
#93042

Author: evanpurkhiser

static/app/views/alerts/rules/uptime/uptimeAlertForm.spec.tsx

@@ -342,4 +342,21 @@ describe('Uptime Alert Form', function () {
       })
     );
   });
+
+  it('sets a default name from the url', async function () {
+    render(<UptimeAlertForm organization={organization} project={project} />, {
+      organization,
+    });
+    await userEvent.clear(input('URL'));
+    await userEvent.type(input('URL'), 'http://my-cool-site.com/');
+
+    const simpleName = input('Uptime rule name');
+    expect(simpleName).toHaveValue('Uptime check for my-cool-site.com');
+
+    await userEvent.clear(input('URL'));
+    await userEvent.type(input('URL'), 'http://example.com/with-path');
+
+    const pathName = input('Uptime rule name');
+    expect(pathName).toHaveValue('Uptime check for example.com/with-path');
+  });
 });

static/app/views/alerts/rules/uptime/uptimeAlertForm.tsx

@@ -1,5 +1,6 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
+import type {IReactionDisposer} from 'mobx';
 import {autorun} from 'mobx';
 import {Observer} from 'mobx-react';
 
@@ -124,6 +125,38 @@ export function UptimeAlertForm({project, handleDelete, rule}: Props) {
     [formModel, navigate, organization, projects, rule]
   );
 
+  // When mutating the name field manually, we'll disable automatic name
+  // generation from the URL
+  const [hasCustomName, setHasCustomName] = useState(false);
+  const disposeNameSetter = useRef<IReactionDisposer>(null);
+  const hasRule = !!rule;
+
+  // Suggest rule name from URL
+  useEffect(() => {
+    if (hasRule || hasCustomName) {
+      return () => {};
+    }
+    disposeNameSetter.current = autorun(() => {
+      const url = formModel.getValue('url');
+
+      if (typeof url !== 'string') {
+        return;
+      }
+
+      try {
+        const parsedUrl = new URL(url);
+        const path = parsedUrl.pathname === '/' ? '' : parsedUrl.pathname;
+        const urlName = `${parsedUrl.hostname}${path}`.replace(/\/$/, '');
+
+        formModel.setValue('name', t('Uptime check for %s', urlName));
+      } catch {
+        // Nothing to do if we failed to parse the URL
+      }
+    });
+
+    return disposeNameSetter.current;
+  }, [formModel, hasRule, hasCustomName]);
+
   return (
     <Form
       model={formModel}
@@ -325,6 +358,14 @@ export function UptimeAlertForm({project, handleDelete, rule}: Props) {
             name="name"
             label={t('Uptime rule name')}
             placeholder={t('Uptime rule name')}
+            onChange={() => {
+              // Immediately dispose of the autorun name setter, since it won't
+              // receive the hasCustomName state before the autorun is ran
+              // again after this change (overriding whatever change the user
+              // just made)
+              disposeNameSetter.current?.();
+              setHasCustomName(true);
+            }}
             inline={false}
             flexibleControlStateSize
             stacked