[Maps] dd remove layer button (#48581)

x-pack/legacy/plugins/maps/public/actions/map_actions.js

@@ -143,7 +143,7 @@ export function removeTrackedLayerStateForSelectedLayer() {
 export function replaceLayerList(newLayerList) {
   return (dispatch, getState) => {
     getLayerListRaw(getState()).forEach(({ id }) => {
-      dispatch(removeLayer(id));
+      dispatch(removeLayerFromLayerList(id));
     });
 
     newLayerList.forEach(layerDescriptor => {
@@ -282,7 +282,7 @@ export function removeTransientLayer() {
   return async (dispatch, getState) => {
     const transientLayerId = getTransientLayerId(getState());
     if (transientLayerId) {
-      await dispatch(removeLayer(transientLayerId));
+      await dispatch(removeLayerFromLayerList(transientLayerId));
       await dispatch(setTransientLayer(null));
     }
   };
@@ -611,11 +611,22 @@ export function removeSelectedLayer() {
     const state = getState();
     const layerId = getSelectedLayerId(state);
     dispatch(removeLayer(layerId));
-    dispatch(setSelectedLayer(null));
   };
 }
 
 export function removeLayer(layerId) {
+  return async (dispatch, getState) => {
+    const state = getState();
+    const selectedLayerId = getSelectedLayerId(state);
+    if (layerId === selectedLayerId) {
+      dispatch(updateFlyout(FLYOUT_STATE.NONE));
+      await dispatch(setSelectedLayer(null));
+    }
+    dispatch(removeLayerFromLayerList(layerId));
+  };
+}
+
+function removeLayerFromLayerList(layerId) {
   return (dispatch, getState) => {
     const layerGettingRemoved = getLayerById(layerId, getState());
     if (!layerGettingRemoved) {

x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js

@@ -168,6 +168,22 @@ export class LayerTocActions extends Component {
           this.props.cloneLayer();
         }
       });
+      actionItems.push({
+        name: i18n.translate('xpack.maps.layerTocActions.removeLayerTitle', {
+          defaultMessage: 'Remove layer',
+        }),
+        icon: (
+          <EuiIcon
+            type="trash"
+            size="m"
+          />
+        ),
+        'data-test-subj': 'removeLayerButton',
+        onClick: () => {
+          this._closePopover();
+          this.props.removeLayer();
+        }
+      });
     }
 
     return {

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/flyout_footer/index.js

@@ -33,7 +33,6 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(setSelectedLayer(null));
     },
     removeLayer: () => {
-      dispatch(updateFlyout(FLYOUT_STATE.NONE));
       dispatch(removeSelectedLayer());
     }
   };

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js

@@ -20,6 +20,7 @@ import {
   toggleLayerVisible,
   removeTransientLayer,
   cloneLayer,
+  removeLayer
 } from '../../../../../actions/map_actions';
 
 import { hasDirtyState, getSelectedLayer, isUsingSearch } from '../../../../../selectors/map_selectors';
@@ -51,6 +52,9 @@ function mapDispatchToProps(dispatch) {
     cloneLayer: layerId => {
       dispatch(cloneLayer(layerId));
     },
+    removeLayer: layerId => {
+      dispatch(removeLayer(layerId));
+    },
     hideTOCDetails: layerId => {
       dispatch(hideTOCDetails(layerId));
     },

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

@@ -178,6 +178,7 @@ export class TOCEntry extends React.Component {
 
   _renderLayerHeader() {
     const {
+      removeLayer,
       cloneLayer,
       isReadOnly,
       layer,
@@ -211,6 +212,9 @@ export class TOCEntry extends React.Component {
           }}
           editLayer={this._openLayerPanelWithCheck}
           isReadOnly={isReadOnly}
+          removeLayer={() => {
+            removeLayer(layer.getId());
+          }}
         />
 
         {this._renderLayerIcons()}