[Lens] Simplify state management from visualization (elastic#58279)

* [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

x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.test.tsx

@@ -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,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',
@@ -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']);
     });
   });
 });