ref(crons): Prefer orgSlug over orgId (#66894)

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

@@ -10,14 +10,14 @@ import MonitorHeaderActions from './monitorHeaderActions';
 interface Props {
   monitor: Monitor;
   onUpdate: (data: Monitor) => void;
-  orgId: string;
+  orgSlug: string;
 }
 
-function MonitorHeader({monitor, orgId, onUpdate}: Props) {
+function MonitorHeader({monitor, orgSlug, onUpdate}: Props) {
   const crumbs = [
     {
       label: t('Crons'),
-      to: `/organizations/${orgId}/crons/`,
+      to: `/organizations/${orgSlug}/crons/`,
       preservePageFilters: true,
     },
     {
@@ -40,7 +40,7 @@ function MonitorHeader({monitor, orgId, onUpdate}: Props) {
         </Layout.Title>
       </Layout.HeaderContent>
       <Layout.HeaderActions>
-        <MonitorHeaderActions orgId={orgId} monitor={monitor} onUpdate={onUpdate} />
+        <MonitorHeaderActions orgSlug={orgSlug} monitor={monitor} onUpdate={onUpdate} />
       </Layout.HeaderActions>
     </Layout.Header>
   );

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

@@ -18,10 +18,10 @@ import {StatusToggleButton} from './statusToggleButton';
 type Props = {
   monitor: Monitor;
   onUpdate: (data: Monitor) => void;
-  orgId: string;
+  orgSlug: string;
 };
 
-function MonitorHeaderActions({monitor, orgId, onUpdate}: Props) {
+function MonitorHeaderActions({monitor, orgSlug, onUpdate}: Props) {
   const api = useApi();
   const {selection} = usePageFilters();
 
@@ -33,17 +33,17 @@ function MonitorHeaderActions({monitor, orgId, onUpdate}: Props) {
   };
 
   const handleDelete = async () => {
-    await deleteMonitor(api, orgId, monitor.slug);
+    await deleteMonitor(api, orgSlug, monitor.slug);
     browserHistory.push(
       normalizeUrl({
-        pathname: `/organizations/${orgId}/crons/`,
+        pathname: `/organizations/${orgSlug}/crons/`,
         query: endpointOptions.query,
       })
     );
   };
 
   const handleUpdate = async (data: Partial<Monitor>) => {
-    const resp = await updateMonitor(api, orgId, monitor.slug, data);
+    const resp = await updateMonitor(api, orgSlug, monitor.slug, data);
 
     if (resp !== null) {
       onUpdate?.(resp);
@@ -76,7 +76,7 @@ function MonitorHeaderActions({monitor, orgId, onUpdate}: Props) {
         size="sm"
         icon={<IconEdit />}
         to={{
-          pathname: `/organizations/${orgId}/crons/${monitor.slug}/edit/`,
+          pathname: `/organizations/${orgSlug}/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

static/app/views/monitors/details.tsx

@@ -94,7 +94,11 @@ function MonitorDetails({params, location}: Props) {
   return (
     <SentryDocumentTitle title={`Crons — ${monitor.name}`}>
       <Layout.Page>
-        <MonitorHeader monitor={monitor} orgId={organization.slug} onUpdate={onUpdate} />
+        <MonitorHeader
+          monitor={monitor}
+          orgSlug={organization.slug}
+          onUpdate={onUpdate}
+        />
         <Layout.Body>
           <Layout.Main>
             <StyledPageFilterBar condensed>