Added panel toolbar to dashboard

Hide panel toolbar in view mode

Update empty panel copy

Added buttons to empty prompt

Update copy

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({
         <DashboardEmptyScreen
           isReadonlyMode={dashboardContainer.getInput().dashboardCapabilities?.hideWriteControls}
           onLinkClick={isEditMode ? addFromLibrary : () => 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() ? (
+        <PanelToolbar onAddPanelClick={createNew} onLibraryClick={addFromLibrary} />
+      ) : null}
       <div id="dashboardViewport" />
     </div>
   );

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 = (
-    <p data-test-subj="linkToVisualizeParagraph">
-      <EuiButton
-        iconSide="left"
-        size="s"
-        iconType="plusInCircle"
-        onClick={onVisualizeClick}
-        data-test-subj="addVisualizationButton"
-        aria-label={constants.createNewVisualizationButtonAriaLabel}
-      >
-        {constants.createNewVisualizationButton}
-      </EuiButton>
-    </p>
-  );
   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 (
       <EuiPage className="dshStartScreen" restrictWidth="500px">
@@ -137,9 +122,36 @@ export function DashboardEmptyScreen({
   const viewMode = page(constants.fillDashboardTitle, true);
   const editMode = (
     <div data-test-subj="emptyDashboardWidget" className="dshEmptyWidget testClass">
-      {enterViewModeParagraph}
-      <EuiSpacer size="l" />
-      {linkToVisualizeParagraph}
+      <EuiTitle size="s">
+        <h3>
+          <FormattedMessage
+            id="dashboard.emptyWidget.addPanelTitle"
+            defaultMessage="Add your first panel"
+          />
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText>
+        <span>
+          <FormattedMessage
+            id="dashboard.emptyWidget.addPanelDescription"
+            defaultMessage="A panel has everything you need to tell a story about your data."
+          />
+        </span>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiButton fill size="s" onClick={createNew}>
+            Create from scratch
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiButton size="s" onClick={addFromLibrary}>
+            Add from library
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </div>
   );
   const actionableMode = showLinkToVisualize ? editMode : viewMode;

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',

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

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<Props> = ({ onAddPanelClick, onLibraryClick }) => (
+  <EuiFlexGroup id="kbnDashboard__panelToolbar">
+    <EuiFlexItem grow={false}>
+      <EuiButton fill size="s" iconType="plusInCircle" onClick={onAddPanelClick}>
+        {i18n.translate('dashboard.panelToolbar.addPanelButtonLabel', {
+          defaultMessage: 'Create panel',
+        })}
+      </EuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiButton size="s" iconType="folderOpen" onClick={onLibraryClick}>
+        {i18n.translate('dashboard.panelToolbar.libraryButtonLabel', {
+          defaultMessage: 'Add from library',
+        })}
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);