mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
Upgrade to EUI 1.1.0 (#20411)
* Upgrade to EUI 1.0.1 * upgraded to eui 1.1.0 * fix setInspectorTablePageSize function in functional tests * better comment about basic table pagination buttons
This commit is contained in:
parent
8b8e5a0a8d
commit
61d7b918c3
8 changed files with 217 additions and 189 deletions
|
@ -77,7 +77,7 @@
|
|||
"url": "https://github.com/elastic/kibana.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@elastic/eui": "0.0.55",
|
||||
"@elastic/eui": "1.1.0",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/numeral": "2.3.2",
|
||||
"@elastic/ui-ace": "0.2.3",
|
||||
|
|
|
@ -95,117 +95,132 @@ test('renders ControlsTab', () => {
|
|||
expect(component).toMatchSnapshot(); // eslint-disable-line
|
||||
});
|
||||
|
||||
test('add control btn', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
|
||||
// Use custom match function since control.id is dynamically generated and never the same.
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match((newParams) => {
|
||||
if (newParams.controls.length !== 3) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}, 'control not added to editorState.params'));
|
||||
});
|
||||
describe('behavior', () => {
|
||||
// Mock MutationObserver used in EuiAccordion
|
||||
beforeAll(() => {
|
||||
global.MutationObserver = class {
|
||||
constructor() {}
|
||||
disconnect() {}
|
||||
observe() {}
|
||||
};
|
||||
});
|
||||
|
||||
test('remove control btn', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
|
||||
const expectedParams = {
|
||||
'controls': [
|
||||
{
|
||||
'id': '2',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'numberField',
|
||||
'label': '',
|
||||
'type': 'range',
|
||||
'options': {
|
||||
'step': 1
|
||||
}
|
||||
afterAll(() => {
|
||||
delete global.MutationObserver;
|
||||
});
|
||||
|
||||
test('add control button', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
|
||||
// Use custom match function since control.id is dynamically generated and never the same.
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match((newParams) => {
|
||||
if (newParams.controls.length !== 3) {
|
||||
return false;
|
||||
}
|
||||
]
|
||||
};
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
|
||||
});
|
||||
return true;
|
||||
}, 'control not added to editorState.params'));
|
||||
});
|
||||
|
||||
test('remove control button', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
|
||||
const expectedParams = {
|
||||
'controls': [
|
||||
{
|
||||
'id': '2',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'numberField',
|
||||
'label': '',
|
||||
'type': 'range',
|
||||
'options': {
|
||||
'step': 1
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
|
||||
});
|
||||
|
||||
|
||||
test('move down control btn', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
|
||||
const expectedParams = {
|
||||
'controls': [
|
||||
{
|
||||
'id': '2',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'numberField',
|
||||
'label': '',
|
||||
'type': 'range',
|
||||
'options': {
|
||||
'step': 1
|
||||
test('move down control button', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
|
||||
const expectedParams = {
|
||||
'controls': [
|
||||
{
|
||||
'id': '2',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'numberField',
|
||||
'label': '',
|
||||
'type': 'range',
|
||||
'options': {
|
||||
'step': 1
|
||||
}
|
||||
},
|
||||
{
|
||||
'id': '1',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'keywordField',
|
||||
'label': 'custom label',
|
||||
'type': 'list',
|
||||
'options': {
|
||||
'type': 'terms',
|
||||
'multiselect': true,
|
||||
'size': 5,
|
||||
'order': 'desc'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
'id': '1',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'keywordField',
|
||||
'label': 'custom label',
|
||||
'type': 'list',
|
||||
'options': {
|
||||
'type': 'terms',
|
||||
'multiselect': true,
|
||||
'size': 5,
|
||||
'order': 'desc'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
|
||||
});
|
||||
]
|
||||
};
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
|
||||
});
|
||||
|
||||
test('move up control btn', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');
|
||||
const expectedParams = {
|
||||
'controls': [
|
||||
{
|
||||
'id': '2',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'numberField',
|
||||
'label': '',
|
||||
'type': 'range',
|
||||
'options': {
|
||||
'step': 1
|
||||
test('move up control button', () => {
|
||||
const component = mount(<ControlsTab
|
||||
scope={scopeMock}
|
||||
editorState={scopeMock.editorState}
|
||||
stageEditorParams={stageEditorParams}
|
||||
/>);
|
||||
findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');
|
||||
const expectedParams = {
|
||||
'controls': [
|
||||
{
|
||||
'id': '2',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'numberField',
|
||||
'label': '',
|
||||
'type': 'range',
|
||||
'options': {
|
||||
'step': 1
|
||||
}
|
||||
},
|
||||
{
|
||||
'id': '1',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'keywordField',
|
||||
'label': 'custom label',
|
||||
'type': 'list',
|
||||
'options': {
|
||||
'type': 'terms',
|
||||
'multiselect': true,
|
||||
'size': 5,
|
||||
'order': 'desc'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
'id': '1',
|
||||
'indexPattern': 'indexPattern1',
|
||||
'fieldName': 'keywordField',
|
||||
'label': 'custom label',
|
||||
'type': 'list',
|
||||
'options': {
|
||||
'type': 'terms',
|
||||
'multiselect': true,
|
||||
'size': 5,
|
||||
'order': 'desc'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
|
||||
]
|
||||
};
|
||||
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
|
||||
});
|
||||
});
|
||||
|
|
|
@ -24,36 +24,40 @@ exports[`DashboardPanel matches snapshot 1`] = `
|
|||
class="kuiMicroButtonGroup"
|
||||
>
|
||||
<div
|
||||
class="euiPopover euiPopover--anchorDownRight dashboardPanelPopOver euiPopover--withTitle"
|
||||
class="euiPopover euiPopover--anchorDownRight euiPopover--withTitle dashboardPanelPopOver"
|
||||
id="dashboardPanelContextMenu"
|
||||
>
|
||||
<button
|
||||
aria-label="Panel options"
|
||||
class="euiButtonIcon euiButtonIcon--text"
|
||||
data-test-subj="dashboardPanelToggleMenuIcon"
|
||||
type="button"
|
||||
<div
|
||||
class="euiPopover__anchor"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
<button
|
||||
aria-label="Panel options"
|
||||
class="euiButtonIcon euiButtonIcon--text"
|
||||
data-test-subj="dashboardPanelToggleMenuIcon"
|
||||
type="button"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
|
||||
id="gear-a"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
|
||||
id="gear-a"
|
||||
/>
|
||||
</defs>
|
||||
<use
|
||||
xlink:href="#gear-a"
|
||||
/>
|
||||
</defs>
|
||||
<use
|
||||
xlink:href="#gear-a"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -229,48 +229,37 @@ exports[`InspectorPanel should render as expected 1`] = `
|
|||
<div
|
||||
className="euiPopover euiPopover--anchorDownRight"
|
||||
id="inspectorViewChooser"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="inspectorViewChooser"
|
||||
iconSide="right"
|
||||
iconType="arrowDown"
|
||||
onClick={[Function]}
|
||||
size="s"
|
||||
type="button"
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<button
|
||||
className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--iconRight"
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="inspectorViewChooser"
|
||||
iconSide="right"
|
||||
iconType="arrowDown"
|
||||
onClick={[Function]}
|
||||
size="s"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="euiButtonEmpty__content"
|
||||
<button
|
||||
className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--iconRight"
|
||||
data-test-subj="inspectorViewChooser"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
className="euiButtonEmpty__icon"
|
||||
size="m"
|
||||
type="arrowDown"
|
||||
<span
|
||||
className="euiButtonEmpty__content"
|
||||
>
|
||||
<arrowDown
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonEmpty__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={
|
||||
Object {
|
||||
"fill": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
className="euiButtonEmpty__icon"
|
||||
size="m"
|
||||
type="arrowDown"
|
||||
>
|
||||
<svg
|
||||
<arrowDown
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonEmpty__icon"
|
||||
focusable="false"
|
||||
|
@ -285,26 +274,42 @@ exports[`InspectorPanel should render as expected 1`] = `
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
|
||||
id="arrow_down-a"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonEmpty__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={
|
||||
Object {
|
||||
"fill": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
|
||||
id="arrow_down-a"
|
||||
/>
|
||||
</defs>
|
||||
<use
|
||||
fillRule="nonzero"
|
||||
xlinkHref="#arrow_down-a"
|
||||
/>
|
||||
</defs>
|
||||
<use
|
||||
fillRule="nonzero"
|
||||
xlinkHref="#arrow_down-a"
|
||||
/>
|
||||
</svg>
|
||||
</arrowDown>
|
||||
</EuiIcon>
|
||||
<span>
|
||||
View:
|
||||
View 1
|
||||
</svg>
|
||||
</arrowDown>
|
||||
</EuiIcon>
|
||||
<span>
|
||||
View:
|
||||
View 1
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</EuiButtonEmpty>
|
||||
</button>
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</EuiOutsideClickDetector>
|
||||
</EuiPopover>
|
||||
|
|
|
@ -364,7 +364,11 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
async setInspectorTablePageSize(size) {
|
||||
const panel = await testSubjects.find('inspectorPanel');
|
||||
await find.clickByButtonText('Rows per page: 20', panel);
|
||||
await find.clickByButtonText(`${size} rows`, panel);
|
||||
// The buttons for setting table page size are in a popover element. This popover
|
||||
// element appears as if it's part of the inspectorPanel but it's really attached
|
||||
// to the body element by a portal.
|
||||
const tableSizesPopover = await find.byCssSelector('.euiPanel');
|
||||
await find.clickByButtonText(`${size} rows`, tableSizesPopover);
|
||||
}
|
||||
|
||||
async getMetric() {
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
"yargs": "4.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@elastic/eui": "0.0.55",
|
||||
"@elastic/eui": "1.1.0",
|
||||
"@elastic/node-crypto": "0.1.2",
|
||||
"@elastic/node-phantom-simple": "2.2.4",
|
||||
"@elastic/numeral": "2.3.2",
|
||||
|
|
|
@ -10,9 +10,9 @@
|
|||
esutils "^2.0.2"
|
||||
js-tokens "^3.0.0"
|
||||
|
||||
"@elastic/eui@0.0.55":
|
||||
version "0.0.55"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.55.tgz#95ff5b70ecb1d333e1a5570a0e4a4079fdf7887b"
|
||||
"@elastic/eui@1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-1.1.0.tgz#f4aa5702358133dd8c26295ba7c6a243c35616be"
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
core-js "^2.5.1"
|
||||
|
|
|
@ -77,9 +77,9 @@
|
|||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@elastic/eui@0.0.55":
|
||||
version "0.0.55"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.55.tgz#95ff5b70ecb1d333e1a5570a0e4a4079fdf7887b"
|
||||
"@elastic/eui@1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-1.1.0.tgz#f4aa5702358133dd8c26295ba7c6a243c35616be"
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
core-js "^2.5.1"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue