diff --git a/src/plugins/dashboard/public/application/dashboard_app.tsx b/src/plugins/dashboard/public/application/dashboard_app.tsx index ce83d37e932ef..7eb5310f36d53 100644 --- a/src/plugins/dashboard/public/application/dashboard_app.tsx +++ b/src/plugins/dashboard/public/application/dashboard_app.tsx @@ -80,6 +80,7 @@ import { DashboardTopNav } from './top_nav/dashboard_top_nav'; import { dashboardBreadcrumb, getDashboardTitle, leaveConfirmStrings } from './dashboard_strings'; import type { TagDecoratedSavedObject } from '../../../saved_objects_tagging_oss/public'; import { DashboardEmptyScreen } from './empty_screen/dashboard_empty_screen'; +import { PanelToolbar } from './top_nav/panel_toolbar'; import { DashboardConstants, DashboardContainer, @@ -678,10 +679,11 @@ export function DashboardApp({ updateViewMode(ViewMode.EDIT)} - onVisualizeClick={createNew} showLinkToVisualize={isEditMode} uiSettings={uiSettings} http={core.http} + createNew={createNew} + addFromLibrary={addFromLibrary} /> ); }; @@ -801,6 +803,9 @@ export function DashboardApp({ }} /> )} + {!state.dashboardStateManager?.getIsViewMode() ? ( + + ) : null}
); diff --git a/src/plugins/dashboard/public/application/empty_screen/dashboard_empty_screen.tsx b/src/plugins/dashboard/public/application/empty_screen/dashboard_empty_screen.tsx index b5a8f8af0be09..c054af4c18ffe 100644 --- a/src/plugins/dashboard/public/application/empty_screen/dashboard_empty_screen.tsx +++ b/src/plugins/dashboard/public/application/empty_screen/dashboard_empty_screen.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { I18nProvider } from '@kbn/i18n/react'; +import { I18nProvider, FormattedMessage } from '@kbn/i18n/react'; import { EuiLink, EuiSpacer, @@ -26,6 +26,9 @@ import { EuiPage, EuiImage, EuiText, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, EuiButton, } from '@elastic/eui'; import { IUiSettingsClient, HttpStart } from 'kibana/public'; @@ -34,38 +37,26 @@ import { emptyScreenStrings as constants } from '../dashboard_strings'; export interface DashboardEmptyScreenProps { showLinkToVisualize: boolean; onLinkClick: () => void; - onVisualizeClick?: () => void; uiSettings: IUiSettingsClient; http: HttpStart; isReadonlyMode?: boolean; + createNew: () => void; + addFromLibrary: () => void; } export function DashboardEmptyScreen({ showLinkToVisualize, onLinkClick, - onVisualizeClick, uiSettings, http, isReadonlyMode, + addFromLibrary, + createNew, }: DashboardEmptyScreenProps) { const IS_DARK_THEME = uiSettings.get('theme:darkMode'); const emptyStateGraphicURL = IS_DARK_THEME ? '/plugins/home/assets/welcome_graphic_dark_2x.png' : '/plugins/home/assets/welcome_graphic_light_2x.png'; - const linkToVisualizeParagraph = ( -

- - {constants.createNewVisualizationButton} - -

- ); const paragraph = ( description1: string | null, description2: string, @@ -93,12 +84,6 @@ export function DashboardEmptyScreen({ constants.howToStartWorkingOnNewDashboardEditLinkText, constants.howToStartWorkingOnNewDashboardEditLinkAriaLabel ); - const enterViewModeParagraph = paragraph( - null, - constants.addNewVisualizationDescription, - constants.addExistingVisualizationLinkText, - constants.addExistingVisualizationLinkAriaLabel - ); const page = (mainText: string, showAdditionalParagraph?: boolean, additionalText?: string) => { return ( @@ -137,9 +122,36 @@ export function DashboardEmptyScreen({ const viewMode = page(constants.fillDashboardTitle, true); const editMode = (
- {enterViewModeParagraph} - - {linkToVisualizeParagraph} + +

+ +

+ + + + + + + + + + + + Create from scratch + + + + + Add from library + + +
); const actionableMode = showLinkToVisualize ? editMode : viewMode; 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 46491a4336105..5408745fbe844 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/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.tsx b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx new file mode 100644 index 0000000000000..c75aea95fcfc4 --- /dev/null +++ b/src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx @@ -0,0 +1,48 @@ +/* + * 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 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', + })} + + + +);