Update EUI to 0.0.53 (#20005) (#20042)

* Update to EUI 0.0.53

* Remove input vis specific styling

* remove double close button in dashboard add panel flyout (#2)

* Fix functional tests

* fix x-pack snapshots

* EUI 0.0.53 no longer closes combo box when clear btn is pressed (#3)
This commit is contained in:
Tim Roes 2018-06-19 18:57:42 +02:00 committed by GitHub
parent a04ace91a1
commit 508df9e67e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 123 additions and 66 deletions

View file

@ -75,7 +75,7 @@
"url": "https://github.com/elastic/kibana.git"
},
"dependencies": {
"@elastic/eui": "v0.0.52",
"@elastic/eui": "0.0.53",
"@elastic/filesaver": "1.1.2",
"@elastic/numeral": "2.3.2",
"@elastic/ui-ace": "0.2.3",

View file

@ -17,7 +17,6 @@
* under the License.
*/
import './controls_tab.less';
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';

View file

@ -1,3 +0,0 @@
.euiAccordion__childWrapper {
overflow: visible;
}

View file

@ -4,6 +4,7 @@ exports[`render 1`] = `
<EuiFlyout
className="addPanelFlyout"
data-test-subj="dashboardAddPanel"
hideCloseButton={false}
onClose={[Function]}
ownFocus={true}
size="s"
@ -30,19 +31,6 @@ exports[`render 1`] = `
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiButtonIcon
aria-label="close add panel"
color="primary"
data-test-subj="closeAddPanelBtn"
iconType="cross"
onClick={[Function]}
type="button"
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiTabs>
<EuiTab

View file

@ -29,7 +29,6 @@ import {
EuiFlyout,
EuiFlyoutBody,
EuiButton,
EuiButtonIcon,
EuiTabs,
EuiTab,
EuiSpacer,
@ -142,14 +141,6 @@ export class DashboardAddPanel extends React.Component {
<h2>Add Panels</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType="cross"
onClick={this.props.onClose}
aria-label="close add panel"
data-test-subj="closeAddPanelBtn"
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiTabs>

View file

@ -19,10 +19,7 @@
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import {
findTestSubject,
} from '@elastic/eui/lib/test';
import { shallow } from 'enzyme';
import {
DashboardAddPanel,
@ -49,14 +46,3 @@ test('render', () => {
/>);
expect(component).toMatchSnapshot();
});
test('onClose', () => {
const component = mount(<DashboardAddPanel
onClose={onClose}
find={() => {}}
addNewPanel={() => {}}
addNewVis={() => {}}
/>);
findTestSubject(component, 'closeAddPanelBtn', false).simulate('click');
sinon.assert.calledOnce(onClose);
});

View file

@ -2,10 +2,14 @@
exports[`Flyout conflicts should allow conflict resolution 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>
@ -157,10 +161,14 @@ exports[`Flyout conflicts should handle errors 1`] = `
exports[`Flyout should render import step 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>

View file

@ -2,10 +2,14 @@
exports[`Relationships should render dashboards normally 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>
@ -127,10 +131,14 @@ exports[`Relationships should render dashboards normally 1`] = `
exports[`Relationships should render errors 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>
@ -190,10 +198,14 @@ exports[`Relationships should render errors 1`] = `
exports[`Relationships should render index patterns normally 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>
@ -371,10 +383,14 @@ exports[`Relationships should render index patterns normally 1`] = `
exports[`Relationships should render searches normally 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>
@ -550,10 +566,14 @@ exports[`Relationships should render searches normally 1`] = `
exports[`Relationships should render visualizations normally 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiTitle
size="m"
>

View file

@ -183,7 +183,7 @@ export default function ({ getService, getPageObjects }) {
});
});
describe('nested controls', () => {
describe('chained controls', () => {
before(async () => {
await PageObjects.common.navigateToUrl('visualize', 'new');

View file

@ -48,6 +48,7 @@ import {
VisualizeListingTableProvider,
DashboardAddPanelProvider,
DashboardPanelActionsProvider,
FlyoutProvider,
} from './services';
export default async function ({ readConfigFile }) {
@ -101,6 +102,7 @@ export default async function ({ readConfigFile }) {
visualizeListingTable: VisualizeListingTableProvider,
dashboardAddPanel: DashboardAddPanelProvider,
dashboardPanelActions: DashboardPanelActionsProvider,
flyout: FlyoutProvider,
},
servers: commonConfig.get('servers'),

View file

@ -261,14 +261,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
async clearComboBox(comboBoxSelector) {
const comboBox = await testSubjects.find(comboBoxSelector);
const clearBtn = await comboBox.findByCssSelector('button.euiFormControlLayoutClearButton');
const clearBtn = await comboBox.findByCssSelector('[data-test-subj="comboBoxClearButton"]');
await clearBtn.click();
await this.closeComboBoxOptionsList(comboBox);
}
async closeComboBoxOptionsList(comboBoxElement) {
const isOptionsListOpen = await testSubjects.exists('comboBoxOptionsList');
if (isOptionsListOpen) {
const closeBtn = await comboBoxElement.findByCssSelector('button.euiFormControlLayoutCustomIcon');
const closeBtn = await comboBoxElement.findByCssSelector('[data-test-subj="comboBoxToggleListButton"]');
await closeBtn.click();
}
}

View file

@ -22,6 +22,7 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) {
const log = getService('log');
const retry = getService('retry');
const testSubjects = getService('testSubjects');
const flyout = getService('flyout');
const PageObjects = getPageObjects(['header', 'common']);
return new class DashboardAddPanel {
@ -93,11 +94,11 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) {
}
async closeAddPanel() {
log.debug('closeAddPanel');
log.debug('DashboardAddPanel.closeAddPanel');
const isOpen = await this.isAddPanelOpen();
if (isOpen) {
await retry.try(async () => {
await testSubjects.click('closeAddPanelBtn');
await flyout.close('dashboardAddPanel');
const isOpen = await this.isAddPanelOpen();
if (isOpen) {
throw new Error('Add panel still open, trying again.');

View file

@ -0,0 +1,43 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export function FlyoutProvider({ getService }) {
const testSubjects = getService('testSubjects');
const find = getService('find');
class Flyout {
async getFlyout(testSubj) {
if (testSubj) {
return await testSubjects.find(testSubj);
} else {
return await find.byCssSelector('.euiFlyout');
}
}
async close(panelTestSubj) {
const panelElement = await this.getFlyout(panelTestSubj);
const closeBtn = await panelElement.findByCssSelector('[aria-label*="Close"]');
await closeBtn.click();
}
}
return new Flyout();
}

View file

@ -26,5 +26,6 @@ export { DocTableProvider } from './doc_table';
export { ScreenshotsProvider } from './screenshots';
export { FailureDebuggingProvider } from './failure_debugging';
export { VisualizeListingTableProvider } from './visualize_listing_table';
export { FlyoutProvider } from './flyout';
export * from './dashboard';

View file

@ -76,7 +76,7 @@
"yargs": "4.7.1"
},
"dependencies": {
"@elastic/eui": "0.0.52",
"@elastic/eui": "0.0.53",
"@elastic/node-crypto": "0.1.2",
"@elastic/node-phantom-simple": "2.2.4",
"@elastic/numeral": "2.3.2",

View file

@ -2,10 +2,14 @@
exports[`DetailDrawer component If vertices shows basic info and no stats for if 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiFlexGroup
alignItems="baseline"
component="div"
@ -78,10 +82,14 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if
exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID shows basic info and stats for plugin, suggesting that user set explicit ID 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiFlexGroup
alignItems="baseline"
component="div"
@ -376,10 +384,14 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows basic info and stats for plugin, including explicit ID 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiFlexGroup
alignItems="baseline"
component="div"
@ -670,10 +682,14 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
exports[`DetailDrawer component Queue vertices shows basic info and no stats for queue 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiFlexGroup
alignItems="baseline"
component="div"
@ -736,10 +752,14 @@ exports[`DetailDrawer component Queue vertices shows basic info and no stats for
exports[`DetailDrawer component shows vertex title 1`] = `
<EuiFlyout
hideCloseButton={false}
onClose={[MockFunction]}
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiFlyoutHeader
hasBorder={false}
>
<EuiFlexGroup
alignItems="baseline"
component="div"

View file

@ -10,9 +10,9 @@
esutils "^2.0.2"
js-tokens "^3.0.0"
"@elastic/eui@0.0.52":
version "0.0.52"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.52.tgz#c34c6cd482b458015e0d2b410f98652053994138"
"@elastic/eui@0.0.53":
version "0.0.53"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.53.tgz#73c8e73e0b2a5574748d2a95416e99e78f355f07"
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.52", "@elastic/eui@v0.0.52":
version "0.0.52"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.52.tgz#c34c6cd482b458015e0d2b410f98652053994138"
"@elastic/eui@0.0.53":
version "0.0.53"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.53.tgz#73c8e73e0b2a5574748d2a95416e99e78f355f07"
dependencies:
classnames "^2.2.5"
core-js "^2.5.1"