Skip to content

Commit c49ac0a

Browse files
kibanamachinekibanamachine
authored
Merge branch 'main' into eui-emotion-order
2 parents 82f9d01 + 4439121 commit c49ac0a

File tree

27 files changed

+385
-458
lines changed

27 files changed

+385
-458
lines changed

‎.buildkite/scripts/steps/functional/apm_cypress.sh‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,16 @@ APM_CYPRESS_RECORD_KEY="$(retry 5 5 vault read -field=CYPRESS_RECORD_KEY secret/
1111

1212
export JOB=kibana-apm-cypress
1313
IS_FLAKY_TEST_RUNNER=${CLI_COUNT:-0}
14+
GH_APM_TEAM_LABEL="Team:APM"
1415

15-
#Enabling cypress dashboard recording when PR is labeled with `apm:cypress-record` and we are not using the flaky test runner
16-
if [[ "$IS_FLAKY_TEST_RUNNER" -ne 1 ]] && is_pr_with_label "apm:cypress-record"; then
16+
if (! is_pr); then
17+
echo "--- Add GH labels to buildkite metadata"
18+
ts-node .buildkite/scripts/steps/add_gh_labels_to_bk_metadata.ts BUILDKITE_MESSAGE true
19+
GH_ON_MERGE_LABELS="$(buildkite-agent meta-data get gh_labels)"
20+
fi
21+
22+
# Enabling cypress dashboard recording when PR is labeled with `apm:cypress-record` and we are not using the flaky test runner OR on merge with Team:APM label applied
23+
if ([[ "$IS_FLAKY_TEST_RUNNER" -ne 1 ]] && is_pr_with_label "apm:cypress-record") || ([[ $GH_ON_MERGE_LABELS == *"$GH_APM_TEAM_LABEL"* ]]); then
1724
CYPRESS_ARGS="--record --key "$APM_CYPRESS_RECORD_KEY" --parallel --ci-build-id "${BUILDKITE_BUILD_ID}""
1825
else
1926
CYPRESS_ARGS=""

‎examples/embeddable_explorer/public/app.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import React from 'react';
1010
import ReactDOM from 'react-dom';
1111
import { BrowserRouter as Router, withRouter, RouteComponentProps } from 'react-router-dom';
1212
import { Route } from '@kbn/shared-ux-router';
13-
import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
13+
import { EuiPageTemplate, EuiSideNav } from '@elastic/eui';
1414

1515
import { EmbeddableStart } from '@kbn/embeddable-plugin/public';
1616
import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@@ -51,7 +51,7 @@ const Nav = withRouter(({ history, navigateToApp, pages }: NavProps) => {
5151
<EuiSideNav
5252
items={[
5353
{
54-
name: 'Embeddable explorer',
54+
name: 'Embeddable examples',
5555
id: 'home',
5656
items: [...navItems],
5757
},
@@ -81,7 +81,7 @@ const EmbeddableExplorerApp = ({
8181
}: Props) => {
8282
const pages: PageDef[] = [
8383
{
84-
title: 'Hello world embeddable',
84+
title: 'Render embeddable',
8585
id: 'helloWorldEmbeddableSection',
8686
component: (
8787
<HelloWorldEmbeddableExample
@@ -90,7 +90,7 @@ const EmbeddableExplorerApp = ({
9090
),
9191
},
9292
{
93-
title: 'Todo embeddable',
93+
title: 'Update embeddable state',
9494
id: 'todoEmbeddableSection',
9595
component: (
9696
<TodoEmbeddableExample
@@ -99,17 +99,16 @@ const EmbeddableExplorerApp = ({
9999
),
100100
},
101101
{
102-
title: 'List container embeddable',
102+
title: 'Groups of embeddables',
103103
id: 'listContainerSection',
104104
component: (
105105
<ListContainerExample
106106
listContainerEmbeddableFactory={embeddableExamples.factories.getListContainerEmbeddableFactory()}
107-
searchableListContainerEmbeddableFactory={embeddableExamples.factories.getSearchableListContainerEmbeddableFactory()}
108107
/>
109108
),
110109
},
111110
{
112-
title: 'Dynamically adding children to a container',
111+
title: 'Context menu',
113112
id: 'embeddablePanelExample',
114113
component: (
115114
<EmbeddablePanelExample
@@ -126,12 +125,12 @@ const EmbeddableExplorerApp = ({
126125

127126
return (
128127
<Router basename={basename}>
129-
<EuiPage>
130-
<EuiPageSideBar>
128+
<EuiPageTemplate offset={0}>
129+
<EuiPageTemplate.Sidebar>
131130
<Nav navigateToApp={navigateToApp} pages={pages} />
132-
</EuiPageSideBar>
131+
</EuiPageTemplate.Sidebar>
133132
{routes}
134-
</EuiPage>
133+
</EuiPageTemplate>
135134
</Router>
136135
);
137136
};

‎examples/embeddable_explorer/public/embeddable_panel_example.tsx‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,7 @@
77
*/
88

99
import React, { useState, useEffect, useRef } from 'react';
10-
import {
11-
EuiPanel,
12-
EuiPageBody,
13-
EuiPageContent_Deprecated as EuiPageContent,
14-
EuiPageContentBody_Deprecated as EuiPageContentBody,
15-
EuiPageHeader,
16-
EuiPageHeaderSection,
17-
EuiTitle,
18-
EuiText,
19-
} from '@elastic/eui';
10+
import { EuiPanel, EuiText, EuiPageTemplate } from '@elastic/eui';
2011
import { EuiSpacer } from '@elastic/eui';
2112
import { EmbeddableStart, IEmbeddable } from '@kbn/embeddable-plugin/public';
2213
import {
@@ -116,16 +107,10 @@ export function EmbeddablePanelExample({ embeddableServices, searchListContainer
116107
});
117108

118109
return (
119-
<EuiPageBody>
120-
<EuiPageHeader>
121-
<EuiPageHeaderSection>
122-
<EuiTitle size="l">
123-
<h1>The embeddable panel component</h1>
124-
</EuiTitle>
125-
</EuiPageHeaderSection>
126-
</EuiPageHeader>
127-
<EuiPageContent>
128-
<EuiPageContentBody>
110+
<>
111+
<EuiPageTemplate.Header pageTitle="Context menu" />
112+
<EuiPageTemplate.Section grow={false}>
113+
<>
129114
<EuiText>
130115
You can render your embeddable inside the EmbeddablePanel component. This adds some
131116
extra rendering and offers a context menu with pluggable actions. Using EmbeddablePanel
@@ -142,8 +127,8 @@ export function EmbeddablePanelExample({ embeddableServices, searchListContainer
142127
</EuiPanel>
143128

144129
<EuiSpacer />
145-
</EuiPageContentBody>
146-
</EuiPageContent>
147-
</EuiPageBody>
130+
</>
131+
</EuiPageTemplate.Section>
132+
</>
148133
);
149134
}

‎examples/embeddable_explorer/public/hello_world_embeddable_example.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@
88

99
import React from 'react';
1010
import {
11-
EuiPageBody,
12-
EuiPageContent_Deprecated as EuiPageContent,
13-
EuiPageContentBody_Deprecated as EuiPageContentBody,
14-
EuiPageHeader,
15-
EuiPageHeaderSection,
11+
EuiPageTemplate,
1612
EuiPanel,
1713
EuiText,
1814
EuiTitle,
15+
EuiCodeBlock,
16+
EuiSpacer,
1917
} from '@elastic/eui';
2018
import { EmbeddableRenderer } from '@kbn/embeddable-plugin/public';
2119
import {
@@ -29,40 +27,46 @@ interface Props {
2927

3028
export function HelloWorldEmbeddableExample({ helloWorldEmbeddableFactory }: Props) {
3129
return (
32-
<EuiPageBody>
33-
<EuiPageHeader>
34-
<EuiPageHeaderSection>
35-
<EuiTitle size="l">
36-
<h1>Hello world example</h1>
30+
<>
31+
<EuiPageTemplate.Header pageTitle="Render embeddable" />
32+
<EuiPageTemplate.Section grow={false} bottomBorder="extended">
33+
<>
34+
<EuiTitle size="xs">
35+
<h2>Embeddable prop</h2>
3736
</EuiTitle>
38-
</EuiPageHeaderSection>
39-
</EuiPageHeader>
40-
<EuiPageContent>
41-
<EuiPageContentBody>
4237
<EuiText>
43-
Here the embeddable is rendered without the factory. A developer may use this method if
44-
they want to statically embed a single embeddable into their application or page. Also
45-
`input` prop may be used to declaratively update current embeddable input
38+
Use embeddable constructor to pass embeddable directly to{' '}
39+
<strong>EmbeddableRenderer</strong>. Use <strong>input</strong> prop to declaratively
40+
update embeddable input.
4641
</EuiText>
47-
<EuiPanel data-test-subj="helloWorldEmbeddablePanel" paddingSize="none" role="figure">
42+
<EuiSpacer />
43+
<EuiPanel data-test-subj="helloWorldEmbeddablePanel" role="figure">
4844
<EmbeddableRenderer embeddable={new HelloWorldEmbeddable({ id: 'hello' })} />
4945
</EuiPanel>
50-
46+
<EuiSpacer />
47+
<EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
48+
{`<EmbeddableRenderer embeddable={new HelloWorldEmbeddable({ id: 'hello' })} />`}
49+
</EuiCodeBlock>
50+
</>
51+
</EuiPageTemplate.Section>
52+
<EuiPageTemplate.Section grow={false}>
53+
<>
54+
<EuiTitle size="xs">
55+
<h2>Factory prop</h2>
56+
</EuiTitle>
5157
<EuiText>
52-
Here the embeddable is rendered using the factory. Internally it creates embeddable
53-
using factory.create(). This method is used programatically when a container embeddable
54-
attempts to initialize it&#39;s children embeddables. This method can be used when you
55-
only have a access to a factory.
58+
Use <strong>factory</strong> prop to programatically instantiate embeddable.
5659
</EuiText>
57-
<EuiPanel
58-
data-test-subj="helloWorldEmbeddableFromFactory"
59-
paddingSize="none"
60-
role="figure"
61-
>
60+
<EuiSpacer />
61+
<EuiPanel data-test-subj="helloWorldEmbeddableFromFactory" role="figure">
6262
<EmbeddableRenderer factory={helloWorldEmbeddableFactory} input={{ id: '1234' }} />
6363
</EuiPanel>
64-
</EuiPageContentBody>
65-
</EuiPageContent>
66-
</EuiPageBody>
64+
<EuiSpacer />
65+
<EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
66+
{`<EmbeddableRenderer factory={helloWorldEmbeddableFactory} input={{ id: '1234' }} />`}
67+
</EuiCodeBlock>
68+
</>
69+
</EuiPageTemplate.Section>
70+
</>
6771
);
6872
}

0 commit comments

Comments
 (0)