From 4fb4f9a4d8cbd0422f73d053a507ef7b1f6e8141 Mon Sep 17 00:00:00 2001 From: dej611 Date: Wed, 5 Apr 2023 12:39:06 +0200 Subject: [PATCH 1/6] :sparkles: Reworked ignore global fitlers UI --- .../datasources/form_based/form_based.tsx | 6 +- .../datasources/form_based/layer_settings.tsx | 161 ++++++++---------- .../datasources/form_based/layerpanel.tsx | 20 ++- .../form_based}/sampling_icon.tsx | 0 .../editor_frame/config_panel/layer_panel.tsx | 62 ++++++- .../dataview_picker/dataview_picker.tsx | 103 +---------- .../dataview_picker/trigger.tsx | 105 ++++++++++++ x-pack/plugins/lens/public/types.ts | 4 +- .../partition/layer_settings.tsx | 59 ++++--- .../partition/visualization.test.ts | 21 ++- .../partition/visualization.tsx | 2 +- .../visualizations/xy/annotations/actions.ts | 35 +--- .../visualizations/xy/layer_settings.tsx | 53 ++++++ .../visualizations/xy/visualization.test.ts | 98 ++++++----- .../visualizations/xy/visualization.tsx | 47 +++-- .../xy/xy_config_panel/layer_header.tsx | 28 ++- .../apps/lens/group1/layer_actions.ts | 14 +- 17 files changed, 476 insertions(+), 342 deletions(-) rename x-pack/plugins/lens/public/{shared_components/dataview_picker => datasources/form_based}/sampling_icon.tsx (100%) create mode 100644 x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx create mode 100644 x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx diff --git a/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx b/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx index 4152212e51fea..dbe6fcafd0ed0 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx @@ -37,7 +37,6 @@ import type { IndexPatternField, IndexPattern, IndexPatternRef, - DatasourceLayerSettingsProps, DataSourceInfo, UserMessage, FrameDatasourceAPI, @@ -429,10 +428,7 @@ export function getFormBasedDatasource({ toExpression: (state, layerId, indexPatterns, dateRange, searchSessionId) => toExpression(state, layerId, indexPatterns, uiSettings, dateRange, searchSessionId), - renderLayerSettings( - domElement: Element, - props: DatasourceLayerSettingsProps - ) { + renderLayerSettings(domElement, props) { render( diff --git a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx index 38da5475e22e1..c79bc41dd7dd7 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx @@ -109,101 +109,86 @@ export function LayerSettingsPanel({ setState, layerId, }: DatasourceLayerSettingsProps) { - const { euiTheme } = useEuiTheme(); const isSamplingValueDisabled = !isSamplingValueEnabled(state.layers[layerId]); const currentValue = isSamplingValueDisabled ? samplingValues[samplingValues.length - 1] : state.layers[layerId].sampling; return ( -
- -

- {i18n.translate('xpack.lens.indexPattern.layerSettings.headingData', { - defaultMessage: 'Data', - })} -

- - - -

- - - - ), - }} - /> -

- - } - label={ - <> - {i18n.translate('xpack.lens.indexPattern.randomSampling.label', { - defaultMessage: 'Sampling', - })}{' '} - + +

+ + + + ), + }} + /> +

+ + } + label={ + <> + {i18n.translate('xpack.lens.indexPattern.randomSampling.label', { + defaultMessage: 'Sampling', + })}{' '} + + - - - - } - > - { - setState({ - ...state, - layers: { - ...state.layers, - [layerId]: { - ...state.layers[layerId], - sampling: newSamplingValue, - }, + size="s" + /> + + + } + > + { + setState({ + ...state, + layers: { + ...state.layers, + [layerId]: { + ...state.layers[layerId], + sampling: newSamplingValue, }, - }); - }} - /> - -
+ }, + }); + }} + /> + ); } diff --git a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx index 1de4d0844245f..e08b60450bf86 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx @@ -8,10 +8,12 @@ import React from 'react'; import { I18nProvider } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; +import { useEuiTheme } from '@elastic/eui'; import { DatasourceLayerPanelProps } from '../../types'; import { FormBasedPrivateState } from './types'; import { ChangeIndexPattern } from '../../shared_components/dataview_picker/dataview_picker'; import { getSamplingValue } from './utils'; +import { RandomSamplingIcon } from './sampling_icon'; export interface FormBasedLayerPanelProps extends DatasourceLayerPanelProps { state: FormBasedPrivateState; @@ -25,6 +27,7 @@ export function LayerPanel({ dataViews, }: FormBasedLayerPanelProps) { const layer = state.layers[layerId]; + const { euiTheme } = useEuiTheme(); const indexPattern = dataViews.indexPatterns[layer.indexPatternId]; const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', { @@ -38,6 +41,21 @@ export function LayerPanel({ }; }); + const samplingValue = getSamplingValue(layer); + const extraIconLabelProps = + samplingValue !== 1 + ? { + icon: , + iconValue: `${samplingValue * 100}%`, + iconTooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', { + defaultMessage: '{value}% sampling', + values: { + value: samplingValue * 100, + }, + }), + } + : {}; + return ( + activeVisualization.hasLayerSettings?.({ + layerId, + state: visualizationState, + frame: props.framePublicAPI, + }) || { data: false, appereance: false }, + [activeVisualization, layerId, props.framePublicAPI, visualizationState] + ); + const compatibleActions = useMemo( () => [ @@ -341,11 +351,7 @@ export function LayerPanel( isOnlyLayer, isTextBasedLanguage, hasLayerSettings: Boolean( - (activeVisualization.hasLayerSettings?.({ - layerId, - state: visualizationState, - frame: props.framePublicAPI, - }) && + (Object.values(visualizationLayerSettings).some(Boolean) && activeVisualization.renderLayerSettings) || layerDatasource?.renderLayerSettings ), @@ -364,8 +370,8 @@ export function LayerPanel( layerIndex, onCloneLayer, onRemoveLayer, - props.framePublicAPI, updateVisualization, + visualizationLayerSettings, visualizationState, ] ); @@ -682,15 +688,56 @@ export function LayerPanel( >
+ {layerDatasource?.renderLayerSettings || visualizationLayerSettings.data ? ( + +

+ {i18n.translate('xpack.lens.editorFrame.layerSettings.headingData', { + defaultMessage: 'Data', + })} +

+ + ) : null} {layerDatasource?.renderLayerSettings && ( <> - )} + {layerDatasource?.renderLayerSettings && visualizationLayerSettings.data ? ( + + ) : null} + {activeVisualization?.renderLayerSettings && visualizationLayerSettings.data ? ( + + ) : null} + {visualizationLayerSettings.appereance ? ( + +

+ {i18n.translate('xpack.lens.editorFrame.layerSettings.headingAppereance', { + defaultMessage: 'Appereance', + })} +

+ + ) : null} {activeVisualization?.renderLayerSettings && ( )} diff --git a/x-pack/plugins/lens/public/shared_components/dataview_picker/dataview_picker.tsx b/x-pack/plugins/lens/public/shared_components/dataview_picker/dataview_picker.tsx index 6467cbcb58494..9d55284cc36c8 100644 --- a/x-pack/plugins/lens/public/shared_components/dataview_picker/dataview_picker.tsx +++ b/x-pack/plugins/lens/public/shared_components/dataview_picker/dataview_picker.tsx @@ -7,109 +7,10 @@ import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiPopover, - EuiPopoverTitle, - EuiSelectableProps, - EuiTextColor, - EuiToolTip, - useEuiTheme, -} from '@elastic/eui'; +import { EuiPopover, EuiPopoverTitle, EuiSelectableProps } from '@elastic/eui'; import { DataViewsList } from '@kbn/unified-search-plugin/public'; -import { css } from '@emotion/react'; import { type IndexPatternRef } from '../../types'; -import { type ToolbarButtonProps, ToolbarButton } from './toolbar_button'; -import { RandomSamplingIcon } from './sampling_icon'; - -export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & { - label: string; - title?: string; - isDisabled?: boolean; - samplingValue?: number; -}; - -function TriggerButton({ - label, - title, - togglePopover, - isMissingCurrent, - samplingValue, - ...rest -}: ChangeIndexPatternTriggerProps & - ToolbarButtonProps & { - togglePopover: () => void; - isMissingCurrent?: boolean; - }) { - const { euiTheme } = useEuiTheme(); - // be careful to only add color with a value, otherwise it will fallbacks to "primary" - const colorProp = isMissingCurrent - ? { - color: 'danger' as const, - } - : {}; - const content = - samplingValue != null && samplingValue !== 1 ? ( - - - {label} - - - - - - - - - - {samplingValue * 100}% - - - - - - - ) : ( - label - ); - return ( - togglePopover()} - fullWidth - {...colorProp} - {...rest} - textProps={{ style: { width: '100%' } }} - > - {content} - - ); -} +import { type ChangeIndexPatternTriggerProps, TriggerButton } from './trigger'; export function ChangeIndexPattern({ indexPatternRefs, diff --git a/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx new file mode 100644 index 0000000000000..8e1d50d38177b --- /dev/null +++ b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx @@ -0,0 +1,105 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useEuiTheme, EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiTextColor } from '@elastic/eui'; +import { css } from '@emotion/react'; +import React from 'react'; +import { ToolbarButton, ToolbarButtonProps } from './toolbar_button'; + +interface TriggerLabelProps { + label: string; + icon?: React.ReactElement; + iconValue?: string; + iconTooltipValue?: string; +} + +export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & + TriggerLabelProps & { + label: string; + title?: string; + isDisabled?: boolean; + }; + +function TriggerLabel({ label, icon, iconValue, iconTooltipValue }: TriggerLabelProps) { + const { euiTheme } = useEuiTheme(); + if (!icon) { + return <>{label}; + } + return ( + + + {label} + + + + + {icon} + {iconValue ? ( + + {iconValue} + + ) : null} + + + + + ); +} + +export function TriggerButton({ + label, + title, + togglePopover, + isMissingCurrent, + icon, + iconValue, + iconTooltipValue, + ...rest +}: ChangeIndexPatternTriggerProps & { + togglePopover: () => void; + isMissingCurrent?: boolean; +}) { + // be careful to only add color with a value, otherwise it will fallbacks to "primary" + const colorProp = isMissingCurrent + ? { + color: 'danger' as const, + } + : {}; + return ( + togglePopover()} + fullWidth + {...colorProp} + {...rest} + textProps={{ style: { width: '100%' } }} + > + + + ); +} diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index edb2240d28ebb..e4e084a677bbf 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -1188,11 +1188,11 @@ export interface Visualization { /** * Allows the visualization to announce whether or not it has any settings to show */ - hasLayerSettings?: (props: VisualizationConfigProps) => boolean; + hasLayerSettings?: (props: VisualizationConfigProps) => Record<'data' | 'appereance', boolean>; renderLayerSettings?: ( domElement: Element, - props: VisualizationLayerSettingsProps + props: VisualizationLayerSettingsProps & { section: 'data' | 'appereance' } ) => ((cleanupElement: Element) => void) | void; /** diff --git a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx index 39da4fbfe0595..5e401801f29c2 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx @@ -12,7 +12,12 @@ import { PieChartTypes } from '../../../common/constants'; import { PieVisualizationState } from '../..'; import { VisualizationLayerSettingsProps } from '../../types'; -export function LayerSettings(props: VisualizationLayerSettingsProps) { +export function LayerSettings( + props: VisualizationLayerSettingsProps & { section: 'data' | 'appereance' } +) { + if (props.section === 'appereance') { + return null; + } if (props.state.shape === PieChartTypes.MOSAIC) { return null; } @@ -24,29 +29,33 @@ export function LayerSettings(props: VisualizationLayerSettingsProps - - { - props.setState({ - ...props.state, - layers: props.state.layers.map((layer) => - layer.layerId !== props.layerId - ? layer - : { - ...layer, - allowMultipleMetrics: !layer.allowMultipleMetrics, - } - ), - }); - }} - /> - - + + { + props.setState({ + ...props.state, + layers: props.state.layers.map((layer) => + layer.layerId !== props.layerId + ? layer + : { + ...layer, + allowMultipleMetrics: !layer.allowMultipleMetrics, + } + ), + }); + }} + /> + ); } diff --git a/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts b/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts index 02932a0aa5e1c..1d4beeb57e909 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts +++ b/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts @@ -617,10 +617,10 @@ describe('pie_visualization', () => { }); }); - it.each(Object.values(PieChartTypes).filter((type) => type !== 'mosaic'))( + it.each(Object.values(PieChartTypes).filter((type) => type !== PieChartTypes.MOSAIC))( '%s adds fake dimension', (type) => { - const state = { ...getExampleState(), type }; + const state = { ...getExampleState(), shape: type }; state.layers[0].metrics.push('1', '2'); state.layers[0].allowMultipleMetrics = true; expect( @@ -645,4 +645,21 @@ describe('pie_visualization', () => { } ); }); + + describe('layer settings', () => { + describe('hasLayerSettings', () => { + it('should have data settings for all partition chart types but mosaic', () => { + for (const type of Object.values(PieChartTypes)) { + const state = { ...getExampleState(), shape: type }; + expect( + pieVisualization.hasLayerSettings?.({ + state, + frame: mockFrame(), + layerId: state.layers[0].layerId, + }) + ).toEqual({ data: type !== PieChartTypes.MOSAIC, appereance: false }); + } + }); + }); + }); }); diff --git a/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx b/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx index 8340b5a5e254b..783cfc55f7ad0 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx @@ -504,7 +504,7 @@ export const getPieVisualization = ({ }, hasLayerSettings(props) { - return props.state.shape !== 'mosaic'; + return { data: props.state.shape !== PieChartTypes.MOSAIC, appereance: false }; }, renderLayerSettings(domElement, props) { diff --git a/x-pack/plugins/lens/public/visualizations/xy/annotations/actions.ts b/x-pack/plugins/lens/public/visualizations/xy/annotations/actions.ts index 68938fbee5211..cb3afbcb14c91 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/annotations/actions.ts +++ b/x-pack/plugins/lens/public/visualizations/xy/annotations/actions.ts @@ -5,13 +5,10 @@ * 2.0. */ -import { i18n } from '@kbn/i18n'; import type { LayerActionFromVisualization } from '../../../types'; import type { XYState, XYAnnotationLayerConfig } from '../types'; -export const IGNORE_GLOBAL_FILTERS_ACTION_ID = 'ignoreGlobalFilters'; -export const KEEP_GLOBAL_FILTERS_ACTION_ID = 'keepGlobalFilters'; - +// Leaving the stub for annotation groups export const createAnnotationActions = ({ state, layer, @@ -21,33 +18,5 @@ export const createAnnotationActions = ({ layer: XYAnnotationLayerConfig; layerIndex: number; }): LayerActionFromVisualization[] => { - const label = !layer.ignoreGlobalFilters - ? i18n.translate('xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel', { - defaultMessage: 'Ignore global filters', - }) - : i18n.translate('xpack.lens.xyChart.annotations.keepGlobalFiltersLabel', { - defaultMessage: 'Keep global filters', - }); - return [ - { - id: !layer.ignoreGlobalFilters - ? IGNORE_GLOBAL_FILTERS_ACTION_ID - : KEEP_GLOBAL_FILTERS_ACTION_ID, - displayName: label, - description: !layer.ignoreGlobalFilters - ? i18n.translate('xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription', { - defaultMessage: - 'All the dimensions configured in this layer ignore filters defined at kibana level.', - }) - : i18n.translate('xpack.lens.xyChart.annotations.keepGlobalFiltersDescription', { - defaultMessage: - 'All the dimensions configured in this layer respect filters defined at kibana level.', - }), - icon: !layer.ignoreGlobalFilters ? 'filterIgnore' : 'filter', - isCompatible: true, - 'data-test-subj': !layer.ignoreGlobalFilters - ? 'lnsXY_annotationLayer_ignoreFilters' - : 'lnsXY_annotationLayer_keepFilters', - }, - ]; + return []; }; diff --git a/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx b/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx new file mode 100644 index 0000000000000..2e6d7cffb7cc1 --- /dev/null +++ b/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx @@ -0,0 +1,53 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFormRow, EuiSwitch } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import type { VisualizationLayerSettingsProps } from '../../types'; +import type { XYState } from './types'; +import { isAnnotationsLayer } from './visualization_helpers'; + +export function LayerSettings({ + state, + setState, + section, + layerId, +}: VisualizationLayerSettingsProps & { section: 'data' | 'appereance' }) { + if (section === 'appereance') { + return null; + } + const layer = state.layers.find((l) => l.layerId === layerId); + if (!layer || !isAnnotationsLayer(layer)) { + return null; + } + return ( + + { + const layerIndex = state.layers.findIndex((l) => l === layer); + const newLayer = { ...layer, ignoreGlobalFilters: !layer.ignoreGlobalFilters }; + const newLayers = [...state.layers]; + newLayers[layerIndex] = newLayer; + setState({ ...state, layers: newLayers }); + }} + compressed + /> + + ); +} diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts index 159014b043aec..0e58981a6aae1 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts @@ -37,7 +37,6 @@ import { DataViewsState } from '../../state_management'; import { createMockedIndexPattern } from '../../datasources/form_based/mocks'; import { createMockDataViewsState } from '../../data_views_service/mocks'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; -import { KEEP_GLOBAL_FILTERS_ACTION_ID } from './annotations/actions'; import { layerTypes, Visualization } from '../..'; const DATE_HISTORGRAM_COLUMN_ID = 'date_histogram_column'; @@ -3022,7 +3021,7 @@ describe('xy_visualization', () => { ); }); - it('should return one action for an annotation layer', () => { + it('should return no action for an annotation layer', () => { const baseState = exampleState(); expect( xyVisualization.getSupportedActionsForLayer?.('annotation', { @@ -3038,53 +3037,64 @@ describe('xy_visualization', () => { }, ], }) - ).toEqual([ - expect.objectContaining({ - displayName: 'Keep global filters', - description: - 'All the dimensions configured in this layer respect filters defined at kibana level.', - icon: 'filter', - isCompatible: true, - 'data-test-subj': 'lnsXY_annotationLayer_keepFilters', - }), - ]); + ).toHaveLength(0); }); + }); - it('should handle an annotation action', () => { - const baseState = exampleState(); - const state = { - ...baseState, - layers: [ - ...baseState.layers, - { - layerId: 'annotation', - layerType: layerTypes.ANNOTATIONS, - annotations: [exampleAnnotation2], - ignoreGlobalFilters: true, - indexPatternId: 'myIndexPattern', - }, - ], - }; + describe('layer settings', () => { + describe('hasLayerSettings', () => { + it('should expose no settings for a data or reference lines layer', () => { + const baseState = exampleState(); + expect( + xyVisualization.hasLayerSettings?.({ + state: baseState, + frame: createMockFramePublicAPI(), + layerId: 'first', + }) + ).toEqual({ data: false, appereance: false }); - const newState = xyVisualization.onLayerAction!( - 'annotation', - KEEP_GLOBAL_FILTERS_ACTION_ID, - state - ); + expect( + xyVisualization.hasLayerSettings?.({ + state: { + ...baseState, + layers: [ + ...baseState.layers, + { + layerId: 'referenceLine', + layerType: layerTypes.REFERENCELINE, + accessors: [], + yConfig: [{ axisMode: 'left', forAccessor: 'a' }], + }, + ], + }, + frame: createMockFramePublicAPI(), + layerId: 'referenceLine', + }) + ).toEqual({ data: false, appereance: false }); + }); - expect(newState).toEqual( - expect.objectContaining({ - layers: expect.arrayContaining([ - { - layerId: 'annotation', - layerType: layerTypes.ANNOTATIONS, - annotations: [exampleAnnotation2], - ignoreGlobalFilters: false, - indexPatternId: 'myIndexPattern', + it('should expose data settings for an annotation layer', () => { + const baseState = exampleState(); + expect( + xyVisualization.hasLayerSettings?.({ + state: { + ...baseState, + layers: [ + ...baseState.layers, + { + layerId: 'annotation', + layerType: layerTypes.ANNOTATIONS, + annotations: [exampleAnnotation2], + ignoreGlobalFilters: true, + indexPatternId: 'myIndexPattern', + }, + ], }, - ]), - }) - ); + frame: createMockFramePublicAPI(), + layerId: 'annotation', + }) + ).toEqual({ data: true, appereance: false }); + }); }); }); }); diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx index 274b82e5a1cf4..889495b7893b9 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx @@ -49,7 +49,6 @@ import { type XYDataLayerConfig, type SeriesType, type PersistedState, - type XYAnnotationLayerConfig, visualizationTypes, } from './types'; import { @@ -103,12 +102,8 @@ import { AnnotationsPanel } from './xy_config_panel/annotations_config_panel'; import { DimensionTrigger } from '../../shared_components/dimension_trigger'; import { defaultAnnotationLabel } from './annotations/helpers'; import { onDropForVisualization } from '../../editor_frame_service/editor_frame/config_panel/buttons/drop_targets_utils'; -import { - createAnnotationActions, - IGNORE_GLOBAL_FILTERS_ACTION_ID, - KEEP_GLOBAL_FILTERS_ACTION_ID, -} from './annotations/actions'; import { IgnoredGlobalFiltersEntries } from './info_badges'; +import { LayerSettings } from './layer_settings'; const XY_ID = 'lnsXY'; export const getXyVisualization = ({ @@ -263,31 +258,27 @@ export const getXyVisualization = ({ ]; }, - getSupportedActionsForLayer(layerId, state) { - const layerIndex = state.layers.findIndex((l) => l.layerId === layerId); - const layer = state.layers[layerIndex]; - const actions = []; - if (isAnnotationsLayer(layer)) { - actions.push(...createAnnotationActions({ state, layerIndex, layer })); - } - return actions; + getSupportedActionsForLayer() { + return []; }, - onLayerAction(layerId, actionId, state) { - if ([IGNORE_GLOBAL_FILTERS_ACTION_ID, KEEP_GLOBAL_FILTERS_ACTION_ID].includes(actionId)) { - return { - ...state, - layers: state.layers.map((layer) => - layer.layerId === layerId - ? { - ...layer, - ignoreGlobalFilters: !(layer as XYAnnotationLayerConfig).ignoreGlobalFilters, - } - : layer - ), - }; - } + hasLayerSettings({ state, layerId: currentLayerId }) { + const layer = state.layers?.find(({ layerId }) => layerId === currentLayerId); + return { data: Boolean(layer && isAnnotationsLayer(layer)), appereance: false }; + }, + + renderLayerSettings(domElement, props) { + render( + + + + + , + domElement + ); + }, + onLayerAction(layerId, actionId, state) { return state; }, diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx index 819dfe13c2ba2..166ba2d214dbd 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx @@ -7,9 +7,17 @@ import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiIcon, EuiPopover, EuiSelectable, EuiText, EuiPopoverTitle } from '@elastic/eui'; +import { + EuiIcon, + EuiPopover, + EuiSelectable, + EuiText, + EuiPopoverTitle, + useEuiTheme, +} from '@elastic/eui'; import { ToolbarButton } from '@kbn/kibana-react-plugin/public'; import { IconChartBarReferenceLine, IconChartBarAnnotations } from '@kbn/chart-icons'; +import { css } from '@emotion/react'; import type { VisualizationLayerHeaderContentProps, VisualizationLayerWidgetProps, @@ -71,6 +79,7 @@ function AnnotationLayerHeaderContent({ layerId, onChangeIndexPattern, }: VisualizationLayerHeaderContentProps) { + const { euiTheme } = useEuiTheme(); const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', { defaultMessage: 'Data view not found', }); @@ -78,6 +87,22 @@ function AnnotationLayerHeaderContent({ const layer = state.layers[layerIndex] as XYAnnotationLayerConfig; const currentIndexPattern = frame.dataViews.indexPatterns[layer.indexPatternId]; + const extraIconLabelProps = !layer.ignoreGlobalFilters + ? {} + : { + icon: ( + + ), + iconTooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', { + defaultMessage: 'Ignore global filters', + }), + }; return ( { + it('should add an annotation layer and settings shoud be available with ignore filters', async () => { // configure a date histogram await PageObjects.lens.configureDimension({ dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', @@ -65,10 +65,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); // add annotation layer await PageObjects.lens.createLayer('annotations'); + + expect(await testSubjects.exists('lnsChangeIndexPatternSamplingInfo')).to.be(true); + await PageObjects.lens.openLayerContextMenu(1); - await testSubjects.existOrFail('lnsXY_annotationLayer_keepFilters'); - // layer settings not available - await testSubjects.missingOrFail('lnsLayerSettings'); + await testSubjects.click('lnsLayerSettings'); + // annotations settings have only ignore filters + await testSubjects.click('lnsXY-layerSettings-ignoreGlobalFilters'); + // now close the panel and check the dataView picker has no icon + await testSubjects.click('lns-indexPattern-dimensionContainerBack'); + expect(await testSubjects.exists('lnsChangeIndexPatternSamplingInfo')).to.be(false); }); it('should add a new visualization layer and disable the sampling if max operation is chosen', async () => { From 5ad079d06a28f90e042c9bcb9e085f626f8a6713 Mon Sep 17 00:00:00 2001 From: dej611 Date: Wed, 5 Apr 2023 13:59:47 +0200 Subject: [PATCH 2/6] :fire: remove unused translations --- x-pack/plugins/translations/translations/fr-FR.json | 4 ---- x-pack/plugins/translations/translations/ja-JP.json | 4 ---- x-pack/plugins/translations/translations/zh-CN.json | 4 ---- 3 files changed, 12 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 5bfe3d51872f4..042bbc613157f 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -20067,10 +20067,6 @@ "xpack.lens.xyChart.annotationDate.placementType": "Type de placement", "xpack.lens.xyChart.annotationDate.to": "À", "xpack.lens.xyChart.annotationError.timeFieldEmpty": "Le champ temporel est manquant", - "xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription": "Toutes les dimensions configurées dans ce calque ignorent les filtres définis au niveau de Kibana.", - "xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel": "Ignorer les filtres globaux", - "xpack.lens.xyChart.annotations.keepGlobalFiltersDescription": "Toutes les dimensions configurées dans ce calque respectent les filtres définis au niveau de Kibana.", - "xpack.lens.xyChart.annotations.keepGlobalFiltersLabel": "Conserver les filtres globaux", "xpack.lens.xyChart.appearance": "Apparence", "xpack.lens.xyChart.applyAsRange": "Appliquer en tant que plage", "xpack.lens.xyChart.axisOrientation.angled": "En angle", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index c521bce59c554..c2c4e481a94f8 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -20067,10 +20067,6 @@ "xpack.lens.xyChart.annotationDate.placementType": "配置タイプ", "xpack.lens.xyChart.annotationDate.to": "終了：", "xpack.lens.xyChart.annotationError.timeFieldEmpty": "時刻フィールドがありません", - "xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription": "このレイヤーで構成されたすべてのディメンションは、Kibanaレベルで定義されたフィルターを無視します。", - "xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel": "グローバルフィルターを無視", - "xpack.lens.xyChart.annotations.keepGlobalFiltersDescription": "このレイヤーで構成されたすべてのディメンションは、Kibanaレベルで定義されたフィルターを適用します。", - "xpack.lens.xyChart.annotations.keepGlobalFiltersLabel": "グローバルフィルターを保持", "xpack.lens.xyChart.appearance": "見た目", "xpack.lens.xyChart.applyAsRange": "範囲として適用", "xpack.lens.xyChart.axisOrientation.angled": "傾斜", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 0f1e4bfbc2a8d..83881974cf32f 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -20068,10 +20068,6 @@ "xpack.lens.xyChart.annotationDate.placementType": "位置类型", "xpack.lens.xyChart.annotationDate.to": "至", "xpack.lens.xyChart.annotationError.timeFieldEmpty": "缺少时间字段", - "xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription": "在此图层中配置的所有维度将忽略在 Kibana 级别定义的筛选。", - "xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel": "忽略全局筛选", - "xpack.lens.xyChart.annotations.keepGlobalFiltersDescription": "在此图层中配置的所有维度将采用在 Kibana 级别定义的筛选。", - "xpack.lens.xyChart.annotations.keepGlobalFiltersLabel": "保留全局筛选", "xpack.lens.xyChart.appearance": "外观", "xpack.lens.xyChart.applyAsRange": "应用为范围", "xpack.lens.xyChart.axisOrientation.angled": "带角度", From 11573f365ea6a6896597b9443cdd685a3cffe2e1 Mon Sep 17 00:00:00 2001 From: dej611 Date: Wed, 5 Apr 2023 14:50:21 +0200 Subject: [PATCH 3/6] :white_check_mark: Add test for appereance section --- .../visualizations/partition/layer_settings.test.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx index 9acedbc9b8dd2..e29ec3d0f3a4c 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx @@ -25,12 +25,15 @@ describe('layer settings', () => { }); const layerId = 'layer-id'; - const props: VisualizationLayerSettingsProps = { + const props: VisualizationLayerSettingsProps & { + section: 'data' | 'appereance'; + } = { setState: jest.fn(), layerId, state: getState(false), frame: {} as FramePublicAPI, panelRef: {} as React.MutableRefObject, + section: 'data', }; it('toggles multiple metrics', () => { @@ -90,5 +93,9 @@ describe('layer settings', () => { ).isEmptyRender() ).toBeTruthy(); }); + + test('should not render anything for the appereance section', () => { + expect(shallow().isEmptyRender()); + }); }); }); From 0db73aaa07ac1020a1128f6c9d6a2c1fac644792 Mon Sep 17 00:00:00 2001 From: dej611 Date: Wed, 12 Apr 2023 17:59:35 +0200 Subject: [PATCH 4/6] :white_check_mark: Fix test ids for functional checks --- .../public/datasources/form_based/layerpanel.tsx | 1 + .../shared_components/dataview_picker/trigger.tsx | 13 +++++++++++-- .../xy/xy_config_panel/layer_header.tsx | 1 + .../functional/apps/lens/group1/layer_actions.ts | 4 ++-- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx index e08b60450bf86..df96466abd430 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx @@ -53,6 +53,7 @@ export function LayerPanel({ value: samplingValue * 100, }, }), + 'data-test-subj': 'lnsChangeIndexPatternSamplingInfo', } : {}; diff --git a/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx index 8e1d50d38177b..bab19c9239721 100644 --- a/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx +++ b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx @@ -15,6 +15,7 @@ interface TriggerLabelProps { icon?: React.ReactElement; iconValue?: string; iconTooltipValue?: string; + 'data-test-subj'?: string; } export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & @@ -24,7 +25,13 @@ export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & isDisabled?: boolean; }; -function TriggerLabel({ label, icon, iconValue, iconTooltipValue }: TriggerLabelProps) { +function TriggerLabel({ + label, + icon, + iconValue, + iconTooltipValue, + 'data-test-subj': dataTestSubj, +}: TriggerLabelProps) { const { euiTheme } = useEuiTheme(); if (!icon) { return <>{label}; @@ -42,7 +49,7 @@ function TriggerLabel({ label, icon, iconValue, iconTooltipValue }: TriggerLabel void; @@ -99,6 +107,7 @@ export function TriggerButton({ icon={icon} iconValue={iconValue} iconTooltipValue={iconTooltipValue} + data-test-subj={dataTestSubj} /> ); diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx index 166ba2d214dbd..56602c663060e 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx @@ -102,6 +102,7 @@ function AnnotationLayerHeaderContent({ iconTooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', { defaultMessage: 'Ignore global filters', }), + 'data-test-subj': 'lnsChangeIndexPatternIgnoringFilters', }; return ( { From 6b04133c45e1137bf993e02a87a840f56fa20505 Mon Sep 17 00:00:00 2001 From: dej611 Date: Thu, 13 Apr 2023 10:24:59 +0200 Subject: [PATCH 5/6] :recycle: Refactor to let trigger have its own test id --- .../datasources/form_based/layerpanel.tsx | 22 ++++++----- .../dataview_picker/trigger.tsx | 39 +++++++------------ .../xy/xy_config_panel/layer_header.tsx | 28 ++++++------- 3 files changed, 41 insertions(+), 48 deletions(-) diff --git a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx index df96466abd430..5832f8094a856 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx @@ -45,15 +45,19 @@ export function LayerPanel({ const extraIconLabelProps = samplingValue !== 1 ? { - icon: , - iconValue: `${samplingValue * 100}%`, - iconTooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', { - defaultMessage: '{value}% sampling', - values: { - value: samplingValue * 100, - }, - }), - 'data-test-subj': 'lnsChangeIndexPatternSamplingInfo', + icon: { + component: ( + + ), + value: `${samplingValue * 100}%`, + tooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', { + defaultMessage: '{value}% sampling', + values: { + value: samplingValue * 100, + }, + }), + 'data-test-subj': 'lnsChangeIndexPatternSamplingInfo', + }, } : {}; diff --git a/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx index bab19c9239721..038b1d5aec960 100644 --- a/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx +++ b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx @@ -12,10 +12,12 @@ import { ToolbarButton, ToolbarButtonProps } from './toolbar_button'; interface TriggerLabelProps { label: string; - icon?: React.ReactElement; - iconValue?: string; - iconTooltipValue?: string; - 'data-test-subj'?: string; + icon?: { + component: React.ReactElement; + value?: string; + tooltipValue?: string; + 'data-test-subj': string; + }; } export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & @@ -25,13 +27,7 @@ export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & isDisabled?: boolean; }; -function TriggerLabel({ - label, - icon, - iconValue, - iconTooltipValue, - 'data-test-subj': dataTestSubj, -}: TriggerLabelProps) { +function TriggerLabel({ label, icon }: TriggerLabelProps) { const { euiTheme } = useEuiTheme(); if (!icon) { return <>{label}; @@ -49,7 +45,7 @@ function TriggerLabel({ - + - {icon} - {iconValue ? ( + {icon.component} + {icon.value ? ( - {iconValue} + {icon.value} ) : null} @@ -79,9 +75,6 @@ export function TriggerButton({ togglePopover, isMissingCurrent, icon, - iconValue, - iconTooltipValue, - 'data-test-subj': dataTestSubj, ...rest }: ChangeIndexPatternTriggerProps & { togglePopover: () => void; @@ -102,13 +95,7 @@ export function TriggerButton({ {...rest} textProps={{ style: { width: '100%' } }} > - + ); } diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx index 56602c663060e..1983094f483b9 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx @@ -90,19 +90,21 @@ function AnnotationLayerHeaderContent({ const extraIconLabelProps = !layer.ignoreGlobalFilters ? {} : { - icon: ( - - ), - iconTooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', { - defaultMessage: 'Ignore global filters', - }), - 'data-test-subj': 'lnsChangeIndexPatternIgnoringFilters', + icon: { + component: ( + + ), + tooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', { + defaultMessage: 'Ignore global filters', + }), + 'data-test-subj': 'lnsChangeIndexPatternIgnoringFilters', + }, }; return ( Date: Tue, 18 Apr 2023 10:09:07 +0200 Subject: [PATCH 6/6] :ok_hand: Integrate feedback --- .../editor_frame/config_panel/layer_panel.tsx | 10 +++++----- x-pack/plugins/lens/public/types.ts | 4 ++-- .../visualizations/partition/layer_settings.test.tsx | 6 +++--- .../public/visualizations/partition/layer_settings.tsx | 4 ++-- .../visualizations/partition/visualization.test.ts | 2 +- .../public/visualizations/partition/visualization.tsx | 2 +- .../lens/public/visualizations/xy/layer_settings.tsx | 4 ++-- .../public/visualizations/xy/visualization.test.ts | 6 +++--- .../lens/public/visualizations/xy/visualization.tsx | 2 +- 9 files changed, 20 insertions(+), 20 deletions(-) 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 b0111c44bce92..f8b17d330b5e5 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 @@ -324,7 +324,7 @@ export function LayerPanel( layerId, state: visualizationState, frame: props.framePublicAPI, - }) || { data: false, appereance: false }, + }) || { data: false, appearance: false }, [activeVisualization, layerId, props.framePublicAPI, visualizationState] ); @@ -724,7 +724,7 @@ export function LayerPanel( }} /> ) : null} - {visualizationLayerSettings.appereance ? ( + {visualizationLayerSettings.appearance ? (

- {i18n.translate('xpack.lens.editorFrame.layerSettings.headingAppereance', { - defaultMessage: 'Appereance', + {i18n.translate('xpack.lens.editorFrame.layerSettings.headingAppearance', { + defaultMessage: 'Appearance', })}

@@ -745,7 +745,7 @@ export function LayerPanel( ...layerVisualizationConfigProps, setState: props.updateVisualization, panelRef: settingsPanelRef, - section: 'appereance', + section: 'appearance', }} /> )} diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index f385ec70cd20d..746558b0e2560 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -1189,11 +1189,11 @@ export interface Visualization { /** * Allows the visualization to announce whether or not it has any settings to show */ - hasLayerSettings?: (props: VisualizationConfigProps) => Record<'data' | 'appereance', boolean>; + hasLayerSettings?: (props: VisualizationConfigProps) => Record<'data' | 'appearance', boolean>; renderLayerSettings?: ( domElement: Element, - props: VisualizationLayerSettingsProps & { section: 'data' | 'appereance' } + props: VisualizationLayerSettingsProps & { section: 'data' | 'appearance' } ) => ((cleanupElement: Element) => void) | void; /** diff --git a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx index e29ec3d0f3a4c..2fed483cddfaf 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.test.tsx @@ -26,7 +26,7 @@ describe('layer settings', () => { const layerId = 'layer-id'; const props: VisualizationLayerSettingsProps & { - section: 'data' | 'appereance'; + section: 'data' | 'appearance'; } = { setState: jest.fn(), layerId, @@ -94,8 +94,8 @@ describe('layer settings', () => { ).toBeTruthy(); }); - test('should not render anything for the appereance section', () => { - expect(shallow().isEmptyRender()); + test('should not render anything for the appearance section', () => { + expect(shallow().isEmptyRender()); }); }); }); diff --git a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx index 5e401801f29c2..6f13800a91a2c 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx @@ -13,9 +13,9 @@ import { PieVisualizationState } from '../..'; import { VisualizationLayerSettingsProps } from '../../types'; export function LayerSettings( - props: VisualizationLayerSettingsProps & { section: 'data' | 'appereance' } + props: VisualizationLayerSettingsProps & { section: 'data' | 'appearance' } ) { - if (props.section === 'appereance') { + if (props.section === 'appearance') { return null; } if (props.state.shape === PieChartTypes.MOSAIC) { diff --git a/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts b/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts index 1d4beeb57e909..3a4b0545a42ea 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts +++ b/x-pack/plugins/lens/public/visualizations/partition/visualization.test.ts @@ -657,7 +657,7 @@ describe('pie_visualization', () => { frame: mockFrame(), layerId: state.layers[0].layerId, }) - ).toEqual({ data: type !== PieChartTypes.MOSAIC, appereance: false }); + ).toEqual({ data: type !== PieChartTypes.MOSAIC, appearance: false }); } }); }); diff --git a/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx b/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx index 783cfc55f7ad0..da52c6efc105b 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx @@ -504,7 +504,7 @@ export const getPieVisualization = ({ }, hasLayerSettings(props) { - return { data: props.state.shape !== PieChartTypes.MOSAIC, appereance: false }; + return { data: props.state.shape !== PieChartTypes.MOSAIC, appearance: false }; }, renderLayerSettings(domElement, props) { diff --git a/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx b/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx index 2e6d7cffb7cc1..55091aa0d1d40 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/layer_settings.tsx @@ -17,8 +17,8 @@ export function LayerSettings({ setState, section, layerId, -}: VisualizationLayerSettingsProps & { section: 'data' | 'appereance' }) { - if (section === 'appereance') { +}: VisualizationLayerSettingsProps & { section: 'data' | 'appearance' }) { + if (section === 'appearance') { return null; } const layer = state.layers.find((l) => l.layerId === layerId); diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts index 0e58981a6aae1..9b82ab8c0d90e 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts @@ -3051,7 +3051,7 @@ describe('xy_visualization', () => { frame: createMockFramePublicAPI(), layerId: 'first', }) - ).toEqual({ data: false, appereance: false }); + ).toEqual({ data: false, appearance: false }); expect( xyVisualization.hasLayerSettings?.({ @@ -3070,7 +3070,7 @@ describe('xy_visualization', () => { frame: createMockFramePublicAPI(), layerId: 'referenceLine', }) - ).toEqual({ data: false, appereance: false }); + ).toEqual({ data: false, appearance: false }); }); it('should expose data settings for an annotation layer', () => { @@ -3093,7 +3093,7 @@ describe('xy_visualization', () => { frame: createMockFramePublicAPI(), layerId: 'annotation', }) - ).toEqual({ data: true, appereance: false }); + ).toEqual({ data: true, appearance: false }); }); }); }); diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx index 889495b7893b9..2f5df56c7b42d 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx @@ -264,7 +264,7 @@ export const getXyVisualization = ({ hasLayerSettings({ state, layerId: currentLayerId }) { const layer = state.layers?.find(({ layerId }) => layerId === currentLayerId); - return { data: Boolean(layer && isAnnotationsLayer(layer)), appereance: false }; + return { data: Boolean(layer && isAnnotationsLayer(layer)), appearance: false }; }, renderLayerSettings(domElement, props) {