[Dashboard] Add visualization from dasbhoard empty screen (#52670)

* [Dashboard] Add visualization from dasbhoard empty screen * Fixing linting errors * Fixing i18n error * Fixing unit test that was causing typecheck failure
elastic · Dec 12, 2019 · c5bf708 · c5bf708
1 parent 1489c32
commit c5bf708
Show file tree

Hide file tree

Showing 12 changed files with 773 additions and 67 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,6 +53,7 @@ import {
   ErrorEmbeddable,
   ViewMode,
   openAddPanelFlyout,
+  EmbeddableFactoryNotFoundError,
 } from '../../../embeddable_api/public/np_ready/public';
 import { DashboardAppState, NavAction, ConfirmModalFn, SavedDashboardPanel } from './types';
 
@@ -145,16 +146,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;
@@ -189,7 +194,7 @@ export class DashboardAppController {
         showLinkToVisualize: shouldShowEditHelp,
       };
       if (shouldShowEditHelp) {
-        emptyScreenProps.onVisualizeClick = noop;
+        emptyScreenProps.onVisualizeClick = addVisualization;
       }
       return emptyScreenProps;
     };
@@ -205,8 +210,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(),
@@ -261,8 +266,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)} />
@@ -759,7 +764,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
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { I18nProvider } from '@kbn/i18n/react';
 import {
   EuiIcon,
   EuiLink,
@@ -26,6 +26,7 @@ import {
   EuiPageBody,
   EuiPage,
   EuiText,
+  EuiButton,
 } from '@elastic/eui';
 import * as constants from './dashboard_empty_screen_constants';
 
@@ -38,23 +39,20 @@ export interface DashboardEmptyScreenProps {
 export function DashboardEmptyScreen({
   showLinkToVisualize,
   onLinkClick,
+  onVisualizeClick,
 }: DashboardEmptyScreenProps) {
   const linkToVisualizeParagraph = (
-    <EuiText data-test-subj="linkToVisualizeParagraph">
-      <p>
-        <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>
-            ),
-          }}
-        />
-      </p>
-    </EuiText>
+    <p data-test-subj="linkToVisualizeParagraph">
+      <EuiButton
+        iconSide="right"
+        fill
+        iconType="arrowDown"
+        onClick={onVisualizeClick}
+        data-test-subj="addVisualizationButton"
+      >
+        {constants.createNewVisualizationButton}
+      </EuiButton>
+    </p>
   );
   const paragraph = (
     description1: string,
@@ -96,7 +94,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" />

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen_constants.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen_constants.tsx
@@ -76,3 +76,9 @@ export const visualizeAppLinkTest: string = i18n.translate(
     defaultMessage: 'visit the Visualize app',
   }
 );
+export const createNewVisualizationButton: string = i18n.translate(
+  'kbn.dashboard.createNewVisualizationButton',
+  {
+    defaultMessage: 'Create new',
+  }
+);