[Logs Explorer] Add not found page route (#177020)

## 📓 Summary Closes #177014 This work adds a new route to handle unmatched paths on the observability logs explorer app router to display a Not Found prompt instead of a blank page. <img width="3008" alt="Screenshot 2024-02-15 at 15 35 49" src="https://github.com/elastic/kibana/assets/34506779/db9d0463-f77f-4590-9d41-850c72d4285c"> --------- Co-authored-by: Marco Antonio Ghiani <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Feb 19, 2024 · 153180b · 153180b
1 parent 445f4bc
commit 153180b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/..._solution/observability_logs_explorer/public/applications/observability_logs_explorer.tsx b/..._solution/observability_logs_explorer/public/applications/observability_logs_explorer.tsx
@@ -12,6 +12,7 @@ import { Route, Router, Routes } from '@kbn/shared-ux-router';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatasetQualityRoute, ObservabilityLogsExplorerMainRoute } from '../routes/main';
+import { NotFoundPage } from '../routes/not_found';
 import {
   ObservabilityLogsExplorerAppMountParameters,
   ObservabilityLogsExplorerPluginStart,
@@ -83,6 +84,7 @@ export const ObservabilityLogsExplorerApp = ({
                   exact={true}
                   render={() => <DatasetQualityRoute />}
                 />
+                <Route render={() => <NotFoundPage />} />
               </Routes>
             </EuiThemeProvider>
           </Router>

diff --git a/...ns/observability_solution/observability_logs_explorer/public/components/page_template.tsx b/...ns/observability_solution/observability_logs_explorer/public/components/page_template.tsx
@@ -7,25 +7,23 @@
 
 import { EuiPageSectionProps } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { LazyObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
 import React from 'react';
 import { useKibanaContextForPlugin } from '../utils/use_kibana';
 
 export const ObservabilityLogsExplorerPageTemplate = ({
-  children,
-  pageProps,
-}: React.PropsWithChildren<{
-  pageProps?: EuiPageSectionProps;
-}>) => {
+  pageSectionProps,
+  ...props
+}: LazyObservabilityPageTemplateProps) => {
   const {
     services: { observabilityShared },
   } = useKibanaContextForPlugin();
 
   return (
     <observabilityShared.navigation.PageTemplate
-      pageSectionProps={{ ...pageSectionProps, ...pageProps }}
-    >
-      {children}
-    </observabilityShared.navigation.PageTemplate>
+      pageSectionProps={{ ...defaultPageSectionProps, ...pageSectionProps }}
+      {...props}
+    />
   );
 };
 
@@ -37,7 +35,7 @@ const fullHeightContentStyles = css`
   height: 100%;
 `;
 
-const pageSectionProps: EuiPageSectionProps = {
+const defaultPageSectionProps: EuiPageSectionProps = {
   grow: true,
   paddingSize: 'none',
   contentProps: { css: fullHeightContentStyles },

diff --git a/...ability_solution/observability_logs_explorer/public/routes/main/dataset_quality_route.tsx b/...ability_solution/observability_logs_explorer/public/routes/main/dataset_quality_route.tsx
@@ -100,7 +100,7 @@ const InitializedContent = React.memo(
     datasetQualityController: DatasetQualityController;
   }) => {
     return (
-      <ObservabilityLogsExplorerPageTemplate pageProps={{ paddingSize: 'l' }}>
+      <ObservabilityLogsExplorerPageTemplate pageSectionProps={{ paddingSize: 'l' }}>
         <datasetQuality.DatasetQuality controller={datasetQualityController} />
       </ObservabilityLogsExplorerPageTemplate>
     );

diff --git a/...ck/plugins/observability_solution/observability_logs_explorer/public/routes/not_found.tsx b/...ck/plugins/observability_solution/observability_logs_explorer/public/routes/not_found.tsx
@@ -0,0 +1,21 @@
+/*
+ * 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 { NotFoundPrompt } from '@kbn/shared-ux-prompt-not-found';
+import { ObservabilityLogsExplorerPageTemplate } from '../components/page_template';
+
+export const NotFoundPage = () => {
+  return (
+    <ObservabilityLogsExplorerPageTemplate
+      pageSectionProps={{ grow: false, paddingSize: 'xl' }}
+      data-test-subj="observabilityLogsExplorerNotFoundPage"
+    >
+      <NotFoundPrompt />
+    </ObservabilityLogsExplorerPageTemplate>
+  );
+};
diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
@@ -45,6 +45,7 @@
     "@kbn/data-views-plugin",
     "@kbn/data-view-editor-plugin",
     "@kbn/lens-plugin",
+    "@kbn/shared-ux-prompt-not-found",
   ],
   "exclude": [
     "target/**/*"