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: [
{