diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index 5c27958aa1786..30740bbd6b217 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -119,6 +119,15 @@ describe('LayerPanel', () => { ); }); + it('should show to reset visualization for visualizations only allowing a single layer', () => { + const layerPanelAttributes = getDefaultProps(); + delete layerPanelAttributes.activeVisualization.removeLayer; + const component = mountWithIntl(); + expect(component.find('[data-test-subj="lnsLayerRemove"]').first().text()).toContain( + 'Reset visualization' + ); + }); + it('should call the clear callback', () => { const cb = jest.fn(); const component = mountWithIntl(); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 14063aea02665..21115285b5ce0 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -397,6 +397,7 @@ export function LayerPanel( onRemoveLayer={onRemoveLayer} layerIndex={layerIndex} isOnlyLayer={isOnlyLayer} + activeVisualization={activeVisualization} /> diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx index d842d2af5c777..cca8cc88c6ab1 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx @@ -8,33 +8,54 @@ import React from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { Visualization } from '../../../types'; export function RemoveLayerButton({ onRemoveLayer, layerIndex, isOnlyLayer, + activeVisualization, }: { onRemoveLayer: () => void; layerIndex: number; isOnlyLayer: boolean; + activeVisualization: Visualization; }) { + let ariaLabel; + let componentText; + + if (!activeVisualization.removeLayer) { + ariaLabel = i18n.translate('xpack.lens.resetVisualizationAriaLabel', { + defaultMessage: 'Reset visualization', + }); + componentText = i18n.translate('xpack.lens.resetVisualization', { + defaultMessage: 'Reset visualization', + }); + } else if (isOnlyLayer) { + ariaLabel = i18n.translate('xpack.lens.resetLayerAriaLabel', { + defaultMessage: 'Reset layer {index}', + values: { index: layerIndex + 1 }, + }); + componentText = i18n.translate('xpack.lens.resetLayer', { + defaultMessage: 'Reset layer', + }); + } else { + ariaLabel = i18n.translate('xpack.lens.deleteLayerAriaLabel', { + defaultMessage: `Delete layer {index}`, + values: { index: layerIndex + 1 }, + }); + componentText = i18n.translate('xpack.lens.deleteLayer', { + defaultMessage: `Delete layer`, + }); + } + return ( { // If we don't blur the remove / clear button, it remains focused // which is a strange UX in this case. e.target.blur doesn't work @@ -49,13 +70,7 @@ export function RemoveLayerButton({ onRemoveLayer(); }} > - {isOnlyLayer - ? i18n.translate('xpack.lens.resetLayer', { - defaultMessage: 'Reset layer', - }) - : i18n.translate('xpack.lens.deleteLayer', { - defaultMessage: `Delete layer`, - })} + {componentText} ); } diff --git a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx index 7f256dc588c25..f769b20a6a454 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx @@ -23,6 +23,7 @@ export function createMockVisualization(): jest.Mocked { return { id: 'TEST_VIS', clearLayer: jest.fn((state, _layerId) => state), + removeLayer: jest.fn(), getLayerIds: jest.fn((_state) => ['layer1']), visualizationTypes: [ {