import { History } from 'history' ; import React from 'react' ; import ReactDOM from 'react-dom' ; import { Router , Route , withRouter , RouteComponentProps } from 'react-router-dom' ; import { EuiPage , EuiPageBody , EuiPageContent , EuiPageContentBody , EuiPageContentHeader , EuiPageContentHeaderSection , EuiPageHeader , EuiPageHeaderSection , EuiPageSideBar , EuiTitle , EuiSideNav , } from '@elastic/eui' ; import { AppMountContext , AppMountParameters } from 'opensearch-dashboards/public' ; const Home = ( ) => ( < EuiPageBody data - test - subj = "barAppHome" > < EuiPageHeader > < EuiPageHeaderSection > < EuiTitle size = "l" > < h1 > Welcome to Bar ! < /h1> < /EuiTitle> < /EuiPageHeaderSection> < /EuiPageHeader> < EuiPageContent > < EuiPageContentHeader > < EuiPageContentHeaderSection > < EuiTitle > < h2 > Bar home page sction < /h2> < /EuiTitle> < /EuiPageContentHeaderSection> < /EuiPageContentHeader> < EuiPageContentBody > It feels so homey ! < /EuiPageContentBody> < /EuiPageContent> < /EuiPageBody>); const PageB = ( { location } ) => { const searchParams = [ ] ; new URLSearchParams ( location . search ) . forEach ( ( value , key ) => searchParams . push ( [ key , value ] ) ) ; return ( < EuiPageBody data - test - subj = "barAppPageB" > < EuiPageHeader > < EuiPageHeaderSection > < EuiTitle size = "l" > < h1 > Page B < /h1> < /EuiTitle> < /EuiPageHeaderSection> < /EuiPageHeader> < EuiPageContent > < EuiPageContentHeader > < EuiPageContentHeaderSection > < EuiTitle > < h2 > Search params : { ' ' } < span data - test - subj = "barAppPageBQuery" > { JSON . stringify ( searchParams ) } < /span> < /h2> < /EuiTitle> < /EuiPageContentHeaderSection> < /EuiPageContentHeader> < /EuiPageContent> < /EuiPageBody>); } ; type NavProps = RouteComponentProps & { navigateToApp : AppMountContext [ 'core' ] [ 'application' ] [ 'navigateToApp' ] ; } ; const Nav = withRouter ( ( { history , navigateToApp } ) => ( < EuiSideNav items = { [ { name : 'Bar' , id : 'bar' , items : [ { id : 'home' , name : 'Home' , onClick : ( ) => navigateToApp ( 'bar' , { path : '' } ) , 'data-test-subj' : 'barNavHome' , } , { id : 'page-b' , name : 'Page B' , onClick : ( ) => history . push ( '/page-b' , { bar : 'page-b' } ) , 'data-test-subj' : 'barNavPageB' , } , { id : 'linktofoo' , name : 'Open Foo' , onClick : ( ) => navigateToApp ( 'foo' ) , 'data-test-subj' : 'barNavFooHome' , } , ] , } , ] } / > ) ) ; const BarApp = ( { history , context } ) => ( < Router history = { history } > < EuiPage > < EuiPageSideBar > < Nav navigateToApp = { context . core . application . navigateToApp } /> < /EuiPageSideBar> < Route path = "/" exact component = { Home } / > < Route path = "/page-b" component = { PageB } / > < /EuiPage> < /Router>); export const renderApp = ( context , { history , element } ) => { ReactDOM . render ( < BarApp history = { history } context = { context } / > , element ) ; return ( ) => ReactDOM . unmountComponentAtNode ( element ) ; } ;