github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Migrate from deprecated EUI components (#161548)

Browse source 
## Summary

Fix https://github.com/elastic/kibana/issues/161424

Migrate away from deprecated EUI components for Core-owned code.

Note: I only tested the production (and examples) pages properly, I
didn't make sure the test plugins where displayed correctly, as long as
the data structure was still here for the tests to pass.

### Screenshots

#### Status page

<img width="1388" alt="Screenshot 2023-07-10 at 17 14 24" 

src="d15adffa-d4fb-4dab-ad91-691a4c103541">

#### AppNotFound page

<img width="1352" alt="Screenshot 2023-07-10 at 17 14 40"
src="77dcc958-db53-4ec8-9a7f-af4ea0804a96">

#### Generated plugin landing page

<img width="1906" alt="Screenshot 2023-07-10 at 17 15 44"
src="7a45d1a3-181d-44c5-a4a1-d3bdb2ba6ee9">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Pierre Gayvallet 2023-07-13 12:22:02 +02:00 • committed by GitHub
parent c8a451e45a
commit 808c28dd8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 346 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

266
examples/preboot_example/public/app.tsx
View file

@ -12,7 +12,7 @@ import {
EuiFieldText, EuiFieldText,
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
EuiPageTemplate_Deprecated as EuiPageTemplate, EuiPageTemplate,
EuiPanel, EuiPanel,
EuiText, EuiText,
} from '@elastic/eui'; } from '@elastic/eui';
@ -73,147 +73,139 @@ export const App = ({ http, token }: { http: HttpSetup; token?: string }) => {
if (!isSetupModeActive) { if (!isSetupModeActive) {
return ( return (
<EuiPageTemplate <EuiPageTemplate restrictWidth={false}>
restrictWidth={false} <EuiPageTemplate.Header iconType="logoElastic" pageTitle="Welcome to Elastic" />
template="empty" <EuiPageTemplate.Section>
pageHeader={{ <EuiPanel>
iconType: 'logoElastic', <EuiText>Kibana server is not ready yet.</EuiText>
pageTitle: 'Welcome to Elastic', </EuiPanel>
}} </EuiPageTemplate.Section>
>
<EuiPanel>
<EuiText>Kibana server is not ready yet.</EuiText>
</EuiPanel>
</EuiPageTemplate> </EuiPageTemplate>
); );
} }
return ( return (
<EuiPageTemplate <EuiPageTemplate restrictWidth={false}>
restrictWidth={false} <EuiPageTemplate.Header iconType="logoElastic" pageTitle="Welcome to Elastic" />
template="empty" <EuiPageTemplate.Section>
pageHeader={{ <EuiPanel>
iconType: 'logoElastic', <EuiFlexGroup>
pageTitle: 'Welcome to Elastic', <EuiFlexItem grow={false}>
}} <EuiFlexGroup direction={'column'}>
> <EuiFlexItem>
<EuiPanel> <EuiFieldText
<EuiFlexGroup> placeholder="Config key"
<EuiFlexItem grow={false}> value={configKeyValue.key}
<EuiFlexGroup direction={'column'}> onChange={(e) => {
<EuiFlexItem> setConfigKeyValue({ ...configKeyValue, key: e.target.value });
<EuiFieldText }}
placeholder="Config key" />
value={configKeyValue.key} </EuiFlexItem>
onChange={(e) => { <EuiFlexItem>
setConfigKeyValue({ ...configKeyValue, key: e.target.value }); <EuiFieldText
}} placeholder="Config value"
/> value={configKeyValue.value}
</EuiFlexItem> onChange={(e) => {
<EuiFlexItem> setConfigKeyValue({ ...configKeyValue, value: e.target.value });
<EuiFieldText }}
placeholder="Config value" />
value={configKeyValue.value} </EuiFlexItem>
onChange={(e) => { <EuiFlexItem>
setConfigKeyValue({ ...configKeyValue, value: e.target.value }); <EuiButton
}} size="m"
/> color={'danger'}
</EuiFlexItem> onClick={onWriteToken}
<EuiFlexItem> disabled={!configKeyValue.key || !configKeyValue.value}
<EuiButton >
size="m" Write config
color={'danger'} </EuiButton>
onClick={onWriteToken} </EuiFlexItem>
disabled={!configKeyValue.key || !configKeyValue.value} </EuiFlexGroup>
> </EuiFlexItem>
Write config <EuiFlexItem grow={false}>
</EuiButton> <EuiFlexGroup direction={'column'}>
</EuiFlexItem> <EuiFlexItem>
</EuiFlexGroup> <EuiText>Token from config: {token}</EuiText>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem grow={false}> <EuiFlexItem>
<EuiFlexGroup direction={'column'}> <EuiButton
<EuiFlexItem> size="m"
<EuiText>Token from config: {token}</EuiText> color={'danger'}
</EuiFlexItem> onClick={() => onCompleteSetup({ shouldReloadConfig: true })}
<EuiFlexItem> >
<EuiButton Reload config and proceed to `setup`
size="m" </EuiButton>
color={'danger'} </EuiFlexItem>
onClick={() => onCompleteSetup({ shouldReloadConfig: true })} <EuiFlexItem>
> <EuiButton
Reload config and proceed to `setup` size="m"
</EuiButton> color={'primary'}
</EuiFlexItem> onClick={() => onCompleteSetup({ shouldReloadConfig: false })}
<EuiFlexItem> >
<EuiButton DO NOT reload config and proceed to `setup`
size="m" </EuiButton>
color={'primary'} </EuiFlexItem>
onClick={() => onCompleteSetup({ shouldReloadConfig: false })} </EuiFlexGroup>
> </EuiFlexItem>
DO NOT reload config and proceed to `setup` <EuiFlexItem grow={false}>
</EuiButton> <EuiFlexGroup direction={'column'}>
</EuiFlexItem> <EuiFlexItem>
</EuiFlexGroup> <EuiFieldText
</EuiFlexItem> placeholder="elasticsearch.hosts"
<EuiFlexItem grow={false}> value={elasticsearchConfig.host}
<EuiFlexGroup direction={'column'}> onChange={(e) => {
<EuiFlexItem> setElasticsearchConfig({ ...elasticsearchConfig, host: e.target.value });
<EuiFieldText }}
placeholder="elasticsearch.hosts" />
value={elasticsearchConfig.host} </EuiFlexItem>
onChange={(e) => { <EuiFlexItem>
setElasticsearchConfig({ ...elasticsearchConfig, host: e.target.value }); <EuiFieldText
}} placeholder="elasticsearch.username"
/> value={elasticsearchConfig.username}
</EuiFlexItem> onChange={(e) => {
<EuiFlexItem> setElasticsearchConfig({
<EuiFieldText ...elasticsearchConfig,
placeholder="elasticsearch.username" username: e.target.value,
value={elasticsearchConfig.username} });
onChange={(e) => { }}
setElasticsearchConfig({ />
...elasticsearchConfig, </EuiFlexItem>
username: e.target.value, <EuiFlexItem>
}); <EuiFieldText
}} placeholder="elasticsearch.password"
/> value={elasticsearchConfig.password}
</EuiFlexItem> onChange={(e) => {
<EuiFlexItem> setElasticsearchConfig({
<EuiFieldText ...elasticsearchConfig,
placeholder="elasticsearch.password" password: e.target.value,
value={elasticsearchConfig.password} });
onChange={(e) => { }}
setElasticsearchConfig({ />
...elasticsearchConfig, </EuiFlexItem>
password: e.target.value, <EuiFlexItem>
}); <EuiButton
}} size="m"
/> color={'danger'}
</EuiFlexItem> onClick={onConnect}
<EuiFlexItem> disabled={
<EuiButton !elasticsearchConfig.host ||
size="m" !elasticsearchConfig.username ||
color={'danger'} !elasticsearchConfig.password
onClick={onConnect} }
disabled={ >
!elasticsearchConfig.host || Connect
!elasticsearchConfig.username || </EuiButton>
!elasticsearchConfig.password </EuiFlexItem>
} </EuiFlexGroup>
> </EuiFlexItem>
Connect <EuiFlexItem>
</EuiButton> <EuiCodeBlock language="json" paddingSize="s" isCopyable>
</EuiFlexItem> {connectResponse ?? ''}
</EuiFlexGroup> </EuiCodeBlock>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem> </EuiFlexGroup>
<EuiCodeBlock language="json" paddingSize="s" isCopyable> </EuiPanel>
{connectResponse ?? ''} </EuiPageTemplate.Section>
</EuiCodeBlock>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiPageTemplate> </EuiPageTemplate>
); );
}; };

28
examples/routing_example/public/app.tsx
View file

@ -10,12 +10,10 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { AppMountParameters } from '@kbn/core/public'; import { AppMountParameters } from '@kbn/core/public';
import { import {
EuiPage, EuiPageTemplate,
EuiPageBody, EuiPageSection,
EuiPageContent_Deprecated as EuiPageContent,
EuiText, EuiText,
EuiHorizontalRule, EuiHorizontalRule,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiListGroup, EuiListGroup,
} from '@elastic/eui'; } from '@elastic/eui';
import { RandomNumberRouteExample } from './random_number_example'; import { RandomNumberRouteExample } from './random_number_example';
@ -34,14 +32,14 @@ function RoutingExplorer({
getMessageById, getMessageById,
}: Props) { }: Props) {
return ( return (
<EuiPage> <EuiPageTemplate>
<EuiPageBody> <EuiPageTemplate.Header>
<EuiPageContent> <EuiText>
<EuiPageContentHeader> <h1>Routing examples</h1>
<EuiText> </EuiText>
<h1>Routing examples</h1> </EuiPageTemplate.Header>
</EuiText> <EuiPageTemplate.Section>
</EuiPageContentHeader> <EuiPageSection>
<EuiText> <EuiText>
<EuiListGroup <EuiListGroup
listItems={[ listItems={[
@ -79,9 +77,9 @@ function RoutingExplorer({
<EuiHorizontalRule /> <EuiHorizontalRule />
<GetMessageRouteExample getMessageById={getMessageById} /> <GetMessageRouteExample getMessageById={getMessageById} />
</EuiPageContent> </EuiPageSection>
</EuiPageBody> </EuiPageTemplate.Section>
</EuiPage> </EuiPageTemplate>
); );
} }

55
packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx
View file

@ -6,40 +6,31 @@
* Side Public License, v 1. * Side Public License, v 1.
*/ */
import { import { EuiPageTemplate } from '@elastic/eui';
EuiEmptyPrompt,
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
} from '@elastic/eui';
import React from 'react'; import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react'; import { FormattedMessage } from '@kbn/i18n-react';
export const AppNotFound = () => ( export const AppNotFound = () => (
<EuiPage style={{ minHeight: '100%' }} data-test-subj="appNotFoundPageContent"> <EuiPageTemplate data-test-subj="appNotFoundPageContent">
<EuiPageBody> <EuiPageTemplate.EmptyPrompt
<EuiPageContent verticalPosition="center" horizontalPosition="center"> iconType="warning"
<EuiEmptyPrompt iconColor="danger"
iconType="warning" title={
iconColor="danger" <h2>
title={ <FormattedMessage
<h2> id="core.application.appNotFound.title"
<FormattedMessage defaultMessage="Application Not Found"
id="core.application.appNotFound.title" />
defaultMessage="Application Not Found" </h2>
/> }
</h2> body={
} <p>
body={ <FormattedMessage
<p> id="core.application.appNotFound.pageDescription"
<FormattedMessage defaultMessage="No application was found at this URL. Try going back or choosing an app from the menu."
id="core.application.appNotFound.pageDescription" />
defaultMessage="No application was found at this URL. Try going back or choosing an app from the menu." </p>
/> }
</p> />
} </EuiPageTemplate>
/>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
); );

27
packages/core/apps/core-apps-browser-internal/src/errors/error_application.tsx
View file

@ -12,12 +12,7 @@ import type { History } from 'history';
import { i18n } from '@kbn/i18n'; import { i18n } from '@kbn/i18n';
import { I18nProvider } from '@kbn/i18n-react'; import { I18nProvider } from '@kbn/i18n-react';
import { import { EuiPageTemplate } from '@elastic/eui';
EuiEmptyPrompt,
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
} from '@elastic/eui';
import { CoreThemeProvider } from '@kbn/core-theme-browser-internal'; import { CoreThemeProvider } from '@kbn/core-theme-browser-internal';
import type { IBasePath } from '@kbn/core-http-browser'; import type { IBasePath } from '@kbn/core-http-browser';
import type { AppMountParameters } from '@kbn/core-application-browser'; import type { AppMountParameters } from '@kbn/core-application-browser';
@ -36,18 +31,14 @@ const ErrorPage: React.FC<Props> = ({ title, children }) => {
}); });
return ( return (
<EuiPage style={{ minHeight: '100%' }} data-test-subj="appRenderErrorPageContent"> <EuiPageTemplate data-test-subj="appRenderErrorPageContent">
<EuiPageBody> <EuiPageTemplate.EmptyPrompt
<EuiPageContent verticalPosition="center" horizontalPosition="center"> iconType="warning"
<EuiEmptyPrompt iconColor="danger"
iconType="warning" title={<h2>{title}</h2>}
iconColor="danger" body={children}
title={<h2>{title}</h2>} />
body={children} </EuiPageTemplate>
/>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
); );
}; };

12
packages/core/apps/core-apps-browser-internal/src/status/components/status_section.tsx
View file

@ -7,13 +7,7 @@
*/ */
import React, { FC, useMemo } from 'react'; import React, { FC, useMemo } from 'react';
import { import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiPanel } from '@elastic/eui';
EuiFlexGroup,
EuiFlexItem,
EuiPageContent_Deprecated as EuiPageContent,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { StatusTable } from './status_table'; import { StatusTable } from './status_table';
import { FormattedStatus, getHighestStatus } from '../lib'; import { FormattedStatus, getHighestStatus } from '../lib';
import { StatusBadge } from './status_badge'; import { StatusBadge } from './status_badge';
@ -28,7 +22,7 @@ export const StatusSection: FC<StatusSectionProps> = ({ id, title, statuses }) =
const highestStatus = useMemo(() => getHighestStatus(statuses), [statuses]); const highestStatus = useMemo(() => getHighestStatus(statuses), [statuses]);
return ( return (
<EuiPageContent grow={false}> <EuiPanel grow={false}>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween"> <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<EuiTitle size="s"> <EuiTitle size="s">
@ -41,6 +35,6 @@ export const StatusSection: FC<StatusSectionProps> = ({ id, title, statuses }) =
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer /> <EuiSpacer />
<StatusTable statuses={statuses} /> <StatusTable statuses={statuses} />
</EuiPageContent> </EuiPanel>
); );
}; };

11
packages/core/apps/core-apps-browser-internal/src/status/components/version_header.tsx
View file

@ -7,12 +7,7 @@
*/ */
import React, { FC } from 'react'; import React, { FC } from 'react';
import { import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
EuiFlexGroup,
EuiFlexItem,
EuiPageContent_Deprecated as EuiPageContent,
EuiText,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react'; import { FormattedMessage } from '@kbn/i18n-react';
import type { ServerVersion } from '@kbn/core-status-common-internal'; import type { ServerVersion } from '@kbn/core-status-common-internal';
@ -23,7 +18,7 @@ interface VersionHeaderProps {
export const VersionHeader: FC<VersionHeaderProps> = ({ version }) => { export const VersionHeader: FC<VersionHeaderProps> = ({ version }) => {
const { build_hash: buildHash, build_number: buildNumber, number } = version; const { build_hash: buildHash, build_number: buildNumber, number } = version;
return ( return (
<EuiPageContent grow={false}> <EuiPanel grow={false}>
<EuiFlexGroup justifyContent="spaceBetween"> <EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<EuiText size="s"> <EuiText size="s">
@ -65,6 +60,6 @@ export const VersionHeader: FC<VersionHeaderProps> = ({ version }) => {
</EuiText> </EuiText>
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
</EuiPageContent> </EuiPanel>
); );
}; };

8
packages/core/fatal-errors/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap generated
View file

@ -4,14 +4,14 @@ exports[`FatalErrorsScreen rendering render matches snapshot 1`] = `
<EuiPage <EuiPage
style={ style={
Object { Object {
"alignItems": "center",
"minHeight": "100vh", "minHeight": "100vh",
} }
} }
> >
<EuiPageBody> <EuiPageBody>
<EuiPageContent_Deprecated <EuiPageSection
horizontalPosition="center" alignment="center"
verticalPosition="center"
> >
<EuiEmptyPrompt <EuiEmptyPrompt
actions={ actions={
@ -94,7 +94,7 @@ Error: bar
stack...bar.js:1:1 stack...bar.js:1:1
</EuiCodeBlock> </EuiCodeBlock>
</EuiCallOut> </EuiCallOut>
</EuiPageContent_Deprecated> </EuiPageSection>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
`; `;

8
packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx
View file

@ -14,7 +14,7 @@ import {
EuiEmptyPrompt, EuiEmptyPrompt,
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
} from '@elastic/eui'; } from '@elastic/eui';
import React from 'react'; import React from 'react';
import { Observable, Subscription, merge, tap, fromEvent } from 'rxjs'; import { Observable, Subscription, merge, tap, fromEvent } from 'rxjs';
@ -75,9 +75,9 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
public render() { public render() {
return ( return (
<EuiPage style={{ minHeight: '100vh' }}> <EuiPage style={{ minHeight: '100vh', alignItems: 'center' }}>
<EuiPageBody> <EuiPageBody>
<EuiPageContent verticalPosition="center" horizontalPosition="center"> <EuiPageSection alignment="center">
<EuiEmptyPrompt <EuiEmptyPrompt
iconType="warning" iconType="warning"
iconColor="danger" iconColor="danger"
@ -129,7 +129,7 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
</EuiCodeBlock> </EuiCodeBlock>
</EuiCallOut> </EuiCallOut>
))} ))}
</EuiPageContent> </EuiPageSection>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
); );

110
packages/kbn-plugin-generator/template/public/components/app.tsx.ejs
View file

@ -2,23 +2,15 @@ import React, { useState } from 'react';
import { i18n } from '@kbn/i18n'; import { i18n } from '@kbn/i18n';
import { FormattedMessage, I18nProvider } from '@kbn/i18n-react'; import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
import { BrowserRouter as Router } from '@kbn/shared-ux-router'; import { BrowserRouter as Router } from '@kbn/shared-ux-router';
import { import {
EuiButton, EuiButton,
EuiHorizontalRule, EuiHorizontalRule,
EuiPage, EuiPageTemplate,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageHeader,
EuiTitle, EuiTitle,
EuiText, EuiText,
} from '@elastic/eui'; } from '@elastic/eui';
import type { CoreStart } from '@kbn/core/public';
import { CoreStart } from '<%= importFromRoot('src/core/public') %>'; import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
import { NavigationPublicPluginStart } from '<%= importFromRoot('src/plugins/navigation/public') %>';
import { PLUGIN_ID, PLUGIN_NAME } from '../../common'; import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
@ -56,57 +48,51 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
<I18nProvider> <I18nProvider>
<> <>
<navigation.ui.TopNavMenu appName={ PLUGIN_ID } showSearchBar={true} useDefaultBehaviors={true}/> <navigation.ui.TopNavMenu appName={ PLUGIN_ID } showSearchBar={true} useDefaultBehaviors={true}/>
<EuiPage restrictWidth="1000px"> <EuiPageTemplate restrictWidth="1000px">
<EuiPageBody> <EuiPageTemplate.Header>
<EuiPageHeader> <EuiTitle size="l">
<EuiTitle size="l"> <h1>
<h1> <FormattedMessage
<FormattedMessage id="<%= camelCase(name) %>.helloWorldText"
id="<%= camelCase(name) %>.helloWorldText" defaultMessage="{name}"
defaultMessage="{name}" values={{ name: PLUGIN_NAME }}
values={{ name: PLUGIN_NAME }} />
/> </h1>
</h1> </EuiTitle>
</EuiTitle> </EuiPageTemplate.Header>
</EuiPageHeader> <EuiPageTemplate.Section>
<EuiPageContent> <EuiTitle>
<EuiPageContentHeader> <h2>
<EuiTitle> <FormattedMessage
<h2> id="<%= camelCase(name) %>.congratulationsTitle"
<FormattedMessage defaultMessage="Congratulations, you have successfully created a new Kibana Plugin!"
id="<%= camelCase(name) %>.congratulationsTitle" />
defaultMessage="Congratulations, you have successfully created a new Kibana Plugin!" </h2>
/> </EuiTitle>
</h2> <EuiText>
</EuiTitle> <p>
</EuiPageContentHeader> <FormattedMessage
<EuiPageContentBody> id="<%= camelCase(name) %>.content"
<EuiText> defaultMessage="Look through the generated code and check out the plugin development documentation."
<p> />
<FormattedMessage </p>
id="<%= camelCase(name) %>.content" <EuiHorizontalRule/>
defaultMessage="Look through the generated code and check out the plugin development documentation." <p>
/> <FormattedMessage
</p> id="<%= camelCase(name) %>.timestampText"
<EuiHorizontalRule/> defaultMessage="Last timestamp: {time}"
<p> values={{ time: timestamp ? timestamp : 'Unknown' }}
<FormattedMessage />
id="<%= camelCase(name) %>.timestampText" </p>
defaultMessage="Last timestamp: {time}" <EuiButton type="primary" size="s" onClick={onClickHandler}>
values={{ time: timestamp ? timestamp : 'Unknown' }} <FormattedMessage
/> id="<%= camelCase(name) %>.buttonText"
</p> defaultMessage="<%= hasServer ? 'Get data' : 'Click me' %>"
<EuiButton type="primary" size="s" onClick={onClickHandler}> />
<FormattedMessage </EuiButton>
id="<%= camelCase(name) %>.buttonText" </EuiText>
defaultMessage="<%= hasServer ? 'Get data' : 'Click me' %>" </EuiPageTemplate.Section>
/> </EuiPageTemplate>
</EuiButton>
</EuiText>
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</> </>
</I18nProvider> </I18nProvider>
</Router> </Router>

13
test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx
View file

@ -8,12 +8,7 @@
import './main.scss'; import './main.scss';
import React from 'react'; import React from 'react';
import { import { EuiPage, EuiPageBody, EuiPageSection, EuiPageHeader } from '@elastic/eui';
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
} from '@elastic/eui';
import { first, pluck } from 'rxjs/operators'; import { first, pluck } from 'rxjs/operators';
import { IInterpreterRenderHandlers, ExpressionValue } from '@kbn/expressions-plugin/public'; import { IInterpreterRenderHandlers, ExpressionValue } from '@kbn/expressions-plugin/public';
import { ExpressionRenderHandler } from '../../types'; import { ExpressionRenderHandler } from '../../types';
@ -89,11 +84,11 @@ class Main extends React.Component<{}, State> {
return ( return (
<EuiPage> <EuiPage>
<EuiPageBody> <EuiPageBody>
<EuiPageContent data-test-subj="pluginContent"> <EuiPageSection data-test-subj="pluginContent">
<EuiPageContentHeader>runPipeline tests are running ...</EuiPageContentHeader> <EuiPageHeader>runPipeline tests are running ...</EuiPageHeader>
<div data-test-subj="pluginChart" ref={this.chartRef} style={pStyle} /> <div data-test-subj="pluginChart" ref={this.chartRef} style={pStyle} />
<div>{this.state.expression}</div> <div>{this.state.expression}</div>
</EuiPageContent> </EuiPageSection>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
); );

23
test/plugin_functional/plugins/core_app_status/public/application.tsx
View file

@ -11,10 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
import { import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiTitle, EuiTitle,
@ -32,16 +29,14 @@ const AppStatusApp = ({ appId }: { appId: string }) => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>{appId} Test App home page section title</h2>
<h2>{appId} Test App home page section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>{appId} Test App content</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>{appId} Test App content</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
); );

47
test/plugin_functional/plugins/core_plugin_a/public/application.tsx
View file

@ -15,13 +15,10 @@ import { Router, Route } from '@kbn/shared-ux-router';
import { import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPageSideBar_Deprecated as EuiPageSideBar, EuiPageSidebar,
EuiTitle, EuiTitle,
EuiSideNav, EuiSideNav,
} from '@elastic/eui'; } from '@elastic/eui';
@ -37,16 +34,14 @@ const Home = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>Bar home page section title</h2>
<h2>Bar home page section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>Wow what a home page this is!</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>Wow what a home page this is!</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
@ -59,16 +54,14 @@ const PageA = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>Page A section title</h2>
<h2>Page A section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>Page A&apos;s content goes here</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>Page A&apos;s content goes here</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
@ -109,9 +102,9 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
const FooApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => ( const FooApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
<Router history={history}> <Router history={history}>
<EuiPage> <EuiPage>
<EuiPageSideBar> <EuiPageSidebar>
<Nav navigateToApp={coreStart.application.navigateToApp} /> <Nav navigateToApp={coreStart.application.navigateToApp} />
</EuiPageSideBar> </EuiPageSidebar>
<Route path="/" exact render={() => <Redirect to="/home" />} /> <Route path="/" exact render={() => <Redirect to="/home" />} />
<Route path="/home" exact component={Home} /> <Route path="/home" exact component={Home} />
<Route path="/page-a" component={PageA} /> <Route path="/page-a" component={PageA} />

23
test/plugin_functional/plugins/core_plugin_appleave/public/application.tsx
View file

@ -11,10 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
import { import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiTitle, EuiTitle,
@ -32,16 +29,14 @@ const App = ({ appName }: { appName: string }) => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>{appName} home page section title</h2>
<h2>{appName} home page section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>{appName} page content</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>{appName} page content</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
); );

51
test/plugin_functional/plugins/core_plugin_b/public/application.tsx
View file

@ -15,13 +15,10 @@ import { Router, Route } from '@kbn/shared-ux-router';
import { import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPageSideBar_Deprecated as EuiPageSideBar, EuiPageSidebar,
EuiTitle, EuiTitle,
EuiSideNav, EuiSideNav,
} from '@elastic/eui'; } from '@elastic/eui';
@ -37,16 +34,14 @@ const Home = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>Bar home page section</h2>
<h2>Bar home page sction</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>It feels so homey!</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>It feels so homey!</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
@ -63,18 +58,16 @@ const PageB = ({ location }: RouteComponentProps) => {
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>
<h2> Search params:{' '}
Search params:{' '} <span data-test-subj="barAppPageBQuery">{JSON.stringify(searchParams)}</span>
<span data-test-subj="barAppPageBQuery">{JSON.stringify(searchParams)}</span> </h2>
</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> </EuiPageSection>
</EuiPageContentHeader>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
}; };
@ -116,9 +109,9 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
const BarApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => ( const BarApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
<Router history={history}> <Router history={history}>
<EuiPage> <EuiPage>
<EuiPageSideBar> <EuiPageSidebar>
<Nav navigateToApp={coreStart.application.navigateToApp} /> <Nav navigateToApp={coreStart.application.navigateToApp} />
</EuiPageSideBar> </EuiPageSidebar>
<Route path="/" exact component={Home} /> <Route path="/" exact component={Home} />
<Route path="/page-b" component={PageB} /> <Route path="/page-b" component={PageB} />
</EuiPage> </EuiPage>

23
test/plugin_functional/plugins/core_plugin_chromeless/public/application.tsx
View file

@ -13,10 +13,7 @@ import { Route } from '@kbn/shared-ux-router';
import { import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiTitle, EuiTitle,
@ -33,16 +30,14 @@ const Home = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>Chromeless home page section title</h2>
<h2>Chromeless home page section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>Where did all the chrome go?</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>Where did all the chrome go?</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );

65
test/plugin_functional/plugins/core_plugin_deep_links/public/application.tsx
View file

@ -14,14 +14,11 @@ import { Router, Route } from '@kbn/shared-ux-router';
import { import {
EuiPage, EuiPage,
EuiPageSidebar,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPageSideBar_Deprecated as EuiPageSideBar,
EuiTitle, EuiTitle,
EuiSideNav, EuiSideNav,
} from '@elastic/eui'; } from '@elastic/eui';
@ -37,16 +34,14 @@ const Home = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>DL home page section title</h2>
<h2>DL home page section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>Wow this is the content!</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>Wow this is the content!</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
@ -59,16 +54,14 @@ const PageA = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>DL Page A section title</h2>
<h2>DL Page A section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>DL Page A&apos;s content goes here</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>DL Page A&apos;s content goes here</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
@ -81,16 +74,14 @@ const PageB = () => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>DL Page B section title</h2>
<h2>DL Page B section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>DL Page B&apos;s content goes here</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>DL Page B&apos;s content goes here</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
@ -141,9 +132,9 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
const DlApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => ( const DlApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
<Router history={history}> <Router history={history}>
<EuiPage> <EuiPage>
<EuiPageSideBar> <EuiPageSidebar>
<Nav navigateToApp={coreStart.application.navigateToApp} /> <Nav navigateToApp={coreStart.application.navigateToApp} />
</EuiPageSideBar> </EuiPageSidebar>
<Route path="/" exact render={() => <Redirect to="/home" />} /> <Route path="/" exact render={() => <Redirect to="/home" />} />
<Route path="/home" exact component={Home} /> <Route path="/home" exact component={Home} />
<Route path="/page-a" component={PageA} /> <Route path="/page-a" component={PageA} />

23
test/plugin_functional/plugins/core_plugin_helpmenu/public/application.tsx
View file

@ -11,10 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
import { import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageSection,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiTitle, EuiTitle,
@ -32,16 +29,14 @@ const App = ({ appName }: { appName: string }) => (
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageSection>
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection> <EuiTitle>
<EuiTitle> <h2>{appName} home page section title</h2>
<h2>{appName} home page section title</h2> </EuiTitle>
</EuiTitle> </EuiPageHeader>
</EuiPageContentHeaderSection> <EuiPageSection>{appName} page content</EuiPageSection>
</EuiPageContentHeader> </EuiPageSection>
<EuiPageContentBody>{appName} page content</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
); );