[Maps] Remove unneeded and breaking layer condition that prevents cancel from add layer panel

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>
       );
@@ -161,20 +160,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/__snapshots__/view.test.js.snap

@@ -40,6 +40,7 @@ exports[`LayerControl is rendered 1`] = `
       >
         <EuiButtonEmpty
           color="primary"
+          data-test-subj="addLayerButton"
           flush="right"
           iconSide="left"
           onClick={[Function]}

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

@@ -43,7 +43,7 @@ exports[`TOCEntry is rendered 1`] = `
     >
       <EuiLink
         color="text"
-        data-test-subj="mapOpenLayerButtonlayer 1"
+        data-test-subj="mapOpenLayerButtonlayer_1"
         onClick={[Function]}
         type="button"
       >

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

@@ -131,7 +131,11 @@ export class TOCEntry extends React.Component {
       <EuiLink
         color="text"
         onClick={this._openLayerPanelWithCheck}
-        data-test-subj={`mapOpenLayerButton${this.state.displayName}`}
+        data-test-subj={
+          `mapOpenLayerButton${this.state.displayName
+            ? this.state.displayName.replace(' ', '_')
+            : ''}`
+        }
       >
         {displayName}
       </EuiLink>

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

@@ -19,7 +19,12 @@ export function LayerControl({ isReadOnly, showAddLayerWizard }) {
   if (!isReadOnly) {
     addLayer = (
       <EuiFlexItem grow={false}>
-        <EuiButtonEmpty size="xs" flush="right" onClick={showAddLayerWizard}>
+        <EuiButtonEmpty
+          size="xs"
+          flush="right"
+          onClick={showAddLayerWizard}
+          data-test-subj="addLayerButton"
+        >
           Add layer
         </EuiButtonEmpty>
       </EuiFlexItem>

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

@@ -38,6 +38,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);