fix(crons): Pass environment to edit monitor page (#47435)

When saving the edit monitor page, we are redirected to the monitor
details page with unfortunately no monitor environment in the URL. This
causes us to query for no monitor environments from the backend and
making the frontend believe that the monitor has not received any
checkins. Hack in the environment through the URL to prevent this for
now.

Author: David Wang

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

@@ -7,6 +7,7 @@ import Confirm from 'sentry/components/confirm';
 import {IconDelete, IconEdit, IconPause, IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import useApi from 'sentry/utils/useApi';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 import {Monitor, MonitorStatus} from '../types';
@@ -21,6 +22,7 @@ type Props = {
 
 function MonitorHeaderActions({monitor, orgId, onUpdate}: Props) {
   const api = useApi();
+  const {selection} = usePageFilters();
 
   const handleDelete = async () => {
     await deleteMonitor(api, orgId, monitor.slug);
@@ -64,7 +66,14 @@ function MonitorHeaderActions({monitor, orgId, onUpdate}: Props) {
         priority="primary"
         size="sm"
         icon={<IconEdit size="xs" />}
-        to={`/organizations/${orgId}/crons/${monitor.slug}/edit/`}
+        to={{
+          pathname: `/organizations/${orgId}/crons/${monitor.slug}/edit/`,
+          // TODO(davidenwang): Right now we have to pass the environment
+          // through the URL so that when we save the monitor and are
+          // redirected back to the details page it queries the backend
+          // for a monitor environment with check-in data
+          query: {environment: selection.environments},
+        }}
       >
         {t('Edit')}
       </Button>

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

@@ -102,7 +102,14 @@ function MonitorRow({monitor, monitorEnv, organization, onDelete}: MonitorRowPro
     {
       key: 'edit',
       label: t('Edit'),
-      to: normalizeUrl(`/organizations/${organization.slug}/crons/${monitor.slug}/edit/`),
+      // TODO(davidenwang): Right now we have to pass the environment
+      // through the URL so that when we save the monitor and are
+      // redirected back to the details page it queries the backend
+      // for a monitor environment with check-in data
+      to: normalizeUrl({
+        pathname: `/organizations/${organization.slug}/crons/${monitor.slug}/edit/`,
+        query: {environment: monitorEnv?.name},
+      }),
     },
     {
       key: 'delete',

static/app/views/monitors/edit.tsx

@@ -8,6 +8,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {useParams} from 'sentry/utils/useParams';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
@@ -16,6 +17,7 @@ import {Monitor} from './types';
 
 export default function EditMonitor() {
   const {monitorSlug} = useParams();
+  const {selection} = usePageFilters();
   const organization = useOrganization();
   const queryClient = useQueryClient();
 
@@ -33,7 +35,10 @@ export default function EditMonitor() {
   function onSubmitSuccess(data: Monitor) {
     setApiQueryData(queryClient, [queryKeyUrl], data);
     browserHistory.push(
-      normalizeUrl(`/organizations/${organization.slug}/crons/${data.slug}/`)
+      normalizeUrl({
+        pathname: `/organizations/${organization.slug}/crons/${data.slug}/`,
+        query: {environment: selection.environments},
+      })
     );
   }