ref(crons): Refactor out monitor detail query key generation (#62284)

Unifying url query key generation

static/app/views/monitors/details.tsx

@@ -19,6 +19,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {CronDetailsTimeline} from 'sentry/views/monitors/components/cronDetailsTimeline';
 import DetailsSidebar from 'sentry/views/monitors/components/detailsSidebar';
+import {makeMonitorDetailsQueryKey} from 'sentry/views/monitors/utils';
 
 import MonitorCheckIns from './components/monitorCheckIns';
 import MonitorHeader from './components/monitorHeader';
@@ -47,10 +48,10 @@ function MonitorDetails({params, location}: Props) {
   // if we have all environments selected
   const environment = selection.environments[0];
 
-  const queryKey = [
-    `/organizations/${organization.slug}/monitors/${params.monitorSlug}/`,
-    {query: {...location.query, environment}},
-  ] as const;
+  const queryKey = makeMonitorDetailsQueryKey(organization, params.monitorSlug, {
+    ...location.query,
+    environment,
+  });
 
   const {data: monitor} = useApiQuery<Monitor>(queryKey, {
     staleTime: 0,

static/app/views/monitors/edit.tsx

@@ -9,16 +9,12 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {
-  ApiQueryKey,
-  setApiQueryData,
-  useApiQuery,
-  useQueryClient,
-} from 'sentry/utils/queryClient';
+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';
+import {makeMonitorDetailsQueryKey} from 'sentry/views/monitors/utils';
 
 import MonitorForm from './components/monitorForm';
 import {Monitor} from './types';
@@ -29,10 +25,9 @@ export default function EditMonitor() {
   const organization = useOrganization();
   const queryClient = useQueryClient();
 
-  const queryKey: ApiQueryKey = [
-    `/organizations/${organization.slug}/monitors/${monitorSlug}/`,
-    {query: {expand: ['alertRule']}},
-  ];
+  const queryKey = makeMonitorDetailsQueryKey(organization, monitorSlug, {
+    expand: ['alertRule'],
+  });
 
   const {
     isLoading,

static/app/views/monitors/utils.tsx

@@ -16,6 +16,17 @@ export function makeMonitorListQueryKey(organization: Organization, location: Lo
   ] as const;
 }
 
+export function makeMonitorDetailsQueryKey(
+  organization: Organization,
+  monitorSlug: string,
+  query?: Record<string, any>
+) {
+  return [
+    `/organizations/${organization.slug}/monitors/${monitorSlug}/`,
+    {query},
+  ] as const;
+}
+
 export function crontabAsText(crontabInput: string | null): string | null {
   if (!crontabInput) {
     return null;