ref(aci): ref editConnectedMonitors to accept list of connected ids (#92129)

ameliahsu · web-flow · commit 9d331598a4e9 · 2025-05-22T11:42:01.000-07:00
Needed to lift state out of the `editConnectedMonitors` component since the Edit Monitors drawer (`editConnectedMonitorsDrawer`) does not rerender when the state is updated, since it is only rendered once when the drawer is opened. To fix this, I added a footer to the drawer where changes to connected monitors can be saved. After the user has saved their changes, these changes are reflected on the config page. https://github.com/user-attachments/assets/48ef6411-64b9-4520-a12c-4b300631f49b Also added a temporary filter to the detector query to only fetch metric detectors, since uptime monitors are erroring
diff --git a/static/app/components/workflowEngine/ui/footer.tsx b/static/app/components/workflowEngine/ui/footer.tsx
@@ -16,6 +16,7 @@ export const StickyFooter = styled('div')`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  z-index: ${p => p.theme.zIndex.initial};
 `;
 
 export const StickyFooterLabel = styled('p')`
diff --git a/static/app/views/automations/components/automationForm.tsx b/static/app/views/automations/components/automationForm.tsx
@@ -7,17 +7,15 @@ 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 type 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 {EnvironmentSelector} from 'sentry/components/workflowEngine/form/environmentSelector';
 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 {
@@ -26,11 +24,9 @@ import {
   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 {EditConnectedMonitorsDrawer} from 'sentry/views/automations/components/editConnectedMonitorsDrawer';
+import {NEW_AUTOMATION_CONNECTED_IDS_KEY} from 'sentry/views/automations/hooks/utils';
+import {useDetectorsQuery} from 'sentry/views/detectors/hooks';
 import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
 
 const FREQUENCY_OPTIONS = [
@@ -45,36 +41,36 @@ const FREQUENCY_OPTIONS = [
   {value: '43200', label: t('30 days')},
 ];
 
-export default function AutomationForm() {
+export default function AutomationForm({model}: {model: FormModel}) {
   const organization = useOrganization();
   const title = useDocumentTitle();
   const {state, actions} = useAutomationBuilderReducer();
-  const [model] = useState(() => new FormModel());
 
   useEffect(() => {
     model.setValue('name', title);
   }, [title, model]);
 
-  const monitors: Detector[] = []; // TODO: Fetch monitors from API
+  const {data: monitors = []} = useDetectorsQuery();
   const storageKey = NEW_AUTOMATION_CONNECTED_IDS_KEY; // TODO: use automation id for storage key when editing an existing automation
-  const {connectedIds, toggleConnected} = useConnectedIds({
-    storageKey,
-  });
+  const [connectedIds, setConnectedIds] = useState<Set<string>>(
+    () => new Set(JSON.parse(localStorage.getItem(storageKey) || '[]'))
+  );
   const connectedMonitors = monitors.filter(monitor => connectedIds.has(monitor.id));
 
-  const {openDrawer: openEditMonitorsDrawer, isDrawerOpen: isEditMonitorsDrawerOpen} =
-    useDrawer();
+  const {openDrawer, isDrawerOpen, closeDrawer} = useDrawer();
 
   const showEditMonitorsDrawer = () => {
-    if (!isEditMonitorsDrawerOpen) {
-      openEditMonitorsDrawer(
+    if (!isDrawerOpen) {
+      openDrawer(
         () => (
-          <div>
-            <DrawerHeader />
-            <DrawerBody>
-              <EditConnectedMonitors storageKey={storageKey} />
-            </DrawerBody>
-          </div>
+          <EditConnectedMonitorsDrawer
+            initialIds={connectedIds}
+            onSave={ids => {
+              setConnectedIds(ids);
+              localStorage.setItem(storageKey, JSON.stringify(Array.from(ids)));
+              closeDrawer();
+            }}
+          />
         ),
         {
           ariaLabel: 'Edit Monitors Drawer',
@@ -98,8 +94,8 @@ export default function AutomationForm() {
             <Heading>{t('Connect Monitors')}</Heading>
             <ConnectedMonitorsList
               monitors={connectedMonitors}
-              connectedMonitorIds={connectedIds}
-              toggleConnected={toggleConnected}
+              connectedIds={connectedIds}
+              setConnectedIds={setConnectedIds}
             />
             <ButtonWrapper justify="space-between">
               <LinkButton
diff --git a/static/app/views/automations/components/connectedMonitorsList.tsx b/static/app/views/automations/components/connectedMonitorsList.tsx
@@ -1,3 +1,5 @@
+import type {Dispatch, SetStateAction} from 'react';
+
 import {Button} from 'sentry/components/core/button';
 import {IssueCell} from 'sentry/components/workflowEngine/gridCell/issueCell';
 import {TitleCell} from 'sentry/components/workflowEngine/gridCell/titleCell';
@@ -12,17 +14,29 @@ import {makeMonitorDetailsPathname} from 'sentry/views/detectors/pathnames';
 
 type Props = {
   monitors: Detector[];
-  connectedMonitorIds?: Set<string>;
-  toggleConnected?: (id: string) => void;
+  connectedIds?: Set<string>;
+  setConnectedIds?: Dispatch<SetStateAction<Set<string>>>;
 };
 
 export default function ConnectedMonitorsList({
   monitors,
-  connectedMonitorIds,
-  toggleConnected,
+  connectedIds,
+  setConnectedIds,
 }: Props) {
   const organization = useOrganization();
-  const canEdit = connectedMonitorIds && !!toggleConnected;
+  const canEdit = connectedIds && !!setConnectedIds;
+
+  const toggleConnected = (id: string) => {
+    setConnectedIds?.(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
 
   const data = monitors.map(monitor => ({
     title: {
@@ -35,7 +49,7 @@ export default function ConnectedMonitorsList({
     createdBy: monitor.createdBy,
     connected: canEdit
       ? {
-          isConnected: connectedMonitorIds?.has(monitor.id),
+          isConnected: connectedIds?.has(monitor.id),
           toggleConnected: () => toggleConnected?.(monitor.id),
         }
       : undefined,
diff --git a/static/app/views/automations/components/editConnectedMonitors.tsx b/static/app/views/automations/components/editConnectedMonitors.tsx
@@ -1,20 +1,20 @@
+import type {Dispatch, SetStateAction} from 'react';
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import SearchBar from 'sentry/components/searchBar';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Detector} from 'sentry/types/workflowEngine/detectors';
 import ConnectedMonitorsList from 'sentry/views/automations/components/connectedMonitorsList';
-import {useConnectedIds} from 'sentry/views/automations/hooks/utils';
+import {useDetectorsQuery} from 'sentry/views/detectors/hooks';
 
 interface Props {
-  storageKey: string;
+  connectedIds: Set<string>;
+  setConnectedIds: Dispatch<SetStateAction<Set<string>>>;
 }
 
-export default function EditConnectedMonitors({storageKey}: Props) {
-  const monitors: Detector[] = []; // TODO: Fetch monitors from API
-  const {connectedIds, toggleConnected} = useConnectedIds({storageKey});
+export default function EditConnectedMonitors({connectedIds, setConnectedIds}: Props) {
+  const {data: monitors = []} = useDetectorsQuery();
 
   const connectedMonitors = monitors.filter(monitor => connectedIds.has(monitor.id));
   const unconnectedMonitors = monitors.filter(monitor => !connectedIds.has(monitor.id));
@@ -26,8 +26,8 @@ export default function EditConnectedMonitors({storageKey}: Props) {
           <Heading>{t('Connected Monitors')}</Heading>
           <ConnectedMonitorsList
             monitors={connectedMonitors}
-            connectedMonitorIds={connectedIds}
-            toggleConnected={toggleConnected}
+            connectedIds={connectedIds}
+            setConnectedIds={setConnectedIds}
           />
         </Fragment>
       )}
@@ -39,8 +39,8 @@ export default function EditConnectedMonitors({storageKey}: Props) {
       </div>
       <ConnectedMonitorsList
         monitors={unconnectedMonitors}
-        connectedMonitorIds={connectedIds}
-        toggleConnected={toggleConnected}
+        connectedIds={connectedIds}
+        setConnectedIds={setConnectedIds}
       />
     </div>
   );
diff --git a/static/app/views/automations/components/editConnectedMonitorsDrawer.tsx b/static/app/views/automations/components/editConnectedMonitorsDrawer.tsx
@@ -0,0 +1,60 @@
+import {useState} from 'react';
+import styled from '@emotion/styled';
+
+import {Flex} from 'sentry/components/container/flex';
+import {Button} from 'sentry/components/core/button';
+import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
+import {StickyFooter} from 'sentry/components/workflowEngine/ui/footer';
+import {IconAdd} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import useOrganization from 'sentry/utils/useOrganization';
+import EditConnectedMonitors from 'sentry/views/automations/components/editConnectedMonitors';
+import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
+
+interface Props {
+  initialIds: Set<string>;
+  onSave: (ids: Set<string>) => void;
+}
+
+export function EditConnectedMonitorsDrawer({initialIds, onSave}: Props) {
+  const organization = useOrganization();
+  const [connectedIds, setConnectedIds] = useState<Set<string>>(initialIds);
+
+  return (
+    <DrawerWrapper>
+      <DrawerHeader />
+      <StyledDrawerBody>
+        <EditConnectedMonitors
+          connectedIds={connectedIds}
+          setConnectedIds={setConnectedIds}
+        />
+      </StyledDrawerBody>
+      <StickyFooter>
+        <Flex justify="space-between" flex={1}>
+          <LinkButton
+            icon={<IconAdd />}
+            to={`${makeMonitorBasePathname(organization.slug)}new/`}
+          >
+            {t('Create New Monitor')}
+          </LinkButton>
+          <Button priority="primary" onClick={() => onSave(connectedIds)}>
+            {t('Save')}
+          </Button>
+        </Flex>
+      </StickyFooter>
+    </DrawerWrapper>
+  );
+}
+
+const DrawerWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const StyledDrawerBody = styled(DrawerBody)`
+  flex: 1;
+  overflow: auto;
+`;
diff --git a/static/app/views/automations/new-settings.tsx b/static/app/views/automations/new-settings.tsx
@@ -1,6 +1,9 @@
+import {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,
@@ -16,10 +19,11 @@ import {makeAutomationBasePathname} from 'sentry/views/automations/pathnames';
 export default function AutomationNewSettings() {
   const organization = useOrganization();
   useWorkflowEngineFeatureGate({redirect: true});
+  const model = useMemo(() => new FormModel(), []);
 
   return (
     <NewAutomationLayout>
-      <AutomationForm />
+      <AutomationForm model={model} />
       <StickyFooter>
         <StickyFooterLabel>{t('Step 2 of 2')}</StickyFooterLabel>
         <Flex gap={space(1)}>
diff --git a/static/app/views/automations/new.tsx b/static/app/views/automations/new.tsx
@@ -1,3 +1,4 @@
+import {useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/container/flex';
@@ -22,40 +23,51 @@ export default function AutomationNew() {
   const organization = useOrganization();
   useWorkflowEngineFeatureGate({redirect: true});
 
+  const storageKey = NEW_AUTOMATION_CONNECTED_IDS_KEY;
+  const [connectedIds, setConnectedIds] = useState<Set<string>>(
+    new Set(JSON.parse(localStorage.getItem(storageKey) || '[]'))
+  );
+  const saveConnectedIds = () => {
+    localStorage.setItem(storageKey, JSON.stringify(Array.from(connectedIds)));
+  };
+  const clearConnectedIds = () => {
+    localStorage.removeItem(storageKey);
+  };
+
   return (
     <NewAutomationLayout>
       <ContentWrapper>
         <Flex column gap={space(1.5)} style={{padding: space(2)}}>
           <Card>
-            <EditConnectedMonitors storageKey={NEW_AUTOMATION_CONNECTED_IDS_KEY} />
+            <EditConnectedMonitors
+              connectedIds={connectedIds}
+              setConnectedIds={setConnectedIds}
+            />
           </Card>
           <span>
             <Button icon={<IconAdd />}>{t('Create New Monitor')}</Button>
           </span>
         </Flex>
       </ContentWrapper>
-      <StyledStickyFooter>
+      <StickyFooter>
         <StickyFooterLabel>{t('Step 1 of 2')}</StickyFooterLabel>
         <Flex gap={space(1)}>
           <LinkButton
             priority="default"
             to={makeAutomationBasePathname(organization.slug)}
+            onClick={clearConnectedIds}
           >
             {t('Cancel')}
           </LinkButton>
-          <LinkButton priority="primary" to="settings">
+          <LinkButton priority="primary" to="settings" onClick={saveConnectedIds}>
             {t('Next')}
           </LinkButton>
         </Flex>
-      </StyledStickyFooter>
+      </StickyFooter>
     </NewAutomationLayout>
   );
 }
 
 const ContentWrapper = styled('div')`
   position: relative;
 `;
-
-const StyledStickyFooter = styled(StickyFooter)`
-  z-index: ${p => p.theme.zIndex.initial};
-`;
diff --git a/static/app/views/detectors/hooks/index.ts b/static/app/views/detectors/hooks/index.ts
@@ -1,6 +1,7 @@
 import {t} from 'sentry/locale';
 import AlertStore from 'sentry/stores/alertStore';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import {
   useApiQueries,
   useApiQuery,
@@ -22,8 +23,9 @@ export function useDetectorsQuery(_options: UseDetectorsQueryOptions = {}) {
   });
 }
 
-export const makeDetectorQueryKey = (orgSlug: string, detectorId = ''): [url: string] => [
+export const makeDetectorQueryKey = (orgSlug: string, detectorId = ''): ApiQueryKey => [
   `/organizations/${orgSlug}/detectors/${detectorId ? `${detectorId}/` : ''}`,
+  {query: {query: 'type:metric_issue'}}, // TODO: remove this when backend is ready
 ];
 
 export function useCreateDetector() {
