From f8dbb31e4733ff0c111a35a8ef5b53c98ad21ef9 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Wed, 13 Apr 2022 11:48:13 +0200 Subject: [PATCH] [Lens] Hide disabled toolbar entries (#129994) * hide toolbar entries * remove unused stuff * remove unnecessary test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../lens/public/pie_visualization/toolbar.tsx | 5 +- .../columns_number_setting.test.tsx | 19 -- .../columns_number_setting.tsx | 47 ++-- .../legend_location_settings.test.tsx | 16 +- .../legend_location_settings.tsx | 126 ++++------ .../legend_settings_popover.test.tsx | 12 +- .../legend_settings_popover.tsx | 215 +++++++----------- .../legend_size_settings.tsx | 34 +-- .../axis_settings_popover.test.tsx | 6 +- .../xy_config_panel/axis_settings_popover.tsx | 31 +-- .../translations/translations/fr-FR.json | 3 - .../translations/translations/ja-JP.json | 4 - .../translations/translations/zh-CN.json | 4 - 13 files changed, 175 insertions(+), 347 deletions(-) delete mode 100644 x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx index dac889fc99df6..766edf6b0dbc0 100644 --- a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx @@ -183,7 +183,7 @@ export function PieToolbar(props: VisualizationToolbarProps ) : null} - {numberOptions.length ? ( + {numberOptions.length && layer.categoryDisplay !== 'hide' ? ( diff --git a/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx b/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx deleted file mode 100644 index 50f2dc2fb93dc..0000000000000 --- a/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* - * 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 React from 'react'; -import { mountWithIntl as mount } from '@kbn/test-jest-helpers'; -import { ColumnsNumberSetting } from './columns_number_setting'; - -describe('Columns Number Setting', () => { - it('should have default the columns input to 1 when no value is given', () => { - const component = mount(); - expect( - component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value') - ).toEqual(1); - }); -}); diff --git a/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx b/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx index 6a1d1ec6d0306..3cfd03d53c51d 100644 --- a/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx +++ b/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx @@ -9,7 +9,6 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFieldNumber, EuiFormRow } from '@elastic/eui'; import { useDebouncedValue } from './debounced_value'; -import { TooltipWrapper } from './tooltip_wrapper'; export const DEFAULT_FLOATING_COLUMNS = 1; @@ -22,10 +21,6 @@ interface ColumnsNumberSettingProps { * Callback on horizontal alignment option change */ onFloatingColumnsChange?: (value: number) => void; - /** - * Flag to disable the location settings - */ - isDisabled: boolean; /** * Indicates if legend is located outside */ @@ -35,7 +30,6 @@ interface ColumnsNumberSettingProps { export const ColumnsNumberSetting = ({ floatingColumns, onFloatingColumnsChange = () => {}, - isDisabled, isLegendOutside, }: ColumnsNumberSettingProps) => { const { inputValue, handleInputChange } = useDebouncedValue({ @@ -43,6 +37,8 @@ export const ColumnsNumberSetting = ({ onChange: onFloatingColumnsChange, }); + if (isLegendOutside) return null; + return ( - - { - handleInputChange(Number(e.target.value)); - }} - step={1} - /> - + { + handleInputChange(Number(e.target.value)); + }} + step={1} + /> ); }; diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx index f4b5ced490663..d318a19014928 100644 --- a/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx @@ -32,11 +32,9 @@ describe('Legend Location Settings', () => { expect(props.onPositionChange).toHaveBeenCalled(); }); - it('should disable the position group if isDisabled prop is true', () => { + it('should hide the position group if isDisabled prop is true', () => { const component = shallow(); - expect( - component.find('[data-test-subj="lens-legend-position-btn"]').prop('isDisabled') - ).toEqual(true); + expect(component.exists('[data-test-subj="lens-legend-position-btn"]')).toEqual(false); }); it('should hide the position button group if location inside is given', () => { @@ -104,18 +102,14 @@ describe('Legend Location Settings', () => { expect(newProps.onAlignmentChange).toHaveBeenCalled(); }); - it('should disable the components when is Disabled is true', () => { + it('should hide the components when is Disabled is true', () => { const newProps = { ...props, location: 'inside', isDisabled: true, } as LegendLocationSettingsProps; const component = shallow(); - expect( - component.find('[data-test-subj="lens-legend-location-btn"]').prop('isDisabled') - ).toEqual(true); - expect( - component.find('[data-test-subj="lens-legend-inside-alignment-btn"]').prop('isDisabled') - ).toEqual(true); + expect(component.exists('[data-test-subj="lens-legend-location-btn"]')).toEqual(false); + expect(component.exists('[data-test-subj="lens-legend-inside-alignment-btn"]')).toEqual(false); }); }); diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx index f3ac54ab00a05..7372b727268bd 100644 --- a/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx @@ -9,7 +9,6 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFormRow, EuiButtonGroup } from '@elastic/eui'; import { VerticalAlignment, HorizontalAlignment, Position } from '@elastic/charts'; -import { TooltipWrapper } from './tooltip_wrapper'; export interface LegendLocationSettingsProps { /** @@ -151,6 +150,7 @@ export const LegendLocationSettings: React.FunctionComponent {location && ( @@ -160,32 +160,22 @@ export const LegendLocationSettings: React.FunctionComponent - - value === location)!.id} - onChange={(optionId) => { - const newLocation = locationOptions.find(({ id }) => id === optionId)!.value; - onLocationChange(newLocation); - }} - /> - + data-test-subj="lens-legend-location-btn" + name="legendLocation" + buttonSize="compressed" + options={locationOptions} + isDisabled={isDisabled} + idSelected={locationOptions.find(({ value }) => value === location)!.id} + onChange={(optionId) => { + const newLocation = locationOptions.find(({ id }) => id === optionId)!.value; + onLocationChange(newLocation); + }} + /> )} <> {(!location || location === 'outside') && ( - - - + isDisabled={isDisabled} + data-test-subj="lens-legend-position-btn" + name="legendPosition" + buttonSize="compressed" + options={toggleButtonsIcons} + idSelected={position || Position.Right} + onChange={onPositionChange} + isIconOnly + /> )} {location === 'inside' && ( - - value === alignment)!.id - } - onChange={(optionId) => { - const newAlignment = locationAlignmentButtonsIcons.find( - ({ id }) => id === optionId - )!.value; - onAlignmentChange(newAlignment); - }} - isIconOnly - /> - + type="single" + data-test-subj="lens-legend-inside-alignment-btn" + name="legendInsideAlignment" + buttonSize="compressed" + isDisabled={isDisabled} + options={locationAlignmentButtonsIcons} + idSelected={ + locationAlignmentButtonsIcons.find(({ value }) => value === alignment)!.id + } + onChange={(optionId) => { + const newAlignment = locationAlignmentButtonsIcons.find( + ({ id }) => id === optionId + )!.value; + onAlignmentChange(newAlignment); + }} + isIconOnly + /> )} diff --git a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.test.tsx b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.test.tsx index e76426515548f..9bf9a1885e6ac 100644 --- a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.test.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.test.tsx @@ -56,7 +56,7 @@ describe('Legend Settings', () => { }); it('should have default the max lines input to 1 when no value is given', () => { - const component = shallow(); + const component = shallow(); expect(component.find(MaxLinesInput).prop('value')).toEqual(1); }); @@ -74,9 +74,9 @@ describe('Legend Settings', () => { ).toEqual(false); }); - it('should have disabled the max lines input when truncate is set to false', () => { + it('should hide the max lines input when truncate is set to false', () => { const component = shallow(); - expect(component.find(MaxLinesInput).prop('isDisabled')).toEqual(true); + expect(component.exists(MaxLinesInput)).toEqual(false); }); it('should have called the onTruncateLegendChange function on truncate switch change', () => { @@ -115,12 +115,10 @@ describe('Legend Settings', () => { expect(nestedProps.onNestedLegendChange).toHaveBeenCalled(); }); - it('should disable switch group on hide mode', () => { + it('should hide switch group on hide mode', () => { const component = shallow( ); - expect(component.find('[data-test-subj="lens-legend-nested-switch"]').prop('disabled')).toEqual( - true - ); + expect(component.exists('[data-test-subj="lens-legend-nested-switch"]')).toEqual(false); }); }); diff --git a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx index 481c38815d43d..b7bc79c1446e9 100644 --- a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx @@ -20,7 +20,6 @@ import { LegendLocationSettings } from './legend_location_settings'; import { ColumnsNumberSetting } from './columns_number_setting'; import { LegendSizeSettings } from './legend_size_settings'; import { ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public'; -import { TooltipWrapper } from './tooltip_wrapper'; import { useDebouncedValue } from './debounced_value'; export interface LegendSettingsPopoverProps { @@ -137,11 +136,9 @@ const MIN_TRUNCATE_LINES = 1; export const MaxLinesInput = ({ value, setValue, - isDisabled, }: { value: number; setValue: (value: number) => void; - isDisabled: boolean; }) => { const { inputValue, handleInputChange } = useDebouncedValue({ value, onChange: setValue }); return ( @@ -152,7 +149,6 @@ export const MaxLinesInput = ({ max={MAX_TRUNCATE_LINES} step={1} compressed - disabled={isDisabled} onChange={(e) => { const val = Number(e.target.value); // we want to automatically change the values to the limits @@ -218,146 +214,101 @@ export const LegendSettingsPopover: React.FunctionComponent - - - {location && ( - - )} - - - + - - - - - - - - {renderNestedLegendSwitch && ( - - + )} + - - - )} - {renderValueInLegendSwitch && ( - - - + {shouldTruncate && ( + + + + )} + {renderNestedLegendSwitch && ( + + + + )} + {renderValueInLegendSwitch && ( + - - + > + + + )} + )} ); diff --git a/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx b/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx index a596bb7189571..53da283de0b68 100644 --- a/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx @@ -8,7 +8,6 @@ import React, { useEffect, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; -import { TooltipWrapper } from './tooltip_wrapper'; export enum LegendSizes { AUTO = '0', @@ -22,7 +21,6 @@ interface LegendSizeSettingsProps { legendSize: number | undefined; onLegendSizeChange: (size?: number) => void; isVerticalLegend: boolean; - isDisabled: boolean; } const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [ @@ -65,7 +63,6 @@ export const LegendSizeSettings = ({ legendSize, onLegendSizeChange, isVerticalLegend, - isDisabled, }: LegendSizeSettingsProps) => { useEffect(() => { if (legendSize && !isVerticalLegend) { @@ -78,6 +75,8 @@ export const LegendSizeSettings = ({ [onLegendSizeChange] ); + if (!isVerticalLegend) return null; + return ( - - - + ); }; diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx index 87ccf41e91143..b5c45cd517432 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx @@ -89,11 +89,9 @@ describe('Axes Settings', () => { expect(props.setOrientation).toHaveBeenCalled(); }); - it('should disable the orientation group if the tickLabels are set to not visible', () => { + it('should hide the orientation group if the tickLabels are set to not visible', () => { const component = shallow(); - expect( - component.find('[data-test-subj="lnsXY_axisOrientation_groups"]').prop('isDisabled') - ).toEqual(true); + expect(component.exists('[data-test-subj="lnsXY_axisOrientation_groups"]')).toEqual(false); }); it('hides the endzone visibility flag if no setter is passed in', () => { diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx index 340a9211fcdee..e9a970cb82987 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx @@ -22,12 +22,7 @@ import { AxisExtentConfig, } from '../../../../../../src/plugins/chart_expressions/expression_xy/common'; import { XYLayerConfig } from '../types'; -import { - ToolbarPopover, - useDebouncedValue, - TooltipWrapper, - AxisTitleSettings, -} from '../../shared_components'; +import { ToolbarPopover, useDebouncedValue, AxisTitleSettings } from '../../shared_components'; import { isHorizontalChart } from '../state_helpers'; import { EuiIconAxisBottom } from '../../assets/axis_bottom'; import { EuiIconAxisLeft } from '../../assets/axis_left'; @@ -312,20 +307,13 @@ export const AxisSettingsPopover: React.FunctionComponent - - value === orientation)!.id} @@ -345,8 +332,8 @@ export const AxisSettingsPopover: React.FunctionComponent - - + + )} {setEndzoneVisibility && (