[7.0] [Maps] Remove unneeded and breaking layer condition that preven…

…ts cancel from add layer panel (#31634) (#31930)

* [Maps] Remove unneeded and breaking layer condition that prevents cancel from add layer panel (#31634)

* Remove unneeded and breaking layer condition that prevents cancelling unless a layer's selected

* Add layer tests. Review feedback

* .....and the test file

* Review feedback. Factor out reusable maps test functions. Clean up

* Picky picky

* Review feedback. Remove sleeps

# Conflicts:
#	x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
#	x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
#	x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
#	x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
#	x-pack/test/functional/apps/maps/index.js

* Remove trailing space

x-pack/plugins/maps/public/components/layer_addpanel/view.js

@@ -20,6 +20,7 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
 } from '@elastic/eui';
+import _ from 'lodash';
 
 export class AddLayerPanel extends Component {
 
@@ -45,10 +46,7 @@ export class AddLayerPanel extends Component {
 
   _clearSource = () => {
     this.setState({ sourceType: null });
-
-    if (this.state.layer) {
-      this.props.removeTransientLayer();
-    }
+    this.props.removeTransientLayer();
   }
 
   _onSourceTypeChange = (sourceType) => {
@@ -93,6 +91,7 @@ export class AddLayerPanel extends Component {
             onClick={() => this._onSourceTypeChange(Source.type)}
             description={Source.description}
             layout="horizontal"
+            data-test-subj={_.camelCase(Source.title)}
           />
         </Fragment>
       );
@@ -160,20 +159,20 @@ export class AddLayerPanel extends Component {
           </EuiTitle>
         </EuiFlyoutHeader>
 
-        <EuiFlyoutBody className="mapLayerPanel__body">
+        <EuiFlyoutBody
+          className="mapLayerPanel__body"
+          data-test-subj="layerAddForm"
+        >
           {this._renderAddLayerForm()}
         </EuiFlyoutBody>
 
         <EuiFlyoutFooter className="mapLayerPanel__footer">
           <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
-                onClick={() => {
-                  if (this.state.layer) {
-                    this.props.closeFlyout();
-                  }
-                }}
+                onClick={this.props.closeFlyout}
                 flush="left"
+                data-test-subj="layerAddCancelButton"
               >
                 Cancel
               </EuiButtonEmpty>

x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js

@@ -159,7 +159,9 @@ export class TOCEntry extends React.Component {
           <EuiFlexItem>
             <button
               onClick={openLayerPanelWithCheck}
-              data-test-subj={`mapOpenLayerButton${this.state.displayName}`}
+              data-test-subj={`mapOpenLayerButton${this.state.displayName
+                ? this.state.displayName.replace(' ', '_')
+                : ''}`}
             >
               <div style={{ width: 180 }} className="eui-textTruncate eui-textLeft">
                 {this.state.displayName}

x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js

@@ -16,7 +16,7 @@ import { LayerTOC } from './layer_toc';
 
 export function LayerControl(props) {
   const addLayer = (
-    <EuiButtonEmpty size="xs" flush="right" onClick={props.showAddLayerWizard}>
+    <EuiButtonEmpty size="xs" flush="right" data-test-subj="addLayerButton" onClick={props.showAddLayerWizard}>
       Add layer
     </EuiButtonEmpty>);
 

x-pack/plugins/maps/public/shared/layers/sources/ems_file_source/create_source_editor.js

@@ -74,6 +74,7 @@ export class EMSFileCreateSourceEditor extends React.Component {
           isClearable={false}
           singleSelection={true}
           isDisabled={this.state.emsFileOptionsRaw.length === 0}
+          data-test-subj="emsVectorComboBox"
         />
       </EuiFormRow>
     );

x-pack/test/functional/apps/maps/add_layer_panel.js

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from 'expect.js';
+
+export default function ({ getPageObjects }) {
+  const PageObjects = getPageObjects(['maps', 'common']);
+
+  describe('Add layer panel', () => {
+    before(async () => {
+      await PageObjects.maps.openNewMap();
+    });
+
+    beforeEach(async () => {
+      await PageObjects.maps.clickAddLayer();
+    });
+
+    afterEach(async () => {
+      await PageObjects.maps.cancelLayerAdd();
+    });
+
+    it('should open on clicking "Add layer"', async () => {
+      // Verify panel page element is open
+      const panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+      expect(panelOpen).to.be(true);
+    });
+
+    it('should close on clicking "Cancel"', async () => {
+      // Verify panel page element is open
+      let panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+      expect(panelOpen).to.be(true);
+      // Click cancel
+      await PageObjects.maps.cancelLayerAdd();
+      // Verify panel isn't open
+      panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+      expect(panelOpen).to.be(false);
+    });
+
+    it('should close & remove layer on clicking "Cancel" after selecting layer',
+      async () => {
+        // Verify panel page element is open
+        let panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+        expect(panelOpen).to.be(true);
+        // Select source
+        await PageObjects.maps.selectVectorSource();
+        // Select layer
+        const vectorLayer = await PageObjects.maps.selectVectorLayer();
+        // Confirm layer added
+        await PageObjects.maps.waitForLayersToLoad();
+        let vectorLayerExists = await PageObjects.maps.doesLayerExist(vectorLayer);
+        expect(vectorLayerExists).to.be(true);
+        // Click cancel
+        await PageObjects.maps.cancelLayerAdd();
+        // Verify panel isn't open
+        panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+        expect(panelOpen).to.be(false);
+        // Verify layer has been removed
+        await PageObjects.maps.waitForLayerDeleted(vectorLayer);
+        vectorLayerExists = await PageObjects.maps.doesLayerExist(vectorLayer);
+        expect(vectorLayerExists).to.be(false);
+      });
+
+    it('should close and remove layer on map save', async () => {
+      // Verify panel page element is open
+      let panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+      expect(panelOpen).to.be(true);
+      // Select source
+      await PageObjects.maps.selectVectorSource();
+      // Select layer
+      const vectorLayer = await PageObjects.maps.selectVectorLayer();
+      // Confirm layer added
+      await PageObjects.maps.waitForLayersToLoad();
+      let vectorLayerExists = await PageObjects.maps.doesLayerExist(vectorLayer);
+      expect(vectorLayerExists).to.be(true);
+      // Click save
+      await PageObjects.maps.saveMap('Mappishness');
+      // Verify panel isn't open
+      panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
+      expect(panelOpen).to.be(false);
+      // Verify layer has been removed
+      await PageObjects.maps.waitForLayerDeleted(vectorLayer);
+      vectorLayerExists = await PageObjects.maps.doesLayerExist(vectorLayer);
+      expect(vectorLayerExists).to.be(false);
+    });
+  });
+}

x-pack/test/functional/apps/maps/index.js

@@ -34,6 +34,7 @@ export default function ({ loadTestFile, getService }) {
     loadTestFile(require.resolve('./es_search_source'));
     loadTestFile(require.resolve('./es_geo_grid_source'));
     loadTestFile(require.resolve('./joins'));
+    loadTestFile(require.resolve('./add_layer_panel'));
     loadTestFile(require.resolve('./layer_errors'));
   });
 }

x-pack/test/functional/page_objects/gis_page.js

@@ -13,6 +13,7 @@ export function GisPageProvider({ getService, getPageObjects }) {
   const inspector = getService('inspector');
   const find = getService('find');
   const queryBar = getService('queryBar');
+  const comboBox = getService('comboBox');
 
   class GisPage {
 
@@ -58,6 +59,13 @@ export function GisPageProvider({ getService, getPageObjects }) {
       });
     }
 
+    async waitForLayerDeleted(layerName) {
+      log.debug('Wait for layer deleted');
+      await retry.try(async () => {
+        await !this.doesLayerExist(layerName);
+      });
+    }
+
     // use the search filter box to narrow the results down to a single
     // entry, or at least to a single page of results
     async loadSavedMap(name) {
@@ -149,6 +157,11 @@ export function GisPageProvider({ getService, getPageObjects }) {
     /*
      * Layer TOC (table to contents) utility functions
      */
+    async clickAddLayer() {
+      log.debug('Click add layer');
+      await testSubjects.click('addLayerButton');
+    }
+
     async setView(lat, lon, zoom) {
       log.debug(`Set view lat: ${lat.toString()}, lon: ${lon.toString()}, zoom: ${zoom.toString()}`);
       await testSubjects.click('toggleSetViewVisibilityButton');
@@ -196,13 +209,43 @@ export function GisPageProvider({ getService, getPageObjects }) {
     }
 
     async doesLayerExist(layerName) {
+      layerName = layerName.replace(' ', '_');
       log.debug(`Open layer panel, layer: ${layerName}`);
       return await testSubjects.exists(`mapOpenLayerButton${layerName}`);
     }
 
     /*
      * Layer panel utility functions
      */
+    async isLayerAddPanelOpen() {
+      log.debug(`Is layer add panel open`);
+      return await testSubjects.exists('layerAddForm');
+    }
+
+    async cancelLayerAdd() {
+      log.debug(`Cancel layer add`);
+      const cancelExists = await testSubjects.exists('layerAddCancelButton');
+      if (cancelExists) {
+        await testSubjects.click('layerAddCancelButton');
+      }
+    }
+
+    async selectVectorSource() {
+      log.debug(`Select vector source`);
+      await testSubjects.click('vectorShapes');
+    }
+
+    // Returns first layer by default
+    async selectVectorLayer(vectorLayerName = '') {
+      log.debug(`Select vector layer ${vectorLayerName}`);
+      const optionsStringList = await comboBox.getOptionsList('emsVectorComboBox');
+      const selectedVectorLayer = vectorLayerName
+        ? vectorLayerName
+        : optionsStringList.trim().split('\n')[0];
+      await comboBox.set('emsVectorComboBox', selectedVectorLayer);
+      return selectedVectorLayer;
+    }
+
     async removeLayer(layerName) {
       log.debug(`Remove layer ${layerName}`);
       await this.openLayerPanel(layerName);