From e93826bc8c8cfb44da243b1b8a6849b81ec2e4d7 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Thu, 3 Oct 2024 11:17:32 +0200
Subject: [PATCH 1/2] PMM-13419 Fix tour

---
 public/app/core/components/AppChrome/AppChromeMenu.tsx     | 7 ++++++-
 public/app/percona/shared/core/hooks/tour.ts               | 4 ++++
 .../app/percona/tour/steps/alerting/alerting.messages.ts   | 4 ++--
 public/app/percona/tour/steps/alerting/alerting.steps.tsx  | 6 +++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx
index ee58fb39bc640..182bb9635a4a5 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 4ebe487a14f34..84229d61a9262 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 2e4ce165d7c75..f6b6d8bea9b85 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 af1560eb39d53..5fa37778b76eb 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: (
-            <SidebarStep title={Messages.admin.title}>
-              <p>{Messages.admin.configure}</p>
+            <SidebarStep title={Messages.settings.title}>
+              <p>{Messages.settings.configure}</p>
             </SidebarStep>
           ),
         },

From 57ee47a2e81408542c535ab19ad82a9bbdc27298 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Thu, 3 Oct 2024 11:22:21 +0200
Subject: [PATCH 2/2] PMM-13419 Run prettier

---
 public/app/core/components/AppChrome/AppChromeMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx
index 182bb9635a4a5..54676cd7c0aaf 100644
--- a/public/app/core/components/AppChrome/AppChromeMenu.tsx
+++ b/public/app/core/components/AppChrome/AppChromeMenu.tsx
@@ -30,7 +30,7 @@ export function AppChromeMenu({}: Props) {
 
   const isOpen = state.megaMenuOpen && !state.megaMenuDocked;
   const onClose = () => chrome.setMegaMenuOpen(false);
-  
+
   // @PERCONA
   const { isOpen: isTourOpen } = useTour();