[Lens] Move chart switcher over

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss

@@ -1,4 +1,3 @@
-@import 'chart_switch';
 @import 'config_panel';
 @import 'dimension_popover';
 @import 'layer_panel';

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx

@@ -8,7 +8,6 @@ import React, { useMemo, memo } from 'react';
 import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Visualization } from '../../../types';
-import { ChartSwitch } from './chart_switch';
 import { LayerPanel } from './layer_panel';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
@@ -20,21 +19,8 @@ export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: Config
  const { visualizationState } = props;
 
  return (
- <>
- <ChartSwitch
- data-test-subj="lnsChartSwitcher"
- visualizationMap={props.visualizationMap}
- visualizationId={props.activeVisualizationId}
- visualizationState={props.visualizationState}
- datasourceMap={props.datasourceMap}
- datasourceStates={props.datasourceStates}
- dispatch={props.dispatch}
- framePublicAPI={props.framePublicAPI}
- />
- {activeVisualization && visualizationState && (
- <LayerPanels {...props} activeVisualization={activeVisualization} />
- )}
- </>
+ activeVisualization &&
+ visualizationState && <LayerPanels {...props} activeVisualization={activeVisualization} />
  );
 });
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_chart_switch.scss → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss

@@ -1,6 +1,4 @@
 .lnsChartSwitch__header {
- padding: $euiSizeS 0;
-
  > * {
  display: flex;
  align-items: center;
@@ -9,7 +7,8 @@
 
 .lnsChartSwitch__triggerButton {
  @include euiTitle('xs');
- line-height: $euiSizeXXL;
+ background-color: $euiColorEmptyShade;
+ border-color: $euiColorLightShade;
 }
 
 .lnsChartSwitch__summaryIcon {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx

@@ -11,7 +11,7 @@ import {
  EuiPopoverTitle,
  EuiKeyPadMenu,
  EuiKeyPadMenuItem,
- EuiButtonEmpty,
+ EuiButton,
 } from '@elastic/eui';
 import { flatten } from 'lodash';
 import { i18n } from '@kbn/i18n';
@@ -72,6 +72,8 @@ function VisualizationSummary(props: Props) {
  );
 }
 
+import './chart_switch.scss';
+
 export function ChartSwitch(props: Props) {
  const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false);
 
@@ -198,20 +200,18 @@ export function ChartSwitch(props: Props) {
  ownFocus
  initialFocus=".lnsChartSwitch__popoverPanel"
  panelClassName="lnsChartSwitch__popoverPanel"
- anchorClassName="eui-textTruncate"
  panelPaddingSize="s"
  button={
- <EuiButtonEmpty
+ <EuiButton
  className="lnsChartSwitch__triggerButton"
  onClick={() => setFlyoutOpen(!flyoutOpen)}
  data-test-subj="lnsChartSwitchPopover"
- flush="left"
  iconSide="right"
  iconType="arrowDown"
  color="text"
  >
  <VisualizationSummary {...props} />
- </EuiButtonEmpty>
+ </EuiButton>
  }
  isOpen={flyoutOpen}
  closePopover={() => setFlyoutOpen(false)}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { WorkspacePanel } from './workspace_panel';

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx

@@ -6,32 +6,32 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { ReactExpressionRendererProps } from '../../../../../../src/plugins/expressions/public';
-import { FramePublicAPI, TableSuggestion, Visualization } from '../../types';
+import { ReactExpressionRendererProps } from '../../../../../../../src/plugins/expressions/public';
+import { FramePublicAPI, TableSuggestion, Visualization } from '../../../types';
 import {
  createMockVisualization,
  createMockDatasource,
  createExpressionRendererMock,
  DatasourceMock,
  createMockFramePublicAPI,
-} from '../mocks';
+} from '../../mocks';
 import { InnerWorkspacePanel, WorkspacePanelProps } from './workspace_panel';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
-import { DragDrop, ChildDragDropProvider } from '../../drag_drop';
+import { DragDrop, ChildDragDropProvider } from '../../../drag_drop';
 import { Ast } from '@kbn/interpreter/common';
 import { coreMock } from 'src/core/public/mocks';
 import {
  DataPublicPluginStart,
  esFilters,
  IFieldType,
  IIndexPattern,
-} from '../../../../../../src/plugins/data/public';
-import { TriggerId, UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
-import { uiActionsPluginMock } from '../../../../../../src/plugins/ui_actions/public/mocks';
-import { TriggerContract } from '../../../../../../src/plugins/ui_actions/public/triggers';
-import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/plugins/visualizations/public/embeddable';
-import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
+} from '../../../../../../../src/plugins/data/public';
+import { TriggerId, UiActionsStart } from '../../../../../../../src/plugins/ui_actions/public';
+import { uiActionsPluginMock } from '../../../../../../../src/plugins/ui_actions/public/mocks';
+import { TriggerContract } from '../../../../../../../src/plugins/ui_actions/public/triggers';
+import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public/embeddable';
+import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
 
 describe('workspace_panel', () => {
  let mockVisualization: jest.Mocked<Visualization>;

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -20,23 +20,23 @@ import { CoreStart, CoreSetup } from 'kibana/public';
 import {
  ExpressionRendererEvent,
  ReactExpressionRendererType,
-} from '../../../../../../src/plugins/expressions/public';
-import { Action } from './state_management';
+} from '../../../../../../../src/plugins/expressions/public';
+import { Action } from '../state_management';
 import {
  Datasource,
  Visualization,
  FramePublicAPI,
  isLensBrushEvent,
  isLensFilterEvent,
-} from '../../types';
-import { DragDrop, DragContext } from '../../drag_drop';
-import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
-import { buildExpression } from './expression_helpers';
-import { debouncedComponent } from '../../debounced_component';
-import { trackUiEvent } from '../../lens_ui_telemetry';
-import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
-import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/plugins/visualizations/public';
-import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
+} from '../../../types';
+import { DragDrop, DragContext } from '../../../drag_drop';
+import { getSuggestions, switchToSuggestion } from '../suggestion_helpers';
+import { buildExpression } from '../expression_helpers';
+import { debouncedComponent } from '../../../debounced_component';
+import { trackUiEvent } from '../../../lens_ui_telemetry';
+import { UiActionsStart } from '../../../../../../../src/plugins/ui_actions/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public';
+import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
 
 export interface WorkspacePanelProps {
@@ -300,7 +300,10 @@ export function InnerWorkspacePanel({
  dispatch={dispatch}
  emptyExpression={expression === null}
  visualizationState={visualizationState}
- activeVisualization={activeVisualization}
+ visualizationId={activeVisualizationId}
+ datasourceStates={datasourceStates}
+ datasourceMap={datasourceMap}
+ visualizationMap={visualizationMap}
  >
  <DragDrop
  data-test-subj="lnsWorkspace"

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx

@@ -5,8 +5,8 @@
  */
 
 import React from 'react';
-import { Visualization } from '../../types';
-import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../mocks';
+import { Visualization } from '../../../types';
+import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../../mocks';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { WorkspacePanelWrapper, WorkspacePanelWrapperProps } from './workspace_panel_wrapper';
@@ -32,7 +32,10 @@ describe('workspace_panel_wrapper', () => {
  dispatch={jest.fn()}
  framePublicAPI={mockFrameAPI}
  visualizationState={{}}
- activeVisualization={mockVisualization}
+ visualizationId="myVis"
+ visualizationMap={{ myVis: mockVisualization }}
+ datasourceMap={{}}
+ datasourceStates={{}}
  emptyExpression={false}
  >
  <MyChild />
@@ -51,7 +54,10 @@ describe('workspace_panel_wrapper', () => {
  framePublicAPI={mockFrameAPI}
  visualizationState={visState}
  children={<span />}
- activeVisualization={{ ...mockVisualization, renderToolbar: renderToolbarMock }}
+ visualizationId="myVis"
+ visualizationMap={{ myVis: { ...mockVisualization, renderToolbar: renderToolbarMock } }}
+ datasourceMap={{}}
+ datasourceStates={{}}
  emptyExpression={false}
  />
  );

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx

@@ -14,29 +14,43 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
 } from '@elastic/eui';
-import { FramePublicAPI, Visualization } from '../../types';
-import { NativeRenderer } from '../../native_renderer';
-import { Action } from './state_management';
+import { Datasource, FramePublicAPI, Visualization } from '../../../types';
+import { NativeRenderer } from '../../../native_renderer';
+import { Action } from '../state_management';
+import { ChartSwitch } from './chart_switch';
 
 export interface WorkspacePanelWrapperProps {
  children: React.ReactNode | React.ReactNode[];
  framePublicAPI: FramePublicAPI;
  visualizationState: unknown;
- activeVisualization: Visualization | null;
  dispatch: (action: Action) => void;
  emptyExpression: boolean;
  title?: string;
+ visualizationMap: Record<string, Visualization>;
+ visualizationId: string | null;
+ datasourceMap: Record<string, Datasource>;
+ datasourceStates: Record<
+ string,
+ {
+ isLoading: boolean;
+ state: unknown;
+ }
+ >;
 }
 
 export function WorkspacePanelWrapper({
  children,
  framePublicAPI,
  visualizationState,
- activeVisualization,
  dispatch,
  title,
  emptyExpression,
+ visualizationId,
+ visualizationMap,
+ datasourceMap,
+ datasourceStates,
 }: WorkspacePanelWrapperProps) {
+ const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null;
  const setVisualizationState = useCallback(
  (newState: unknown) => {
  if (!activeVisualization) {
@@ -52,7 +66,19 @@ export function WorkspacePanelWrapper({
  [dispatch]
  );
  return (
- <EuiFlexGroup gutterSize="s" direction="column" alignItems="stretch">
+ <EuiFlexGroup gutterSize="s" direction="column" alignItems="stretch" responsive={false}>
+ <EuiFlexItem grow={false}>
+ <ChartSwitch
+ data-test-subj="lnsChartSwitcher"
+ visualizationMap={visualizationMap}
+ visualizationId={visualizationId}
+ visualizationState={visualizationState}
+ datasourceMap={datasourceMap}
+ datasourceStates={datasourceStates}
+ dispatch={dispatch}
+ framePublicAPI={framePublicAPI}
+ />
+ </EuiFlexItem>
  {activeVisualization && activeVisualization.renderToolbar && (
  <EuiFlexItem grow={false}>
  <NativeRenderer