Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions examples/response_stream/common/constants.ts
Original file line number Diff line number Diff line change
@@ -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';
31 changes: 9 additions & 22 deletions examples/response_stream/public/components/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,21 @@

import * as React from 'react';

import {
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPageHeaderSection,
EuiTitle,
} from '@elastic/eui';
import { EuiPageTemplate, EuiTitle } from '@elastic/eui';

export interface PageProps {
title?: React.ReactNode;
}

export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
return (
<EuiPageBody>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>{title}</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
{children}
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
<>
<EuiPageTemplate.Header>
<EuiTitle size="l">
<h1>{title}</h1>
</EuiTitle>
</EuiPageTemplate.Header>
<EuiPageTemplate.Section>{children}</EuiPageTemplate.Section>
</>
);
};
10 changes: 6 additions & 4 deletions examples/response_stream/public/containers/app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
};
6 changes: 3 additions & 3 deletions examples/response_stream/public/containers/app/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
*/

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';

export const Sidebar: React.FC = () => {
const history = useHistory();

return (
<EuiPageSideBar>
<EuiPageSidebar>
<EuiSideNav
items={routes.map(({ id, title, items }) => ({
id,
Expand All @@ -29,6 +29,6 @@ export const Sidebar: React.FC = () => {
})),
}))}
/>
</EuiPageSideBar>
</EuiPageSidebar>
);
};
16 changes: 16 additions & 0 deletions examples/response_stream/public/mount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 />
Expand Down
9 changes: 5 additions & 4 deletions examples/response_stream/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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: [
Expand Down
5 changes: 3 additions & 2 deletions examples/response_stream/public/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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',
Expand Down