maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] Move chart switcher over (#70182)

Browse source
This commit is contained in:
Joe Reuter 2020-07-01 10:07:59 +02:00 committed by GitHub
parent 6e268898f9
commit a49f5cec64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 83 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -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} />
);
});

5
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
View file

@ -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 {

0
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.test.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
View file

10
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
View file

@ -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)}

7
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/index.ts Normal file
View file

@ -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';

20
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
View file

@ -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>;

27
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
View file

@ -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"

14
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
View file

@ -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}
/>
);

38
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
View file

@ -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