maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] Fix aggregation selection indicator (#68973)

Browse source 
* Some sass modularization and using EuiListGroup instead of EuiSideNav
* Fixes #68530
This commit is contained in:
Caroline Horn 2020-06-12 10:04:54 -04:00 committed by GitHub
parent 5348110a46
commit 1277934588
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 120 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/lens/public/indexpattern_datasource/_index.scss
View file

@ -1,4 +1,2 @@
@import 'datapanel';
@import 'field_item';
@import 'dimension_panel/index';

2
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss
View file

@ -1,2 +0,0 @@
@import 'field_select';
@import 'popover';

38
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss
View file

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

21
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
View file

@ -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',

0
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/_field_select.scss → x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.scss
View file

1
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx
View file

@ -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';

23
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss Normal file
View file

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

168
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
View file

@ -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 && (