replace not found page with a warning banner

x-pack/plugins/ml/public/application/components/ml_page/ml_page.tsx

@@ -8,10 +8,9 @@
 import React, { createContext, FC, useCallback, useMemo, useReducer } from 'react';
 import { EuiLoadingContent, EuiPageContentBody } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import type { AppMountParameters } from '@kbn/core/public';
 import { KibanaPageTemplate, RedirectAppLinks } from '@kbn/kibana-react-plugin/public';
-import { NotFoundPage } from '../not_found_page';
 import { useSideNavItems } from './side_nav';
 import * as routes from '../../routing/routes';
 import { MlPageWrapper } from '../../routing/ml_page_wrapper';
@@ -158,7 +157,7 @@ const CommonPageWrapper: FC<CommonPageWrapperProps> = React.memo(
                   />
                 );
               })}
-              <Route component={NotFoundPage} />
+              <Redirect to="/overview" />
             </Switch>
           </EuiPageContentBody>
         </MlPageControlsContext.Provider>

x-pack/plugins/ml/public/application/routing/use_active_route.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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 { useLocation, useRouteMatch } from 'react-router-dom';
+import { keyBy } from 'lodash';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public';
+import { EuiCallOut } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useMlKibana } from '../contexts/kibana';
+import type { MlRoute } from './router';
+
+/**
+ * Provides an active route of the ML app.
+ * @param routesList
+ */
+export const useActiveRoute = (routesList: MlRoute[]): MlRoute => {
+  const { pathname } = useLocation();
+
+  const {
+    services: { executionContext, overlays, theme },
+  } = useMlKibana();
+
+  /**
+   * Temp fix for routes with params.
+   */
+  const editCalendarMatch = useRouteMatch('/settings/calendars_list/edit_calendar/:calendarId');
+  const editFilterMatch = useRouteMatch('/settings/filter_lists/edit_filter_list/:filterId');
+
+  const routesMap = useMemo(() => keyBy(routesList, 'path'), []);
+
+  const activeRoute = useMemo(() => {
+    if (editCalendarMatch) {
+      return routesMap[editCalendarMatch.path];
+    }
+    if (editFilterMatch) {
+      return routesMap[editFilterMatch.path];
+    }
+    // Remove trailing slash from the pathname
+    const pathnameKey = pathname.replace(/\/$/, '');
+    return routesMap[pathnameKey];
+  }, [pathname]);
+
+  const bannerId = useRef<string | undefined>();
+
+  useEffect(
+    function handleNotFoundRoute() {
+      if (!activeRoute) {
+        bannerId.current = overlays.banners.replace(
+          bannerId.current,
+          toMountPoint(
+            <EuiCallOut
+              color="warning"
+              iconType="iInCircle"
+              title={
+                <FormattedMessage
+                  id="xpack.ml.notFoundPage.title"
+                  defaultMessage="Page Not Found"
+                />
+              }
+            >
+              <p>
+                <FormattedMessage
+                  id="xpack.ml.notFoundPage.bannerText"
+                  defaultMessage="ML application doesn't recognize this route: {route}. You've been redirected to the Overview page."
+                  values={{
+                    route: pathname,
+                  }}
+                />
+              </p>
+            </EuiCallOut>,
+            { theme$: theme.theme$ }
+          )
+        );
+
+        // hide the message after the user has had a chance to acknowledge it -- so it doesn't permanently stick around
+        setTimeout(() => {
+          if (bannerId.current) {
+            overlays.banners.remove(bannerId.current);
+          }
+        }, 15000);
+      }
+    },
+    [activeRoute, overlays, theme, pathname]
+  );
+
+  useExecutionContext(executionContext, {
+    name: 'Machine Learning',
+    type: 'application',
+    page: activeRoute?.path ?? '/overview',
+  });
+
+  return activeRoute ?? routesMap['/overview'];
+};