[ML] Response Stream developer example: Migrate deprecated EUI components. (#162454)

Migrates deprecated EUI components for the response stream developer
example plugin. Adds a breadcrumb to the example to be able to navigate back to the overview page.

examples/response_stream/common/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export const PLUGIN_ID = 'response-stream';
+export const PLUGIN_NAME = 'response stream';

examples/response_stream/public/components/page.tsx

@@ -8,14 +8,7 @@
 
 import * as React from 'react';
 
-import {
+import { EuiPageTemplate, EuiTitle } from '@elastic/eui';
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
 
 export interface PageProps {
   title?: React.ReactNode;
@@ -23,19 +16,13 @@ export interface PageProps {
 
 export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
   return (
-    <EuiPageBody>
+    <>
-      <EuiPageHeader>
+      <EuiPageTemplate.Header>
-        <EuiPageHeaderSection>
+        <EuiTitle size="l">
-          <EuiTitle size="l">
+          <h1>{title}</h1>
-            <h1>{title}</h1>
+        </EuiTitle>
-          </EuiTitle>
+      </EuiPageTemplate.Header>
-        </EuiPageHeaderSection>
+      <EuiPageTemplate.Section>{children}</EuiPageTemplate.Section>
-      </EuiPageHeader>
+    </>
-      <EuiPageContent>
-        <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-          {children}
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
   );
 };

examples/response_stream/public/containers/app/index.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { BrowserRouter as Router, Routes, Route } from '@kbn/shared-ux-router';
-import { EuiPage } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { useDeps } from '../../hooks/use_deps';
 import { Sidebar } from './sidebar';
 import { routes } from '../../routes';
@@ -26,13 +26,15 @@ export const App: React.FC = () => {
 
   return (
     <Router basename={appBasePath}>
-      <EuiPage>
+      <EuiPageTemplate restrictWidth={true} offset={0}>
-        <Sidebar />
+        <EuiPageTemplate.Sidebar sticky={true}>
+          <Sidebar />
+        </EuiPageTemplate.Sidebar>
         <Routes>
           {routeElements}
           <Redirect to="/simple-string-stream" />
         </Routes>
-      </EuiPage>
+      </EuiPageTemplate>
     </Router>
   );
 };

examples/response_stream/public/containers/app/sidebar.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiPageSidebar, EuiSideNav } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../routes';
 
@@ -15,7 +15,7 @@ export const Sidebar: React.FC = () => {
   const history = useHistory();
 
   return (
-    <EuiPageSideBar>
+    <EuiPageSidebar>
       <EuiSideNav
         items={routes.map(({ id, title, items }) => ({
           id,
@@ -29,6 +29,6 @@ export const Sidebar: React.FC = () => {
           })),
         }))}
       />
-    </EuiPageSideBar>
+    </EuiPageSidebar>
   );
 };

examples/response_stream/public/mount.tsx

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { CoreSetup, CoreStart, AppMountParameters } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { PLUGIN_NAME } from '../common/constants';
 import { ResponseStreamStartPlugins } from './plugin';
 import { App } from './containers/app';
 
@@ -24,6 +25,21 @@ export const mount =
   async ({ appBasePath, element }: AppMountParameters) => {
     const [core, plugins] = await coreSetup.getStartServices();
     const deps: ResponseStreamDeps = { appBasePath, core, plugins };
+
+    core.chrome.setBreadcrumbs([
+      {
+        text: 'Developer examples',
+        href: `/app/developerExamples`,
+        onClick: (e) => {
+          e.preventDefault();
+          core.application.navigateToApp('developerExamples');
+        },
+      },
+      {
+        text: PLUGIN_NAME,
+      },
+    ]);
+
     const reactElement = (
       <KibanaContextProvider services={deps}>
         <App />

examples/response_stream/public/plugin.ts

@@ -8,6 +8,7 @@
 
 import { Plugin, CoreSetup, AppNavLinkStatus } from '@kbn/core/public';
 import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
+import { PLUGIN_ID, PLUGIN_NAME } from '../common/constants';
 import { mount } from './mount';
 
 export interface ResponseStreamSetupPlugins {
@@ -23,15 +24,15 @@ export class ResponseStreamPlugin implements Plugin {
     { developerExamples }: ResponseStreamSetupPlugins
   ) {
     core.application.register({
-      id: 'response-stream',
+      id: PLUGIN_ID,
-      title: 'response stream',
+      title: PLUGIN_NAME,
       navLinkStatus: AppNavLinkStatus.hidden,
       mount: mount(core),
     });
 
     developerExamples.register({
-      appId: 'response-stream',
+      appId: PLUGIN_ID,
-      title: 'response stream',
+      title: PLUGIN_NAME,
       description:
         'This example demonstrates how to stream chunks of data to the client with just a single request.',
       links: [

examples/response_stream/public/routes.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { PLUGIN_ID, PLUGIN_NAME } from '../common/constants';
 import { PageSimpleStringStream } from './containers/app/pages/page_simple_string_stream';
 import { PageReducerStream } from './containers/app/pages/page_reducer_stream';
 
@@ -24,8 +25,8 @@ interface RouteDef {
 
 export const routes: RouteSectionDef[] = [
   {
-    title: 'response stream',
+    title: PLUGIN_NAME,
-    id: 'responseStream',
+    id: PLUGIN_ID,
     items: [
       {
         title: 'Simple string stream',