From 7aca0c13015a98b187c641aaf03a94c06e7709e4 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Thu, 12 Nov 2020 14:55:31 -0600 Subject: [PATCH 1/2] Added panel toolbar to dashboard Hide panel toolbar in view mode Update empty panel copy Added buttons to empty prompt Update copy Update toolbar and empty panel styles Fixed some tests Fixed conflict Updated snapshots Removed unused import Added stories Added storyshot test Updated snapshots --- src/dev/storybook/aliases.ts | 1 + src/plugins/dashboard/.storybook/main.js | 7 + .../dashboard/.storybook/storyshots.test.tsx | 72 ++++ .../public/application/_dashboard_app.scss | 1 + .../dashboard_empty_screen.test.tsx.snap | 329 +++++++++--------- .../dashboard_empty_screen.test.tsx | 39 +-- .../empty_screen/dashboard_empty_screen.tsx | 44 +-- .../viewport/dashboard_viewport.tsx | 41 +-- .../application/top_nav/dashboard_top_nav.tsx | 10 +- .../application/top_nav/get_top_nav_config.ts | 6 +- .../panel_toolbar.stories.storyshot | 68 ++++ .../top_nav/panel_toolbar/index.ts | 20 ++ .../top_nav/panel_toolbar/panel_toolbar.scss | 12 + .../panel_toolbar/panel_toolbar.stories.tsx | 30 ++ .../top_nav/panel_toolbar/panel_toolbar.tsx | 61 ++++ .../dashboard/public/dashboard_strings.ts | 24 +- .../add_panel/add_panel_flyout.tsx | 5 +- 17 files changed, 495 insertions(+), 275 deletions(-) create mode 100644 src/plugins/dashboard/.storybook/main.js create mode 100644 src/plugins/dashboard/.storybook/storyshots.test.tsx create mode 100644 src/plugins/dashboard/public/application/top_nav/panel_toolbar/__snapshots__/panel_toolbar.stories.storyshot create mode 100644 src/plugins/dashboard/public/application/top_nav/panel_toolbar/index.ts create mode 100644 src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.scss create mode 100644 src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.stories.tsx create mode 100644 src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts index 36c742dc40403..a66661e7ae2ea 100644 --- a/src/dev/storybook/aliases.ts +++ b/src/dev/storybook/aliases.ts @@ -21,6 +21,7 @@ export const storybookAliases = { apm: 'x-pack/plugins/apm/.storybook', canvas: 'x-pack/plugins/canvas/storybook', codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook', + dashboard: 'src/plugins/dashboard/.storybook', dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook', data_enhanced: 'x-pack/plugins/data_enhanced/.storybook', embeddable: 'src/plugins/embeddable/.storybook', diff --git a/src/plugins/dashboard/.storybook/main.js b/src/plugins/dashboard/.storybook/main.js new file mode 100644 index 0000000000000..1818aa44a9399 --- /dev/null +++ b/src/plugins/dashboard/.storybook/main.js @@ -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. + */ + +module.exports = require('@kbn/storybook').defaultConfig; diff --git a/src/plugins/dashboard/.storybook/storyshots.test.tsx b/src/plugins/dashboard/.storybook/storyshots.test.tsx new file mode 100644 index 0000000000000..af8e71c77231a --- /dev/null +++ b/src/plugins/dashboard/.storybook/storyshots.test.tsx @@ -0,0 +1,72 @@ +/* + * 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 fs from 'fs'; +import { ReactChildren } from 'react'; +import path from 'path'; +import moment from 'moment'; +import 'moment-timezone'; +import ReactDOM from 'react-dom'; + +import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; +import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer'; +import { addSerializer } from 'jest-specific-snapshot'; + +// Set our default timezone to UTC for tests so we can generate predictable snapshots +moment.tz.setDefault('UTC'); + +// Freeze time for the tests for predictable snapshots +const testTime = new Date(Date.UTC(2019, 5, 1)); // June 1 2019 +Date.now = jest.fn(() => testTime.getTime()); + +// Mock React Portal for components that use modals, tooltips, etc +// @ts-expect-error Portal mocks are notoriously difficult to type +ReactDOM.createPortal = jest.fn((element) => element); + +// Mock EUI generated ids to be consistently predictable for snapshots. +jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `generated-id`); + +// Mock react-datepicker dep used by eui to avoid rendering the entire large component +jest.mock('@elastic/eui/packages/react-datepicker', () => { + return { + __esModule: true, + default: 'ReactDatePicker', + }; +}); + +// Mock the EUI HTML ID Generator so elements have a predictable ID in snapshots +jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { + return { + htmlIdGenerator: () => () => `generated-id`, + }; +}); + +// To be resolved by EUI team. +// https://github.com/elastic/eui/issues/3712 +jest.mock('@elastic/eui/lib/components/overlay_mask/overlay_mask', () => { + return { + EuiOverlayMask: ({ children }: { children: ReactChildren }) => children, + }; +}); + +import { EuiObserver } from '@elastic/eui/test-env/components/observer/observer'; +jest.mock('@elastic/eui/test-env/components/observer/observer'); +EuiObserver.mockImplementation(() => 'EuiObserver'); + +// Some of the code requires that this directory exists, but the tests don't actually require any css to be present +const cssDir = path.resolve(__dirname, '../../../../built_assets/css'); +if (!fs.existsSync(cssDir)) { + fs.mkdirSync(cssDir, { recursive: true }); +} + +addSerializer(styleSheetSerializer); + +// Initialize Storyshots and build the Jest Snapshots +initStoryshots({ + configPath: path.resolve(__dirname, './../.storybook'), + framework: 'react', + test: multiSnapshotWithOptions({}), +}); diff --git a/src/plugins/dashboard/public/application/_dashboard_app.scss b/src/plugins/dashboard/public/application/_dashboard_app.scss index e3447b0a86c2d..f969f936ddebc 100644 --- a/src/plugins/dashboard/public/application/_dashboard_app.scss +++ b/src/plugins/dashboard/public/application/_dashboard_app.scss @@ -24,6 +24,7 @@ } .dshEmptyWidget { + background-color: $euiColorLightestShade; border: $euiBorderThin; border-style: dashed; border-radius: $euiBorderRadius; diff --git a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap index 1f86a8eb7f28b..479b96355eab7 100644 --- a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap +++ b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = ` +exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = ` - -
- -
+ + +
+ + +

+ - +

+ + +
+ + +
+ +
- -
+ +<<<<<<< HEAD
+======= + Create content that tells a story about your data. + + +
+ +
+ +
+>>>>>>> f0e731bfbdd... Added panel toolbar to dashboard `; -exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = ` +exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = ` -
- -
- -
-

- - - - -   - - or new object to this dashboard -

-
- -
- - -
- -

- - +

-
+ + - Create new - - - - - - -

-
+
+ +
+ You need additional privileges to edit this dashboard. +
+ +
+ +
+ + +
+ +
+ `; -exports[`DashboardEmptyScreen renders correctly without visualize paragraph 1`] = ` +exports[`DashboardEmptyScreen renders correctly with view mode 1`] = ` { const setupMock = coreMock.createSetup(); const defaultProps = { - showLinkToVisualize: true, + isEditMode: false, onLinkClick: jest.fn(), uiSettings: setupMock.uiSettings, http: setupMock.http, }; - function mountComponent(props?: DashboardEmptyScreenProps) { - const compProps = props || defaultProps; + function mountComponent(props?: Partial) { + const compProps = { ...defaultProps, ...props }; return mountWithIntl(); } - test('renders correctly with visualize paragraph', () => { + test('renders correctly with view mode', () => { const component = mountComponent(); expect(component).toMatchSnapshot(); - const paragraph = findTestSubject(component, 'linkToVisualizeParagraph'); - expect(paragraph.length).toBe(1); - }); - - test('renders correctly without visualize paragraph', () => { - const component = mountComponent({ ...defaultProps, ...{ showLinkToVisualize: false } }); - expect(component).toMatchSnapshot(); - const linkToVisualizeParagraph = findTestSubject(component, 'linkToVisualizeParagraph'); - expect(linkToVisualizeParagraph.length).toBe(0); const enterEditModeParagraph = component.find('.dshStartScreen__panelDesc'); expect(enterEditModeParagraph.length).toBe(1); }); - test('when specified, prop onVisualizeClick is called correctly', () => { - const onVisualizeClick = jest.fn(); - const component = mountComponent({ - ...defaultProps, - ...{ showLinkToVisualize: true, onVisualizeClick }, - }); - const button = findTestSubject(component, 'addVisualizationButton'); - button.simulate('click'); - expect(onVisualizeClick).toHaveBeenCalled(); + test('renders correctly with edit mode', () => { + const component = mountComponent({ isEditMode: true }); + expect(component).toMatchSnapshot(); + const paragraph = component.find('.dshStartScreen__panelDesc'); + expect(paragraph.length).toBe(0); + const emptyPanel = findTestSubject(component, 'emptyDashboardWidget'); + expect(emptyPanel.length).toBe(1); }); test('renders correctly with readonly mode', () => { - const component = mountComponent({ ...defaultProps, ...{ isReadonlyMode: true } }); + const component = mountComponent({ isReadonlyMode: true }); expect(component).toMatchSnapshot(); const paragraph = component.find('.dshStartScreen__panelDesc'); expect(paragraph.length).toBe(0); + const emptyPanel = findTestSubject(component, 'emptyDashboardWidget'); + expect(emptyPanel.length).toBe(0); }); }); diff --git a/src/plugins/dashboard/public/application/embeddable/empty_screen/dashboard_empty_screen.tsx b/src/plugins/dashboard/public/application/embeddable/empty_screen/dashboard_empty_screen.tsx index 6529cae6f50cb..2e06d2b90cde9 100644 --- a/src/plugins/dashboard/public/application/embeddable/empty_screen/dashboard_empty_screen.tsx +++ b/src/plugins/dashboard/public/application/embeddable/empty_screen/dashboard_empty_screen.tsx @@ -19,6 +19,7 @@ import React from 'react'; import { I18nProvider } from '@kbn/i18n/react'; import { + EuiIcon, EuiLink, EuiSpacer, EuiPageContent, @@ -26,24 +27,22 @@ import { EuiPage, EuiImage, EuiText, - EuiButton, + EuiTitle, } from '@elastic/eui'; import { IUiSettingsClient, HttpStart } from 'kibana/public'; import { emptyScreenStrings } from '../../../dashboard_strings'; export interface DashboardEmptyScreenProps { - showLinkToVisualize: boolean; + isEditMode?: boolean; onLinkClick: () => void; - onVisualizeClick?: () => void; uiSettings: IUiSettingsClient; http: HttpStart; isReadonlyMode?: boolean; } export function DashboardEmptyScreen({ - showLinkToVisualize, + isEditMode, onLinkClick, - onVisualizeClick, uiSettings, http, isReadonlyMode, @@ -52,21 +51,6 @@ export function DashboardEmptyScreen({ const emptyStateGraphicURL = IS_DARK_THEME ? '/plugins/home/assets/welcome_graphic_dark_2x.png' : '/plugins/home/assets/welcome_graphic_light_2x.png'; - - const linkToVisualizeParagraph = ( -

- - {emptyScreenStrings.getCreateNewVisualizationButton()} - -

- ); const paragraph = ( description1: string | null, description2: string, @@ -94,12 +78,6 @@ export function DashboardEmptyScreen({ emptyScreenStrings.getHowToStartWorkingOnNewDashboardEditLinkText(), emptyScreenStrings.getHowToStartWorkingOnNewDashboardEditLinkAriaLabel() ); - const enterViewModeParagraph = paragraph( - null, - emptyScreenStrings.getAddNewVisualizationDescription(), - emptyScreenStrings.getAddExistingVisualizationLinkText(), - emptyScreenStrings.getAddExistingVisualizationLinkAriaLabel() - ); const page = (mainText: string, showAdditionalParagraph?: boolean, additionalText?: string) => { return ( @@ -138,11 +116,17 @@ export function DashboardEmptyScreen({ const viewMode = page(emptyScreenStrings.getFillDashboardTitle(), true); const editMode = (
- {enterViewModeParagraph} - - {linkToVisualizeParagraph} + + + +

{emptyScreenStrings.getEmptyWidgetTitle()}

+ + + + {emptyScreenStrings.getEmptyWidgetDescription()} +
); - const actionableMode = showLinkToVisualize ? editMode : viewMode; + const actionableMode = isEditMode ? editMode : viewMode; return {isReadonlyMode ? readonlyMode : actionableMode}; } diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx index 558867ba50091..1b0f3be1a9732 100644 --- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx +++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx @@ -19,14 +19,7 @@ import React from 'react'; import { Subscription } from 'rxjs'; -import { - PanelState, - EmbeddableStart, - ViewMode, - isErrorEmbeddable, - openAddPanelFlyout, - EmbeddableFactoryNotFoundError, -} from '../../../services/embeddable'; +import { PanelState, EmbeddableStart, ViewMode } from '../../../services/embeddable'; import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container'; import { DashboardGrid } from '../grid'; import { context } from '../../../services/kibana_react'; @@ -107,29 +100,6 @@ export class DashboardViewport extends React.Component { - const type = 'visualization'; - const factory = this.context.services.embeddable.getEmbeddableFactory(type); - if (!factory) { - throw new EmbeddableFactoryNotFoundError(type); - } - const explicitInput = await factory.getExplicitInput(); - await this.props.container.addNewEmbeddable(type, explicitInput); - }; - - private addFromLibrary = () => { - if (!isErrorEmbeddable(this.props.container)) { - openAddPanelFlyout({ - embeddable: this.props.container, - getAllFactories: this.context.services.embeddable.getEmbeddableFactories, - getFactory: this.context.services.embeddable.getEmbeddableFactory, - notifications: this.context.services.notifications, - overlays: this.context.services.overlays, - SavedObjectFinder: this.context.services.SavedObjectFinder, - }); - } - }; - public render() { const { container, PanelComponent } = this.props; const isEditMode = container.getInput().viewMode !== ViewMode.VIEW; @@ -162,13 +132,8 @@ export class DashboardViewport extends React.Component this.props.switchViewMode?.(ViewMode.EDIT) - } - showLinkToVisualize={isEditMode} - onVisualizeClick={this.createNewEmbeddable} + onLinkClick={() => this.props.switchViewMode?.(ViewMode.EDIT)} + isEditMode={isEditMode} uiSettings={this.context.services.uiSettings} http={this.context.services.http} /> diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx index 38d46c9ec5a68..937e6737d2716 100644 --- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx +++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx @@ -55,6 +55,7 @@ import { showCloneModal } from './show_clone_modal'; import { showOptionsPopover } from './show_options_popover'; import { TopNavIds } from './top_nav_ids'; import { ShowShareModal } from './show_share_modal'; +import { PanelToolbar } from './panel_toolbar'; import { DashboardContainer } from '..'; export interface DashboardTopNavState { @@ -442,5 +443,12 @@ export function DashboardTopNav({ }; const { TopNavMenu } = navigation.ui; - return ; + return ( + <> + + {!dashboardStateManager.getIsViewMode() ? ( + + ) : null} + + ); } diff --git a/src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts b/src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts index c8d65923de2fc..3db8e3fc792c0 100644 --- a/src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts +++ b/src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts @@ -154,10 +154,10 @@ function getAddConfig(action: NavAction) { return { id: 'add', label: i18n.translate('dashboard.topNave.addButtonAriaLabel', { - defaultMessage: 'add', + defaultMessage: 'Library', }), description: i18n.translate('dashboard.topNave.addConfigDescription', { - defaultMessage: 'Add a panel to the dashboard', + defaultMessage: 'Add an existing visualization to the dashboard', }), testId: 'dashboardAddPanelButton', run: action, @@ -173,7 +173,7 @@ function getCreateNewConfig(action: NavAction) { iconType: 'plusInCircleFilled', id: 'addNew', label: i18n.translate('dashboard.topNave.addNewButtonAriaLabel', { - defaultMessage: 'Create new', + defaultMessage: 'Create panel', }), description: i18n.translate('dashboard.topNave.addNewConfigDescription', { defaultMessage: 'Create a new panel on this dashboard', diff --git a/src/plugins/dashboard/public/application/top_nav/panel_toolbar/__snapshots__/panel_toolbar.stories.storyshot b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/__snapshots__/panel_toolbar.stories.storyshot new file mode 100644 index 0000000000000..6b95976e80398 --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/__snapshots__/panel_toolbar.stories.storyshot @@ -0,0 +1,68 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots components/PanelToolbar default 1`] = ` +
+
+ +
+
+ +
+
+`; diff --git a/src/plugins/dashboard/public/application/top_nav/panel_toolbar/index.ts b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/index.ts new file mode 100644 index 0000000000000..31b25955b4b48 --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { PanelToolbar } from './panel_toolbar'; diff --git a/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.scss b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.scss new file mode 100644 index 0000000000000..196ae68e3ed17 --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.scss @@ -0,0 +1,12 @@ +.panelToolbar { + padding: 0 $euiSizeS $euiSizeS; + flex-grow: 0; +} + +.panelToolbarButton { + line-height: $euiButtonHeight; // Keeps alignment of text and chart icon + background-color: $euiColorEmptyShade; + + // Lighten the border color for all states + border-color: $euiBorderColor !important; // sass-lint:disable-line no-important +} diff --git a/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.stories.tsx b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.stories.tsx new file mode 100644 index 0000000000000..0884dfde57d4a --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.stories.tsx @@ -0,0 +1,30 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import React from 'react'; +import { PanelToolbar } from './panel_toolbar'; + +storiesOf('components/PanelToolbar', module).add('default', () => ( + +)); diff --git a/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx new file mode 100644 index 0000000000000..91a7e0ab64a90 --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx @@ -0,0 +1,61 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import './panel_toolbar.scss'; +import React, { FC } from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; + +interface Props { + /** The click handler for the Add Panel button for creating new panels */ + onAddPanelClick: () => void; + /** The click handler for the Library button for adding existing visualizations/embeddables */ + onLibraryClick: () => void; +} + +export const PanelToolbar: FC = ({ onAddPanelClick, onLibraryClick }) => ( + + + + {i18n.translate('dashboard.panelToolbar.addPanelButtonLabel', { + defaultMessage: 'Create panel', + })} + + + + + {i18n.translate('dashboard.panelToolbar.libraryButtonLabel', { + defaultMessage: 'Add from library', + })} + + + +); diff --git a/src/plugins/dashboard/public/dashboard_strings.ts b/src/plugins/dashboard/public/dashboard_strings.ts index 239846638d3aa..4aa552893ab9b 100644 --- a/src/plugins/dashboard/public/dashboard_strings.ts +++ b/src/plugins/dashboard/public/dashboard_strings.ts @@ -285,25 +285,13 @@ export const emptyScreenStrings = { i18n.translate('dashboard.howToStartWorkingOnNewDashboardEditLinkAriaLabel', { defaultMessage: 'Edit dashboard', }), - getAddExistingVisualizationLinkText: () => - i18n.translate('dashboard.addExistingVisualizationLinkText', { - defaultMessage: 'Add an existing', + getEmptyWidgetTitle: () => + i18n.translate('dashboard.emptyWidget.addPanelTitle', { + defaultMessage: 'Add your first panel', }), - getAddExistingVisualizationLinkAriaLabel: () => - i18n.translate('dashboard.addVisualizationLinkAriaLabel', { - defaultMessage: 'Add an existing visualization', - }), - getAddNewVisualizationDescription: () => - i18n.translate('dashboard.addNewVisualizationText', { - defaultMessage: 'or new object to this dashboard', - }), - getCreateNewVisualizationButton: () => - i18n.translate('dashboard.createNewVisualizationButton', { - defaultMessage: 'Create new', - }), - getCreateNewVisualizationButtonAriaLabel: () => - i18n.translate('dashboard.createNewVisualizationButtonAriaLabel', { - defaultMessage: 'Create new visualization button', + getEmptyWidgetDescription: () => + i18n.translate('dashboard.emptyWidget.addPanelDescription', { + defaultMessage: 'Create content that tells a story about your data.', }), }; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx index d3e100366f2df..3203b3affb2c1 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx @@ -153,7 +153,10 @@ export class AddPanelFlyout extends React.Component {

- +

From 001b335e039934eda3ad69fbb7dd593d49f651d0 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Thu, 10 Dec 2020 17:34:35 -0700 Subject: [PATCH 2/2] Updated snapshots --- .../dashboard_empty_screen.test.tsx.snap | 79 +------------------ .../translations/translations/ja-JP.json | 5 -- .../translations/translations/zh-CN.json | 5 -- 3 files changed, 3 insertions(+), 86 deletions(-) diff --git a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap index 479b96355eab7..b59c66055b790 100644 --- a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap +++ b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap @@ -287,13 +287,7 @@ exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = `

- - Add your first panel - + Add your first panel

- -<<<<<<< HEAD - -
- -
- - -
-

- This dashboard is empty. -

-
- - -
- -
- You need additional privileges to edit this dashboard. -
- -
- - - - - - - - -======= - Create content that tells a story about your data. - + Create content that tells a story about your data. ->>>>>>> f0e731bfbdd... Added panel toolbar to dashboard @@ -699,7 +626,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = ` url="/plugins/home/assets/welcome_graphic_light_2x.png" >