[7.x] [Lens] Index pattern selection using EuiSelectable (#46350)

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -68,7 +68,7 @@ const PreviewRenderer = ({
   }, [expression]);
 
   return expressionError ? (
-    <div className="lnsSidebar__suggestionIcon">
+    <div className="lnsSuggestionPanel__suggestionIcon">
       <EuiIconTip
         size="xl"
         color="danger"
@@ -83,8 +83,8 @@ const PreviewRenderer = ({
     </div>
   ) : (
     <ExpressionRendererComponent
-      className={classNames('lnsSuggestionChartWrapper', {
-        'lnsSuggestionChartWrapper--withLabel': withLabel,
+      className={classNames('lnsSuggestionPanel__chartWrapper', {
+        'lnsSuggestionPanel__chartWrapper--withLabel': withLabel,
       })}
       expression={expression}
       onRenderFailure={(e: unknown) => {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss

@@ -13,7 +13,7 @@
 
   & > .lnsInnerIndexPatternDataPanel__changeLink {
     flex: 0 0 auto;
-    margin: 0 $euiSize;
+    margin: 0 (-$euiSizeS) 0 $euiSizeXS;
   }
 }
 

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

@@ -0,0 +1,126 @@
+/*
+ * 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 _ from 'lodash';
+import React, { useState } from 'react';
+import {
+  EuiButtonEmpty,
+  EuiIconTip,
+  EuiPopover,
+  EuiSelectable,
+  EuiButtonEmptyProps,
+} from '@elastic/eui';
+import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
+import { i18n } from '@kbn/i18n';
+import { IndexPatternPrivateState, IndexPatternLayer } from './indexpattern';
+import { isLayerTransferable } from './state_helpers';
+
+export interface ChangeIndexPatternTriggerProps extends EuiButtonEmptyProps {
+  label: string;
+}
+
+export function ChangeIndexPattern({
+  indexPatterns,
+  currentIndexPatternId,
+  onChangeIndexPattern,
+  trigger,
+  layer,
+  selectableProps,
+}: {
+  trigger: ChangeIndexPatternTriggerProps;
+  indexPatterns: IndexPatternPrivateState['indexPatterns'];
+  onChangeIndexPattern: (newId: string) => void;
+  currentIndexPatternId?: string;
+  layer?: IndexPatternLayer;
+  selectableProps?: EuiSelectableProps;
+}) {
+  const [isPopoverOpen, setPopoverIsOpen] = useState(false);
+  const [selectedID, setSelectedID] = useState(
+    layer ? layer.indexPatternId : currentIndexPatternId
+  );
+
+  const indexPatternList = Object.values(indexPatterns).map(indexPattern => ({
+    ...indexPattern,
+    isTransferable: layer ? isLayerTransferable(layer, indexPattern) : undefined,
+  }));
+
+  const createTrigger = function() {
+    const { label, ...rest } = trigger;
+    return (
+      <EuiButtonEmpty
+        flush="left"
+        className="eui-textTruncate"
+        size="xs"
+        onClick={() => setPopoverIsOpen(!isPopoverOpen)}
+        {...rest}
+      >
+        {label}
+      </EuiButtonEmpty>
+    );
+  };
+
+  return (
+    <>
+      <EuiPopover
+        button={createTrigger()}
+        isOpen={isPopoverOpen}
+        closePopover={() => setPopoverIsOpen(false)}
+        className="eui-textTruncate"
+        anchorClassName="eui-textTruncate"
+        display="block"
+        panelPaddingSize="s"
+        ownFocus
+      >
+        <div style={{ width: 320 }}>
+          <EuiSelectable
+            {...selectableProps}
+            searchable
+            singleSelection="always"
+            options={indexPatternList.map(indexPattern => ({
+              id: indexPattern.id,
+              label: indexPattern.title,
+              checked: indexPattern.id === selectedID ? 'on' : undefined,
+              append:
+                indexPattern && indexPattern.isTransferable !== false ? (
+                  undefined
+                ) : (
+                  <EuiIconTip
+                    color="warning"
+                    type="minusInCircle"
+                    content={i18n.translate(
+                      'xpack.lens.indexPattern.lossyIndexPatternSwitchDescription',
+                      {
+                        defaultMessage:
+                          'Not all operations are compatible with this index pattern and will be removed on switching.',
+                      }
+                    )}
+                  />
+                ),
+            }))}
+            onChange={choices => {
+              // @ts-ignore
+              const newSelectedID = choices.find(({ checked }) => checked)!.id;
+              onChangeIndexPattern(newSelectedID);
+              setSelectedID(newSelectedID);
+              setPopoverIsOpen(false);
+            }}
+            searchProps={{
+              compressed: true,
+              ...(selectableProps ? selectableProps.searchProps : undefined),
+            }}
+          >
+            {(list, search) => (
+              <>
+                {search}
+                {list}
+              </>
+            )}
+          </EuiSelectable>
+        </div>
+      </EuiPopover>
+    </>
+  );
+}

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

@@ -6,13 +6,13 @@
 
 import { shallow, mount } from 'enzyme';
 import React, { ChangeEvent } from 'react';
-import { EuiComboBox } from '@elastic/eui';
 import { IndexPatternPrivateState, IndexPatternColumn } from './indexpattern';
 import { createMockedDragDropContext } from './mocks';
 import { InnerIndexPatternDataPanel, IndexPatternDataPanel, MemoizedDataPanel } from './datapanel';
 import { FieldItem } from './field_item';
 import { act } from 'react-dom/test-utils';
 import { coreMock } from 'src/core/public/mocks';
+import { ChangeIndexPattern } from './change_indexpattern';
 
 jest.mock('ui/new_platform');
 jest.mock('./loader');
@@ -213,8 +213,6 @@ describe('IndexPattern Data Panel', () => {
       dragDropContext: createMockedDragDropContext(),
       currentIndexPatternId: '1',
       indexPatterns: initialState.indexPatterns,
-      showIndexPatternSwitcher: false,
-      setShowIndexPatternSwitcher: jest.fn(),
       onChangeIndexPattern: jest.fn(),
       core,
       dateRange: {
@@ -229,24 +227,22 @@ describe('IndexPattern Data Panel', () => {
 
   it('should update index pattern of layer on switch if it is a single empty one', async () => {
     const setStateSpy = jest.fn();
+    const state = {
+      ...initialState,
+      layers: { first: { indexPatternId: '1', columnOrder: [], columns: {} } },
+    };
     const wrapper = shallow(
       <IndexPatternDataPanel
         {...defaultProps}
-        state={{
-          ...initialState,
-          layers: { first: { indexPatternId: '1', columnOrder: [], columns: {} } },
-        }}
+        state={state}
         setState={setStateSpy}
         dragDropContext={{ dragging: {}, setDragging: () => {} }}
       />
     );
 
-    act(() => {
-      wrapper.find(MemoizedDataPanel).prop('setShowIndexPatternSwitcher')!(true);
-    });
     wrapper.find(MemoizedDataPanel).prop('onChangeIndexPattern')!('2');
 
-    expect(setStateSpy).toHaveBeenCalledWith({
+    expect(setStateSpy.mock.calls[0][0](state)).toEqual({
       ...initialState,
       layers: { first: { indexPatternId: '2', columnOrder: [], columns: {} } },
       currentIndexPatternId: '2',
@@ -271,12 +267,12 @@ describe('IndexPattern Data Panel', () => {
       />
     );
 
-    act(() => {
-      wrapper.find(MemoizedDataPanel).prop('setShowIndexPatternSwitcher')!(true);
-    });
     wrapper.find(MemoizedDataPanel).prop('onChangeIndexPattern')!('2');
 
-    expect(setStateSpy).toHaveBeenCalledWith({ ...state, currentIndexPatternId: '2' });
+    expect(setStateSpy.mock.calls[0][0](state)).toEqual({
+      ...state,
+      currentIndexPatternId: '2',
+    });
   });
 
   it('should not update index pattern of layer on switch if there are columns configured', async () => {
@@ -300,12 +296,12 @@ describe('IndexPattern Data Panel', () => {
       />
     );
 
-    act(() => {
-      wrapper.find(MemoizedDataPanel).prop('setShowIndexPatternSwitcher')!(true);
-    });
     wrapper.find(MemoizedDataPanel).prop('onChangeIndexPattern')!('2');
 
-    expect(setStateSpy).toHaveBeenCalledWith({ ...state, currentIndexPatternId: '2' });
+    expect(setStateSpy.mock.calls[0][0](state)).toEqual({
+      ...state,
+      currentIndexPatternId: '2',
+    });
   });
 
   it('should render a warning if there are no index patterns', () => {
@@ -318,20 +314,7 @@ describe('IndexPattern Data Panel', () => {
   it('should call setState when the index pattern is switched', async () => {
     const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
-    wrapper.find('[data-test-subj="indexPattern-switch-link"]').simulate('click');
-
-    expect(defaultProps.setShowIndexPatternSwitcher).toHaveBeenCalledWith(true);
-
-    wrapper.setProps({ showIndexPatternSwitcher: true });
-
-    const comboBox = wrapper.find(EuiComboBox);
-
-    comboBox.prop('onChange')!([
-      {
-        label: initialState.indexPatterns['2'].title,
-        value: '2',
-      },
-    ]);
+    wrapper.find(ChangeIndexPattern).prop('onChangeIndexPattern')('2');
 
     expect(defaultProps.onChangeIndexPattern).toHaveBeenCalledWith('2');
   });