[Search Sessions] Search session example app (#89583) (#92157)

examples/search_examples/kibana.json

@@ -4,7 +4,7 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "data", "developerExamples", "kibanaUtils"],
+  "requiredPlugins": ["navigation", "data", "developerExamples", "kibanaUtils", "share"],
   "optionalPlugins": [],
-  "requiredBundles": []
+  "requiredBundles": ["kibanaReact"]
 }

examples/search_examples/public/application.tsx

@@ -8,26 +8,67 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Router, Route, Redirect } from 'react-router-dom';
+import { I18nProvider } from '@kbn/i18n/react';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { AppPluginStartDependencies } from './types';
-import { SearchExamplesApp } from './components/app';
+import { SearchExamplePage, ExampleLink } from './common/example_page';
+import { SearchExamplesApp } from './search/app';
+import { SearchSessionsExampleApp } from './search_sessions/app';
+import { RedirectAppLinks } from '../../../src/plugins/kibana_react/public';
+
+const LINKS: ExampleLink[] = [
+  {
+    path: '/search',
+    title: 'Search',
+  },
+  {
+    path: '/search-sessions',
+    title: 'Search Sessions',
+  },
+  {
+    path: 'https://github.com/elastic/kibana/blob/master/src/plugins/data/README.mdx',
+    title: 'README (GitHub)',
+  },
+];
 
 export const renderApp = (
-  { notifications, savedObjects, http }: CoreStart,
-  { navigation, data }: AppPluginStartDependencies,
-  { appBasePath, element }: AppMountParameters
+  { notifications, savedObjects, http, application }: CoreStart,
+  { data, navigation }: AppPluginStartDependencies,
+  { element, history }: AppMountParameters
 ) => {
   ReactDOM.render(
-    <SearchExamplesApp
-      basename={appBasePath}
-      notifications={notifications}
-      savedObjectsClient={savedObjects.client}
-      navigation={navigation}
-      data={data}
-      http={http}
-    />,
+    <I18nProvider>
+      <RedirectAppLinks application={application}>
+        <SearchExamplePage exampleLinks={LINKS} basePath={http.basePath}>
+          <Router history={history}>
+            <Route path={LINKS[0].path}>
+              <SearchExamplesApp
+                notifications={notifications}
+                navigation={navigation}
+                data={data}
+                http={http}
+              />
+            </Route>
+            <Route path={LINKS[1].path}>
+              <SearchSessionsExampleApp
+                navigation={navigation}
+                notifications={notifications}
+                data={data}
+              />
+            </Route>
+            <Route path="/" exact={true}>
+              <Redirect to={LINKS[0].path} />
+            </Route>
+          </Router>
+        </SearchExamplePage>
+      </RedirectAppLinks>
+    </I18nProvider>,
     element
   );
 
-  return () => ReactDOM.unmountComponentAtNode(element);
+  return () => {
+    data.search.session.clear();
+    ReactDOM.unmountComponentAtNode(element);
+  };
 };

examples/search_examples/public/common/example_page.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { PropsWithChildren } from 'react';
+import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { IBasePath } from 'kibana/public';
+import { PLUGIN_ID } from '../../common';
+
+export interface ExampleLink {
+  title: string;
+  path: string;
+}
+
+interface NavProps {
+  exampleLinks: ExampleLink[];
+  basePath: IBasePath;
+}
+
+const SideNav: React.FC<NavProps> = ({ exampleLinks, basePath }: NavProps) => {
+  const navItems = exampleLinks.map((example) => ({
+    id: example.path,
+    name: example.title,
+    'data-test-subj': example.path,
+    href: example.path.startsWith('http')
+      ? example.path
+      : basePath.prepend(`/app/${PLUGIN_ID}${example.path}`),
+  }));
+
+  return (
+    <EuiSideNav
+      items={[
+        {
+          name: 'Search Examples',
+          id: 'home',
+          items: [...navItems],
+        },
+      ]}
+    />
+  );
+};
+
+interface Props {
+  exampleLinks: ExampleLink[];
+  basePath: IBasePath;
+}
+
+export const SearchExamplePage: React.FC<Props> = ({
+  children,
+  exampleLinks,
+  basePath,
+}: PropsWithChildren<Props>) => {
+  return (
+    <EuiPage>
+      <EuiPageSideBar>
+        <SideNav exampleLinks={exampleLinks} basePath={basePath} />
+      </EuiPageSideBar>
+      {children}
+    </EuiPage>
+  );
+};