forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Dashboard] EUI-fication of the empty dashboard screen (elastic#51151)
* [Dashboard][POC] De-angularize empty screen * EUI-fication of the empty dashboard screen * Adding tests for empty dashboard screen * Removing unused imports * Reorganizing directive so that it works with local Angular * Adding string constants * Adding missing snapshot
- Loading branch information
Maja Grubic
authored
Nov 21, 2019
1 parent
46e0f9f
commit a6f7b18
Showing
10 changed files
with
780 additions
and
70 deletions.
There are no files selected for viewing
516 changes: 516 additions & 0 deletions
516
...gins/kibana/public/dashboard/__tests__/__snapshots__/dashboard_empty_screen.test.tsx.snap
Large diffs are not rendered by default.
Oops, something went wrong.
48 changes: 48 additions & 0 deletions
48
src/legacy/core_plugins/kibana/public/dashboard/__tests__/dashboard_empty_screen.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 from 'react'; | ||
| import { mountWithIntl } from 'test_utils/enzyme_helpers'; | ||
| import { DashboardEmptyScreen, Props } from '../dashboard_empty_screen'; | ||
|
|
||
| describe('DashboardEmptyScreen', () => { | ||
| const defaultProps = { | ||
| showLinkToVisualize: true, | ||
| onLinkClick: jest.fn(), | ||
| }; | ||
|
|
||
| function mountComponent(props?: Props) { | ||
| const compProps = props || defaultProps; | ||
| const comp = mountWithIntl(<DashboardEmptyScreen {...compProps} />); | ||
| return comp; | ||
| } | ||
|
|
||
| test('renders correctly with visualize paragraph', () => { | ||
| const component = mountComponent(); | ||
| expect(component).toMatchSnapshot(); | ||
| const paragraph = component.find('.linkToVisualizeParagraph'); | ||
| expect(paragraph.length).toBe(1); | ||
| }); | ||
|
|
||
| test('renders correctly without visualize paragraph', () => { | ||
| const component = mountComponent({ ...defaultProps, ...{ showLinkToVisualize: false } }); | ||
| expect(component).toMatchSnapshot(); | ||
| const paragraph = component.find('.linkToVisualizeParagraph'); | ||
| expect(paragraph.length).toBe(0); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /* | ||
| * 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 from 'react'; | ||
| import { I18nProvider, FormattedMessage } from '@kbn/i18n/react'; | ||
| import { EuiIcon, EuiLink } from '@elastic/eui'; | ||
| import * as constants from './dashboard_empty_screen_constants'; | ||
|
|
||
| export interface Props { | ||
| showLinkToVisualize: boolean; | ||
| onLinkClick: () => void; | ||
| } | ||
|
|
||
| export function DashboardEmptyScreen({ showLinkToVisualize, onLinkClick }: Props) { | ||
| const linkToVisualizeParagraph = ( | ||
| <p className="linkToVisualizeParagraph"> | ||
| <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> | ||
| ); | ||
| const paragraph = ( | ||
| description1: string, | ||
| description2: string, | ||
| linkText: string, | ||
| ariaLabel: string, | ||
| dataTestSubj?: string | ||
| ) => { | ||
| return ( | ||
| <p> | ||
| <span> | ||
| {description1} | ||
| <EuiLink onClick={onLinkClick} aria-label={ariaLabel} data-test-subj={dataTestSubj || ''}> | ||
| {linkText} | ||
| </EuiLink> | ||
| {description2} | ||
| </span> | ||
| </p> | ||
| ); | ||
| }; | ||
| const addVisualizationParagraph = ( | ||
| <React.Fragment> | ||
| {paragraph( | ||
| constants.addVisualizationDescription1, | ||
| constants.addVisualizationDescription2, | ||
| constants.addVisualizationLinkText, | ||
| constants.addVisualizationLinkAriaLabel, | ||
| 'emptyDashboardAddPanelButton' | ||
| )} | ||
| {linkToVisualizeParagraph} | ||
| </React.Fragment> | ||
| ); | ||
| const enterEditModeParagraph = paragraph( | ||
| constants.howToStartWorkingOnNewDashboardDescription1, | ||
| constants.howToStartWorkingOnNewDashboardDescription2, | ||
| constants.howToStartWorkingOnNewDashboardEditLinkText, | ||
| constants.howToStartWorkingOnNewDashboardEditLinkAriaLabel | ||
| ); | ||
| return ( | ||
| <I18nProvider> | ||
| <React.Fragment> | ||
| <EuiIcon type="dashboardApp" size="xxl" color="subdued" /> | ||
| <h2>{constants.fillDashboardTitle}</h2> | ||
| {showLinkToVisualize ? addVisualizationParagraph : enterEditModeParagraph} | ||
| </React.Fragment> | ||
| </I18nProvider> | ||
| ); | ||
| } |
78 changes: 78 additions & 0 deletions
78
src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen_constants.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* | ||
| * 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 { 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', | ||
| } | ||
| ); | ||
| export const howToStartWorkingOnNewDashboardDescription1: string = i18n.translate( | ||
| 'kbn.dashboard.howToStartWorkingOnNewDashboardDescription1', | ||
| { | ||
| defaultMessage: 'Click the ', | ||
| } | ||
| ); | ||
| export const howToStartWorkingOnNewDashboardDescription2: string = i18n.translate( | ||
| 'kbn.dashboard.howToStartWorkingOnNewDashboardDescription2', | ||
| { | ||
| defaultMessage: ' button in the menu bar above to start working on your new dashboard.', | ||
| } | ||
| ); | ||
| export const howToStartWorkingOnNewDashboardEditLinkText: string = i18n.translate( | ||
| 'kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText', | ||
| { | ||
| defaultMessage: 'Edit', | ||
| } | ||
| ); | ||
| export const howToStartWorkingOnNewDashboardEditLinkAriaLabel: string = i18n.translate( | ||
| 'kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkAriaLabel', | ||
| { | ||
| 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', | ||
| { | ||
| defaultMessage: 'visit the Visualize app', | ||
| } | ||
| ); |
30 changes: 30 additions & 0 deletions
30
src/legacy/core_plugins/kibana/public/dashboard/dashboard_empty_screen_directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
| // @ts-ignore | ||
| import angular from 'angular'; | ||
| import { DashboardEmptyScreen } from './dashboard_empty_screen'; | ||
|
|
||
| angular | ||
| .module('app/dashboard/emptyScreen', ['react']) | ||
| .directive('dashboardEmptyScreen', function(reactDirective: any) { | ||
| return reactDirective(DashboardEmptyScreen, [ | ||
| ['showLinkToVisualize', { watchDepth: 'value' }], | ||
| ['onLinkClick', { watchDepth: 'reference' }], | ||
| ]); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.