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:
Nathan Reese 2018-07-06 12:15:55 -06:00 committed by GitHub
parent 8b8e5a0a8d
commit 61d7b918c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 217 additions and 189 deletions

View file

@ -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",

View file

@ -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));
});
});

View file

@ -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>

View file

@ -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>

View file

@ -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() {

View file

@ -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",

View file

@ -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"

View file

@ -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"