Skip to content

Commit

Permalink
[Lens] Use accordion menus in field list for available and empty fiel…
Browse files Browse the repository at this point in the history
  • Loading branch information
mbondyra committed Jun 26, 2020
1 parent 39b2d71 commit 1e1113a
Show file tree
Hide file tree
Showing 28 changed files with 784 additions and 421 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export function loadInitialState() {
[restricted.id]: restricted,
},
layers: {},
showEmptyFields: false,
};
return result;
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
@import 'datapanel';
@import 'field_item';
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@
line-height: $euiSizeXXL;
}

.lnsInnerIndexPatternDataPanel__filterWrapper {
flex-grow: 0;
}

/**
* 1. Don't cut off the shadow of the field items
*/
Expand All @@ -41,11 +37,9 @@
right: $euiSizeXS; /* 1 */
}

.lnsInnerIndexPatternDataPanel__filterButton {
width: 100%;
color: $euiColorPrimary;
padding-left: $euiSizeS;
padding-right: $euiSizeS;
.lnsInnerIndexPatternDataPanel__fieldItems {
// Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
padding: $euiSizeXS $euiSizeXS 0;
}

.lnsInnerIndexPatternDataPanel__textField {
Expand All @@ -54,7 +48,9 @@
}

.lnsInnerIndexPatternDataPanel__filterType {
font-size: $euiFontSizeS;
padding: $euiSizeS;
border-bottom: 1px solid $euiColorLightestShade;
}

.lnsInnerIndexPatternDataPanel__filterTypeInner {
Expand Down
203 changes: 99 additions & 104 deletions x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ import { createMockedDragDropContext } from './mocks';
import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
import { InnerIndexPatternDataPanel, IndexPatternDataPanel, MemoizedDataPanel } from './datapanel';
import { FieldItem } from './field_item';
import { NoFieldsCallout } from './no_fields_callout';
import { act } from 'react-dom/test-utils';
import { coreMock } from 'src/core/public/mocks';
import { IndexPatternPrivateState } from './types';
import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
import { ChangeIndexPattern } from './change_indexpattern';
import { EuiProgress } from '@elastic/eui';
import { EuiProgress, EuiLoadingSpinner } from '@elastic/eui';
import { documentField } from './document_field';

const initialState: IndexPatternPrivateState = {
indexPatternRefs: [],
existingFields: {},
currentIndexPatternId: '1',
showEmptyFields: false,
layers: {
first: {
indexPatternId: '1',
Expand Down Expand Up @@ -229,8 +229,6 @@ describe('IndexPattern Data Panel', () => {
},
query: { query: '', language: 'lucene' },
filters: [],
showEmptyFields: false,
onToggleEmptyFields: jest.fn(),
};
});

Expand Down Expand Up @@ -303,7 +301,6 @@ describe('IndexPattern Data Panel', () => {
state: {
indexPatternRefs: [],
existingFields: {},
showEmptyFields: false,
currentIndexPatternId: 'a',
indexPatterns: {
a: { id: 'a', title: 'aaa', timeFieldName: 'atime', fields: [] },
Expand Down Expand Up @@ -534,42 +531,97 @@ describe('IndexPattern Data Panel', () => {
});
});

describe('while showing empty fields', () => {
it('should list all supported fields in the pattern sorted alphabetically', async () => {
const wrapper = shallowWithIntl(
<InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
describe('displaying field list', () => {
let props: Parameters<typeof InnerIndexPatternDataPanel>[0];
beforeEach(() => {
props = {
...defaultProps,
existingFields: {
idx1: {
bytes: true,
memory: true,
},
},
};
});
it('should list all supported fields in the pattern sorted alphabetically in groups', async () => {
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
expect(wrapper.find(FieldItem).first().prop('field').name).toEqual('Records');
expect(
wrapper
.find('[data-test-subj="lnsIndexPatternAvailableFields"]')
.find(FieldItem)
.map((fieldItem) => fieldItem.prop('field').name)
).toEqual(['bytes', 'memory']);
wrapper
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
.find('button')
.first()
.simulate('click');
expect(
wrapper
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
.find(FieldItem)
.map((fieldItem) => fieldItem.prop('field').name)
).toEqual(['client', 'source', 'timestamp']);
});

it('should display NoFieldsCallout when all fields are empty', async () => {
const wrapper = mountWithIntl(
<InnerIndexPatternDataPanel {...defaultProps} existingFields={{ idx1: {} }} />
);
expect(wrapper.find(NoFieldsCallout).length).toEqual(1);
expect(
wrapper
.find('[data-test-subj="lnsIndexPatternAvailableFields"]')
.find(FieldItem)
.map((fieldItem) => fieldItem.prop('field').name)
).toEqual([]);
wrapper
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
.find('button')
.first()
.simulate('click');
expect(
wrapper
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
.find(FieldItem)
.map((fieldItem) => fieldItem.prop('field').name)
).toEqual(['bytes', 'client', 'memory', 'source', 'timestamp']);
});

expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'Records',
'bytes',
'client',
'memory',
'source',
'timestamp',
]);
it('should display spinner for available fields accordion if existing fields are not loaded yet', async () => {
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...defaultProps} />);
expect(
wrapper.find('[data-test-subj="lnsIndexPatternAvailableFields"]').find(EuiLoadingSpinner)
.length
).toEqual(1);
wrapper.setProps({ existingFields: { idx1: {} } });
expect(wrapper.find(NoFieldsCallout).length).toEqual(1);
});

it('should filter down by name', () => {
const wrapper = shallowWithIntl(
<InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
);

const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
act(() => {
wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
target: { value: 'mem' },
target: { value: 'me' },
} as ChangeEvent<HTMLInputElement>);
});

wrapper
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
.find('button')
.first()
.simulate('click');

expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'memory',
'timestamp',
]);
});

it('should filter down by type', () => {
const wrapper = mountWithIntl(
<InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
);
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);

wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');

Expand All @@ -581,112 +633,55 @@ describe('IndexPattern Data Panel', () => {
]);
});

it('should toggle type if clicked again', () => {
const wrapper = mountWithIntl(
<InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
);
it('should display no fields in groups when filtered by type Record', () => {
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);

wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');

wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
wrapper.find('[data-test-subj="typeFilter-document"]').first().simulate('click');

expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'Records',
'bytes',
'client',
'memory',
'source',
'timestamp',
]);
expect(wrapper.find(NoFieldsCallout).length).toEqual(2);
});

it('should filter down by type and by name', () => {
const wrapper = mountWithIntl(
<InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
);

act(() => {
wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
target: { value: 'mem' },
} as ChangeEvent<HTMLInputElement>);
});

it('should toggle type if clicked again', () => {
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');

wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');

expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'memory',
]);
});
});

describe('filtering out empty fields', () => {
let emptyFieldsTestProps: typeof defaultProps;

beforeEach(() => {
emptyFieldsTestProps = {
...defaultProps,
indexPatterns: {
...defaultProps.indexPatterns,
'1': {
...defaultProps.indexPatterns['1'],
fields: defaultProps.indexPatterns['1'].fields.map((field) => ({
...field,
exists: field.type === 'number',
})),
},
},
onToggleEmptyFields: jest.fn(),
};
});

it('should list all supported fields in the pattern sorted alphabetically', async () => {
const props = {
...emptyFieldsTestProps,
existingFields: {
idx1: {
bytes: true,
memory: true,
},
},
};
const wrapper = shallowWithIntl(<InnerIndexPatternDataPanel {...props} />);

wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
wrapper
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
.find('button')
.first()
.simulate('click');
expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'Records',
'bytes',
'memory',
'client',
'source',
'timestamp',
]);
});

it('should filter down by name', () => {
const wrapper = shallowWithIntl(
<InnerIndexPatternDataPanel {...emptyFieldsTestProps} showEmptyFields={true} />
);

it('should filter down by type and by name', () => {
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
act(() => {
wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
target: { value: 'mem' },
target: { value: 'me' },
} as ChangeEvent<HTMLInputElement>);
});

expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'memory',
]);
});

it('should allow removing the filter for data', () => {
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...emptyFieldsTestProps} />);

wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');

wrapper.find('[data-test-subj="lnsEmptyFilter"]').first().prop('onChange')!(
{} as ChangeEvent
);
wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');

expect(emptyFieldsTestProps.onToggleEmptyFields).toHaveBeenCalled();
expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
'memory',
]);
});
});
});
Loading

0 comments on commit 1e1113a

Please sign in to comment.