Display correct reset terminology for visualizations (#94539) (#94732)

Co-authored-by: Anish Khanna <[email protected]> Co-authored-by: Anish Khanna <[email protected]> Co-authored-by: Anish Khanna <[email protected]>
elastic · Mar 16, 2021 · f88b143 · f88b143
1 parent 89ab332
commit f88b143
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/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(<LayerPanel {...getDefaultProps()} />);
+      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(<LayerPanel {...getDefaultProps()} onRemoveLayer={cb} />);

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
@@ -397,6 +397,7 @@ export function LayerPanel(
                 onRemoveLayer={onRemoveLayer}
                 layerIndex={layerIndex}
                 isOnlyLayer={isOnlyLayer}
+                activeVisualization={activeVisualization}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx b/...lugins/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 (
     <EuiButtonEmpty
       size="xs"
       iconType="trash"
       color="danger"
       data-test-subj="lnsLayerRemove"
-      aria-label={
-        isOnlyLayer
-          ? i18n.translate('xpack.lens.resetLayerAriaLabel', {
-              defaultMessage: 'Reset layer {index}',
-              values: { index: layerIndex + 1 },
-            })
-          : i18n.translate('xpack.lens.deleteLayerAriaLabel', {
-              defaultMessage: `Delete layer {index}`,
-              values: { index: layerIndex + 1 },
-            })
-      }
+      aria-label={ariaLabel}
       onClick={() => {
         // 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}
     </EuiButtonEmpty>
   );
 }
diff --git 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<Visualization> {
   return {
     id: 'TEST_VIS',
     clearLayer: jest.fn((state, _layerId) => state),
+    removeLayer: jest.fn(),
     getLayerIds: jest.fn((_state) => ['layer1']),
     visualizationTypes: [
       {