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

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

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