From 3c1cd1100d85b68b224880c30f7a59997c791d1a Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Tue, 25 Jul 2023 08:43:40 +0200
Subject: [PATCH 1/3] migrate deprecated EUI components

---
 examples/response_stream/public/components/page.tsx      | 9 ++-------
 .../response_stream/public/containers/app/sidebar.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/examples/response_stream/public/components/page.tsx b/examples/response_stream/public/components/page.tsx
index 15455d58d54e1..cf65f66b6dfef 100644
--- a/examples/response_stream/public/components/page.tsx
+++ b/examples/response_stream/public/components/page.tsx
@@ -10,8 +10,7 @@ import * as React from 'react';
 
 import {
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
@@ -31,11 +30,7 @@ export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-          {children}
-        </EuiPageContentBody>
-      </EuiPageContent>
+      <EuiPageSection style={{ maxWidth: 800, margin: '0 auto' }}>{children}</EuiPageSection>
     </EuiPageBody>
   );
 };
diff --git a/examples/response_stream/public/containers/app/sidebar.tsx b/examples/response_stream/public/containers/app/sidebar.tsx
index eb29ace491376..e3297b05e33a0 100644
--- a/examples/response_stream/public/containers/app/sidebar.tsx
+++ b/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>
   );
 };

From 7b6d14d5413af7b54ad3de6ee55f8266f97cbc45 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Fri, 28 Jul 2023 12:29:48 +0200
Subject: [PATCH 2/3] use EuiPageTemplate instead

---
 .../public/components/page.tsx                | 26 +++++++------------
 .../public/containers/app/index.tsx           | 10 ++++---
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/examples/response_stream/public/components/page.tsx b/examples/response_stream/public/components/page.tsx
index cf65f66b6dfef..0b902558ee307 100644
--- a/examples/response_stream/public/components/page.tsx
+++ b/examples/response_stream/public/components/page.tsx
@@ -8,13 +8,7 @@
 
 import * as React from 'react';
 
-import {
-  EuiPageBody,
-  EuiPageSection,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageTemplate, EuiTitle } from '@elastic/eui';
 
 export interface PageProps {
   title?: React.ReactNode;
@@ -22,15 +16,13 @@ export interface PageProps {
 
 export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
   return (
-    <EuiPageBody>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{title}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
-      <EuiPageSection style={{ maxWidth: 800, margin: '0 auto' }}>{children}</EuiPageSection>
-    </EuiPageBody>
+    <>
+      <EuiPageTemplate.Header>
+        <EuiTitle size="l">
+          <h1>{title}</h1>
+        </EuiTitle>
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>{children}</EuiPageTemplate.Section>
+    </>
   );
 };
diff --git a/examples/response_stream/public/containers/app/index.tsx b/examples/response_stream/public/containers/app/index.tsx
index 53a9b2d19b71a..a09c262cb493f 100644
--- a/examples/response_stream/public/containers/app/index.tsx
+++ b/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>
-        <Sidebar />
+      <EuiPageTemplate restrictWidth={true} offset={0}>
+        <EuiPageTemplate.Sidebar sticky={true}>
+          <Sidebar />
+        </EuiPageTemplate.Sidebar>
         <Routes>
           {routeElements}
           <Redirect to="/simple-string-stream" />
         </Routes>
-      </EuiPage>
+      </EuiPageTemplate>
     </Router>
   );
 };

From dab42eebb1dc345ffed80e769f405edbe192bc31 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Fri, 28 Jul 2023 13:42:40 +0200
Subject: [PATCH 3/3] adds breadcrumbs to be able to navigate back to main page

---
 examples/response_stream/common/constants.ts | 10 ++++++++++
 examples/response_stream/public/mount.tsx    | 16 ++++++++++++++++
 examples/response_stream/public/plugin.ts    |  9 +++++----
 examples/response_stream/public/routes.tsx   |  5 +++--
 4 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 examples/response_stream/common/constants.ts

diff --git a/examples/response_stream/common/constants.ts b/examples/response_stream/common/constants.ts
new file mode 100644
index 0000000000000..ca97a83bfcf0f
--- /dev/null
+++ b/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';
diff --git a/examples/response_stream/public/mount.tsx b/examples/response_stream/public/mount.tsx
index c47ca01860800..7309abf5e0022 100644
--- a/examples/response_stream/public/mount.tsx
+++ b/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 />
diff --git a/examples/response_stream/public/plugin.ts b/examples/response_stream/public/plugin.ts
index 1c1c8ce389495..e2b3e08d9e2d9 100644
--- a/examples/response_stream/public/plugin.ts
+++ b/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',
-      title: 'response stream',
+      id: PLUGIN_ID,
+      title: PLUGIN_NAME,
       navLinkStatus: AppNavLinkStatus.hidden,
       mount: mount(core),
     });
 
     developerExamples.register({
-      appId: 'response-stream',
-      title: 'response stream',
+      appId: PLUGIN_ID,
+      title: PLUGIN_NAME,
       description:
         'This example demonstrates how to stream chunks of data to the client with just a single request.',
       links: [
diff --git a/examples/response_stream/public/routes.tsx b/examples/response_stream/public/routes.tsx
index 1d0b546f66d59..eafe96c320d8c 100644
--- a/examples/response_stream/public/routes.tsx
+++ b/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',
-    id: 'responseStream',
+    title: PLUGIN_NAME,
+    id: PLUGIN_ID,
     items: [
       {
         title: 'Simple string stream',