PMM-12847 Fix product tour

public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx

@@ -80,7 +80,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
             />
           )}
         </div>
-        <div className={styles.collapsibleSectionWrapper}>
+        <div className={styles.collapsibleSectionWrapper} aria-label={link.text}>
           <MegaMenuItemText
             isActive={isActive}
             onClick={() => {

public/app/percona/tour/steps/alerting/alerting.steps.tsx

@@ -9,7 +9,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
   ...(isAdmin
     ? [
         {
-          selector: '[aria-label="Tab Fired alerts"]',
+          selector: '[aria-label="Fired alerts"]',
           mutationObservables: ['.page-body'],
           resizeObservables: ['.page-body'],
           content: (
@@ -20,7 +20,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
           ),
         },
         {
-          selector: '[aria-label="Tab Alert rule templates"]',
+          selector: '[aria-label="Alert rule templates"]',
           content: (
             <SidebarStep title={Messages.alertRuleTemplates.title}>
               <p>{Messages.alertRuleTemplates.effortlessly}</p>
@@ -31,7 +31,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
       ]
     : []),
   {
-    selector: '[aria-label="Tab Alert rules"]',
+    selector: '[aria-label="Alert rules"]',
     content: (
       <SidebarStep title={Messages.alertRules.title}>
         <p>{Messages.alertRules.rules}</p>
@@ -41,7 +41,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
     ),
   },
   {
-    selector: '[aria-label="Tab Contact points"]',
+    selector: '[aria-label="Contact points"]',
     content: (
       <SidebarStep title={Messages.contactPoints.title}>
         <p>{Messages.contactPoints.define}</p>
@@ -50,7 +50,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
     ),
   },
   {
-    selector: '[aria-label="Tab Notification policies"]',
+    selector: '[aria-label="Notification policies"]',
     content: (
       <SidebarStep title={Messages.notificationPolicies.title}>
         <p>{Messages.notificationPolicies.routed}</p>
@@ -59,7 +59,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
     ),
   },
   {
-    selector: '[aria-label="Tab Silences"]',
+    selector: '[aria-label="Silences"]',
     content: (
       <SidebarStep title={Messages.silences.title}>
         <p>{Messages.silences.create}</p>
@@ -68,7 +68,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
     ),
   },
   {
-    selector: '[aria-label="Tab Alert groups"]',
+    selector: '[aria-label="Alert groups"]',
     content: (
       <SidebarStep title={Messages.alertGroups.title}>
         <p>{Messages.alertGroups.alert}</p>
@@ -79,7 +79,7 @@ export const getAlertingTourSteps = (isAdmin = false): TourStep[] => [
   ...(isAdmin
     ? [
         {
-          selector: '[aria-label="Tab Admin"]',
+          selector: '[aria-label="Admin"]',
           content: (
             <SidebarStep title={Messages.admin.title}>
               <p>{Messages.admin.configure}</p>

public/app/percona/tour/steps/product/product.messages.ts

@@ -39,7 +39,7 @@ export const Messages = {
     docs: 'Integrated Alerting documentation',
   },
   configPanel: {
-    title: 'Configuration Panel',
+    title: 'PMM Configuration Panel',
     services:
       "Here you can check Services, Agents and Nodes in your PMM's Inventory, and add new instances for monitoring: PostgreSQL, MySQL, MongoDB, HAProxy, etc.",
     settings:
@@ -48,8 +48,8 @@ export const Messages = {
     settingsDocsLink: 'here',
   },
   serverAdmin: {
-    title: 'Server Admin',
-    userManagement: 'In the Server Admin panel you can assign and control user management for PMM:',
+    title: 'Administration',
+    userManagement: 'In the Administration panel you can assign and control user management for PMM:',
     addEditRemove: 'Add, edit, and remove users.',
     grant: 'Grant or Revoke admin privileges for a user.',
     manageOrg: 'Manage organizations to which the user belongs and their assigned role.',

public/app/percona/tour/steps/product/product.steps.tsx

@@ -14,7 +14,7 @@ export const getProductTourSteps = (
   activeServices?: ServiceType[]
 ): TourStep[] => [
   {
-    selector: '.dropdown > [aria-label="Dashboards"]',
+    selector: '[aria-label="Dashboards"]',
     content: (
       <SidebarStep title={Messages.dashboards.title}>
         <p>{Messages.dashboards.browse}</p>
@@ -25,7 +25,7 @@ export const getProductTourSteps = (
   },
   getPMMDashboardsStep(activeServices || []),
   {
-    selector: '.dropdown > [aria-label="Query Analytics (QAN)"]',
+    selector: '[aria-label="Query Analytics (QAN)"]',
     content: (
       <SidebarStep title={Messages.qan.title}>
         <p>{Messages.qan.queries}</p>
@@ -36,7 +36,7 @@ export const getProductTourSteps = (
   ...(isPmmAdmin
     ? [
         {
-          selector: '.dropdown > [aria-label="Explore"]',
+          selector: '[aria-label="Explore"]',
           content: (
             <SidebarStep title={Messages.explore.title}>
               <p>{Messages.explore.data}</p>
@@ -48,7 +48,7 @@ export const getProductTourSteps = (
       ]
     : []),
   {
-    selector: '.dropdown > [aria-label="Alerting"]',
+    selector: '[aria-label="Alerting"]',
     content: (
       <SidebarStep title={Messages.alerting.title}>
         <p>
@@ -71,7 +71,7 @@ export const getProductTourSteps = (
   ...(isPmmAdmin && !!settings?.sttEnabled
     ? [
         {
-          selector: '.dropdown > [aria-label="Advisors"]',
+          selector: '[aria-label="Advisors"]',
           content: (
             <SidebarStep title={Messages.advisors.title}>
               <p>{Messages.advisors.pmmIncludes}</p>
@@ -90,7 +90,7 @@ export const getProductTourSteps = (
   ...(isPmmAdmin && !!settings?.backupEnabled
     ? [
         {
-          selector: '.dropdown > [aria-label="Backup"]',
+          selector: '[aria-label="Backup"]',
           content: (
             <SidebarStep title={Messages.backup.title}>
               <p>{Messages.backup.feature}</p>
@@ -104,7 +104,7 @@ export const getProductTourSteps = (
   ...(isPmmAdmin
     ? [
         {
-          selector: '.dropdown > [aria-label="Configuration"]',
+          selector: '[aria-label="PMM Configuration"]',
           content: (
             <SidebarStep title={Messages.configPanel.title}>
               <p>{Messages.configPanel.services}</p>
@@ -120,7 +120,7 @@ export const getProductTourSteps = (
           ),
         },
         {
-          selector: '.dropdown > [aria-label="Server admin"]',
+          selector: '[aria-label="Administration"]',
           content: (
             <SidebarStep title={Messages.serverAdmin.title}>
               <p>{Messages.serverAdmin.userManagement}</p>

public/app/percona/tour/steps/product/product.utils.tsx

@@ -24,7 +24,7 @@ export const getPMMDashboardsStep = (services: ServiceType[]): TourStep => {
 };
 
 const getStep = (ariaLabel: string, navMenuId: string): TourStep => ({
-  selector: '#navbar-menu-portal-container [role="dialog"]',
+  selector: '.scrollbar-view [role="dialog"]',
   content: (
     <SidebarStep title={Messages.pmmDashboards.title}>
       <p>{Messages.pmmDashboards.grafanaTechnology}</p>
@@ -33,7 +33,7 @@ const getStep = (ariaLabel: string, navMenuId: string): TourStep => ({
     </SidebarStep>
   ),
   navMenuId,
-  highlightedSelectors: [`.dropdown > [aria-label="${ariaLabel}"]`, '#navbar-menu-portal-container [role="dialog"]'],
-  resizeObservables: ['#navbar-menu-portal-container'],
+  highlightedSelectors: [`[aria-label="${ariaLabel}"]`, '.scrollbar-view [role="dialog"]'],
+  resizeObservables: ['.scrollbar-view'],
   position: 'right',
 });