/
application.tsx
126 lines (117 loc) · 3.76 KB
/
application.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/*
* 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 { History } from 'history';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, withRouter, RouteComponentProps, Redirect } from 'react-router-dom';
import { Route } from '@kbn/shared-ux-router';
import {
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader,
EuiPageHeaderSection,
EuiPageSideBar_Deprecated as EuiPageSideBar,
EuiTitle,
EuiSideNav,
} from '@elastic/eui';
import { CoreStart, AppMountParameters } from '@kbn/core/public';
const Home = () => (
<EuiPageBody data-test-subj="fooAppHome">
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>Welcome to Foo!</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<EuiTitle>
<h2>Bar home page section title</h2>
</EuiTitle>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiPageContentBody>Wow what a home page this is!</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
);
const PageA = () => (
<EuiPageBody data-test-subj="fooAppPageA">
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>Page A</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<EuiTitle>
<h2>Page A section title</h2>
</EuiTitle>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiPageContentBody>Page A's content goes here</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
);
type NavProps = RouteComponentProps & {
navigateToApp: CoreStart['application']['navigateToApp'];
};
const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
<EuiSideNav
items={[
{
name: 'Foo',
id: 'foo',
items: [
{
id: 'home',
name: 'Home',
onClick: () => history.push('/home'),
'data-test-subj': 'fooNavHome',
},
{
id: 'page-a',
name: 'Page A',
onClick: () => history.push('/page-a'),
'data-test-subj': 'fooNavPageA',
},
{
id: 'linktobar',
name: 'Open Bar / Page B',
onClick: () => navigateToApp('bar', { path: 'page-b?query=here', state: 'foo!!' }),
'data-test-subj': 'fooNavBarPageB',
},
],
},
]}
/>
));
const FooApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
<Router history={history}>
<EuiPage>
<EuiPageSideBar>
<Nav navigateToApp={coreStart.application.navigateToApp} />
</EuiPageSideBar>
<Route path="/" exact render={() => <Redirect to="/home" />} />
<Route path="/home" exact component={Home} />
<Route path="/page-a" component={PageA} />
</EuiPage>
</Router>
);
export const renderApp = (coreStart: CoreStart, { history, element }: AppMountParameters) => {
ReactDOM.render(<FooApp history={history} coreStart={coreStart} />, element);
return () => ReactDOM.unmountComponentAtNode(element);
};