[Lens] Data panel styling

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

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo, memo, useContext } from 'react';
-import { EuiSelect } from '@elastic/eui';
+import React, { useMemo, memo, useContext, useState } from 'react';
+import { EuiPopover, EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
 import { DatasourceDataPanelProps, Datasource } from '../../../public';
 import { NativeRenderer } from '../../native_renderer';
 import { Action } from './state_management';
@@ -36,21 +36,52 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
     setState: setDatasourceState,
   };
 
+  const [showDatasourceSwitcher, setDatasourceSwitcher] = useState(false);
+
   return (
     <>
-      <EuiSelect
-        data-test-subj="datasource-switch"
-        options={Object.keys(props.datasourceMap).map(datasourceId => ({
-          value: datasourceId,
-          text: datasourceId,
-        }))}
-        value={props.activeDatasource || undefined}
-        onChange={e => {
-          props.dispatch({ type: 'SWITCH_DATASOURCE', newDatasourceId: e.target.value });
-        }}
-      />
+      {Object.keys(props.datasourceMap).length > 1 && (
+        <EuiPopover
+          id="datasource-switch"
+          className="lnsDatasourceSwitch"
+          button={
+            <EuiButtonIcon
+              aria-label="Switch to datasource"
+              title="Switch to datasource"
+              data-test-subj="datasource-switch"
+              onClick={() => setDatasourceSwitcher(true)}
+              iconType="gear"
+            />
+          }
+          isOpen={showDatasourceSwitcher}
+          closePopover={() => setDatasourceSwitcher(false)}
+          panelPaddingSize="none"
+          anchorPosition="rightUp"
+        >
+          <EuiContextMenuPanel
+            title="Switch to datasource"
+            items={Object.keys(props.datasourceMap).map(datasourceId => (
+              <EuiContextMenuItem
+                key={datasourceId}
+                data-test-subj={`datasource-switch-${datasourceId}`}
+                icon={props.activeDatasource === datasourceId ? 'check' : 'empty'}
+                onClick={() => {
+                  setDatasourceSwitcher(false);
+                  props.dispatch({
+                    type: 'SWITCH_DATASOURCE',
+                    newDatasourceId: datasourceId,
+                  });
+                }}
+              >
+                {datasourceId}
+              </EuiContextMenuItem>
+            ))}
+          />
+        </EuiPopover>
+      )}
       {props.activeDatasource && !props.datasourceIsLoading && (
         <NativeRenderer
+          className="lnsSidebarContainer"
           render={props.datasourceMap[props.activeDatasource].renderDataPanel}
           nativeProps={datasourceProps}
         />

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

@@ -502,6 +502,10 @@ Object {
       instance.update();
     });
 
+    afterEach(() => {
+      instance.unmount();
+    });
+
     it('should have initialized only the initial datasource and visualization', () => {
       expect(mockDatasource.initialize).toHaveBeenCalled();
       expect(mockDatasource2.initialize).not.toHaveBeenCalled();
@@ -512,9 +516,12 @@ Object {
 
     it('should initialize other datasource on switch', async () => {
       act(() => {
-        instance
-          .find('select[data-test-subj="datasource-switch"]')
-          .simulate('change', { target: { value: 'testDatasource2' } });
+        instance.find('button[data-test-subj="datasource-switch"]').simulate('click');
+      });
+      act(() => {
+        (document.querySelector(
+          '[data-test-subj="datasource-switch-testDatasource2"]'
+        ) as HTMLButtonElement).click();
       });
       expect(mockDatasource2.initialize).toHaveBeenCalled();
     });
@@ -523,9 +530,11 @@ Object {
       const initialState = {};
       mockDatasource2.initialize.mockResolvedValue(initialState);
 
-      instance
-        .find('select[data-test-subj="datasource-switch"]')
-        .simulate('change', { target: { value: 'testDatasource2' } });
+      instance.find('button[data-test-subj="datasource-switch"]').simulate('click');
+
+      (document.querySelector(
+        '[data-test-subj="datasource-switch-testDatasource2"]'
+      ) as HTMLButtonElement).click();
 
       await waitForPromises();
 

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss

@@ -20,19 +20,31 @@
 }
 
 .lnsSidebar {
-  @include euiScrollBar;
-  overflow: hidden auto;
-  padding: $euiSize;
   margin: 0;
   flex: 1 0 18%;
-  min-width: ($euiSize * 16);
+  min-width: ($euiSize * 22);
   height: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .lnsSidebar--right {
-  min-width: ($euiSize * 18);
+  min-width: ($euiSize * 22);
+  @include euiScrollBar;
+  overflow: hidden auto;
+  padding: $euiSize;
+}
+
+.lnsSidebarContainer {
+  flex: 1 0 100%;
+  overflow: hidden;
+}
+
+.lnsDatasourceSwitch {
+  position: absolute;
+  right: $euiSize + $euiSizeXS;
+  top: $euiSize + $euiSizeXS;
 }
 
 .lnsPageBody {