[Maps] add ungroup layers action (#144574)

* [Maps] add ungroup layers action * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * tslint Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 7, 2022 · adfa8f7 · adfa8f7
1 parent ce9a253
commit adfa8f7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/x-pack/plugins/maps/public/actions/layer_actions.ts b/x-pack/plugins/maps/public/actions/layer_actions.ts
@@ -876,7 +876,7 @@ export function createLayerGroup(draggedLayerId: string, combineLayerId: string)
   };
 }
 
-function ungroupLayer(layerId: string) {
+export function ungroupLayer(layerId: string) {
   return (
     dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
     getState: () => MapStoreState

diff --git a/.../right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/index.ts b/.../right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/index.ts
@@ -16,6 +16,7 @@ import {
   setDrawMode,
   showThisLayerOnly,
   toggleLayerVisible,
+  ungroupLayer,
   updateEditLayer,
 } from '../../../../../../actions';
 import { getLayerListRaw } from '../../../../../../selectors/map_selectors';
@@ -55,6 +56,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyActi
     showThisLayerOnly: (layerId: string) => {
       dispatch(showThisLayerOnly(layerId));
     },
+    ungroupLayer: (layerId: string) => {
+      dispatch(ungroupLayer(layerId));
+    },
   };
 }
 

diff --git a/..._control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx b/..._control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
@@ -50,6 +50,7 @@ const defaultProps = {
   openLayerSettings: () => {},
   numLayers: 2,
   showThisLayerOnly: () => {},
+  ungroupLayer: () => {},
 };
 
 describe('TOCEntryActionsPopover', () => {

diff --git a/...layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx b/...layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx
@@ -21,6 +21,7 @@ import { ESSearchSource } from '../../../../../../classes/sources/es_search_sour
 import { isVectorLayer, IVectorLayer } from '../../../../../../classes/layers/vector_layer';
 import { SCALING_TYPES, VECTOR_SHAPE_TYPE } from '../../../../../../../common/constants';
 import { RemoveLayerConfirmModal } from '../../../../../../components/remove_layer_confirm_modal';
+import { isLayerGroup, LayerGroup } from '../../../../../../classes/layers/layer_group';
 
 export interface Props {
   cloneLayer: (layerId: string) => void;
@@ -38,6 +39,7 @@ export interface Props {
   supportsFitToBounds: boolean;
   toggleVisible: (layerId: string) => void;
   numLayers: number;
+  ungroupLayer: (layerId: string) => void;
 }
 
 interface State {
@@ -114,18 +116,6 @@ export class TOCEntryActionsPopover extends Component<Props, State> {
     }));
   };
 
-  _cloneLayer() {
-    this.props.cloneLayer(this.props.layer.getId());
-  }
-
-  _fitToBounds() {
-    this.props.fitToBounds(this.props.layer.getId());
-  }
-
-  _toggleVisible() {
-    this.props.toggleVisible(this.props.layer.getId());
-  }
-
   _getActionsPanel() {
     const actionItems = [
       {
@@ -140,7 +130,7 @@ export class TOCEntryActionsPopover extends Component<Props, State> {
         disabled: !this.props.supportsFitToBounds,
         onClick: () => {
           this._closePopover();
-          this._fitToBounds();
+          this.props.fitToBounds(this.props.layer.getId());
         },
       },
       {
@@ -150,7 +140,7 @@ export class TOCEntryActionsPopover extends Component<Props, State> {
         toolTipContent: null,
         onClick: () => {
           this._closePopover();
-          this._toggleVisible();
+          this.props.toggleVisible(this.props.layer.getId());
         },
       },
     ];
@@ -218,9 +208,27 @@ export class TOCEntryActionsPopover extends Component<Props, State> {
         'data-test-subj': 'cloneLayerButton',
         onClick: () => {
           this._closePopover();
-          this._cloneLayer();
+          this.props.cloneLayer(this.props.layer.getId());
         },
       });
+      if (
+        isLayerGroup(this.props.layer) &&
+        (this.props.layer as LayerGroup).getChildren().length > 0
+      ) {
+        actionItems.push({
+          name: i18n.translate('xpack.maps.layerTocActions.ungroupLayerTitle', {
+            defaultMessage: 'Ungroup layers',
+          }),
+          icon: <EuiIcon type="layers" size="m" />,
+          toolTipContent: null,
+          'data-test-subj': 'removeLayerButton',
+          onClick: () => {
+            this._closePopover();
+            this.props.ungroupLayer(this.props.layer.getId());
+            this.props.removeLayer(this.props.layer.getId());
+          },
+        });
+      }
       actionItems.push({
         name: i18n.translate('xpack.maps.layerTocActions.removeLayerTitle', {
           defaultMessage: 'Remove layer',