feat(crons): Add 404 monitor details page (#70619)

simple 404

<img width="1506" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/429b9d1c-f92f-4205-917d-6a360104d9aa">

also added some basic tests to this file

static/app/views/monitors/details.spec.tsx

@@ -0,0 +1,54 @@
+import {MonitorFixture} from 'sentry-fixture/monitor';
+
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import MonitorDetails from 'sentry/views/monitors/details';
+
+describe('Monitor Details', () => {
+  const monitor = MonitorFixture();
+  const {organization, project, routerProps} = initializeOrg({
+    router: {params: {monitorSlug: monitor.slug, projectId: monitor.project.slug}},
+  });
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitor.slug}/`,
+      body: {...monitor},
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/users/`,
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/?limit=20&project=${project.id}&query=monitor.slug%3A${monitor.slug}%20environment%3A%5Bproduction%5D%20is%3Aunresolved&statsPeriod=14d`,
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitor.slug}/stats/`,
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitor.slug}/checkins/`,
+      body: [],
+    });
+  });
+
+  it('renders', async function () {
+    render(<MonitorDetails {...routerProps} />);
+    expect(await screen.findByText(monitor.slug, {exact: false})).toBeInTheDocument();
+  });
+
+  it('renders error when monitor is not found', async function () {
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitor.slug}/`,
+      statusCode: 404,
+    });
+
+    render(<MonitorDetails {...routerProps} />);
+    expect(
+      await screen.findByText('The monitor you were looking for was not found.')
+    ).toBeInTheDocument();
+  });
+});

static/app/views/monitors/details.tsx

@@ -6,6 +6,7 @@ import sortBy from 'lodash/sortBy';
 import {updateMonitor} from 'sentry/actionCreators/monitors';
 import Alert from 'sentry/components/alert';
 import * as Layout from 'sentry/components/layouts/thirds';
+import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
@@ -51,7 +52,7 @@ function MonitorDetails({params, location}: Props) {
     }
   );
 
-  const {data: monitor} = useApiQuery<Monitor>(queryKey, {
+  const {data: monitor, isError} = useApiQuery<Monitor>(queryKey, {
     staleTime: 0,
     refetchOnWindowFocus: true,
     // Refetches while we are waiting for the user to send their first check-in
@@ -86,6 +87,12 @@ function MonitorDetails({params, location}: Props) {
     }
   };
 
+  if (isError) {
+    return (
+      <LoadingError message={t('The monitor you were looking for was not found.')} />
+    );
+  }
+
   if (!monitor) {
     return (
       <Layout.Page>