PMM-13419 Fix tour

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';
 
@@ -30,11 +31,15 @@ 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

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

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.',
   },
 };

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: (
-            <SidebarStep title={Messages.admin.title}>
-              <p>{Messages.admin.configure}</p>
+            <SidebarStep title={Messages.settings.title}>
+              <p>{Messages.settings.configure}</p>
             </SidebarStep>
           ),
         },