Update EUI to 0.0.53 (elastic#20005) (elastic#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)

package.json

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

src/core_plugins/input_control_vis/public/components/editor/controls_tab.js

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

src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap

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

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.js

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

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.test.js

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

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__tests__/__snapshots__/flyout.test.js.snap

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

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__tests__/__snapshots__/relationships.test.js.snap

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

test/functional/apps/visualize/_input_control_vis.js

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

test/functional/config.js

@@ -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'),
 

test/functional/page_objects/visualize_page.js

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

test/functional/services/dashboard/add_panel.js

@@ -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.');

test/functional/services/flyout.js

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

test/functional/services/index.js

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

x-pack/package.json

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