feat(aci): Add issue preview to uptime monitor form

[malwilley]

Ref ISWF-2392

[linear-code]

ISWF-2392 Make crons and uptime forms consistent with the new designs

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Preview issue title doesn't match actual backend title
  • Updated useUptimeIssueTitle to use the full URL directly (including protocol) to match the backend behavior in grouptype.py which uses uptime_subscription.url.
• ✅ Fixed: Duplicated URL display parsing logic across functions
  • Extracted the common URL-to-display-name logic into a shared getDisplayUrl() utility function in fields.tsx and updated useSetAutomaticName to use it.

Or push these changes by commenting:

@cursor push 1a777f12d3

Preview (1a777f12d3)

diff --git a/static/app/views/detectors/components/forms/uptime/fields.tsx b/static/app/views/detectors/components/forms/uptime/fields.tsx
--- a/static/app/views/detectors/components/forms/uptime/fields.tsx
+++ b/static/app/views/detectors/components/forms/uptime/fields.tsx
@@ -12,6 +12,21 @@
 export const UPTIME_DEFAULT_RECOVERY_THRESHOLD = 1;
 export const UPTIME_DEFAULT_DOWNTIME_THRESHOLD = 3;
 
+/**
+ * Extracts display components from a URL string.
+ * Returns hostname + path (excluding bare "/") with trailing slashes stripped,
+ * or null if the URL is invalid.
+ */
+export function getDisplayUrl(url: string): string | null {
+  const parsedUrl = URL.parse(url);
+  if (!parsedUrl?.hostname) {
+    return null;
+  }
+
+  const path = parsedUrl.pathname === '/' ? '' : parsedUrl.pathname;
+  return `${parsedUrl.hostname}${path}`.replace(/\/$/, '');
+}
+
 interface UptimeDetectorFormData {
   assertion: UptimeAssertion | null;
   body: string;

diff --git a/static/app/views/detectors/components/forms/uptime/index.tsx b/static/app/views/detectors/components/forms/uptime/index.tsx
--- a/static/app/views/detectors/components/forms/uptime/index.tsx
+++ b/static/app/views/detectors/components/forms/uptime/index.tsx
@@ -24,6 +24,7 @@
 import {ConnectedTestUptimeMonitorButton} from 'sentry/views/detectors/components/forms/uptime/connectedTestUptimeMonitorButton';
 import {UptimeDetectorFormDetectSection} from 'sentry/views/detectors/components/forms/uptime/detect';
 import {
+  getDisplayUrl,
   uptimeFormDataToEndpointPayload,
   uptimeSavedDetectorToFormData,
 } from 'sentry/views/detectors/components/forms/uptime/fields';
@@ -50,15 +51,12 @@
       return null;
     }
 
-    const parsedUrl = URL.parse(url);
-    if (!parsedUrl) {
+    const displayUrl = getDisplayUrl(url);
+    if (!displayUrl) {
       return null;
     }
 
-    const path = parsedUrl.pathname === '/' ? '' : parsedUrl.pathname;
-    const urlName = `${parsedUrl.hostname}${path}`.replace(/\/$/, '');
-
-    return t('Uptime check for %s', urlName);
+    return t('Uptime check for %s', displayUrl);
   });
 
   return (

diff --git a/static/app/views/detectors/components/forms/uptime/uptimeIssuePreview.tsx b/static/app/views/detectors/components/forms/uptime/uptimeIssuePreview.tsx
--- a/static/app/views/detectors/components/forms/uptime/uptimeIssuePreview.tsx
+++ b/static/app/views/detectors/components/forms/uptime/uptimeIssuePreview.tsx
@@ -15,15 +15,7 @@
     return FALLBACK_ISSUE_TITLE;
   }
 
-  const parsedUrl = URL.parse(url);
-  if (!parsedUrl?.hostname) {
-    return FALLBACK_ISSUE_TITLE;
-  }
-
-  const path = parsedUrl.pathname === '/' ? '' : parsedUrl.pathname;
-  const displayUrl = `${parsedUrl.hostname}${path}`.replace(/\/$/, '');
-
-  return t('Downtime detected for %s', displayUrl);
+  return t('Downtime detected for %s', url);
 }
 
 export function UptimeIssuePreview({step}: {step?: number}) {

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 3f3ab85. Configure here.}