[Lens] Switch indexpattern manually

x-pack/legacy/plugins/lens/public/indexpattern_plugin/__mocks__/operations.ts

@@ -17,4 +17,5 @@ export const {
   getOperationTypesForField,
   getOperationResultType,
   operationDefinitionMap,
+  isColumnTransferable,
 } = actual;

x-pack/legacy/plugins/lens/public/indexpattern_plugin/__mocks__/state_helpers.ts

@@ -7,6 +7,7 @@
 const actual = jest.requireActual('../state_helpers');
 
 jest.spyOn(actual, 'changeColumn');
+jest.spyOn(actual, 'updateLayerIndexPattern');
 
 export const {
   getColumnOrder,
@@ -15,4 +16,6 @@ export const {
   updateColumnParam,
   sortByField,
   hasField,
+  updateLayerIndexPattern,
+  isLayerTransferable,
 } = actual;

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx

@@ -20,14 +20,14 @@ const initialState: IndexPatternPrivateState = {
   layers: {
     first: {
       indexPatternId: '1',
-      columnOrder: ['col1'],
+      columnOrder: ['col1', 'col2'],
       columns: {
         col1: {
           label: 'My Op',
           dataType: 'string',
           isBucketed: true,
           operationType: 'terms',
-          sourceField: 'op',
+          sourceField: 'source',
           params: {
             size: 5,
             orderDirection: 'asc',
@@ -36,6 +36,40 @@ const initialState: IndexPatternPrivateState = {
             },
           },
         },
+        col2: {
+          label: 'My Op',
+          dataType: 'number',
+          isBucketed: false,
+          operationType: 'avg',
+          sourceField: 'memory',
+        },
+      },
+    },
+    second: {
+      indexPatternId: '1',
+      columnOrder: ['col1', 'col2'],
+      columns: {
+        col1: {
+          label: 'My Op',
+          dataType: 'string',
+          isBucketed: true,
+          operationType: 'terms',
+          sourceField: 'source',
+          params: {
+            size: 5,
+            orderDirection: 'asc',
+            orderBy: {
+              type: 'alphabetical',
+            },
+          },
+        },
+        col2: {
+          label: 'My Op',
+          dataType: 'number',
+          isBucketed: false,
+          operationType: 'avg',
+          sourceField: 'bytes',
+        },
       },
     },
   },
@@ -106,9 +140,6 @@ const initialState: IndexPatternPrivateState = {
               agg: 'histogram',
               interval: 1000,
             },
-            avg: {
-              agg: 'avg',
-            },
             max: {
               agg: 'max',
             },
@@ -133,6 +164,31 @@ const initialState: IndexPatternPrivateState = {
         },
       ],
     },
+    '3': {
+      id: '3',
+      title: 'my-compatible-pattern',
+      timeFieldName: 'timestamp',
+      fields: [
+        {
+          name: 'timestamp',
+          type: 'date',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'bytes',
+          type: 'number',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'source',
+          type: 'string',
+          aggregatable: true,
+          searchable: true,
+        },
+      ],
+    },
   },
 };
 describe('IndexPattern Data Panel', () => {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

@@ -333,4 +333,4 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   );
 };
 
-const MemoizedDataPanel = memo(InnerIndexPatternDataPanel);
+export const MemoizedDataPanel = memo(InnerIndexPatternDataPanel);

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx

@@ -8,7 +8,6 @@ import _ from 'lodash';
 import React from 'react';
 import { render } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
-import { EuiText } from '@elastic/eui';
 import {
   DatasourceDimensionPanelProps,
   DatasourceDataPanelProps,
@@ -28,6 +27,7 @@ import {
 } from './indexpattern_suggestions';
 
 import { isDraggedField } from './utils';
+import { LayerPanel } from './layerpanel';
 import { Datasource, DataType } from '..';
 
 export type OperationType = IndexPatternColumn['operationType'];
@@ -312,11 +312,7 @@ export function getIndexPatternDatasource({
 
         renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps) => {
           render(
-            <I18nProvider>
-              <EuiText size="s">
-                {state.indexPatterns[state.layers[props.layerId].indexPatternId].title}
-              </EuiText>
-            </I18nProvider>,
+            <LayerPanel state={state} setState={newState => setState(newState)} {...props} />,
             domElement
           );
         },

x-pack/legacy/plugins/lens/public/indexpattern_plugin/layerpanel.test.tsx

@@ -0,0 +1,234 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import { EuiComboBox } from '@elastic/eui';
+import { IndexPatternPrivateState } from './indexpattern';
+import { act } from 'react-dom/test-utils';
+import { IndexPatternLayerPanelProps, LayerPanel } from './layerpanel';
+import { updateLayerIndexPattern } from './state_helpers';
+
+jest.mock('./state_helpers');
+
+const initialState: IndexPatternPrivateState = {
+  currentIndexPatternId: '1',
+  layers: {
+    first: {
+      indexPatternId: '1',
+      columnOrder: ['col1', 'col2'],
+      columns: {
+        col1: {
+          label: 'My Op',
+          dataType: 'string',
+          isBucketed: true,
+          operationType: 'terms',
+          sourceField: 'source',
+          params: {
+            size: 5,
+            orderDirection: 'asc',
+            orderBy: {
+              type: 'alphabetical',
+            },
+          },
+        },
+        col2: {
+          label: 'My Op',
+          dataType: 'number',
+          isBucketed: false,
+          operationType: 'avg',
+          sourceField: 'memory',
+        },
+      },
+    },
+  },
+  indexPatterns: {
+    '1': {
+      id: '1',
+      title: 'my-fake-index-pattern',
+      timeFieldName: 'timestamp',
+      fields: [
+        {
+          name: 'timestamp',
+          type: 'date',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'bytes',
+          type: 'number',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'memory',
+          type: 'number',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'unsupported',
+          type: 'geo',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'source',
+          type: 'string',
+          aggregatable: true,
+          searchable: true,
+        },
+      ],
+    },
+    '2': {
+      id: '2',
+      title: 'my-fake-restricted-pattern',
+      timeFieldName: 'timestamp',
+      fields: [
+        {
+          name: 'timestamp',
+          type: 'date',
+          aggregatable: true,
+          searchable: true,
+          aggregationRestrictions: {
+            date_histogram: {
+              agg: 'date_histogram',
+              fixed_interval: '1d',
+              delay: '7d',
+              time_zone: 'UTC',
+            },
+          },
+        },
+        {
+          name: 'bytes',
+          type: 'number',
+          aggregatable: true,
+          searchable: true,
+          aggregationRestrictions: {
+            histogram: {
+              agg: 'histogram',
+              interval: 1000,
+            },
+            max: {
+              agg: 'max',
+            },
+            min: {
+              agg: 'min',
+            },
+            sum: {
+              agg: 'sum',
+            },
+          },
+        },
+        {
+          name: 'source',
+          type: 'string',
+          aggregatable: true,
+          searchable: true,
+          aggregationRestrictions: {
+            terms: {
+              agg: 'terms',
+            },
+          },
+        },
+      ],
+    },
+    '3': {
+      id: '3',
+      title: 'my-compatible-pattern',
+      timeFieldName: 'timestamp',
+      fields: [
+        {
+          name: 'timestamp',
+          type: 'date',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'memory',
+          type: 'number',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'source',
+          type: 'string',
+          aggregatable: true,
+          searchable: true,
+        },
+      ],
+    },
+  },
+};
+describe('Layer Data Panel', () => {
+  let defaultProps: IndexPatternLayerPanelProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      layerId: 'first',
+      state: initialState,
+      setState: jest.fn(),
+    };
+  });
+
+  it('should list all index patterns but the current one', () => {
+    const instance = shallow(<LayerPanel {...defaultProps} />);
+    act(() => {
+      instance
+        .find('[data-test-subj="layerIndexPatternLabel"]')
+        .first()
+        .simulate('click');
+    });
+
+    expect(
+      instance
+        .find(EuiComboBox)
+        .prop('options')!
+        .map(option => option.label)
+    ).toEqual(['my-fake-restricted-pattern', 'my-compatible-pattern']);
+  });
+
+  it('should indicate whether the switch can be made without lossing data', () => {
+    const instance = shallow(<LayerPanel {...defaultProps} />);
+    act(() => {
+      instance
+        .find('[data-test-subj="layerIndexPatternLabel"]')
+        .first()
+        .simulate('click');
+    });
+
+    expect(
+      instance
+        .find(EuiComboBox)
+        .prop('options')!
+        .map(option => (option.value as { isTransferable: boolean }).isTransferable)
+    ).toEqual([false, true]);
+  });
+
+  it('should switch using updateLayerIndexPattern', () => {
+    const instance = shallow(<LayerPanel {...defaultProps} />);
+    act(() => {
+      instance
+        .find('[data-test-subj="layerIndexPatternLabel"]')
+        .first()
+        .simulate('click');
+    });
+
+    act(() => {
+      instance.find(EuiComboBox).prop('onChange')!([
+        {
+          label: 'my-compatible-pattern',
+          value: defaultProps.state.indexPatterns['3'],
+        },
+      ]);
+    });
+
+    expect(updateLayerIndexPattern).toHaveBeenCalledWith(
+      defaultProps.state.layers.first,
+      defaultProps.state.indexPatterns['3']
+    );
+  });
+});