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 
…ds (#68871)
  • Loading branch information
@mbondyra
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.
1 change: 0 additions & 1 deletion x-pack/plugins/lens/public/indexpattern_datasource/__mocks__/loader.ts
View file
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;
}
49 changes: 49 additions & 0 deletions ...plugins/lens/public/indexpattern_datasource/__snapshots__/no_fields_callout.test.tsx.snap
View file

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

1 change: 0 additions & 1 deletion x-pack/plugins/lens/public/indexpattern_datasource/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
@import 'datapanel';
@import 'field_item';
14 changes: 5 additions & 9 deletions ...c/indexpattern_datasource/_datapanel.scss → ...ic/indexpattern_datasource/datapanel.scss
View file
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
View file
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.