diff --git a/src/core_plugins/kibana/common/tutorials/tutorial_schema.js b/src/core_plugins/kibana/common/tutorials/tutorial_schema.js index 5501170c5e8b7..5f468f46e92b8 100644 --- a/src/core_plugins/kibana/common/tutorials/tutorial_schema.js +++ b/src/core_plugins/kibana/common/tutorials/tutorial_schema.js @@ -56,7 +56,7 @@ export const tutorialSchema = { category: Joi.string().valid(Object.values(TUTORIAL_CATEGORY)).required(), name: Joi.string().required(), shortDescription: Joi.string().required(), - iconPath: Joi.string(), + euiIconType: Joi.string(), //EUI icon type string, one of https://elastic.github.io/eui/#/icons longDescription: Joi.string().required(), completionTimeMinutes: Joi.number().integer(), previewImagePath: Joi.string(), diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap new file mode 100644 index 0000000000000..473e79ceee721 --- /dev/null +++ b/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap @@ -0,0 +1,149 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props iconType 1`] = ` + + + + + + + + + Great tutorial + + + + + + this is a great tutorial about... + + + + + + +`; + +exports[`props iconUrl 1`] = ` + + + + + + + + + Great tutorial + + + + + + this is a great tutorial about... + + + + + + +`; + +exports[`render 1`] = ` + + + + + + Great tutorial + + + + + + this is a great tutorial about... + + + + + + +`; diff --git a/src/core_plugins/kibana/public/home/components/synopsis.js b/src/core_plugins/kibana/public/home/components/synopsis.js index 0c2bda748d616..80522f1dfc414 100644 --- a/src/core_plugins/kibana/public/home/components/synopsis.js +++ b/src/core_plugins/kibana/public/home/components/synopsis.js @@ -8,9 +8,10 @@ import { EuiTitle, EuiText, EuiTextColor, + EuiIcon, } from '@elastic/eui'; -export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) { +export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPanel }) { let optionalImg; if (iconUrl) { optionalImg = ( @@ -22,6 +23,15 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) { /> ); + } else if (iconType) { + optionalImg = ( + + + + ); } const content = ( @@ -53,8 +63,6 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) { ); } - - return ( { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line +}); + +describe('props', () => { + test('iconType', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line + }); + + test('iconUrl', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line + }); +}); diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap new file mode 100644 index 0000000000000..dbf80a28aacb7 --- /dev/null +++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap @@ -0,0 +1,171 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props exportedFieldsUrl 1`] = ` + + + + + Great tutorial + + + + + + + + View exported fields + + + + + +`; + +exports[`props iconType 1`] = ` + + + + + + Great tutorial + + + + + + + +`; + +exports[`props previewUrl 1`] = ` + + + + + Great tutorial + + + + + + + + + +`; + +exports[`render 1`] = ` + + + + + Great tutorial + + + + + + + +`; diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap index f8c62ed720795..b70f6d6882c8e 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap +++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap @@ -91,6 +91,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc - View exported fields - + ); } + let icon; + if (iconType) { + icon = ( + + ); + } return ( + - {title} + + {icon} + {title} + @@ -58,4 +76,5 @@ Introduction.propTypes = { title: PropTypes.string.isRequired, previewUrl: PropTypes.string, exportedFieldsUrl: PropTypes.string, + iconType: PropTypes.string, }; diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js b/src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js new file mode 100644 index 0000000000000..8741efc67c2fa --- /dev/null +++ b/src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { Introduction } from './introduction'; + +test('render', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line +}); + +describe('props', () => { + test('iconType', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line + }); + + test('exportedFieldsUrl', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line + }); + + test('previewUrl', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); // eslint-disable-line + }); +}); diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js index 36287bf864dad..4f86688087e07 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js +++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js @@ -194,6 +194,7 @@ export class Tutorial extends React.Component { description={this.props.replaceTemplateStrings(this.state.tutorial.longDescription)} previewUrl={previewUrl} exportedFieldsUrl={exportedFieldsUrl} + iconType={this.state.tutorial.euiIconType} /> diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js index 240be93bf0588..3d7de5c9888a8 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js +++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js @@ -28,6 +28,7 @@ function buildInstructionSet(type) { const tutorial = { name: 'jest test tutorial', longDescription: 'tutorial used to drive jest tests', + euiIconType: 'logoApache', elasticCloud: buildInstructionSet('elasticCloud'), onPrem: buildInstructionSet('onPrem'), onPremElasticCloud: buildInstructionSet('onPremElasticCloud') diff --git a/src/core_plugins/kibana/public/home/components/tutorial_directory.js b/src/core_plugins/kibana/public/home/components/tutorial_directory.js index cfb9fbd80982c..dda342b7e51aa 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial_directory.js +++ b/src/core_plugins/kibana/public/home/components/tutorial_directory.js @@ -93,6 +93,7 @@ export class TutorialDirectory extends React.Component { return (
+ + this is a great tutorial about... + +