[Lens] Fix aggregation selection indicator (#68973)
* Some sass modularization and using EuiListGroup instead of EuiSideNav * Fixes #68530
This commit is contained in:
parent
5348110a46
commit
1277934588
|
@ -1,4 +1,2 @@
|
|||
@import 'datapanel';
|
||||
@import 'field_item';
|
||||
|
||||
@import 'dimension_panel/index';
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
@import 'field_select';
|
||||
@import 'popover';
|
|
@ -1,38 +0,0 @@
|
|||
.lnsIndexPatternDimensionEditor {
|
||||
flex-grow: 1;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__left,
|
||||
.lnsIndexPatternDimensionEditor__right {
|
||||
padding: $euiSizeS;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__left {
|
||||
padding-top: 0;
|
||||
background-color: $euiPageBackgroundColor;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__right {
|
||||
width: $euiSize * 20;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__operation {
|
||||
@include euiFontSizeS;
|
||||
color: $euiColorPrimary;
|
||||
|
||||
// TODO: Fix in EUI or don't use EuiSideNav
|
||||
.euiSideNavItemButton__label {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__operation--selected {
|
||||
font-weight: bold;
|
||||
color: $euiTextColor;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__operation--incompatible {
|
||||
color: $euiColorMediumShade;
|
||||
}
|
|
@ -7,7 +7,7 @@
|
|||
import { ReactWrapper, ShallowWrapper } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { EuiComboBox, EuiSideNav, EuiSideNavItemType, EuiFieldNumber } from '@elastic/eui';
|
||||
import { EuiComboBox, EuiListGroupItemProps, EuiListGroup, EuiFieldNumber } from '@elastic/eui';
|
||||
import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
|
||||
import { changeColumn } from '../state_helpers';
|
||||
import {
|
||||
|
@ -303,18 +303,13 @@ describe('IndexPatternDimensionEditorPanel', () => {
|
|||
/>
|
||||
);
|
||||
|
||||
interface ItemType {
|
||||
name: string;
|
||||
'data-test-subj': string;
|
||||
}
|
||||
const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
|
||||
const options = (items[0].items as unknown) as ItemType[];
|
||||
const items: EuiListGroupItemProps[] = wrapper.find(EuiListGroup).prop('listItems') || [];
|
||||
|
||||
expect(options.find(({ name }) => name === 'Minimum')!['data-test-subj']).not.toContain(
|
||||
expect(items.find(({ label }) => label === 'Minimum')!['data-test-subj']).not.toContain(
|
||||
'Incompatible'
|
||||
);
|
||||
|
||||
expect(options.find(({ name }) => name === 'Date histogram')!['data-test-subj']).toContain(
|
||||
expect(items.find(({ label }) => label === 'Date histogram')!['data-test-subj']).toContain(
|
||||
'Incompatible'
|
||||
);
|
||||
});
|
||||
|
@ -977,13 +972,9 @@ describe('IndexPatternDimensionEditorPanel', () => {
|
|||
/>
|
||||
);
|
||||
|
||||
interface ItemType {
|
||||
name: React.ReactNode;
|
||||
}
|
||||
const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
|
||||
const options = (items[0].items as unknown) as ItemType[];
|
||||
const items: EuiListGroupItemProps[] = wrapper.find(EuiListGroup).prop('listItems') || [];
|
||||
|
||||
expect(options.map(({ name }: { name: React.ReactNode }) => name)).toEqual([
|
||||
expect(items.map(({ label }: { label: React.ReactNode }) => label)).toEqual([
|
||||
'Unique count',
|
||||
'Average',
|
||||
'Count',
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import './field_select.scss';
|
||||
import _ from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
.lnsIndexPatternDimensionEditor {
|
||||
flex-grow: 1;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__left,
|
||||
.lnsIndexPatternDimensionEditor__right {
|
||||
padding: $euiSizeS;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__left {
|
||||
background-color: $euiPageBackgroundColor;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__right {
|
||||
width: $euiSize * 20;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__operation > button {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
|
@ -4,17 +4,19 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import './popover_editor.scss';
|
||||
import _ from 'lodash';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import {
|
||||
EuiFlexItem,
|
||||
EuiFlexGroup,
|
||||
EuiSideNav,
|
||||
EuiListGroup,
|
||||
EuiCallOut,
|
||||
EuiFormRow,
|
||||
EuiFieldText,
|
||||
EuiSpacer,
|
||||
EuiListGroupItemProps,
|
||||
} from '@elastic/eui';
|
||||
import classNames from 'classnames';
|
||||
import { IndexPatternColumn, OperationType } from '../indexpattern';
|
||||
|
@ -101,84 +103,94 @@ export function PopoverEditor(props: PopoverEditorProps) {
|
|||
);
|
||||
}
|
||||
|
||||
function getSideNavItems() {
|
||||
return [
|
||||
{
|
||||
name: '',
|
||||
id: '0',
|
||||
items: getOperationTypes().map(({ operationType, compatibleWithCurrentField }) => ({
|
||||
name: operationPanels[operationType].displayName,
|
||||
id: operationType as string,
|
||||
className: classNames('lnsIndexPatternDimensionEditor__operation', {
|
||||
'lnsIndexPatternDimensionEditor__operation--selected': Boolean(
|
||||
incompatibleSelectedOperationType === operationType ||
|
||||
(!incompatibleSelectedOperationType &&
|
||||
selectedColumn &&
|
||||
selectedColumn.operationType === operationType)
|
||||
),
|
||||
'lnsIndexPatternDimensionEditor__operation--incompatible': !compatibleWithCurrentField,
|
||||
}),
|
||||
'data-test-subj': `lns-indexPatternDimension${
|
||||
compatibleWithCurrentField ? '' : 'Incompatible'
|
||||
}-${operationType}`,
|
||||
onClick() {
|
||||
if (!selectedColumn || !compatibleWithCurrentField) {
|
||||
const possibleFields = fieldByOperation[operationType] || [];
|
||||
function getSideNavItems(): EuiListGroupItemProps[] {
|
||||
return getOperationTypes().map(({ operationType, compatibleWithCurrentField }) => {
|
||||
const isActive = Boolean(
|
||||
incompatibleSelectedOperationType === operationType ||
|
||||
(!incompatibleSelectedOperationType &&
|
||||
selectedColumn &&
|
||||
selectedColumn.operationType === operationType)
|
||||
);
|
||||
|
||||
if (possibleFields.length === 1) {
|
||||
setState(
|
||||
changeColumn({
|
||||
state,
|
||||
layerId,
|
||||
columnId,
|
||||
newColumn: buildColumn({
|
||||
columns: props.state.layers[props.layerId].columns,
|
||||
suggestedPriority: props.suggestedPriority,
|
||||
layerId: props.layerId,
|
||||
op: operationType,
|
||||
indexPattern: currentIndexPattern,
|
||||
field: fieldMap[possibleFields[0]],
|
||||
previousColumn: selectedColumn,
|
||||
}),
|
||||
})
|
||||
);
|
||||
} else {
|
||||
setInvalidOperationType(operationType);
|
||||
}
|
||||
trackUiEvent(`indexpattern_dimension_operation_${operationType}`);
|
||||
return;
|
||||
}
|
||||
if (incompatibleSelectedOperationType) {
|
||||
setInvalidOperationType(null);
|
||||
}
|
||||
if (selectedColumn.operationType === operationType) {
|
||||
return;
|
||||
}
|
||||
const newColumn: IndexPatternColumn = buildColumn({
|
||||
columns: props.state.layers[props.layerId].columns,
|
||||
suggestedPriority: props.suggestedPriority,
|
||||
layerId: props.layerId,
|
||||
op: operationType,
|
||||
indexPattern: currentIndexPattern,
|
||||
field: fieldMap[selectedColumn.sourceField],
|
||||
previousColumn: selectedColumn,
|
||||
});
|
||||
let color: EuiListGroupItemProps['color'] = 'primary';
|
||||
if (isActive) {
|
||||
color = 'text';
|
||||
} else if (!compatibleWithCurrentField) {
|
||||
color = 'subdued';
|
||||
}
|
||||
|
||||
trackUiEvent(
|
||||
`indexpattern_dimension_operation_from_${selectedColumn.operationType}_to_${operationType}`
|
||||
);
|
||||
setState(
|
||||
changeColumn({
|
||||
state,
|
||||
layerId,
|
||||
columnId,
|
||||
newColumn,
|
||||
})
|
||||
);
|
||||
},
|
||||
})),
|
||||
},
|
||||
];
|
||||
let label: EuiListGroupItemProps['label'] = operationPanels[operationType].displayName;
|
||||
if (isActive) {
|
||||
label = <strong>{operationPanels[operationType].displayName}</strong>;
|
||||
}
|
||||
|
||||
return {
|
||||
id: operationType as string,
|
||||
label,
|
||||
color,
|
||||
isActive,
|
||||
size: 's',
|
||||
className: 'lnsIndexPatternDimensionEditor__operation',
|
||||
'data-test-subj': `lns-indexPatternDimension${
|
||||
compatibleWithCurrentField ? '' : 'Incompatible'
|
||||
}-${operationType}`,
|
||||
onClick() {
|
||||
if (!selectedColumn || !compatibleWithCurrentField) {
|
||||
const possibleFields = fieldByOperation[operationType] || [];
|
||||
|
||||
if (possibleFields.length === 1) {
|
||||
setState(
|
||||
changeColumn({
|
||||
state,
|
||||
layerId,
|
||||
columnId,
|
||||
newColumn: buildColumn({
|
||||
columns: props.state.layers[props.layerId].columns,
|
||||
suggestedPriority: props.suggestedPriority,
|
||||
layerId: props.layerId,
|
||||
op: operationType,
|
||||
indexPattern: currentIndexPattern,
|
||||
field: fieldMap[possibleFields[0]],
|
||||
previousColumn: selectedColumn,
|
||||
}),
|
||||
})
|
||||
);
|
||||
} else {
|
||||
setInvalidOperationType(operationType);
|
||||
}
|
||||
trackUiEvent(`indexpattern_dimension_operation_${operationType}`);
|
||||
return;
|
||||
}
|
||||
if (incompatibleSelectedOperationType) {
|
||||
setInvalidOperationType(null);
|
||||
}
|
||||
if (selectedColumn.operationType === operationType) {
|
||||
return;
|
||||
}
|
||||
const newColumn: IndexPatternColumn = buildColumn({
|
||||
columns: props.state.layers[props.layerId].columns,
|
||||
suggestedPriority: props.suggestedPriority,
|
||||
layerId: props.layerId,
|
||||
op: operationType,
|
||||
indexPattern: currentIndexPattern,
|
||||
field: fieldMap[selectedColumn.sourceField],
|
||||
previousColumn: selectedColumn,
|
||||
});
|
||||
|
||||
trackUiEvent(
|
||||
`indexpattern_dimension_operation_from_${selectedColumn.operationType}_to_${operationType}`
|
||||
);
|
||||
setState(
|
||||
changeColumn({
|
||||
state,
|
||||
layerId,
|
||||
columnId,
|
||||
newColumn,
|
||||
})
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -259,7 +271,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
|
|||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="s">
|
||||
<EuiFlexItem grow={null} className={classNames('lnsIndexPatternDimensionEditor__left')}>
|
||||
<EuiSideNav items={getSideNavItems()} />
|
||||
<EuiListGroup gutterSize="none" listItems={getSideNavItems()} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={true} className="lnsIndexPatternDimensionEditor__right">
|
||||
{incompatibleSelectedOperationType && selectedColumn && (
|
||||
|
|
Loading…
Reference in a new issue