[Synthetics UI] Render a 404 error if a monitor doesn't exist

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_selected_monitor.tsx

@@ -14,6 +14,7 @@ import {
   selectEncryptedSyntheticsSavedMonitors,
   selectMonitorListState,
   selectorMonitorDetailsState,
+  selectorError,
 } from '../../../state';
 
 export const useSelectedMonitor = () => {
@@ -25,6 +26,7 @@ export const useSelectedMonitor = () => {
     [monitorId, monitorsList]
   );
   const { syntheticsMonitor, syntheticsMonitorLoading } = useSelector(selectorMonitorDetailsState);
+  const error = useSelector(selectorError);
   const dispatch = useDispatch();
 
   const isMonitorFromListValid =
@@ -46,5 +48,6 @@ export const useSelectedMonitor = () => {
   return {
     monitor: availableMonitor,
     loading: syntheticsMonitorLoading || monitorListLoading,
+    error,
   };
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_page.tsx

@@ -11,6 +11,6 @@ import { useMonitorListBreadcrumbs } from '../monitors_page/hooks/use_breadcrumb
 
 export const MonitorDetailsPage: React.FC<{ children: React.ReactElement }> = ({ children }) => {
   const { monitor } = useSelectedMonitor();
-  useMonitorListBreadcrumbs([{ text: monitor?.name ?? '' }]);
+  useMonitorListBreadcrumbs(monitor ? [{ text: monitor?.name ?? '' }] : []);
   return children;
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/not_found/not_found.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const NOT_FOUND_TITLE = i18n.translate('xpack.synthetics.notFoundTitle', {
+  defaultMessage: 'Page not found',
+});
+
+const NOT_FOUND_BODY = i18n.translate('xpack.synthetics.notFoundBody', {
+  defaultMessage:
+    "Sorry, we can't find the page you're looking for. It might have been removed or renamed, or maybe it never existed.",
+});
+
+/**
+ * Renders a "Page not found" error.
+ *
+ * @deprecated This component must be moved to Kibana/Shared UX. It was created
+ * as a temporary solution to move #144366 forward but it should not be used.
+ */
+export function NotFound(): JSX.Element {
+  return (
+    <EuiEmptyPrompt
+      layout="vertical"
+      color="subdued"
+      titleSize="m"
+      iconType="questionInCircle"
+      iconColor="primary"
+      title={<h2>{NOT_FOUND_TITLE}</h2>}
+      body={<p>{NOT_FOUND_BODY}</p>}
+    />
+  );
+}

x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx

@@ -58,12 +58,15 @@ import { MonitorSummary } from './components/monitor_details/monitor_summary/mon
 import { MonitorHistory } from './components/monitor_details/monitor_history/monitor_history';
 import { MonitorErrors } from './components/monitor_details/monitor_errors/monitor_errors';
 import { StepDetailPage } from './components/step_details_page/step_detail_page';
+import { useSelectedMonitor } from './components/monitor_details/hooks/use_selected_monitor';
+import { NotFound } from './components/not_found/not_found';
 
 export type RouteProps = LazyObservabilityPageTemplateProps & {
   path: string;
   component: React.FC;
   dataTestSubj: string;
   title: string;
+  is404?: () => boolean;
 };
 
 const baseTitle = i18n.translate('xpack.synthetics.routes.baseTitle', {
@@ -103,6 +106,10 @@ const getRoutes = (
         values: { baseTitle },
       }),
       path: MONITOR_ROUTE,
+      is404: function useIs404() {
+        const { error } = useSelectedMonitor();
+        return error?.body.statusCode === 404;
+      },
       component: () => (
         <MonitorDetailsPage>
           <MonitorSummary />
@@ -117,6 +124,10 @@ const getRoutes = (
         values: { baseTitle },
       }),
       path: MONITOR_HISTORY_ROUTE,
+      is404: function useIs404() {
+        const { error } = useSelectedMonitor();
+        return error?.body.statusCode === 404;
+      },
       component: () => (
         <MonitorDetailsPage>
           <MonitorHistory />
@@ -131,6 +142,10 @@ const getRoutes = (
         values: { baseTitle },
       }),
       path: MONITOR_ERRORS_ROUTE,
+      is404: function useIs404() {
+        const { error } = useSelectedMonitor();
+        return error?.body.statusCode === 404;
+      },
       component: () => (
         <MonitorDetailsPage>
           <MonitorErrors />
@@ -413,18 +428,25 @@ export const PageRouter: FC = () => {
           component: RouteComponent,
           dataTestSubj,
           pageHeader,
+          is404,
           ...pageTemplateProps
         }: RouteProps) => (
           <Route path={path} key={dataTestSubj} exact={true}>
             <div className={APP_WRAPPER_CLASS} data-test-subj={dataTestSubj}>
               <RouteInit title={title} path={path} />
-              <SyntheticsPageTemplateComponent
-                path={path}
-                pageHeader={pageHeader}
-                {...pageTemplateProps}
-              >
-                <RouteComponent />
-              </SyntheticsPageTemplateComponent>
+              {is404?.() ? (
+                <SyntheticsPageTemplateComponent path={path} {...pageTemplateProps}>
+                  <NotFound />
+                </SyntheticsPageTemplateComponent>
+              ) : (
+                <SyntheticsPageTemplateComponent
+                  path={path}
+                  pageHeader={pageHeader}
+                  {...pageTemplateProps}
+                >
+                  <RouteComponent />
+                </SyntheticsPageTemplateComponent>
+              )}
             </div>
           </Route>
         )

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_details/selectors.ts

@@ -11,6 +11,7 @@ import type { SyntheticsAppState } from '../root_reducer';
 const getState = (appState: SyntheticsAppState) => appState.monitorDetails;
 
 export const selectorMonitorDetailsState = createSelector(getState, (state) => state);
+export const selectorError = createSelector(getState, (state) => state.error);
 
 export const selectSelectedLocationId = createSelector(
   getState,