diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_feature_tour_context.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_feature_tour_context.tsx
index 6c1d5a0de7a54..879f9c4f2ddbe 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_feature_tour_context.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_feature_tour_context.tsx
@@ -9,12 +9,15 @@ import React, { createContext, useContext, useEffect, useMemo, FC } from 'react'
import { noop } from 'lodash';
import {
- useEuiTour,
- EuiTourState,
- EuiStatelessTourStep,
- EuiSpacer,
EuiButton,
+ EuiButtonEmpty,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSpacer,
+ EuiTourState,
EuiTourStepProps,
+ EuiStatelessTourStep,
+ useEuiTour,
} from '@elastic/eui';
import { invariant } from '../../../../../../common/utils/invariant';
import { RULES_MANAGEMENT_FEATURE_TOUR_STORAGE_KEY } from '../../../../../../common/constants';
@@ -37,7 +40,7 @@ const featuresTourSteps: EuiStatelessTourStep[] = [
{
step: 1,
title: i18n.FEATURE_TOUR_IN_MEMORY_TABLE_STEP_TITLE,
- content: <>>,
+ content:
{i18n.FEATURE_TOUR_IN_MEMORY_TABLE_STEP}
,
stepsTotal: 2,
children: <>>,
onFinish: noop,
@@ -71,6 +74,7 @@ const RulesFeatureTourContext = createContext {
const { storage } = useKibana().services;
+
const initialStore = useMemo(
() => ({
...tourConfig,
@@ -79,43 +83,60 @@ export const RulesFeatureTourContextProvider: FC = ({ children }) => {
[storage]
);
- const [stepProps, actions, reducerState] = useEuiTour(featuresTourSteps, initialStore);
-
- const finishTour = actions.finishTour;
- const goToNextStep = actions.incrementStep;
-
- const inMemoryTableStepProps = useMemo(
+ const [tourSteps, tourActions, tourState] = useEuiTour(featuresTourSteps, initialStore);
+
+ const enhancedSteps = useMemo(() => {
+ return tourSteps.map((item, index, array) => {
+ return {
+ ...item,
+ content: (
+ <>
+ {item.content}
+
+
+
+
+ {i18n.FEATURE_TOUR_PREV_STEP_BUTTON}
+
+
+
+
+ {i18n.FEATURE_TOUR_NEXT_STEP_BUTTON}
+
+
+
+ >
+ ),
+ };
+ });
+ }, [tourSteps, tourActions]);
+
+ const providerValue = useMemo(
() => ({
- ...stepProps[0],
- content: (
- <>
- {i18n.FEATURE_TOUR_IN_MEMORY_TABLE_STEP}
-
-
- {i18n.FEATURE_TOUR_IN_MEMORY_TABLE_STEP_NEXT}
-
- >
- ),
+ steps: {
+ inMemoryTableStepProps: enhancedSteps[0],
+ bulkActionsStepProps: enhancedSteps[1],
+ },
+ finishTour: tourActions.finishTour,
+ goToNextStep: tourActions.incrementStep,
}),
- [stepProps, goToNextStep]
+ [enhancedSteps, tourActions]
);
useEffect(() => {
- const { isTourActive, currentTourStep } = reducerState;
+ const { isTourActive, currentTourStep } = tourState;
storage.set(RULES_MANAGEMENT_FEATURE_TOUR_STORAGE_KEY, { isTourActive, currentTourStep });
- }, [reducerState, storage]);
-
- const providerValue = useMemo(
- () => ({
- steps: {
- inMemoryTableStepProps,
- bulkActionsStepProps: stepProps[1],
- },
- finishTour,
- goToNextStep,
- }),
- [finishTour, goToNextStep, inMemoryTableStepProps, stepProps]
- );
+ }, [tourState, storage]);
return (
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
index c336b588f12b8..d56e05c4a4e9d 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
@@ -95,6 +95,20 @@ export const FEATURE_TOUR_TITLE = i18n.translate(
}
);
+export const FEATURE_TOUR_PREV_STEP_BUTTON = i18n.translate(
+ 'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.prevStepButtonTitle',
+ {
+ defaultMessage: 'Go back',
+ }
+);
+
+export const FEATURE_TOUR_NEXT_STEP_BUTTON = i18n.translate(
+ 'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.nextStepButtonTitle',
+ {
+ defaultMessage: 'Ok, got it',
+ }
+);
+
export const FEATURE_TOUR_IN_MEMORY_TABLE_STEP = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.inMemoryTableStepDescription',
{
@@ -110,13 +124,6 @@ export const FEATURE_TOUR_IN_MEMORY_TABLE_STEP_TITLE = i18n.translate(
}
);
-export const FEATURE_TOUR_IN_MEMORY_TABLE_STEP_NEXT = i18n.translate(
- 'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.inMemoryTableStepNextButtonTitle',
- {
- defaultMessage: 'Ok, got it',
- }
-);
-
export const FEATURE_TOUR_BULK_ACTIONS_STEP_TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.bulkActionsStepTitle',
{