feat(crons): Add delete option to monitor details (#62285)

![image](https://github.com/getsentry/sentry/assets/9372512/3d8ad2a2-57b9-497a-92b6-5dddae75a3e7)

Muting coming next 👀 

Depends on: https://github.com/getsentry/sentry/pull/62284

static/app/views/monitors/components/cronDetailsTimeline.tsx

@@ -2,13 +2,15 @@ import {useRef} from 'react';
 import styled from '@emotion/styled';
 import moment from 'moment';
 
+import {deleteMonitorEnvironment} from 'sentry/actionCreators/monitors';
 import Panel from 'sentry/components/panels/panel';
 import Text from 'sentry/components/text';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {parsePeriodToHours} from 'sentry/utils/dates';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import useApi from 'sentry/utils/useApi';
 import {useDimensions} from 'sentry/utils/useDimensions';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
@@ -20,6 +22,7 @@ import {TimelineTableRow} from 'sentry/views/monitors/components/overviewTimelin
 import {MonitorBucketData} from 'sentry/views/monitors/components/overviewTimeline/types';
 import {getConfigFromTimeRange} from 'sentry/views/monitors/components/overviewTimeline/utils';
 import {Monitor} from 'sentry/views/monitors/types';
+import {makeMonitorDetailsQueryKey} from 'sentry/views/monitors/utils';
 
 interface Props {
   monitor: Monitor;
@@ -28,7 +31,9 @@ interface Props {
 
 export function CronDetailsTimeline({monitor, organization}: Props) {
   const {location} = useRouter();
-  const nowRef = useRef(new Date());
+  const api = useApi();
+  const queryClient = useQueryClient();
+  const nowRef = useRef<Date>(new Date());
   const {selection} = usePageFilters();
   const {period} = selection.datetime;
   let {end, start} = selection.datetime;
@@ -70,6 +75,32 @@ export function CronDetailsTimeline({monitor, organization}: Props) {
     }
   );
 
+  const monitorDetailsQueryKey = makeMonitorDetailsQueryKey(organization, monitor.slug, {
+    ...location.query,
+  });
+
+  const handleDeleteEnvironment = async (env: string) => {
+    const success = await deleteMonitorEnvironment(
+      api,
+      organization.slug,
+      monitor.slug,
+      env
+    );
+    if (!success) {
+      return;
+    }
+
+    setApiQueryData(queryClient, monitorDetailsQueryKey, (oldMonitorDetails: Monitor) => {
+      const newEnvList = oldMonitorDetails.environments.filter(e => e.name !== env);
+      const newMonitorDetails = {
+        ...oldMonitorDetails,
+        environments: newEnvList,
+      };
+
+      return newMonitorDetails;
+    });
+  };
+
   return (
     <TimelineContainer>
       <TimelineWidthTracker ref={elementRef} />
@@ -94,6 +125,7 @@ export function CronDetailsTimeline({monitor, organization}: Props) {
         end={end}
         start={start}
         width={timelineWidth}
+        onDeleteEnvironment={handleDeleteEnvironment}
         singleMonitorView
       />
     </TimelineContainer>