[Lens] Move chart switcher over (#70182)
This commit is contained in:
parent
6e268898f9
commit
a49f5cec64
|
@ -1,4 +1,3 @@
|
|||
@import 'chart_switch';
|
||||
@import 'config_panel';
|
||||
@import 'dimension_popover';
|
||||
@import 'layer_panel';
|
||||
|
|
|
@ -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} />
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -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 {
|
|
@ -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)}
|
|
@ -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';
|
|
@ -6,19 +6,19 @@
|
|||
|
||||
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 {
|
||||
|
@ -26,12 +26,12 @@ import {
|
|||
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>;
|
|
@ -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"
|
|
@ -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}
|
||||
/>
|
||||
);
|
|
@ -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
|
Loading…
Reference in a new issue