diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/content.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/content.test.js.snap
index 690875dc96900a..5b9cde6e3c9a95 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/content.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/content.test.js.snap
@@ -1,17 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render content with markdown 1`] = `
-
+
+ I am *some* [content](https://en.wikipedia.org/wiki/Content) with \`markdown\`
+
`;
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap
index f054b5f5d9363d..395fe30d48aca0 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap
@@ -1,35 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render 1`] = `
-
-
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
- launch myapp
-
-
-
-
-
+ <_EuiSplitPanelInner
+ color="subdued"
+ paddingSize="none"
>
-
-
-
- title1
-
-
-
-
-
-
-
- OSX
-
-
+
+ Windows
+
+
+
+ <_EuiSplitPanelInner
+ paddingSize="l"
+ >
+
- Windows
-
-
-
- ,
- "key": 0,
- "title": "step 1",
- },
- Object {
- "children": ,
- "key": 1,
- "title": "step 2",
- },
- ]
- }
- />
-
+
+
+
+ title1
+
+
+
+
+
+
+ ,
+ "key": 0,
+ "title": "step 1",
+ },
+ Object {
+ "children": ,
+ "key": 1,
+ "title": "step 2",
+ },
+ ]
+ }
+ titleSize="xs"
+ />
+
+
`;
exports[`statusCheckState checking status 1`] = `
-
-
+ <_EuiSplitPanelInner
+ color="subdued"
+ paddingSize="none"
>
-
-
-
- title1
-
-
-
-
-
-
-
- OSX
-
-
+
+ Windows
+
+
+
+ <_EuiSplitPanelInner
+ paddingSize="l"
+ >
+
- Windows
-
-
-
- ,
- "key": 0,
- "title": "step 1",
- },
- Object {
- "children": ,
- "key": 1,
- "title": "step 2",
- },
- Object {
- "children":
-
-
-
-
-
+
+
+ title1
+
+
+
+
+
+
+ ,
+ "key": 0,
+ "title": "step 1",
+ },
+ Object {
+ "children": ,
+ "key": 1,
+ "title": "step 2",
+ },
+ Object {
+ "children":
+
+
+
-
- custom btn label
-
-
-
-
- ,
- "key": "checkStatusStep",
- "status": "incomplete",
- "title": "custom title",
- },
- ]
- }
- />
-
+ custom btn label
+
+ ,
+ "key": "checkStatusStep",
+ "status": "incomplete",
+ "title": "custom title",
+ },
+ ]
+ }
+ titleSize="xs"
+ />
+
+
`;
exports[`statusCheckState failed status check - error 1`] = `
-
-
+ <_EuiSplitPanelInner
+ color="subdued"
+ paddingSize="none"
>
-
-
-
- title1
-
-
-
-
-
-
-
- OSX
-
-
+
+ Windows
+
+
+
+ <_EuiSplitPanelInner
+ paddingSize="l"
+ >
+
- Windows
-
-
-
- ,
- "key": 0,
- "title": "step 1",
- },
- Object {
- "children": ,
- "key": 1,
- "title": "step 2",
- },
- Object {
- "children":
-
-
-
-
-
+
+
+ title1
+
+
+
+
+
+
+ ,
+ "key": 0,
+ "title": "step 1",
+ },
+ Object {
+ "children": ,
+ "key": 1,
+ "title": "step 2",
+ },
+ Object {
+ "children":
+
+
+
-
- custom btn label
-
-
-
-
-
- ,
- "key": "checkStatusStep",
- "status": "danger",
- "title": "custom title",
- },
- ]
- }
- />
-
+ custom btn label
+
+
+
+
+
+ ,
+ "key": "checkStatusStep",
+ "status": "danger",
+ "title": "custom title",
+ },
+ ]
+ }
+ titleSize="xs"
+ />
+
+
`;
exports[`statusCheckState failed status check - no data 1`] = `
-
-
+ <_EuiSplitPanelInner
+ color="subdued"
+ paddingSize="none"
>
-
-
-
- title1
-
-
-
-
-
-
-
- OSX
-
-
+
+ Windows
+
+
+
+ <_EuiSplitPanelInner
+ paddingSize="l"
+ >
+
- Windows
-
-
-
- ,
- "key": 0,
- "title": "step 1",
- },
- Object {
- "children": ,
- "key": 1,
- "title": "step 2",
- },
- Object {
- "children":
-
-
-
-
-
+
+
+ title1
+
+
+
+
+
+
+ ,
+ "key": 0,
+ "title": "step 1",
+ },
+ Object {
+ "children": ,
+ "key": 1,
+ "title": "step 2",
+ },
+ Object {
+ "children":
+
+
+
-
- custom btn label
-
-
-
-
-
- ,
- "key": "checkStatusStep",
- "status": "warning",
- "title": "custom title",
- },
- ]
- }
- />
-
+ custom btn label
+
+
+
+
+
+ ,
+ "key": "checkStatusStep",
+ "status": "warning",
+ "title": "custom title",
+ },
+ ]
+ }
+ titleSize="xs"
+ />
+
+
`;
exports[`statusCheckState initial state - no check has been attempted 1`] = `
-
-
+ <_EuiSplitPanelInner
+ color="subdued"
+ paddingSize="none"
>
-
-
-
- title1
-
-
-
-
-
-
-
- OSX
-
-
+
+ Windows
+
+
+
+ <_EuiSplitPanelInner
+ paddingSize="l"
+ >
+
- Windows
-
-
-
- ,
- "key": 0,
- "title": "step 1",
- },
- Object {
- "children": ,
- "key": 1,
- "title": "step 2",
- },
- Object {
- "children":
-
-
-
-
-
+
+
+ title1
+
+
+
+
+
+
+ ,
+ "key": 0,
+ "title": "step 1",
+ },
+ Object {
+ "children": ,
+ "key": 1,
+ "title": "step 2",
+ },
+ Object {
+ "children":
+
+
+
-
- custom btn label
-
-
-
-
- ,
- "key": "checkStatusStep",
- "status": "incomplete",
- "title": "custom title",
- },
- ]
- }
- />
-
+ custom btn label
+
+ ,
+ "key": "checkStatusStep",
+ "status": "incomplete",
+ "title": "custom title",
+ },
+ ]
+ }
+ titleSize="xs"
+ />
+
+
`;
exports[`statusCheckState successful status check 1`] = `
-
-
+ <_EuiSplitPanelInner
+ color="subdued"
+ paddingSize="none"
>
-
-
-
- title1
-
-
-
-
-
-
-
- OSX
-
-
+
+ Windows
+
+
+
+ <_EuiSplitPanelInner
+ paddingSize="l"
+ >
+
- Windows
-
-
-
- ,
- "key": 0,
- "title": "step 1",
- },
- Object {
- "children": ,
- "key": 1,
- "title": "step 2",
- },
- Object {
- "children":
-
-
-
-
-
+
+
+ title1
+
+
+
+
+
+
+ ,
+ "key": 0,
+ "title": "step 1",
+ },
+ Object {
+ "children": ,
+ "key": 1,
+ "title": "step 2",
+ },
+ Object {
+ "children":
+
+
+
-
- custom btn label
-
-
-
-
-
- ,
- "key": "checkStatusStep",
- "status": "complete",
- "title": "custom title",
- },
- ]
- }
- />
-
+ custom btn label
+
+
+
+
+
+ ,
+ "key": "checkStatusStep",
+ "status": "complete",
+ "title": "custom title",
+ },
+ ]
+ }
+ titleSize="xs"
+ />
+
+
`;
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
index 410d29a42cac96..39bdda213acbab 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -1,182 +1,118 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`props exportedFieldsUrl 1`] = `
-
-
-
-
-
+
+
+
+
-
- Great tutorial
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ }
+ pageTitle={
+
+ Great tutorial
+
+ }
+/>
`;
exports[`props iconType 1`] = `
-
-
-
-
-
-
-
-
-
- Great tutorial
-
-
-
-
-
-
-
-
+
+
+
+ }
+ iconType="logoElastic"
+ pageTitle={
+
+ Great tutorial
+
+ }
+/>
`;
exports[`props isBeta 1`] = `
-
-
-
-
-
-
- Great tutorial
-
-
-
-
-
-
-
-
-
-
+
+
+
+ }
+ pageTitle={
+
+ Great tutorial
+
+
+
+
+
+ }
+/>
`;
exports[`props previewUrl 1`] = `
-
-
-
-
-
-
- Great tutorial
-
-
-
-
-
-
-
-
-
-
+
+
+
+ }
+ pageTitle={
+
+ Great tutorial
+
+ }
+ rightSideItems={
+ Array [
+ ,
+ ]
+ }
+/>
`;
exports[`render 1`] = `
-
-
-
-
-
-
- Great tutorial
-
-
-
-
-
-
-
-
+
+
+
+ }
+ pageTitle={
+
+ Great tutorial
+
+ }
+/>
`;
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index f643f2a22ea424..d970dd5416816b 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -115,219 +115,124 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
]
}
>
-
-
-
-
-
- Imports index pattern, visualizations and pre-defined dashboards.
-
-
-
-
-
- Load Kibana objects
-
-
-
-
-
- ,
- "key": "installStep",
- "status": "incomplete",
- "title": "Load Kibana objects",
- },
- ]
- }
+
+
+ Load Kibana objects
+
+
+
-
+
-
-
+
-
-
-
- Step 1 is incomplete
-
-
-
- 1
-
-
-
-
-
- Load Kibana objects
+
+ Imports index pattern, visualizations and pre-defined dashboards.
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
- Imports index pattern, visualizations and pre-defined dashboards.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Request failed, Error: simulated bulkRequest error
+
+ Load Kibana objects
+
-
-
-
+
+
+
+ Request failed, Error: simulated bulkRequest error
+
+
+
- Imports index pattern, visualizations and pre-defined dashboards.
-
-
-
-
-
- Load Kibana objects
-
-
-
-
-
- ,
- "key": "installStep",
- "status": "complete",
- "title": "Load Kibana objects",
- },
- ]
- }
+
+
+ Load Kibana objects
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+
-
- Load Kibana objects
+
+ Imports index pattern, visualizations and pre-defined dashboards.
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
- Imports index pattern, visualizations and pre-defined dashboards.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 1 saved objects successfully added
+
+ Load Kibana objects
+
-
-
-
+
+
+
+
+ 1 saved objects successfully added
+
+
- Imports index pattern, visualizations and pre-defined dashboards.
-
-
-
-
-
- Load Kibana objects
-
-
-
-
- ,
- "key": "installStep",
- "status": "incomplete",
- "title": "Load Kibana objects",
- },
- ]
- }
-/>
+
+
+
+ Load Kibana objects
+
+
+
+
+
+
+ Imports index pattern, visualizations and pre-defined dashboards.
+
+
+
+
+
+ Load Kibana objects
+
+
+
+
+
`;
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
index ac697fae17f693..91dcdabd75deed 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -1,173 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
-
-
-
-
-
+ ],
+ },
+ ]
+ }
+ isCloudEnabled={false}
+ offset={1}
+ onStatusCheck={[Function]}
+ paramValues={Object {}}
+ replaceTemplateStrings={[Function]}
+ setParameter={[Function]}
+ statusCheckState="NOT_CHECKED"
+ title="Instruction title"
+ />
+
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- {label}
-
-
-
-
+
+
+ {label}
+
+
+
);
}
diff --git a/src/plugins/home/public/application/components/tutorial/instruction.js b/src/plugins/home/public/application/components/tutorial/instruction.js
index e4b3b3f321bf9e..ebe78b78f300d7 100644
--- a/src/plugins/home/public/application/components/tutorial/instruction.js
+++ b/src/plugins/home/public/application/components/tutorial/instruction.js
@@ -10,18 +10,7 @@ import React, { Suspense, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Content } from './content';
-import {
- EuiCodeBlock,
- EuiFlexGroup,
- EuiFlexItem,
- EuiSpacer,
- EuiCopy,
- EuiButton,
- EuiLoadingSpinner,
- EuiErrorBoundary,
-} from '@elastic/eui';
-
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCodeBlock, EuiSpacer, EuiLoadingSpinner, EuiErrorBoundary } from '@elastic/eui';
import { getServices } from '../../kibana_services';
@@ -39,16 +28,21 @@ export function Instruction({
let pre;
if (textPre) {
- pre = ;
+ pre = (
+ <>
+
+
+
+ );
}
let post;
if (textPost) {
post = (
-
+ <>
-
+
);
}
const customComponent = tutorialService.getCustomComponent(customComponentName);
@@ -59,7 +53,6 @@ export function Instruction({
}
}, [customComponent]);
- let copyButton;
let commandBlock;
if (commands) {
const cmdText = commands
@@ -67,35 +60,16 @@ export function Instruction({
return replaceTemplateStrings(cmd, paramValues);
})
.join('\n');
- copyButton = (
-
- {(copy) => (
-
-
-
- )}
-
- );
commandBlock = (
-
-
- {cmdText}
-
+
+ {cmdText}
+
);
}
return (
-
- {pre}
-
-
- {copyButton}
-
-
+ {pre}
{commandBlock}
@@ -114,8 +88,6 @@ export function Instruction({
)}
{post}
-
-
);
}
diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.js b/src/plugins/home/public/application/components/tutorial/instruction_set.js
index 08b55a527b3cf5..822c60cdc31bad 100644
--- a/src/plugins/home/public/application/components/tutorial/instruction_set.js
+++ b/src/plugins/home/public/application/components/tutorial/instruction_set.js
@@ -21,12 +21,13 @@ import {
EuiFlexItem,
EuiButton,
EuiCallOut,
- EuiButtonEmpty,
EuiTitle,
+ EuiSplitPanel,
} from '@elastic/eui';
import * as StatusCheckStates from './status_check_states';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
class InstructionSetUi extends React.Component {
constructor(props) {
@@ -97,7 +98,12 @@ class InstructionSetUi extends React.Component {
color = 'warning';
break;
}
- return ;
+ return (
+ <>
+
+
+
+ );
}
getStepStatus(statusCheckState) {
@@ -131,27 +137,20 @@ class InstructionSetUi extends React.Component {
const { statusCheckState, statusCheckConfig, onStatusCheck } = this.props;
const checkStatusStep = (
-
-
-
-
-
-
-
- {statusCheckConfig.btnLabel || (
-
- )}
-
-
-
+
+
+ {statusCheckConfig.btnLabel || (
+
+ )}
+
{this.renderStatusCheckMessage()}
@@ -202,27 +201,29 @@ class InstructionSetUi extends React.Component {
steps.push(this.renderStatusCheck());
}
- return ;
+ return (
+ <>
+
+
+
+ );
};
renderHeader = () => {
let paramsVisibilityToggle;
if (this.props.params) {
- const ariaLabel = this.props.intl.formatMessage({
- id: 'home.tutorial.instructionSet.toggleAriaLabel',
- defaultMessage: 'toggle command parameters visibility',
- });
paramsVisibilityToggle = (
-
-
+
);
}
@@ -245,11 +246,14 @@ class InstructionSetUi extends React.Component {
}
return (
-
+ <>
+
+
+
);
};
@@ -257,28 +261,29 @@ class InstructionSetUi extends React.Component {
let paramsForm;
if (this.props.params && this.state.isParamFormVisible) {
paramsForm = (
-
+ <>
+
+
+
);
}
return (
-
- {this.renderHeader()}
-
- {this.renderCallOut()}
-
- {paramsForm}
-
- {this.renderTabs()}
-
-
-
- {this.renderInstructions()}
-
+
+
+ {this.renderTabs()}
+
+
+ {this.renderHeader()}
+ {paramsForm}
+ {this.renderCallOut()}
+ {this.renderInstructions()}
+
+
);
}
}
diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.test.js b/src/plugins/home/public/application/components/tutorial/instruction_set.test.js
index 1bce4f72fde607..6faadf275bea3d 100644
--- a/src/plugins/home/public/application/components/tutorial/instruction_set.test.js
+++ b/src/plugins/home/public/application/components/tutorial/instruction_set.test.js
@@ -34,12 +34,6 @@ const instructionVariants = [
},
];
-jest.mock('../../../../../kibana_react/public', () => {
- return {
- Markdown: () => ,
- };
-});
-
test('render', () => {
const component = shallowWithIntl(
- );
+ />,
+ ];
}
let exportedFields;
if (exportedFieldsUrl) {
exportedFields = (
-
-
-
+ <>
+
+
-
-
- );
- }
- let icon;
- if (iconType) {
- icon = (
-
-
-
+
+
);
}
let betaBadge;
@@ -81,31 +64,28 @@ function IntroductionUI({
);
}
return (
-
-
-
- {icon}
-
-
-
- {title}
- {betaBadge && (
- <>
-
- {betaBadge}
-
- )}
-
-
-
-
-
-
- {exportedFields}
-
-
- {img}
-
+
+ {title}
+ {betaBadge && (
+ <>
+
+ {betaBadge}
+
+ )}
+
+ }
+ description={
+ <>
+
+ {exportedFields}
+ {notices}
+
+ }
+ rightSideItems={rightSideItems}
+ />
);
}
@@ -116,6 +96,7 @@ IntroductionUI.propTypes = {
exportedFieldsUrl: PropTypes.string,
iconType: PropTypes.string,
isBeta: PropTypes.bool,
+ notices: PropTypes.node,
};
IntroductionUI.defaultProps = {
diff --git a/src/plugins/home/public/application/components/tutorial/introduction.test.js b/src/plugins/home/public/application/components/tutorial/introduction.test.js
index a0ab9d8c8e6a73..949f84d0181ed7 100644
--- a/src/plugins/home/public/application/components/tutorial/introduction.test.js
+++ b/src/plugins/home/public/application/components/tutorial/introduction.test.js
@@ -11,12 +11,6 @@ import { shallowWithIntl } from '@kbn/test/jest';
import { Introduction } from './introduction';
-jest.mock('../../../../../kibana_react/public', () => {
- return {
- Markdown: () => ,
- };
-});
-
test('render', () => {
const component = shallowWithIntl(
{
+ render() {
const installMsg = this.props.installMsg
? this.props.installMsg
: this.props.intl.formatMessage({
id: 'home.tutorial.savedObject.installLabel',
defaultMessage: 'Imports index pattern, visualizations and pre-defined dashboards.',
});
- const installStep = (
-
+
+ return (
+ <>
+
+
+ {this.props.intl.formatMessage({
+ id: 'home.tutorial.savedObject.loadTitle',
+ defaultMessage: 'Load Kibana objects',
+ })}
+
+
@@ -190,22 +199,8 @@ Click 'Confirm overwrite' to import and overwrite existing objects. Any changes
{this.renderInstallMessage()}
-
+
);
-
- return {
- title: this.props.intl.formatMessage({
- id: 'home.tutorial.savedObject.loadTitle',
- defaultMessage: 'Load Kibana objects',
- }),
- status: this.state.isInstalled ? 'complete' : 'incomplete',
- children: installStep,
- key: 'installStep',
- };
- };
-
- render() {
- return ;
}
}
diff --git a/src/plugins/home/public/application/components/tutorial/tutorial.js b/src/plugins/home/public/application/components/tutorial/tutorial.js
index 52daa53d4585c8..508a236bf45d4d 100644
--- a/src/plugins/home/public/application/components/tutorial/tutorial.js
+++ b/src/plugins/home/public/application/components/tutorial/tutorial.js
@@ -7,26 +7,18 @@
*/
import _ from 'lodash';
-import React from 'react';
+import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Footer } from './footer';
import { Introduction } from './introduction';
import { InstructionSet } from './instruction_set';
import { SavedObjectsInstaller } from './saved_objects_installer';
-import {
- EuiSpacer,
- EuiPage,
- EuiPanel,
- EuiText,
- EuiPageBody,
- EuiButtonGroup,
- EuiFlexGroup,
- EuiFlexItem,
-} from '@elastic/eui';
+import { EuiSpacer, EuiPanel, EuiButton, EuiButtonGroup, EuiFormRow } from '@elastic/eui';
import * as StatusCheckStates from './status_check_states';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { getServices } from '../../kibana_services';
+import { KibanaPageTemplate } from '../../../../../kibana_react/public';
const INSTRUCTIONS_TYPE = {
ELASTIC_CLOUD: 'elasticCloud',
@@ -250,19 +242,22 @@ class TutorialUi extends React.Component {
},
];
return (
-
-
+ <>
+
+
-
-
+
+
);
}
};
@@ -286,23 +281,25 @@ class TutorialUi extends React.Component {
offset += instructionSet.instructionVariants[0].instructions.length;
return (
- {
- this.onStatusCheck(index);
- }}
- offset={currentOffset}
- params={instructions.params}
- paramValues={this.state.paramValues}
- setParameter={this.setParameter}
- replaceTemplateStrings={this.props.replaceTemplateStrings}
- key={index}
- isCloudEnabled={this.props.isCloudEnabled}
- />
+
+ {
+ this.onStatusCheck(index);
+ }}
+ offset={currentOffset}
+ params={instructions.params}
+ paramValues={this.state.paramValues}
+ setParameter={this.setParameter}
+ replaceTemplateStrings={this.props.replaceTemplateStrings}
+ isCloudEnabled={this.props.isCloudEnabled}
+ />
+ {index < instructions.instructionSets.length - 1 && }
+
);
});
};
@@ -313,11 +310,16 @@ class TutorialUi extends React.Component {
}
return (
-
+ <>
+
+
+
+
+
);
};
@@ -338,22 +340,23 @@ class TutorialUi extends React.Component {
}
if (url && label) {
- return ;
+ return (
+ <>
+
+
+
+
+
+ );
}
};
renderModuleNotices() {
const notices = getServices().tutorialService.getModuleNotices();
if (notices.length && this.state.tutorial.moduleName) {
- return (
-
- {notices.map((ModuleNotice, index) => (
-
-
-
- ))}
-
- );
+ return notices.map((ModuleNotice, index) => (
+
+ ));
} else {
return null;
}
@@ -363,17 +366,34 @@ class TutorialUi extends React.Component {
let content;
if (this.state.notFound) {
content = (
-
+ ),
+ rightSideItems: [
+
+ {i18n.translate('home.tutorial.backToDirectory', {
+ defaultMessage: 'Back to directory',
+ })}
+ ,
+ ],
+ }}
+ />
);
}
@@ -405,27 +425,20 @@ class TutorialUi extends React.Component {
exportedFieldsUrl={exportedFieldsUrl}
iconType={icon}
isBeta={this.state.tutorial.isBeta}
+ notices={this.renderModuleNotices()}
/>
- {this.renderModuleNotices()}
-
- {this.renderInstructionSetsToggle()}
+ {this.renderInstructionSetsToggle()}
-
- {this.renderInstructionSets(instructions)}
- {this.renderSavedObjectsInstaller()}
- {this.renderFooter()}
-
+ {this.renderInstructionSets(instructions)}
+ {this.renderSavedObjectsInstaller()}
+ {this.renderFooter()}
);
}
- return (
-
- {content}
-
- );
+ return {content};
}
}
diff --git a/src/plugins/home/public/application/components/tutorial/tutorial.test.js b/src/plugins/home/public/application/components/tutorial/tutorial.test.js
index c76b20e63ae95f..c68f5ec69e1610 100644
--- a/src/plugins/home/public/application/components/tutorial/tutorial.test.js
+++ b/src/plugins/home/public/application/components/tutorial/tutorial.test.js
@@ -33,11 +33,6 @@ jest.mock('../../kibana_services', () => ({
},
}),
}));
-jest.mock('../../../../../kibana_react/public', () => {
- return {
- Markdown: () => ,
- };
-});
function buildInstructionSet(type) {
return {
diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx
index de9c7f651019e9..8f66658785b973 100644
--- a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx
+++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx
@@ -24,7 +24,6 @@ import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent';
import { AgentIcon } from '../../shared/agent_icon';
import { NewPackagePolicy } from '../apm_policy_form/typings';
import { getCommands } from '../../../tutorial/config_agent/commands/get_commands';
-import { CopyCommands } from '../../../tutorial/config_agent/copy_commands';
import { replaceTemplateStrings } from './replace_template_strings';
function AccordionButtonContent({
@@ -91,14 +90,9 @@ function TutorialConfigAgent({
policyDetails: { apmServerUrl, secretToken },
});
return (
-
-
-
-
-
- {commandBlock}
-
-
+
+ {commandBlock}
+
);
}
@@ -153,23 +147,16 @@ export function AgentInstructionsAccordion({
{textPre && (
-
-
-
-
- {commandBlock && (
-
-
-
- )}
-
+
)}
{commandBlock && (
<>
- {commandBlock}
+
+ {commandBlock}
+
)}
{customComponentName === 'TutorialConfigAgent' && (
diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/copy_commands.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/copy_commands.tsx
deleted file mode 100644
index c5261cfc1dc042..00000000000000
--- a/x-pack/plugins/apm/public/tutorial/config_agent/copy_commands.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import { EuiButton, EuiCopy } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-
-interface Props {
- commands: string;
-}
-export function CopyCommands({ commands }: Props) {
- return (
-
- {(copy) => (
-
- {i18n.translate('xpack.apm.tutorial.copySnippet', {
- defaultMessage: 'Copy snippet',
- })}
-
- )}
-
- );
-}
diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx
index 5ff1fd7f42119d..bce16ae6ef1f95 100644
--- a/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx
+++ b/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx
@@ -4,20 +4,13 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-import {
- EuiCodeBlock,
- EuiFlexGroup,
- EuiFlexItem,
- EuiLoadingSpinner,
- EuiSpacer,
-} from '@elastic/eui';
+import { EuiCodeBlock, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { HttpStart } from 'kibana/public';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import { APIReturnType } from '../..//services/rest/createCallApmApi';
import { getCommands } from './commands/get_commands';
-import { CopyCommands } from './copy_commands';
import { getPolicyOptions, PolicyOption } from './get_policy_options';
import { PolicySelector } from './policy_selector';
@@ -136,27 +129,19 @@ function TutorialConfigAgent({
return (
<>
-
-
-
- setSelectedOption(newSelectedOption)
- }
- fleetLink={getFleetLink({
- isFleetEnabled: data.isFleetEnabled,
- hasFleetAgents,
- basePath,
- })}
- />
-
-
-
-
-
+ setSelectedOption(newSelectedOption)}
+ fleetLink={getFleetLink({
+ isFleetEnabled: data.isFleetEnabled,
+ hasFleetAgents,
+ basePath,
+ })}
+ />
+
-
+
{commands}
diff --git a/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts b/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
index fb9fbae33ac82f..acc0ce69e0e4ee 100644
--- a/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
+++ b/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
@@ -76,7 +76,12 @@ export function onPremInstructions({
{
id: INSTRUCTION_VARIANT.FLEET,
instructions: [
- { customComponentName: 'TutorialFleetInstructions' },
+ {
+ title: i18n.translate('xpack.apm.tutorial.fleet.title', {
+ defaultMessage: 'Fleet',
+ }),
+ customComponentName: 'TutorialFleetInstructions',
+ },
],
},
]
diff --git a/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx b/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx
index 6b9b441551a561..24d9dc8e2c1004 100644
--- a/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx
+++ b/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx
@@ -7,7 +7,8 @@
import React, { memo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiText, EuiLink, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiText, EuiLink, EuiSpacer, EuiIcon } from '@elastic/eui';
import type { TutorialModuleNoticeComponent } from 'src/plugins/home/public';
import { useGetPackages, useLink, useCapabilities } from '../../hooks';
@@ -31,16 +32,20 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }
-
-
+
),
availableAsIntegrationLink: (