[Dashboard] Add visualization from dasbhoard empty screen

elastic · Dec 10, 2019 · a30db6c · a30db6c
1 parent 717e40c
commit a30db6c
Show file tree

Hide file tree

Showing 11 changed files with 766 additions and 65 deletions.
diff --git a/...gins/kibana/public/dashboard/__tests__/__snapshots__/dashboard_empty_screen.test.tsx.snap b/...gins/kibana/public/dashboard/__tests__/__snapshots__/dashboard_empty_screen.test.tsx.snap
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/dashboard_empty_screen.test.tsx b/src/legacy/core_plugins/kibana/public/dashboard/__tests__/dashboard_empty_screen.test.tsx
@@ -47,4 +47,15 @@ describe('DashboardEmptyScreen', () => {
     const paragraph = findTestSubject(component, 'linkToVisualizeParagraph');
     expect(paragraph.length).toBe(0);
   });
+
+  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();
+  });
 });
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
@@ -21,7 +21,7 @@ import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import angular from 'angular';
-import { uniq, noop } from 'lodash';
+import { uniq } from 'lodash';
 
 import { Subscription } from 'rxjs';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
@@ -53,7 +53,7 @@ import {
   isErrorEmbeddable,
   ErrorEmbeddable,
   ViewMode,
-  openAddPanelFlyout,
+  openAddPanelFlyout, EmbeddableFactoryNotFoundError,
 } from '../../../embeddable_api/public/np_ready/public';
 import { DashboardAppState, NavAction, ConfirmModalFn, SavedDashboardPanel } from './types';
 
@@ -142,16 +142,20 @@ export class DashboardAppController {
     }
     $scope.showSaveQuery = dashboardCapabilities.saveQuery as boolean;
 
-    $scope.getShouldShowEditHelp = () =>
+    const getShouldShowEditHelp = () =>
       !dashboardStateManager.getPanels().length &&
       dashboardStateManager.getIsEditMode() &&
       !dashboardConfig.getHideWriteControls();
 
-    $scope.getShouldShowViewHelp = () =>
+    const getShouldShowViewHelp = () =>
       !dashboardStateManager.getPanels().length &&
       dashboardStateManager.getIsViewMode() &&
       !dashboardConfig.getHideWriteControls();
 
+    const addVisualization = () => {
+      navActions[TopNavIds.VISUALIZE]();
+    };
+
     const updateIndexPatterns = (container?: DashboardContainer) => {
       if (!container || isErrorEmbeddable(container)) {
         return;
@@ -186,7 +190,7 @@ export class DashboardAppController {
         showLinkToVisualize: shouldShowEditHelp,
       };
       if (shouldShowEditHelp) {
-        emptyScreenProps.onVisualizeClick = noop;
+        emptyScreenProps.onVisualizeClick = addVisualization;
       }
       return emptyScreenProps;
     };
@@ -202,8 +206,8 @@ export class DashboardAppController {
       if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
         expandedPanelId = dashboardContainer.getInput().expandedPanelId;
       }
-      const shouldShowEditHelp = $scope.getShouldShowEditHelp();
-      const shouldShowViewHelp = $scope.getShouldShowViewHelp();
+      const shouldShowEditHelp = getShouldShowEditHelp();
+      const shouldShowViewHelp = getShouldShowViewHelp();
       return {
         id: dashboardStateManager.savedDashboard.id || '',
         filters: queryFilter.getFilters(),
@@ -258,8 +262,8 @@ export class DashboardAppController {
           dashboardContainer = container;
 
           dashboardContainer.renderEmpty = () => {
-            const shouldShowEditHelp = $scope.getShouldShowEditHelp();
-            const shouldShowViewHelp = $scope.getShouldShowViewHelp();
+            const shouldShowEditHelp = getShouldShowEditHelp();
+            const shouldShowViewHelp = getShouldShowViewHelp();
             const isEmptyState = shouldShowEditHelp || shouldShowViewHelp;
             return isEmptyState ? (
               <DashboardEmptyScreen {...getEmptyScreenProps(shouldShowEditHelp)} />
@@ -752,7 +756,17 @@ export class DashboardAppController {
       }
     };
 
-    navActions[TopNavIds.VISUALIZE] = async () => {};
+    navActions[TopNavIds.VISUALIZE] = async () => {
+      const type = 'visualization';
+      const factory = embeddables.getEmbeddableFactory(type);
+      if (!factory) {
+        throw new EmbeddableFactoryNotFoundError(type);
+      }
+      const explicitInput = await factory.getExplicitInput();
+      if (dashboardContainer) {
+        await dashboardContainer.addNewEmbeddable(type, explicitInput);
+      }
+    };
 
     navActions[TopNavIds.OPTIONS] = anchorElement => {
       showOptionsPopover({

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen.tsx
@@ -26,6 +26,7 @@ import {
   EuiPageBody,
   EuiPage,
   EuiText,
+  EuiButton,
 } from '@elastic/eui';
 import * as constants from './dashboard_empty_screen_constants';
 
@@ -38,23 +39,17 @@ export interface DashboardEmptyScreenProps {
 export function DashboardEmptyScreen({
   showLinkToVisualize,
   onLinkClick,
+  onVisualizeClick,
 }: DashboardEmptyScreenProps) {
   const linkToVisualizeParagraph = (
-    <EuiText data-test-subj="linkToVisualizeParagraph">
-      <p>
+    <p data-test-subj="linkToVisualizeParagraph">
+      <EuiButton iconSide="right" fill iconType="arrowDown" onClick={onVisualizeClick} data-test-subj="addVisualizationButton">
         <FormattedMessage
-          id="kbn.dashboard.addVisualizationDescription3"
-          defaultMessage="If you haven't set up any visualizations yet, {visualizeAppLink} to create your first visualization"
-          values={{
-            visualizeAppLink: (
-              <a className="euiLink" href="#/visualize">
-                {constants.visualizeAppLinkTest}
-              </a>
-            ),
-          }}
+          id="embeddableApi.addPanel.createNewDefaultOption"
+          defaultMessage="Create new"
         />
-      </p>
-    </EuiText>
+      </EuiButton>
+    </p>
   );
   const paragraph = (
     description1: string,
@@ -96,7 +91,7 @@ export function DashboardEmptyScreen({
   );
   return (
     <I18nProvider>
-      <EuiPage className="dshStartScreen" restrictWidth={'36em'}>
+      <EuiPage className="dshStartScreen" restrictWidth="36em">
         <EuiPageBody>
           <EuiPageContent verticalPosition="center" horizontalPosition="center">
             <EuiIcon type="dashboardApp" size="xxl" color="subdued" />