diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx index ee58fb39bc64..182bb9635a4a 100644 --- a/public/app/core/components/AppChrome/AppChromeMenu.tsx +++ b/public/app/core/components/AppChrome/AppChromeMenu.tsx @@ -2,6 +2,7 @@ import { css } from '@emotion/css'; import { useDialog } from '@react-aria/dialog'; import { FocusScope } from '@react-aria/focus'; import { OverlayContainer, useOverlay } from '@react-aria/overlays'; +import { useTour } from '@reactour/tour'; import React, { useRef } from 'react'; import CSSTransition from 'react-transition-group/CSSTransition'; @@ -29,12 +30,16 @@ export function AppChromeMenu({}: Props) { const isOpen = state.megaMenuOpen && !state.megaMenuDocked; const onClose = () => chrome.setMegaMenuOpen(false); + + // @PERCONA + const { isOpen: isTourOpen } = useTour(); const { overlayProps, underlayProps } = useOverlay( { - isDismissable: true, + isDismissable: !isTourOpen, isOpen: true, onClose, + isKeyboardDismissDisabled: !!isTourOpen, shouldCloseOnInteractOutside: (element) => { // don't close when clicking on the menu toggle, let the toggle button handle that // this prevents some nasty flickering when the menu is open and the toggle button is clicked diff --git a/public/app/percona/shared/core/hooks/tour.ts b/public/app/percona/shared/core/hooks/tour.ts index 4ebe487a14f3..84229d61a926 100644 --- a/public/app/percona/shared/core/hooks/tour.ts +++ b/public/app/percona/shared/core/hooks/tour.ts @@ -1,6 +1,7 @@ import { useTour } from '@reactour/tour'; import { useCallback, useEffect, useMemo } from 'react'; +import { useGrafana } from 'app/core/context/GrafanaContext'; import * as TourActions from 'app/percona/shared/core/reducers/tour'; import { TourStep, TourType } from 'app/percona/shared/core/reducers/tour'; import { useAppDispatch } from 'app/store/store'; @@ -14,6 +15,7 @@ const usePerconaTour = () => { const { steps, tour } = useSelector(getTour); const reactTour = useTour(); const tourSteps = useMemo(() => (tour ? steps[tour] : []), [tour, steps]); + const { chrome } = useGrafana(); useEffect(() => { if (reactTour.setSteps) { @@ -31,6 +33,8 @@ const usePerconaTour = () => { const startTour = useCallback( async (tour: TourType) => { + chrome.setMegaMenuOpen(true); + const firstStep = steps[tour][0]; // wait for the first step element to visible diff --git a/public/app/percona/tour/steps/alerting/alerting.messages.ts b/public/app/percona/tour/steps/alerting/alerting.messages.ts index 2e4ce165d7c7..f6b6d8bea9b8 100644 --- a/public/app/percona/tour/steps/alerting/alerting.messages.ts +++ b/public/app/percona/tour/steps/alerting/alerting.messages.ts @@ -39,8 +39,8 @@ export const Messages = { alert: 'Alert Groups show grouped alerts.', grouping: "Group common alerts into a single alert group to ensure that PMM doesn't fire duplicate alerts.", }, - admin: { - title: 'Admin', + settings: { + title: 'Settings', configure: 'Use this to configure Alertmanagers in raw JSON format.', }, }; diff --git a/public/app/percona/tour/steps/alerting/alerting.steps.tsx b/public/app/percona/tour/steps/alerting/alerting.steps.tsx index af1560eb39d5..5fa37778b76e 100644 --- a/public/app/percona/tour/steps/alerting/alerting.steps.tsx +++ b/public/app/percona/tour/steps/alerting/alerting.steps.tsx @@ -79,10 +79,10 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [ ...(isAdmin ? [ { - selector: '[aria-label="Admin"]', + selector: '[aria-label="Settings"]', content: ( - -

{Messages.admin.configure}

+ +

{Messages.settings.configure}

), },