Routing fixes (elastic#76)

x-pack/plugins/cloud_security_posture/public/application/app.tsx

@@ -4,15 +4,14 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 import React from 'react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Router, Redirect, Switch, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { routes } from './routes';
-
+import { UnknownRoute } from '../components/unknown_route';
+import { CSP_DASHBOARD_PATH } from '../common/constants';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
-
 import type { AppMountParameters, CoreStart } from '../../../../../src/core/public';
 import type { CspStart } from '../types';
 
@@ -24,22 +23,22 @@ interface CspAppDeps {
   params: AppMountParameters;
 }
 
-export const CspApp = ({ core, deps, params }: CspAppDeps) => {
-  return (
-    <KibanaContextProvider services={{ ...deps, ...core }}>
-      <QueryClientProvider client={queryClient}>
-        <Router history={params.history}>
-          <I18nProvider>
-            <Switch>
-              {routes.map((route) => (
-                <Route {...route} />
-              ))}
-              <Route exact path="/" component={() => <Redirect to="/dashboard" />} />
-              <Route path="*" component={() => <div>not found</div>} />
-            </Switch>
-          </I18nProvider>
-        </Router>
-      </QueryClientProvider>
-    </KibanaContextProvider>
-  );
-};
+export const CspApp = ({ core, deps, params }: CspAppDeps) => (
+  <KibanaContextProvider services={{ ...deps, ...core }}>
+    <QueryClientProvider client={queryClient}>
+      <Router history={params.history}>
+        <I18nProvider>
+          <Switch>
+            {routes.map((route) => (
+              <Route key={route.path as string} {...route} />
+            ))}
+            <Route exact path="/" component={RedirectToDashboard} />
+            <Route path="*" component={UnknownRoute} />
+          </Switch>
+        </I18nProvider>
+      </Router>
+    </QueryClientProvider>
+  </KibanaContextProvider>
+);
+
+const RedirectToDashboard = () => <Redirect to={CSP_DASHBOARD_PATH} />;

x-pack/plugins/cloud_security_posture/public/components/unknown_route.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n-react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { CspPageTemplate } from './page_template';
+
+export const UnknownRoute = React.memo(() => (
+  <CspPageTemplate template="centeredContent">
+    <EuiEmptyPrompt
+      data-test-subj="unknownRoute"
+      iconColor="default"
+      iconType="logoElastic"
+      title={
+        <p>
+          <FormattedMessage id="xpack.csp.unknownRoute" defaultMessage="Page not found" />
+        </p>
+      }
+    />
+  </CspPageTemplate>
+));