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.

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] Simplify state management from visualization #58279

Merged
merged 26 commits into from
Mar 17, 2020
Merged
Changes from 11 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
7b6aa3c
[Lens] Declarative right panel
wylieconlon Feb 19, 2020
783875f
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Feb 21, 2020
7ab5ca1
Fix memoized operations
wylieconlon Feb 21, 2020
4041c09
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 3, 2020
c23c3f9
Add error checking
wylieconlon Mar 3, 2020
449e3a8
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 5, 2020
92a8bea
Fix dimension panel tests
wylieconlon Mar 5, 2020
c1a44fb
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 6, 2020
9178b13
More updates
wylieconlon Mar 6, 2020
0e22ae5
Fix all editor frame tests
wylieconlon Mar 6, 2020
e8b63fa
Fix jest tests
wylieconlon Mar 6, 2020
cdc488f
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 9, 2020
ef403a6
Fix bug with removing dimension
wylieconlon Mar 9, 2020
a2d5e14
Update tests
wylieconlon Mar 10, 2020
6365ab6
Fix frame tests
wylieconlon Mar 10, 2020
8eb8fac
Fix all tests I could find
wylieconlon Mar 10, 2020
ed81951
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 11, 2020
5877a7f
Remove debugger
wylieconlon Mar 11, 2020
1160987
Style config panels
wylieconlon Mar 11, 2020
60c35b7
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 11, 2020
0a7c9eb
Update i18n
wylieconlon Mar 11, 2020
d3077cd
Fix dashboard test
wylieconlon Mar 11, 2020
4713e63
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 12, 2020
83a438c
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 13, 2020
07531df
Fix bug when switching index patterns
wylieconlon Mar 16, 2020
5a64382
Merge remote-tracking branch 'origin/master' into lens/simplify-confi…
wylieconlon Mar 16, 2020
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
Original file line number Diff line number Diff line change
@@ -4,18 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { createMockDatasource } from '../editor_frame_service/mocks';
import {
DatatableVisualizationState,
datatableVisualization,
DataTableLayer,
} from './visualization';
import { mount } from 'enzyme';
import { DatatableVisualizationState, datatableVisualization } from './visualization';
import { Operation, DataType, FramePublicAPI, TableSuggestionColumn } from '../types';
import { generateId } from '../id_generator';

jest.mock('../id_generator');

function mockFrame(): FramePublicAPI {
return {
@@ -34,12 +25,11 @@ function mockFrame(): FramePublicAPI {
describe('Datatable Visualization', () => {
describe('#initialize', () => {
it('should initialize from the empty state', () => {
(generateId as jest.Mock).mockReturnValueOnce('id');
expect(datatableVisualization.initialize(mockFrame(), undefined)).toEqual({
layers: [
{
layerId: 'aaa',
columns: ['id'],
columns: [],
},
],
});
@@ -88,7 +78,6 @@ describe('Datatable Visualization', () => {

describe('#clearLayer', () => {
it('should reset the layer', () => {
(generateId as jest.Mock).mockReturnValueOnce('testid');
const state: DatatableVisualizationState = {
layers: [
{
@@ -101,7 +90,7 @@ describe('Datatable Visualization', () => {
layers: [
{
layerId: 'baz',
columns: ['testid'],
columns: [],
},
],
});
@@ -214,29 +203,39 @@ describe('Datatable Visualization', () => {
});
});

describe('DataTableLayer', () => {
it('allows all kinds of operations', () => {
describe('#getLayerOptions', () => {
it('returns a single layer option', () => {
const setState = jest.fn();
const datasource = createMockDatasource();
const layer = { layerId: 'a', columns: ['b', 'c'] };
const datasource = createMockDatasource('test');
const frame = mockFrame();
frame.datasourceLayers = { a: datasource.publicAPIMock };
frame.datasourceLayers = { first: datasource.publicAPIMock };

mount(
<DataTableLayer
layerId="layer1"
dragDropContext={{ dragging: undefined, setDragging: () => {} }}
frame={frame}
layer={layer}
setState={setState}
state={{ layers: [layer] }}
/>
);
expect(
datatableVisualization.getLayerOptions({
layerId: 'first',
state: {
layers: [{ layerId: 'first', columns: [] }],
},
setState,
frame,
}).dimensions
).toHaveLength(1);
});

expect(datasource.publicAPIMock.renderDimensionPanel).toHaveBeenCalled();
it('allows all kinds of operations', () => {
const setState = jest.fn();
const datasource = createMockDatasource('test');
const frame = mockFrame();
frame.datasourceLayers = { first: datasource.publicAPIMock };

const filterOperations =
datasource.publicAPIMock.renderDimensionPanel.mock.calls[0][1].filterOperations;
const filterOperations = datatableVisualization.getLayerOptions({
layerId: 'first',
state: {
layers: [{ layerId: 'first', columns: [] }],
},
setState,
frame,
}).dimensions[0].filterOperations;

const baseOperation: Operation = {
dataType: 'string',
@@ -253,108 +252,82 @@ describe('Datatable Visualization', () => {
);
});

it('allows columns to be removed', () => {
const setState = jest.fn();
const datasource = createMockDatasource();
it('reorders the rendered colums based on the order from the datasource', () => {
const datasource = createMockDatasource('test');
const layer = { layerId: 'a', columns: ['b', 'c'] };
const frame = mockFrame();
frame.datasourceLayers = { a: datasource.publicAPIMock };
const component = mount(
<DataTableLayer
layerId="layer1"
dragDropContext={{ dragging: undefined, setDragging: () => {} }}
frame={frame}
layer={layer}
setState={setState}
state={{ layers: [layer] }}
/>
);

const onRemove = component
.find('[data-test-subj="datatable_multicolumnEditor"]')
.first()
.prop('onRemove') as (k: string) => {};

onRemove('b');
datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]);

expect(
datatableVisualization.getLayerOptions({
layerId: 'a',
state: { layers: [layer] },
setState: jest.fn(),
frame,
}).dimensions[0].accessors
).toEqual(['c', 'b']);
});
});

expect(setState).toHaveBeenCalledWith({
describe('#removeDimension', () => {
it('allows columns to be removed', () => {
const layer = { layerId: 'layer1', columns: ['b', 'c'] };
expect(
datatableVisualization.removeDimension({
prevState: { layers: [layer] },
layerId: 'layer1',
columnId: 'b',
dimensionId: '',
})
).toEqual({
layers: [
{
layerId: 'a',
layerId: 'layer1',
columns: ['c'],
},
],
});
});
});

describe('#setDimension', () => {
it('allows columns to be added', () => {
(generateId as jest.Mock).mockReturnValueOnce('d');
const setState = jest.fn();
const datasource = createMockDatasource();
const layer = { layerId: 'a', columns: ['b', 'c'] };
const frame = mockFrame();
frame.datasourceLayers = { a: datasource.publicAPIMock };
const component = mount(
<DataTableLayer
layerId="layer1"
dragDropContext={{ dragging: undefined, setDragging: () => {} }}
frame={frame}
layer={layer}
setState={setState}
state={{ layers: [layer] }}
/>
);

const onAdd = component
.find('[data-test-subj="datatable_multicolumnEditor"]')
.first()
.prop('onAdd') as () => {};

onAdd();

expect(setState).toHaveBeenCalledWith({
const layer = { layerId: 'layer1', columns: ['b', 'c'] };
expect(
datatableVisualization.setDimension({
prevState: { layers: [layer] },
layerId: 'layer1',
columnId: 'd',
dimensionId: '',
})
).toEqual({
layers: [
{
layerId: 'a',
layerId: 'layer1',
columns: ['b', 'c', 'd'],
},
],
});
});

it('reorders the rendered colums based on the order from the datasource', () => {
const datasource = createMockDatasource();
const layer = { layerId: 'a', columns: ['b', 'c'] };
const frame = mockFrame();
frame.datasourceLayers = { a: datasource.publicAPIMock };
const component = mount(
<DataTableLayer
layerId="layer1"
dragDropContext={{ dragging: undefined, setDragging: () => {} }}
frame={frame}
layer={layer}
setState={jest.fn()}
state={{ layers: [layer] }}
/>
);

const accessors = component
.find('[data-test-subj="datatable_multicolumnEditor"]')
.first()
.prop('accessors') as string[];

expect(accessors).toEqual(['b', 'c']);

component.setProps({
layer: { layerId: 'a', columns: ['c', 'b'] },
it('does not set a duplicate dimension', () => {
const layer = { layerId: 'layer1', columns: ['b', 'c'] };
expect(
datatableVisualization.setDimension({
prevState: { layers: [layer] },
layerId: 'layer1',
columnId: 'b',
dimensionId: '',
})
).toEqual({
layers: [
{
layerId: 'layer1',
columns: ['b', 'c'],
},
],
});

const newAccessors = component
.find('[data-test-subj="datatable_multicolumnEditor"]')
.first()
.prop('accessors') as string[];

expect(newAccessors).toEqual(['c', 'b']);
});
});
});
Loading