[lens] Lens Filter Ratio (#40196)

* WIP filter ratio * Fix test issues * Pass dependencies through plugin like new platform * Pass props into filter ratio popover editor * Provide mocks to filter_ratio popover test * Add another test * Clean up to prepare for review * Clean up unnecessary changes * Respond to review comments * Fix tests
elastic · Jul 12, 2019 · 5c6f552 · 5c6f552
1 parent b0a2325
commit 5c6f552
Show file tree

Hide file tree

Showing 22 changed files with 743 additions and 71 deletions.
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx
@@ -381,5 +381,4 @@ export class QueryBarUI extends Component<Props, State> {
   }
 }
 
-// @ts-ignore
 export const QueryBar = injectI18n(QueryBarUI);
diff --git a/src/plugins/data/common/index.ts b/src/plugins/data/common/index.ts
@@ -18,3 +18,4 @@
  */
 
 export * from './expressions';
+export * from './query';
diff --git a/src/plugins/data/common/query/index.ts b/src/plugins/data/common/query/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './types';
diff --git a/x-pack/dev-tools/jest/create_jest_config.js b/x-pack/dev-tools/jest/create_jest_config.js
@@ -46,6 +46,7 @@ export function createJestConfig({
     ],
     transform: {
       '^.+\\.(js|tsx?)$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`,
+      '^.+\\.html?$': 'jest-raw-loader',
     },
     transformIgnorePatterns: [
       // ignore all node_modules except @elastic/eui which requires babel transforms to handle dynamic import()

diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/plugin.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/plugin.tsx
@@ -11,7 +11,6 @@ import { datatableVisualization } from './visualization';
 import {
   renderersRegistry,
   functionsRegistry,
-  // @ts-ignore untyped dependency
 } from '../../../../../../src/legacy/core_plugins/interpreter/public/registries';
 import { InterpreterSetup, RenderFunction } from '../interpreter_types';
 import { datatable, datatableColumns, datatableRenderer } from './expression';

diff --git a/x-pack/legacy/plugins/lens/public/index.ts b/x-pack/legacy/plugins/lens/public/index.ts
@@ -7,6 +7,8 @@
 export * from './types';
 
 import 'ui/autoload/all';
+// Used for kuery autocomplete
+import 'uiExports/autocompleteProviders';
 // Used to run esaggs queries
 import 'uiExports/fieldFormats';
 import 'uiExports/search';

diff --git a/...k/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx b/...k/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
@@ -6,7 +6,10 @@
 
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { EuiComboBox, EuiSideNav, EuiPopover } from '@elastic/eui';
+import { data } from '../../../../../../../src/legacy/core_plugins/data/public/setup';
+import { localStorage } from 'ui/storage/storage_service';
 import { IndexPatternPrivateState } from '../indexpattern';
 import { changeColumn } from '../state_helpers';
 import { getPotentialColumns } from '../operations';
@@ -15,9 +18,17 @@ import { DropHandler, DragContextState } from '../../drag_drop';
 import { createMockedDragDropContext } from '../mocks';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
 
+jest.mock('../loader');
 jest.mock('../state_helpers');
 jest.mock('../operations');
 
+// Used by indexpattern plugin, which is a dependency of a dependency
+jest.mock('ui/chrome');
+jest.mock('ui/storage/storage_service');
+// Contains old and new platform data plugins, used for interpreter and filter ratio
+jest.mock('ui/new_platform');
+jest.mock('plugins/data/setup', () => ({ data: { query: { ui: {} } } }));
+
 const expectedIndexPatterns = {
   1: {
     id: '1',
@@ -98,6 +109,8 @@ describe('IndexPatternDimensionPanel', () => {
       setState,
       columnId: 'col1',
       filterOperations: () => true,
+      dataPlugin: data,
+      storage: localStorage,
     };
 
     jest.clearAllMocks();
@@ -164,6 +177,8 @@ describe('IndexPatternDimensionPanel', () => {
 
     const options = wrapper.find(EuiComboBox).prop('options');
 
+    expect(options).toHaveLength(2);
+
     expect(options![0].label).toEqual('Document');
 
     expect(options![1].options!.map(({ label }) => label)).toEqual([
@@ -273,7 +288,9 @@ describe('IndexPatternDimensionPanel', () => {
     const comboBox = wrapper.find(EuiComboBox)!;
     const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'memory')!;
 
-    comboBox.prop('onChange')!([option]);
+    act(() => {
+      comboBox.prop('onChange')!([option]);
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...initialState,
@@ -296,7 +313,9 @@ describe('IndexPatternDimensionPanel', () => {
     const comboBox = wrapper.find(EuiComboBox)!;
     const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
 
-    comboBox.prop('onChange')!([option]);
+    act(() => {
+      comboBox.prop('onChange')!([option]);
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -336,7 +355,9 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-min"]').simulate('click');
+    act(() => {
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-min"]').simulate('click');
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -356,9 +377,11 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    wrapper
-      .find('button[data-test-subj="lns-indexPatternDimension-date_histogram"]')
-      .simulate('click');
+    act(() => {
+      wrapper
+        .find('button[data-test-subj="lns-indexPatternDimension-date_histogram"]')
+        .simulate('click');
+    });
 
     expect(setState).not.toHaveBeenCalled();
   });
@@ -368,9 +391,11 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    wrapper
-      .find('input[data-test-subj="indexPattern-label-edit"]')
-      .simulate('change', { target: { value: 'New Label' } });
+    act(() => {
+      wrapper
+        .find('input[data-test-subj="indexPattern-label-edit"]')
+        .simulate('change', { target: { value: 'New Label' } });
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -390,7 +415,9 @@ describe('IndexPatternDimensionPanel', () => {
 
       openPopover();
 
-      wrapper.find('button[data-test-subj="lns-indexPatternDimension-terms"]').simulate('click');
+      act(() => {
+        wrapper.find('button[data-test-subj="lns-indexPatternDimension-terms"]').simulate('click');
+      });
 
       expect(setState).not.toHaveBeenCalled();
     });
@@ -428,7 +455,9 @@ describe('IndexPatternDimensionPanel', () => {
 
       wrapper.find('button[data-test-subj="lns-indexPatternDimension-terms"]').simulate('click');
 
-      wrapper.find(EuiPopover).prop('closePopover')!();
+      act(() => {
+        wrapper.find(EuiPopover).prop('closePopover')!();
+      });
 
       openPopover();
 
@@ -459,12 +488,16 @@ describe('IndexPatternDimensionPanel', () => {
 
       openPopover();
 
-      wrapper.find('button[data-test-subj="lns-indexPatternDimension-terms"]').simulate('click');
+      act(() => {
+        wrapper.find('button[data-test-subj="lns-indexPatternDimension-terms"]').simulate('click');
+      });
 
       const comboBox = wrapper.find(EuiComboBox)!;
       const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
 
-      comboBox.prop('onChange')!([option]);
+      act(() => {
+        comboBox.prop('onChange')!([option]);
+      });
 
       expect(setState).toHaveBeenCalledWith({
         ...state,
@@ -488,7 +521,9 @@ describe('IndexPatternDimensionPanel', () => {
     const comboBox = wrapper.find(EuiComboBox);
     const options = comboBox.prop('options');
 
-    comboBox.prop('onChange')!([options![1].options![0]]);
+    act(() => {
+      comboBox.prop('onChange')!([options![1].options![0]]);
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -541,7 +576,7 @@ describe('IndexPatternDimensionPanel', () => {
         .find(EuiSideNav)
         .prop('items')[0]
         .items.map(({ name }) => name)
-    ).toEqual(['Count', 'Maximum', 'Average', 'Sum', 'Minimum']);
+    ).toEqual(['Maximum', 'Average', 'Sum', 'Minimum', 'Count', 'Filter Ratio']);
   });
 
   it('should add a column on selection of a field', () => {
@@ -552,7 +587,9 @@ describe('IndexPatternDimensionPanel', () => {
     const comboBox = wrapper.find(EuiComboBox)!;
     const option = comboBox.prop('options')![1].options![0];
 
-    comboBox.prop('onChange')!([option]);
+    act(() => {
+      comboBox.prop('onChange')!([option]);
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -588,10 +625,12 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    wrapper
-      .find('[data-test-subj="lns-indexPatternDimension-min"]')
-      .first()
-      .prop('onClick')!({} as React.MouseEvent<{}, MouseEvent>);
+    act(() => {
+      wrapper
+        .find('[data-test-subj="lns-indexPatternDimension-min"]')
+        .first()
+        .prop('onClick')!({} as React.MouseEvent<{}, MouseEvent>);
+    });
 
     expect(changeColumn).toHaveBeenCalledWith(
       initialState,
@@ -610,7 +649,9 @@ describe('IndexPatternDimensionPanel', () => {
       'EuiButtonIcon[data-test-subj="indexPattern-dimensionPopover-remove"]'
     );
 
-    clearButton.simulate('click');
+    act(() => {
+      clearButton.simulate('click');
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -624,7 +665,9 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    wrapper.find(EuiComboBox).prop('onChange')!([]);
+    act(() => {
+      wrapper.find(EuiComboBox).prop('onChange')!([]);
+    });
 
     expect(setState).toHaveBeenCalledWith({
       ...state,
@@ -642,7 +685,14 @@ describe('IndexPatternDimensionPanel', () => {
           foo: {
             id: 'foo',
             title: 'Foo pattern',
-            fields: [{ aggregatable: true, name: 'bar', searchable: true, type: 'number' }],
+            fields: [
+              {
+                aggregatable: true,
+                name: 'bar',
+                searchable: true,
+                type: 'number',
+              },
+            ],
           },
         },
       };
@@ -737,12 +787,14 @@ describe('IndexPatternDimensionPanel', () => {
         />
       );
 
-      const onDrop = wrapper
-        .find('[data-test-subj="indexPattern-dropTarget"]')
-        .first()
-        .prop('onDrop') as DropHandler;
+      act(() => {
+        const onDrop = wrapper
+          .find('[data-test-subj="indexPattern-dropTarget"]')
+          .first()
+          .prop('onDrop') as DropHandler;
 
-      onDrop(dragging);
+        onDrop(dragging);
+      });
 
       expect(setState).toBeCalledTimes(1);
       expect(setState).toHaveBeenCalledWith(
@@ -773,12 +825,14 @@ describe('IndexPatternDimensionPanel', () => {
         />
       );
 
-      const onDrop = wrapper
-        .find('[data-test-subj="indexPattern-dropTarget"]')
-        .first()
-        .prop('onDrop') as DropHandler;
+      act(() => {
+        const onDrop = wrapper
+          .find('[data-test-subj="indexPattern-dropTarget"]')
+          .first()
+          .prop('onDrop') as DropHandler;
 
-      onDrop(dragging);
+        onDrop(dragging);
+      });
 
       expect(setState).toBeCalledTimes(1);
       expect(setState).toHaveBeenCalledWith(
@@ -808,12 +862,14 @@ describe('IndexPatternDimensionPanel', () => {
         />
       );
 
-      const onDrop = wrapper
-        .find('[data-test-subj="indexPattern-dropTarget"]')
-        .first()
-        .prop('onDrop') as DropHandler;
+      act(() => {
+        const onDrop = wrapper
+          .find('[data-test-subj="indexPattern-dropTarget"]')
+          .first()
+          .prop('onDrop') as DropHandler;
 
-      onDrop(dragging);
+        onDrop(dragging);
+      });
 
       expect(setState).not.toBeCalled();
     });

diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx
@@ -7,7 +7,9 @@
 import _ from 'lodash';
 import React from 'react';
 import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon } from '@elastic/eui';
+import { Storage } from 'ui/storage';
 import { i18n } from '@kbn/i18n';
+import { DataSetup } from '../../../../../../../src/legacy/core_plugins/data/public';
 import { DatasourceDimensionPanelProps } from '../../types';
 import {
   IndexPatternColumn,
@@ -25,6 +27,8 @@ export type IndexPatternDimensionPanelProps = DatasourceDimensionPanelProps & {
   state: IndexPatternPrivateState;
   setState: (newState: IndexPatternPrivateState) => void;
   dragDropContext: DragContextState;
+  dataPlugin: DataSetup;
+  storage: Storage;
 };
 
 export function IndexPatternDimensionPanel(props: IndexPatternDimensionPanelProps) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -381,5 +381,4 @@ export class QueryBarUI extends Component<Props, State> { @@
       }
     }
-    // @ts-ignore
     export const QueryBar = injectI18n(QueryBarUI);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,3 +18,4 @@
		*/

		export * from './expressions';
		export * from './query';