From 7b34478b6cb4524c7c00a740368d9ec4d2f46975 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Fri, 26 Jun 2020 09:38:35 +0200 Subject: [PATCH] [Lens] Add toolbar api (#69263) --- .../_workspace_panel_wrapper.scss | 5 +- .../editor_frame/editor_frame.tsx | 30 +++---- .../editor_frame/workspace_panel.tsx | 26 ++++-- .../workspace_panel_wrapper.test.tsx | 65 ++++++++++++++ .../editor_frame/workspace_panel_wrapper.tsx | 89 ++++++++++++++++--- x-pack/plugins/lens/public/types.ts | 11 +++ 6 files changed, 188 insertions(+), 38 deletions(-) create mode 100644 x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss index 4ba19cb4ab05b..e663754707e05 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss @@ -10,11 +10,14 @@ .lnsWorkspacePanelWrapper__pageContentHeader { @include euiTitle('xs'); padding: $euiSizeM; - border-bottom: $euiBorderThin; // override EuiPage margin-bottom: 0 !important; // sass-lint:disable-line no-important } + .lnsWorkspacePanelWrapper__pageContentHeader--unsaved { + color: $euiTextSubduedColor; + } + .lnsWorkspacePanelWrapper__pageContentBody { @include euiScrollBar; flex-grow: 1; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx index 07c76a81ed62d..af3d0ed068d2f 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx @@ -23,7 +23,6 @@ import { WorkspacePanel } from './workspace_panel'; import { Document } from '../../persistence/saved_object_store'; import { RootDragDropProvider } from '../../drag_drop'; import { getSavedObjectFormat } from './save'; -import { WorkspacePanelWrapper } from './workspace_panel_wrapper'; import { generateId } from '../../id_generator'; import { Filter, Query, SavedQuery } from '../../../../../../src/plugins/data/public'; import { EditorFrameStartPlugins } from '../service'; @@ -275,21 +274,20 @@ export function EditorFrame(props: EditorFrameProps) { } workspacePanel={ allLoaded && ( - - - + ) } suggestionsPanel={ diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx index e4d37772eac2e..670afe28293a4 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx @@ -37,6 +37,7 @@ 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 { activeVisualizationId: string | null; @@ -56,6 +57,7 @@ export interface WorkspacePanelProps { ExpressionRenderer: ReactExpressionRendererType; core: CoreStart | CoreSetup; plugins: { uiActions?: UiActionsStart; data: DataPublicPluginStart }; + title?: string; } export const WorkspacePanel = debouncedComponent(InnerWorkspacePanel); @@ -73,6 +75,7 @@ export function InnerWorkspacePanel({ core, plugins, ExpressionRenderer: ExpressionRendererComponent, + title, }: WorkspacePanelProps) { const IS_DARK_THEME = core.uiSettings.get('theme:darkMode'); const emptyStateGraphicURL = IS_DARK_THEME @@ -291,13 +294,22 @@ export function InnerWorkspacePanel({ } return ( - - {renderVisualization()} - + + {renderVisualization()} + + ); } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx new file mode 100644 index 0000000000000..517dff5b5e74c --- /dev/null +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx @@ -0,0 +1,65 @@ +/* + * 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 React from 'react'; +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'; + +describe('workspace_panel_wrapper', () => { + let mockVisualization: jest.Mocked; + let mockFrameAPI: FrameMock; + let instance: ReactWrapper; + + beforeEach(() => { + mockVisualization = createMockVisualization(); + mockFrameAPI = createMockFramePublicAPI(); + }); + + afterEach(() => { + instance.unmount(); + }); + + it('should render its children', () => { + const MyChild = () => The child elements; + instance = mount( + + + + ); + + expect(instance.find(MyChild)).toHaveLength(1); + }); + + it('should call the toolbar renderer if provided', () => { + const renderToolbarMock = jest.fn(); + const visState = { internalState: 123 }; + instance = mount( + } + activeVisualization={{ ...mockVisualization, renderToolbar: renderToolbarMock }} + emptyExpression={false} + /> + ); + + expect(renderToolbarMock).toHaveBeenCalledWith(expect.any(Element), { + state: visState, + frame: mockFrameAPI, + setState: expect.anything(), + }); + }); +}); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx index cc91510146f35..17461b9fc274f 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx @@ -4,25 +4,86 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import { EuiPageContent, EuiPageContentHeader, EuiPageContentBody } from '@elastic/eui'; +import React, { useCallback } from 'react'; +import { i18n } from '@kbn/i18n'; +import classNames from 'classnames'; +import { + EuiPageContent, + EuiPageContentBody, + EuiPageContentHeader, + EuiFlexGroup, + EuiFlexItem, +} from '@elastic/eui'; +import { FramePublicAPI, Visualization } from '../../types'; +import { NativeRenderer } from '../../native_renderer'; +import { Action } from './state_management'; -interface Props { - title: string; +export interface WorkspacePanelWrapperProps { children: React.ReactNode | React.ReactNode[]; + framePublicAPI: FramePublicAPI; + visualizationState: unknown; + activeVisualization: Visualization | null; + dispatch: (action: Action) => void; + emptyExpression: boolean; + title?: string; } -export function WorkspacePanelWrapper({ children, title }: Props) { +export function WorkspacePanelWrapper({ + children, + framePublicAPI, + visualizationState, + activeVisualization, + dispatch, + title, + emptyExpression, +}: WorkspacePanelWrapperProps) { + const setVisualizationState = useCallback( + (newState: unknown) => { + if (!activeVisualization) { + return; + } + dispatch({ + type: 'UPDATE_VISUALIZATION_STATE', + visualizationId: activeVisualization.id, + newState, + clearStagedPreview: false, + }); + }, + [dispatch] + ); return ( - - {title && ( - - {title} - + + {activeVisualization && activeVisualization.renderToolbar && ( + + + )} - - {children} - - + + + {(!emptyExpression || title) && ( + + + {title || + i18n.translate('xpack.lens.chartTitle.unsaved', { defaultMessage: 'Unsaved' })} + + + )} + + {children} + + + + ); } diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index c2437aa3cc3cc..d451e312446bd 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -290,6 +290,12 @@ export type VisualizationLayerWidgetProps = VisualizationConfigProp setState: (newState: T) => void; }; +export interface VisualizationToolbarProps { + setState: (newState: T) => void; + frame: FramePublicAPI; + state: T; +} + export type VisualizationDimensionEditorProps = VisualizationConfigProps & { groupId: string; accessor: string; @@ -454,6 +460,11 @@ export interface Visualization { * for extra configurability, such as for styling the legend or axis */ renderLayerContextMenu?: (domElement: Element, props: VisualizationLayerWidgetProps) => void; + /** + * Toolbar rendered above the visualization. This is meant to be used to provide chart-level + * settings for the visualization. + */ + renderToolbar?: (domElement: Element, props: VisualizationToolbarProps) => void; /** * Visualizations can provide a custom icon which will open a layer-specific popover * If no icon is provided, gear icon is default