diff --git a/x-pack/plugins/maps/public/actions/layer_actions.ts b/x-pack/plugins/maps/public/actions/layer_actions.ts index 38cadc8d1363a..6ab985e0cc274 100644 --- 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, getState: () => MapStoreState diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/index.ts b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/index.ts index 407eb558c1038..157a86f41204a 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/index.ts +++ b/x-pack/plugins/maps/public/connected_components/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 { dispatch(showThisLayerOnly(layerId)); }, + ungroupLayer: (layerId: string) => { + dispatch(ungroupLayer(layerId)); + }, }; } diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx index cb2697663766a..a51b687ea9bc7 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_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/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx index a67c12d2928a4..4aa151e89c913 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/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 { })); }; - _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 { 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 { toolTipContent: null, onClick: () => { this._closePopover(); - this._toggleVisible(); + this.props.toggleVisible(this.props.layer.getId()); }, }, ]; @@ -218,9 +208,27 @@ export class TOCEntryActionsPopover extends Component { '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: , + 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',