Skip to content

Commit

Permalink
[Lens] Simplify state management from visualization (#58279)
Browse files Browse the repository at this point in the history 
* [Lens] Declarative right panel

* Fix memoized operations

* Add error checking

* Fix dimension panel tests

* More updates

* Fix all editor frame tests

* Fix jest tests

* Fix bug with removing dimension

* Update tests

* Fix frame tests

* Fix all tests I could find

* Remove debugger

* Style config panels

* Update i18n

* Fix dashboard test

* Fix bug when switching index patterns
  • Loading branch information
Wylie Conlon authored Mar 17, 2020
1 parent 9c3c2a2 commit caed9ba
Show file tree
Hide file tree
Showing 54 changed files with 2,777 additions and 2,700 deletions.
21 changes: 0 additions & 21 deletions x-pack/legacy/plugins/lens/public/_config_panel.scss
View file

This file was deleted.

193 changes: 80 additions & 113 deletions x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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: [],
},
],
});
Expand Down Expand Up @@ -88,7 +78,6 @@ describe('Datatable Visualization', () => {

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

describe('DataTableLayer', () => {
it('allows all kinds of operations', () => {
const setState = jest.fn();
const datasource = createMockDatasource();
const layer = { layerId: 'a', columns: ['b', 'c'] };
describe('#getConfiguration', () => {
it('returns a single layer option', () => {
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.getConfiguration({
layerId: 'first',
state: {
layers: [{ layerId: 'first', columns: [] }],
},
frame,
}).groups
).toHaveLength(1);
});

expect(datasource.publicAPIMock.renderDimensionPanel).toHaveBeenCalled();
it('allows all kinds of operations', () => {
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.getConfiguration({
layerId: 'first',
state: {
layers: [{ layerId: 'first', columns: [] }],
},
frame,
}).groups[0].filterOperations;

const baseOperation: Operation = {
dataType: 'string',
Expand All @@ -253,108 +248,80 @@ 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.getConfiguration({
layerId: 'a',
state: { layers: [layer] },
frame,
}).groups[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',
})
).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',
groupId: '',
})
).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',
groupId: '',
})
).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

0 comments on commit caed9ba

Please sign in to comment.