Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Hide disabled toolbar entries #129994

Merged
merged 4 commits into from
Apr 13, 2022
Merged

[Lens] Hide disabled toolbar entries #129994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
306f947
hide toolbar entries
flash1293 Apr 12, 2022
b9ae0c5
remove unused stuff
flash1293 Apr 12, 2022
7875c97
remove unnecessary test
flash1293 Apr 12, 2022
46a0418
Merge branch 'main' into hidden-form-rows
kibanamachine Apr 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
</EuiFormRow>
) : null}

{numberOptions.length ? (
{numberOptions.length && layer.categoryDisplay !== 'hide' ? (
<EuiFormRow
label={i18n.translate('xpack.lens.pieChart.numberLabels', {
defaultMessage: 'Values',
Expand All @@ -193,8 +193,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
>
<EuiSuperSelect
compressed
disabled={layer.categoryDisplay === 'hide'}
valueOfSelected={layer.categoryDisplay === 'hide' ? 'hidden' : layer.numberDisplay}
valueOfSelected={layer.numberDisplay}
options={numberOptions}
onChange={onNumberDisplayChange}
/>
Expand Down
19 changes: 0 additions & 19 deletions x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx
View file
Open in desktop

This file was deleted.

47 changes: 13 additions & 34 deletions x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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
*/
Expand All @@ -35,14 +30,15 @@ interface ColumnsNumberSettingProps {
export const ColumnsNumberSetting = ({
floatingColumns,
onFloatingColumnsChange = () => {},
isDisabled,
isLegendOutside,
}: ColumnsNumberSettingProps) => {
const { inputValue, handleInputChange } = useDebouncedValue({
value: floatingColumns ?? DEFAULT_FLOATING_COLUMNS,
onChange: onFloatingColumnsChange,
});

if (isLegendOutside) return null;

return (
<EuiFormRow
label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
Expand All @@ -51,34 +47,17 @@ export const ColumnsNumberSetting = ({
fullWidth
display="columnCompressed"
>
<TooltipWrapper
tooltipContent={
isDisabled
? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
defaultMessage: 'Requires legend to be shown',
})
: i18n.translate('xpack.lens.shared.legendInsideTooltip', {
defaultMessage: 'Requires legend to be located inside visualization',
})
}
condition={isDisabled || isLegendOutside}
position="top"
delay="regular"
display="block"
>
<EuiFieldNumber
data-test-subj="lens-legend-location-columns-input"
value={inputValue}
min={1}
max={5}
compressed
disabled={isDisabled || isLegendOutside}
onChange={(e) => {
handleInputChange(Number(e.target.value));
}}
step={1}
/>
</TooltipWrapper>
<EuiFieldNumber
data-test-subj="lens-legend-location-columns-input"
value={inputValue}
min={1}
max={5}
compressed
onChange={(e) => {
handleInputChange(Number(e.target.value));
}}
step={1}
/>
</EuiFormRow>
);
};
16 changes: 5 additions & 11 deletions x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<LegendLocationSettings {...props} isDisabled />);
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', () => {
Expand Down Expand Up @@ -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(<LegendLocationSettings {...newProps} />);
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);
});
});
126 changes: 48 additions & 78 deletions x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down Expand Up @@ -151,6 +150,7 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
const alignment = `${verticalAlignment || VerticalAlignment.Top}_${
horizontalAlignment || HorizontalAlignment.Right
}`;
if (isDisabled) return null;
return (
<>
{location && (
Expand All @@ -160,32 +160,22 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
defaultMessage: 'Location',
})}
>
<TooltipWrapper
tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
defaultMessage: 'Requires legend to be shown',
<EuiButtonGroup
isFullWidth
legend={i18n.translate('xpack.lens.shared.legendLocationLabel', {
defaultMessage: 'Location',
})}
condition={isDisabled}
position="top"
delay="regular"
display="block"
>
<EuiButtonGroup
isFullWidth
legend={i18n.translate('xpack.lens.shared.legendLocationLabel', {
defaultMessage: 'Location',
})}
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);
}}
/>
</TooltipWrapper>
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);
}}
/>
</EuiFormRow>
)}
<EuiFormRow
Expand All @@ -196,62 +186,42 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
>
<>
{(!location || location === 'outside') && (
<TooltipWrapper
tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
defaultMessage: 'Requires legend to be shown',
<EuiButtonGroup
legend={i18n.translate('xpack.lens.shared.legendAlignmentLabel', {
defaultMessage: 'Alignment',
})}
condition={isDisabled}
position="top"
delay="regular"
display="block"
>
<EuiButtonGroup
legend={i18n.translate('xpack.lens.shared.legendAlignmentLabel', {
defaultMessage: 'Alignment',
})}
isDisabled={isDisabled}
data-test-subj="lens-legend-position-btn"
name="legendPosition"
buttonSize="compressed"
options={toggleButtonsIcons}
idSelected={position || Position.Right}
onChange={onPositionChange}
isIconOnly
/>
</TooltipWrapper>
isDisabled={isDisabled}
data-test-subj="lens-legend-position-btn"
name="legendPosition"
buttonSize="compressed"
options={toggleButtonsIcons}
idSelected={position || Position.Right}
onChange={onPositionChange}
isIconOnly
/>
)}
{location === 'inside' && (
<TooltipWrapper
tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
defaultMessage: 'Requires legend to be shown',
<EuiButtonGroup
legend={i18n.translate('xpack.lens.shared.legendInsideLocationAlignmentLabel', {
defaultMessage: 'Alignment',
})}
condition={isDisabled}
position="top"
delay="regular"
display="block"
>
<EuiButtonGroup
legend={i18n.translate('xpack.lens.shared.legendInsideLocationAlignmentLabel', {
defaultMessage: 'Alignment',
})}
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
/>
</TooltipWrapper>
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
/>
)}
</>
</EuiFormRow>
Expand Down
12 changes: 5 additions & 7 deletions x-pack/plugins/lens/public/shared_components/legend_settings_popover.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<LegendSettingsPopover {...props} />);
const component = shallow(<LegendSettingsPopover {...props} shouldTruncate />);
expect(component.find(MaxLinesInput).prop('value')).toEqual(1);
});

Expand All @@ -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(<LegendSettingsPopover {...props} shouldTruncate={false} />);
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', () => {
Expand Down Expand Up @@ -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(
<LegendSettingsPopover {...props} mode="hide" renderNestedLegendSwitch />
);
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);
});
});
Loading