feat(aci): add edit monitors drawer and link monitor creation page (#91761)

**"Create New Monitor"** now links to the monitor creation page
**"Edit Monitors"** now opens a new drawer to connect/disconnect
monitors

<img width="1219" alt="Screenshot 2025-05-15 at 11 44 11 AM"
src="https://github.com/user-attachments/assets/050c6956-e4d2-4362-a8c0-014e921614e9"
/>

doesn't look like much without mock data
<img width="1486" alt="Screenshot 2025-05-15 at 11 42 48 AM"
src="https://github.com/user-attachments/assets/38a409c0-cbd0-40b8-aaaa-901b553fa7e4"
/>


**designs with mock data:**
<img width="410" alt="Screenshot 2025-05-15 at 11 47 17 AM"
src="https://github.com/user-attachments/assets/06929b99-fd6e-44cc-a8b5-20a9891354ce"
/>

Author: ameliahsu

static/app/views/automations/components/automationForm.tsx

@@ -4,27 +4,33 @@ import {flattie} from 'flattie';
 
 import {Flex} from 'sentry/components/container/flex';
 import {Button} from 'sentry/components/core/button';
+import {LinkButton} from 'sentry/components/core/button/linkButton';
 import SelectField from 'sentry/components/forms/fields/selectField';
 import Form from 'sentry/components/forms/form';
 import FormModel from 'sentry/components/forms/model';
+import useDrawer from 'sentry/components/globalDrawer';
+import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
 import {useDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {DebugForm} from 'sentry/components/workflowEngine/form/debug';
 import {Card} from 'sentry/components/workflowEngine/ui/card';
 import {IconAdd, IconEdit} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import useOrganization from 'sentry/utils/useOrganization';
 import AutomationBuilder from 'sentry/views/automations/components/automationBuilder';
 import {
   AutomationBuilderContext,
   initialAutomationBuilderState,
   useAutomationBuilderReducer,
 } from 'sentry/views/automations/components/automationBuilderContext';
 import ConnectedMonitorsList from 'sentry/views/automations/components/connectedMonitorsList';
+import EditConnectedMonitors from 'sentry/views/automations/components/editConnectedMonitors';
 import {
   NEW_AUTOMATION_CONNECTED_IDS_KEY,
   useConnectedIds,
 } from 'sentry/views/automations/hooks/utils';
+import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
 
 const FREQUENCY_OPTIONS = [
   {value: '5', label: t('5 minutes')},
@@ -39,6 +45,7 @@ const FREQUENCY_OPTIONS = [
 ];
 
 export default function AutomationForm() {
+  const organization = useOrganization();
   const title = useDocumentTitle();
   const {state, actions} = useAutomationBuilderReducer();
   const [model] = useState(() => new FormModel());
@@ -48,11 +55,34 @@ export default function AutomationForm() {
   }, [title, model]);
 
   const monitors: Detector[] = []; // TODO: Fetch monitors from API
+  const storageKey = NEW_AUTOMATION_CONNECTED_IDS_KEY; // TODO: use automation id for storage key when editing an existing automation
   const {connectedIds, toggleConnected} = useConnectedIds({
-    storageKey: NEW_AUTOMATION_CONNECTED_IDS_KEY,
+    storageKey,
   });
   const connectedMonitors = monitors.filter(monitor => connectedIds.has(monitor.id));
 
+  const {openDrawer: openEditMonitorsDrawer, isDrawerOpen: isEditMonitorsDrawerOpen} =
+    useDrawer();
+
+  const showEditMonitorsDrawer = () => {
+    if (!isEditMonitorsDrawerOpen) {
+      openEditMonitorsDrawer(
+        () => (
+          <div>
+            <DrawerHeader />
+            <DrawerBody>
+              <EditConnectedMonitors storageKey={storageKey} />
+            </DrawerBody>
+          </div>
+        ),
+        {
+          ariaLabel: 'Edit Monitors Drawer',
+          drawerKey: 'edit-monitors-drawer',
+        }
+      );
+    }
+  };
+
   return (
     <Form
       hideFooter
@@ -69,8 +99,15 @@ export default function AutomationForm() {
               toggleConnected={toggleConnected}
             />
             <ButtonWrapper justify="space-between">
-              <Button icon={<IconAdd />}>{t('Create New Monitor')}</Button>
-              <Button icon={<IconEdit />}>{t('Edit Monitors')}</Button>
+              <LinkButton
+                icon={<IconAdd />}
+                to={`${makeMonitorBasePathname(organization.slug)}new/`}
+              >
+                {t('Create New Monitor')}
+              </LinkButton>
+              <Button icon={<IconEdit />} onClick={showEditMonitorsDrawer}>
+                {t('Edit Monitors')}
+              </Button>
             </ButtonWrapper>
           </Card>
           <Card>