[Dashboard] Empty screen redesign (elastic#53681)

* Edit screen redesign * Edit screen redesign * Redesign view screen * Redesign view screen * Fixing type failure, and functional test * Updating failing functional tests * update dashboard empty styles * i18n fix * Updating failing snapshot Co-authored-by: Ryan Keairns <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
jloleysens · Jan 6, 2020 · 5b2a188 · 5b2a188
1 parent aa38fb6
commit 5b2a188
Show file tree

Hide file tree

Showing 13 changed files with 402 additions and 305 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
@@ -24,11 +24,16 @@ import {
 } from '../np_ready/dashboard_empty_screen';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
+import { coreMock } from '../../../../../../core/public/mocks';
 
 describe('DashboardEmptyScreen', () => {
+  const setupMock = coreMock.createSetup();
+
   const defaultProps = {
     showLinkToVisualize: true,
     onLinkClick: jest.fn(),
+    uiSettings: setupMock.uiSettings,
+    http: setupMock.http,
   };
 
   function mountComponent(props?: DashboardEmptyScreenProps) {

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss b/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss
@@ -6,5 +6,31 @@
 
 .dshStartScreen {
   text-align: center;
-  padding: $euiSizeS;
+}
+
+.dshStartScreen__pageContent {
+  padding: $euiSizeXXL;
+}
+
+.dshStartScreen__panelDesc {
+  max-width: 260px;
+  margin: 0 auto;
+}
+
+.dshEmptyWidget {
+  border: $euiBorderThin;
+  border-style:  dashed;
+  border-radius: $euiBorderRadius;
+  padding: $euiSizeXXL * 2;
+  max-width: 400px;
+  margin-left: $euiSizeS;
+  text-align: center;
+}
+
+.dshEmptyWidget {
+  border: 2px dashed $euiColorLightShade;
+  padding: 4 * $euiSize;
+  max-width: 20em;
+  margin-left: 10px;
+  text-align: center;
 }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -123,7 +123,7 @@ export class DashboardAppController {
         timefilter: { timefilter },
       },
     },
-    core: { notifications, overlays, chrome, injectedMetadata, uiSettings, savedObjects },
+    core: { notifications, overlays, chrome, injectedMetadata, uiSettings, savedObjects, http },
   }: DashboardAppControllerDependencies) {
     new FilterStateManager(globalState, getAppState, filterManager);
     const queryFilter = filterManager;
@@ -197,6 +197,8 @@ export class DashboardAppController {
       const emptyScreenProps: DashboardEmptyScreenProps = {
         onLinkClick: shouldShowEditHelp ? $scope.showAddPanel : $scope.enterEditMode,
         showLinkToVisualize: shouldShowEditHelp,
+        uiSettings,
+        http,
       };
       if (shouldShowEditHelp) {
         emptyScreenProps.onVisualizeClick = addVisualization;

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen.tsx
@@ -19,94 +19,110 @@
 import React from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
-  EuiIcon,
   EuiLink,
   EuiSpacer,
   EuiPageContent,
   EuiPageBody,
   EuiPage,
+  EuiImage,
   EuiText,
   EuiButton,
 } from '@elastic/eui';
+import { IUiSettingsClient, HttpStart } from 'kibana/public';
 import * as constants from './dashboard_empty_screen_constants';
 
 export interface DashboardEmptyScreenProps {
   showLinkToVisualize: boolean;
   onLinkClick: () => void;
   onVisualizeClick?: () => void;
+  uiSettings: IUiSettingsClient;
+  http: HttpStart;
 }
 
 export function DashboardEmptyScreen({
   showLinkToVisualize,
   onLinkClick,
   onVisualizeClick,
+  uiSettings,
+  http,
 }: DashboardEmptyScreenProps) {
+  const IS_DARK_THEME = uiSettings.get('theme:darkMode');
+  const emptyStateGraphicURL = IS_DARK_THEME
+    ? '/plugins/kibana/home/assets/welcome_graphic_dark_2x.png'
+    : '/plugins/kibana/home/assets/welcome_graphic_light_2x.png';
   const linkToVisualizeParagraph = (
     <p data-test-subj="linkToVisualizeParagraph">
       <EuiButton
         iconSide="right"
+        size="s"
         fill
         iconType="arrowDown"
         onClick={onVisualizeClick}
         data-test-subj="addVisualizationButton"
+        aria-label={constants.createNewVisualizationButtonAriaLabel}
       >
         {constants.createNewVisualizationButton}
       </EuiButton>
     </p>
   );
   const paragraph = (
-    description1: string,
+    description1: string | null,
     description2: string,
     linkText: string,
     ariaLabel: string,
     dataTestSubj?: string
   ) => {
     return (
-      <EuiText size="m">
+      <EuiText size="m" color="subdued">
         <p>
           {description1}
+          {description1 && <span>&nbsp;</span>}
           <EuiLink onClick={onLinkClick} aria-label={ariaLabel} data-test-subj={dataTestSubj || ''}>
             {linkText}
           </EuiLink>
+          <span>&nbsp;</span>
           {description2}
         </p>
       </EuiText>
     );
   };
-  const addVisualizationParagraph = (
-    <React.Fragment>
-      {paragraph(
-        constants.addVisualizationDescription1,
-        constants.addVisualizationDescription2,
-        constants.addVisualizationLinkText,
-        constants.addVisualizationLinkAriaLabel,
-        'emptyDashboardAddPanelButton'
-      )}
-      <EuiSpacer size="m" />
-      {linkToVisualizeParagraph}
-    </React.Fragment>
-  );
   const enterEditModeParagraph = paragraph(
     constants.howToStartWorkingOnNewDashboardDescription1,
     constants.howToStartWorkingOnNewDashboardDescription2,
     constants.howToStartWorkingOnNewDashboardEditLinkText,
     constants.howToStartWorkingOnNewDashboardEditLinkAriaLabel
   );
-  return (
-    <I18nProvider>
-      <EuiPage className="dshStartScreen" restrictWidth="36em">
-        <EuiPageBody>
-          <EuiPageContent verticalPosition="center" horizontalPosition="center">
-            <EuiIcon type="dashboardApp" size="xxl" color="subdued" />
-            <EuiSpacer size="s" />
-            <EuiText grow={true}>
-              <h2 key={0.5}>{constants.fillDashboardTitle}</h2>
-            </EuiText>
-            <EuiSpacer size="m" />
-            {showLinkToVisualize ? addVisualizationParagraph : enterEditModeParagraph}
-          </EuiPageContent>
-        </EuiPageBody>
-      </EuiPage>
-    </I18nProvider>
+  const enterViewModeParagraph = paragraph(
+    null,
+    constants.addNewVisualizationDescription,
+    constants.addExistingVisualizationLinkText,
+    constants.addExistingVisualizationLinkAriaLabel
+  );
+  const viewMode = (
+    <EuiPage className="dshStartScreen" restrictWidth="500px">
+      <EuiPageBody>
+        <EuiPageContent
+          verticalPosition="center"
+          horizontalPosition="center"
+          paddingSize="none"
+          className="dshStartScreen__pageContent"
+        >
+          <EuiImage url={http.basePath.prepend(emptyStateGraphicURL)} alt="" />
+          <EuiText size="m">
+            <p style={{ fontWeight: 'bold' }}>{constants.fillDashboardTitle}</p>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <div className="dshStartScreen__panelDesc">{enterEditModeParagraph}</div>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+  const editMode = (
+    <div data-test-subj="emptyDashboardWidget" className="dshEmptyWidget">
+      {enterViewModeParagraph}
+      <EuiSpacer size="l" />
+      {linkToVisualizeParagraph}
+    </div>
   );
+  return <I18nProvider>{showLinkToVisualize ? editMode : viewMode}</I18nProvider>;
 }
diff --git a/...legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen_constants.tsx b/...legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen_constants.tsx
@@ -19,40 +19,20 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const addVisualizationDescription1: string = i18n.translate(
-  'kbn.dashboard.addVisualizationDescription1',
-  {
-    defaultMessage: 'Click the ',
-  }
-);
-export const addVisualizationDescription2: string = i18n.translate(
-  'kbn.dashboard.addVisualizationDescription2',
-  {
-    defaultMessage: ' button in the menu bar above to add a visualization to the dashboard.',
-  }
-);
-export const addVisualizationLinkText: string = i18n.translate(
-  'kbn.dashboard.addVisualizationLinkText',
-  {
-    defaultMessage: 'Add',
-  }
-);
-export const addVisualizationLinkAriaLabel: string = i18n.translate(
-  'kbn.dashboard.addVisualizationLinkAriaLabel',
-  {
-    defaultMessage: 'Add visualization',
-  }
-);
+/** VIEW MODE CONSTANTS **/
+export const fillDashboardTitle: string = i18n.translate('kbn.dashboard.fillDashboardTitle', {
+  defaultMessage: 'This dashboard is empty. Let\u2019s fill it up!',
+});
 export const howToStartWorkingOnNewDashboardDescription1: string = i18n.translate(
   'kbn.dashboard.howToStartWorkingOnNewDashboardDescription1',
   {
-    defaultMessage: 'Click the ',
+    defaultMessage: 'Click',
   }
 );
 export const howToStartWorkingOnNewDashboardDescription2: string = i18n.translate(
   'kbn.dashboard.howToStartWorkingOnNewDashboardDescription2',
   {
-    defaultMessage: ' button in the menu bar above to start working on your new dashboard.',
+    defaultMessage: 'in the menu bar above to start adding panels.',
   }
 );
 export const howToStartWorkingOnNewDashboardEditLinkText: string = i18n.translate(
@@ -67,13 +47,23 @@ export const howToStartWorkingOnNewDashboardEditLinkAriaLabel: string = i18n.tra
     defaultMessage: 'Edit dashboard',
   }
 );
-export const fillDashboardTitle: string = i18n.translate('kbn.dashboard.fillDashboardTitle', {
-  defaultMessage: 'This dashboard is empty. Let\u2019s fill it up!',
-});
-export const visualizeAppLinkTest: string = i18n.translate(
-  'kbn.dashboard.visitVisualizeAppLinkText',
+/** EDIT MODE CONSTANTS **/
+export const addExistingVisualizationLinkText: string = i18n.translate(
+  'kbn.dashboard.addExistingVisualizationLinkText',
+  {
+    defaultMessage: 'Add an existing',
+  }
+);
+export const addExistingVisualizationLinkAriaLabel: string = i18n.translate(
+  'kbn.dashboard.addVisualizationLinkAriaLabel',
+  {
+    defaultMessage: 'Add an existing visualization',
+  }
+);
+export const addNewVisualizationDescription: string = i18n.translate(
+  'kbn.dashboard.addNewVisualizationText',
   {
-    defaultMessage: 'visit the Visualize app',
+    defaultMessage: 'or new object to this dashboard',
   }
 );
 export const createNewVisualizationButton: string = i18n.translate(
@@ -82,3 +72,9 @@ export const createNewVisualizationButton: string = i18n.translate(
     defaultMessage: 'Create new',
   }
 );
+export const createNewVisualizationButtonAriaLabel: string = i18n.translate(
+  'kbn.dashboard.createNewVisualizationButtonAriaLabel',
+  {
+    defaultMessage: 'Create new visualization button',
+  }
+);
diff --git a/src/legacy/core_plugins/kibana/public/home/assets/welcome_graphic_dark_2x.png b/src/legacy/core_plugins/kibana/public/home/assets/welcome_graphic_dark_2x.png
diff --git a/src/legacy/core_plugins/kibana/public/home/assets/welcome_graphic_light_2x.png b/src/legacy/core_plugins/kibana/public/home/assets/welcome_graphic_light_2x.png
diff --git a/test/functional/apps/dashboard/empty_dashboard.js b/test/functional/apps/dashboard/empty_dashboard.js
@@ -44,13 +44,13 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
     });
 
-    it('should display add button', async () => {
-      const addButtonExists = await testSubjects.exists('emptyDashboardAddPanelButton');
-      expect(addButtonExists).to.be(true);
+    it('should display empty widget', async () => {
+      const emptyWidgetExists = await testSubjects.exists('emptyDashboardWidget');
+      expect(emptyWidgetExists).to.be(true);
     });
 
     it.skip('should open add panel when add button is clicked', async () => {
-      await testSubjects.click('emptyDashboardAddPanelButton');
+      await testSubjects.click('dashboardAddPanelButton');
       const isAddPanelOpen = await dashboardAddPanel.isAddPanelOpen();
       expect(isAddPanelOpen).to.be(true);
     });

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -1773,10 +1773,7 @@
     "kbn.context.reloadPageDescription.selectValidAnchorDocumentTextMessage": "にアクセスして有効な別のドキュメントを選択してください。",
     "kbn.context.unableToLoadAnchorDocumentDescription": "別のドキュメントが読み込めません",
     "kbn.context.unableToLoadDocumentDescription": "ドキュメントが読み込めません",
-    "kbn.dashboard.addVisualizationDescription1": "上のメニューバーの ",
-    "kbn.dashboard.addVisualizationDescription2": " ボタンをクリックして、ダッシュボードにビジュアライゼーションを追加します。",
     "kbn.dashboard.addVisualizationLinkAriaLabel": "ビジュアライゼーションを追加",
-    "kbn.dashboard.addVisualizationLinkText": "追加",
     "kbn.dashboard.badge.readOnly.text": "読み込み専用",
     "kbn.dashboard.badge.readOnly.tooltip": "ダッシュボードを保存できません",
     "kbn.dashboard.changeViewModeConfirmModal.cancelButtonLabel": "編集を続行",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -1774,10 +1774,7 @@
     "kbn.context.reloadPageDescription.selectValidAnchorDocumentTextMessage": "以选择有效地定位点文档。",
     "kbn.context.unableToLoadAnchorDocumentDescription": "无法加载该定位点文档",
     "kbn.context.unableToLoadDocumentDescription": "无法加载文档",
-    "kbn.dashboard.addVisualizationDescription1": "单击上述菜单栏中的 ",
-    "kbn.dashboard.addVisualizationDescription2": " 按钮，以将可视化添加到仪表板。",
     "kbn.dashboard.addVisualizationLinkAriaLabel": "添加可视化",
-    "kbn.dashboard.addVisualizationLinkText": "添加",
     "kbn.dashboard.badge.readOnly.text": "只读",
     "kbn.dashboard.badge.readOnly.tooltip": "无法保存仪表板",
     "kbn.dashboard.changeViewModeConfirmModal.cancelButtonLabel": "继续编辑",

diff --git a/x-pack/test/functional/apps/dashboard/feature_controls/dashboard_security.ts b/x-pack/test/functional/apps/dashboard/feature_controls/dashboard_security.ts
@@ -107,7 +107,7 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
             shouldLoginIfPrompted: false,
           }
         );
-        await testSubjects.existOrFail('emptyDashboardAddPanelButton', { timeout: 10000 });
+        await testSubjects.existOrFail('emptyDashboardWidget', { timeout: 10000 });
       });
 
       it(`can view existing Dashboard`, async () => {

diff --git a/x-pack/test/functional/apps/dashboard/feature_controls/dashboard_spaces.ts b/x-pack/test/functional/apps/dashboard/feature_controls/dashboard_spaces.ts
@@ -73,7 +73,7 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
             shouldLoginIfPrompted: false,
           }
         );
-        await testSubjects.existOrFail('emptyDashboardAddPanelButton', { timeout: 10000 });
+        await testSubjects.existOrFail('emptyDashboardWidget', { timeout: 10000 });
       });
 
       it(`can view existing Dashboard`, async () => {