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

packages/shared-ux/prompt/not_found/src/not_found_prompt.tsx

@@ -53,10 +53,13 @@ export const NotFoundPrompt = ({ actions }: NotFoundProps) => {
 
   useEffect(() => {
     const loadImage = async () => {
-      const { default: imgSrc } = await import(
-        `./assets/404_astronaut_${colorMode.toLowerCase()}.png`
-      );
-      setImageSrc(imgSrc);
+      if (colorMode === 'DARK') {
+        const { default: imgSrc } = await import(`./assets/404_astronaut_dark.png`);
+        setImageSrc(imgSrc);
+      } else {
+        const { default: imgSrc } = await import(`./assets/404_astronaut_light.png`);
+        setImageSrc(imgSrc);
+      }
     };
     loadImage();
   }, [colorMode]);

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

@@ -15,6 +15,7 @@ import {
   selectEncryptedSyntheticsSavedMonitors,
   selectMonitorListState,
   selectorMonitorDetailsState,
+  selectorError,
 } from '../../../state';
 
 export const useSelectedMonitor = () => {
@@ -26,6 +27,7 @@ export const useSelectedMonitor = () => {
     () => monitorsList.find((monitor) => monitor[ConfigKey.CONFIG_ID] === monitorId) ?? null,
     [monitorId, monitorsList]
   );
+  const error = useSelector(selectorError);
   const { lastRefresh, refreshInterval } = useSyntheticsRefreshContext();
   const { syntheticsMonitor, syntheticsMonitorLoading, syntheticsMonitorDispatchedAt } =
     useSelector(selectorMonitorDetailsState);
@@ -50,8 +52,10 @@ export const useSelectedMonitor = () => {
   useEffect(() => {
     // Only perform periodic refresh if the last dispatch was earlier enough
     if (
+      monitorId &&
       !syntheticsMonitorLoading &&
       !monitorListLoading &&
+      syntheticsMonitorDispatchedAt > 0 &&
       Date.now() - syntheticsMonitorDispatchedAt > refreshInterval
     ) {
       dispatch(getMonitorAction.get({ monitorId }));
@@ -69,5 +73,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

@@ -16,6 +16,7 @@ import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useInspectorContext } from '@kbn/observability-plugin/public';
 import type { LazyObservabilityPageTemplateProps } from '@kbn/observability-plugin/public';
+import { NotFoundPrompt } from '@kbn/shared-ux-prompt-not-found';
 import { getSettingsRouteConfig } from './components/settings/route_config';
 import { TestRunDetails } from './components/test_run_details/test_run_details';
 import { ErrorDetailsPage } from './components/error_details/error_details_page';
@@ -58,12 +59,14 @@ 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';
 
 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}>
+                  <NotFoundPrompt />
+                </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,