[lens] Index pattern data panel (initial) (#37015)

* [lens] Index pattern switcher

* Respond to review comments

x-pack/plugins/lens/public/indexpattern_plugin/indexpattern.test.ts → x-pack/plugins/lens/public/indexpattern_plugin/indexpattern.test.tsx

@@ -4,10 +4,15 @@
  * 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 {
   getIndexPatternDatasource,
   IndexPatternPersistedState,
   IndexPatternPrivateState,
+  IndexPatternDataPanel,
+  IndexPatternDimensionPanel,
 } from './indexpattern';
 import { DatasourcePublicAPI, Operation, Datasource } from '../types';
 
@@ -75,7 +80,7 @@ describe('IndexPattern Data Source', () => {
     indexPatternDatasource = getIndexPatternDatasource();
 
     persistedState = {
-      currentIndexPattern: '1',
+      currentIndexPatternId: '1',
       columnOrder: ['col1'],
       columns: {
         col1: {
@@ -95,7 +100,7 @@ describe('IndexPattern Data Source', () => {
     it('should load a default state', async () => {
       const state = await indexPatternDatasource.initialize();
       expect(state).toEqual({
-        currentIndexPattern: '1',
+        currentIndexPatternId: '1',
         indexPatterns: expectedIndexPatterns,
         columns: {},
         columnOrder: [],
@@ -104,14 +109,47 @@ describe('IndexPattern Data Source', () => {
 
     it('should initialize from saved state', async () => {
       const state = await indexPatternDatasource.initialize(persistedState);
-
       expect(state).toEqual({
         ...persistedState,
         indexPatterns: expectedIndexPatterns,
       });
     });
   });
 
+  describe('#renderDataPanel', () => {
+    let state: IndexPatternPrivateState;
+
+    beforeEach(async () => {
+      state = await indexPatternDatasource.initialize(persistedState);
+    });
+
+    it('should match snapshot', () => {
+      expect(
+        shallow(<IndexPatternDataPanel state={state} setState={() => {}} />)
+      ).toMatchSnapshot();
+    });
+
+    it('should call setState when the index pattern is switched', async () => {
+      const setState = jest.fn();
+
+      const wrapper = shallow(<IndexPatternDataPanel {...{ state, setState }} />);
+
+      const comboBox = wrapper.find(EuiComboBox);
+
+      comboBox.prop('onChange')!([
+        {
+          label: expectedIndexPatterns['2'].title,
+          value: '2',
+        },
+      ]);
+
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        currentIndexPatternId: '2',
+      });
+    });
+  });
+
   describe('#getPersistedState', () => {
     it('should persist from saved state', async () => {
       const state = await indexPatternDatasource.initialize(persistedState);
@@ -148,5 +186,25 @@ describe('IndexPattern Data Source', () => {
         } as Operation);
       });
     });
+
+    describe('renderDimensionPanel', () => {
+      let state: IndexPatternPrivateState;
+
+      beforeEach(async () => {
+        state = await indexPatternDatasource.initialize(persistedState);
+      });
+
+      it('should render a dimension panel', () => {
+        const wrapper = shallow(
+          <IndexPatternDimensionPanel
+            state={state}
+            setState={() => {}}
+            filterOperations={(operation: Operation) => true}
+          />
+        );
+
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
   });
 });

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

@@ -5,9 +5,10 @@
  */
 
 import React from 'react';
+import { render } from 'react-dom';
 import { Chrome } from 'ui/chrome';
 import { ToastNotifications } from 'ui/notify/toasts/toast_notifications';
-import { render } from 'react-dom';
+import { EuiComboBox } from '@elastic/eui';
 import { Datasource, DataType } from '..';
 import { DatasourceDimensionPanelProps, DatasourceDataPanelProps } from '../types';
 import { getIndexPatterns } from './loader';
@@ -41,7 +42,7 @@ export interface IndexPatternField {
 }
 
 export interface IndexPatternPersistedState {
-  currentIndexPattern: string;
+  currentIndexPatternId: string;
 
   columnOrder: string[];
   columns: Record<string, IndexPatternColumn>;
@@ -51,6 +52,56 @@ export type IndexPatternPrivateState = IndexPatternPersistedState & {
   indexPatterns: Record<string, IndexPattern>;
 };
 
+export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatternPrivateState>) {
+  return (
+    <div>
+      Index Pattern Data Source
+      <div>
+        <EuiComboBox
+          data-test-subj="indexPattern-switcher"
+          options={Object.values(props.state.indexPatterns).map(({ title, id }) => ({
+            label: title,
+            value: id,
+          }))}
+          selectedOptions={
+            props.state.currentIndexPatternId
+              ? [
+                  {
+                    label: props.state.indexPatterns[props.state.currentIndexPatternId].title,
+                    value: props.state.indexPatterns[props.state.currentIndexPatternId].id,
+                  },
+                ]
+              : undefined
+          }
+          singleSelection={{ asPlainText: true }}
+          isClearable={false}
+          onChange={choices => {
+            props.setState({
+              ...props.state,
+              currentIndexPatternId: choices[0].value as string,
+            });
+          }}
+        />
+        <div>
+          {props.state.currentIndexPatternId &&
+            props.state.indexPatterns[props.state.currentIndexPatternId].fields.map(field => (
+              <div key={field.name}>{field.name}</div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type IndexPatternDimensionPanelProps = DatasourceDimensionPanelProps & {
+  state: IndexPatternPrivateState;
+  setState: (newState: IndexPatternPrivateState) => void;
+};
+
+export function IndexPatternDimensionPanel(props: IndexPatternDimensionPanelProps) {
+  return <div>Dimension Panel</div>;
+}
+
 export function getIndexPatternDatasource(chrome: Chrome, toastNotifications: ToastNotifications) {
   // Not stateful. State is persisted to the frame
   const indexPatternDatasource: Datasource<IndexPatternPrivateState, IndexPatternPersistedState> = {
@@ -71,15 +122,15 @@ export function getIndexPatternDatasource(chrome: Chrome, toastNotifications: To
         };
       }
       return {
-        currentIndexPattern: indexPatternObjects ? indexPatternObjects[0].id : '',
+        currentIndexPatternId: indexPatternObjects ? indexPatternObjects[0].id : '',
         indexPatterns,
         columns: {},
         columnOrder: [],
       };
     },
 
-    getPersistableState({ currentIndexPattern, columns, columnOrder }: IndexPatternPrivateState) {
-      return { currentIndexPattern, columns, columnOrder };
+    getPersistableState({ currentIndexPatternId, columns, columnOrder }: IndexPatternPrivateState) {
+      return { currentIndexPatternId, columns, columnOrder };
     },
 
     toExpression(state: IndexPatternPrivateState) {
@@ -90,18 +141,7 @@ export function getIndexPatternDatasource(chrome: Chrome, toastNotifications: To
       domElement: Element,
       props: DatasourceDataPanelProps<IndexPatternPrivateState>
     ) {
-      render(
-        <div>
-          Index Pattern Data Source
-          <div>
-            {props.state.currentIndexPattern &&
-              Object.keys(props.state.indexPatterns).map(key => (
-                <div key={key}>{props.state.indexPatterns[key].title}</div>
-              ))}
-          </div>
-        </div>,
-        domElement
-      );
+      render(<IndexPatternDataPanel {...props} />, domElement);
     },
 
     getPublicAPI(state, setState) {
@@ -123,7 +163,12 @@ export function getIndexPatternDatasource(chrome: Chrome, toastNotifications: To
           return null;
         },
 
-        renderDimensionPanel: (domElement: Element, props: DatasourceDimensionPanelProps) => {},
+        renderDimensionPanel: (domElement: Element, props: DatasourceDimensionPanelProps) => {
+          render(
+            <IndexPatternDimensionPanel state={state} setState={setState} {...props} />,
+            domElement
+          );
+        },
 
         removeColumnInTableSpec: (columnId: string) => [],
         moveColumnTo: (columnId: string, targetIndex: number) => {},