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', {