github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Display correct reset terminology for visualizations (#94539)

Browse source 
Co-authored-by: Anish Khanna <a26khann@edu.uwaterloo.ca>
This commit is contained in:
Anish Khanna 2021-03-16 13:11:10 -04:00 • committed by GitHub
parent 4d27af99c4
commit 9e244062e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

9
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
View file

@ -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} />);

1
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
View file

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

51
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx
View file

@ -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>
);
}

1
x-pack/plugins/lens/public/editor_frame_service/mocks.tsx
View file

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