From 32eeff2118a881f0ed2c1d17bd9a41c2046c12cf Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 15 Dec 2020 21:50:34 -0700 Subject: [PATCH] [7.x] [Dashboard] Panel toolbar (#83342) (#86074) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- 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 | 378 +++++++----------- .../dashboard_empty_screen.test.tsx | 39 +- .../empty_screen/dashboard_empty_screen.tsx | 44 +- .../viewport/dashboard_viewport.tsx | 40 +- .../application/top_nav/dashboard_top_nav.tsx | 10 +- .../application/top_nav/get_top_nav_config.ts | 6 +- .../panel_toolbar.stories.storyshot | 70 ++++ .../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 +- .../translations/translations/ja-JP.json | 5 - .../translations/translations/zh-CN.json | 5 - 19 files changed, 483 insertions(+), 347 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 a1ecd178cd52d..bdfb1c45f351a 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`] = ` - -
- -
+ + +
+ + +

+ Add your first panel +

+ + +
+ + +
+ - - -
- -
- -
- - -
-

- This dashboard is empty. -

-
- - -
- -
- You need additional privileges to edit this dashboard. -
- -
- -
- - -
- -
- + + Create content that tells a story about your data. + + + + + + `; -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 2d8b2566358a1..129dce284b822 100644 --- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx +++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx @@ -19,13 +19,7 @@ import React from 'react'; import { Subscription } from 'rxjs'; -import { - PanelState, - ViewMode, - isErrorEmbeddable, - openAddPanelFlyout, - EmbeddableFactoryNotFoundError, -} from '../../../services/embeddable'; +import { PanelState, ViewMode } from '../../../services/embeddable'; import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container'; import { DashboardGrid } from '../grid'; import { context } from '../../../services/kibana_react'; @@ -105,29 +99,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 } = this.props; const isEditMode = container.getInput().viewMode !== ViewMode.VIEW; @@ -160,13 +131,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..f822a7e70d523 --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/__snapshots__/panel_toolbar.stories.storyshot @@ -0,0 +1,70 @@ +// 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 {

- +

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 3b9a500c0a767..274da49aa5c4e 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -562,11 +562,8 @@ "core.ui.welcomeMessage": "Elasticの読み込み中", "dashboard.actions.toggleExpandPanelMenuItem.expandedDisplayName": "最小化", "dashboard.actions.toggleExpandPanelMenuItem.notExpandedDisplayName": "パネルを最大化", - "dashboard.addExistingVisualizationLinkText": "既存のユーザーを追加", - "dashboard.addNewVisualizationText": "またはこのダッシュボードに新規オブジェクトを追加", "dashboard.addPanel.noMatchingObjectsMessage": "一致するオブジェクトが見つかりませんでした。", "dashboard.addPanel.savedObjectAddedToContainerSuccessMessageTitle": "{savedObjectName} が追加されました", - "dashboard.addVisualizationLinkAriaLabel": "既存のビジュアライゼーションを追加", "dashboard.badge.readOnly.text": "読み取り専用", "dashboard.badge.readOnly.tooltip": "ダッシュボードを保存できません", "dashboard.changeViewModeConfirmModal.cancelButtonLabel": "編集を続行", @@ -574,8 +571,6 @@ "dashboard.changeViewModeConfirmModal.discardChangesDescription": "変更を破棄すると、元に戻すことはできません。", "dashboard.changeViewModeConfirmModal.discardChangesTitle": "ダッシュボードへの変更を破棄しますか？", "dashboard.cloneModal.cloneDashboardTitleAriaLabel": "クローンダッシュボードタイトル", - "dashboard.createNewVisualizationButton": "新規作成...", - "dashboard.createNewVisualizationButtonAriaLabel": "新規ビジュアライゼーションを追加", "dashboard.dashboardAppBreadcrumbsTitle": "ダッシュボード", "dashboard.dashboardGrid.toast.unableToLoadDashboardDangerMessage": "ダッシュボードが読み込めません。", "dashboard.dashboardPageTitle": "ダッシュボード", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 1589a859c83b1..8480f71fc5f74 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -562,11 +562,8 @@ "core.ui.welcomeMessage": "正在加载 Elastic", "dashboard.actions.toggleExpandPanelMenuItem.expandedDisplayName": "最小化", "dashboard.actions.toggleExpandPanelMenuItem.notExpandedDisplayName": "最大化面板", - "dashboard.addExistingVisualizationLinkText": "将现有", - "dashboard.addNewVisualizationText": "或新对象添加到此仪表板", "dashboard.addPanel.noMatchingObjectsMessage": "未找到任何匹配对象。", "dashboard.addPanel.savedObjectAddedToContainerSuccessMessageTitle": "{savedObjectName} 已添加", - "dashboard.addVisualizationLinkAriaLabel": "添加现有可视化", "dashboard.badge.readOnly.text": "只读", "dashboard.badge.readOnly.tooltip": "无法保存仪表板", "dashboard.changeViewModeConfirmModal.cancelButtonLabel": "继续编辑", @@ -574,8 +571,6 @@ "dashboard.changeViewModeConfirmModal.discardChangesDescription": "放弃更改后，它们将无法恢复。", "dashboard.changeViewModeConfirmModal.discardChangesTitle": "放弃对仪表板的更改？", "dashboard.cloneModal.cloneDashboardTitleAriaLabel": "克隆的仪表板标题", - "dashboard.createNewVisualizationButton": "新建", - "dashboard.createNewVisualizationButtonAriaLabel": "新建可视化按钮", "dashboard.dashboardAppBreadcrumbsTitle": "仪表板", "dashboard.dashboardGrid.toast.unableToLoadDashboardDangerMessage": "无法加载仪表板。", "dashboard.dashboardPageTitle": "仪表板",