[Maps] disable edit layer button when flyout is open for add layer or…

… map settings (#64230)

* [Maps] disable edit layer button to avoid user data loss

* remove layer_toc_actions

* fix tslint errors

* update jest snapshots

* review feedback

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/maps/public/actions/map_actions.d.ts

@@ -74,3 +74,11 @@ export function updateMapSetting(
   settingKey: string,
   settingValue: string | boolean | number
 ): AnyAction;
+
+export function cloneLayer(layerId: string): AnyAction;
+
+export function fitToLayerExtent(layerId: string): AnyAction;
+
+export function removeLayer(layerId: string): AnyAction;
+
+export function toggleLayerVisible(layerId: string): AnyAction;

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

@@ -4,36 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import { TOCEntry } from './view';
-
 import { FLYOUT_STATE } from '../../../../../reducers/ui';
 import { updateFlyout, hideTOCDetails, showTOCDetails } from '../../../../../actions/ui_actions';
-import { getIsReadOnly, getOpenTOCDetails } from '../../../../../selectors/ui_selectors';
-import {
-  fitToLayerExtent,
-  setSelectedLayer,
-  toggleLayerVisible,
-  removeTransientLayer,
-  cloneLayer,
-  removeLayer,
-} from '../../../../../actions/map_actions';
-
 import {
+  getMapZoom,
   hasDirtyState,
   getSelectedLayer,
-  isUsingSearch,
 } from '../../../../../selectors/map_selectors';
+import {
+  getIsReadOnly,
+  getOpenTOCDetails,
+  getFlyoutDisplay,
+} from '../../../../../selectors/ui_selectors';
+import { setSelectedLayer, removeTransientLayer } from '../../../../../actions/map_actions';
 
 function mapStateToProps(state = {}, ownProps) {
+  const flyoutDisplay = getFlyoutDisplay(state);
   return {
     isReadOnly: getIsReadOnly(state),
-    zoom: _.get(state, 'map.mapState.zoom', 0),
+    zoom: getMapZoom(state),
     selectedLayer: getSelectedLayer(state),
     hasDirtyStateSelector: hasDirtyState(state),
     isLegendDetailsOpen: getOpenTOCDetails(state).includes(ownProps.layer.getId()),
-    isUsingSearch: isUsingSearch(state),
+    isEditButtonDisabled:
+      flyoutDisplay !== FLYOUT_STATE.NONE && flyoutDisplay !== FLYOUT_STATE.LAYER_PANEL,
   };
 }
 
@@ -44,18 +40,6 @@ function mapDispatchToProps(dispatch) {
       await dispatch(setSelectedLayer(layerId));
       dispatch(updateFlyout(FLYOUT_STATE.LAYER_PANEL));
     },
-    toggleVisible: layerId => {
-      dispatch(toggleLayerVisible(layerId));
-    },
-    fitToBounds: layerId => {
-      dispatch(fitToLayerExtent(layerId));
-    },
-    cloneLayer: layerId => {
-      dispatch(cloneLayer(layerId));
-    },
-    removeLayer: layerId => {
-      dispatch(removeLayer(layerId));
-    },
     hideTOCDetails: layerId => {
       dispatch(hideTOCDetails(layerId));
     },

x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/index.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 { AnyAction, Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { MapStoreState } from '../../../../../../reducers/store';
+import {
+  fitToLayerExtent,
+  toggleLayerVisible,
+  cloneLayer,
+  removeLayer,
+} from '../../../../../../actions/map_actions';
+import { getMapZoom, isUsingSearch } from '../../../../../../selectors/map_selectors';
+import { getIsReadOnly } from '../../../../../../selectors/ui_selectors';
+import { TOCEntryActionsPopover } from './toc_entry_actions_popover';
+
+function mapStateToProps(state: MapStoreState) {
+  return {
+    isReadOnly: getIsReadOnly(state),
+    isUsingSearch: isUsingSearch(state),
+    zoom: getMapZoom(state),
+  };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
+  return {
+    cloneLayer: (layerId: string) => {
+      dispatch(cloneLayer(layerId));
+    },
+    fitToBounds: (layerId: string) => {
+      dispatch(fitToLayerExtent(layerId));
+    },
+    removeLayer: (layerId: string) => {
+      dispatch(removeLayer(layerId));
+    },
+    toggleVisible: (layerId: string) => {
+      dispatch(toggleLayerVisible(layerId));
+    },
+  };
+}
+
+const connectedTOCEntryActionsPopover = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TOCEntryActionsPopover);
+export { connectedTOCEntryActionsPopover as TOCEntryActionsPopover };