PMM-14509: cleanup navigation code

package.json

@@ -310,7 +310,6 @@
     "@react-aria/overlays": "3.25.0",
     "@react-aria/utils": "3.27.0",
     "@react-awesome-query-builder/ui": "6.6.4",
-    "@reactour/tour": "^3.0.0",
     "@reduxjs/toolkit": "2.5.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@visx/event": "3.12.0",

packages/grafana-data/src/types/navModel.ts

@@ -40,12 +40,6 @@ export interface NavModelItem extends NavLinkDTO {
   tabCounter?: number;
   hideFromBreadcrumbs?: boolean;
   emptyMessage?: string;
-
-  // @PERCONA
-  isDivider?: boolean;
-  isHeading?: boolean;
-  showChildren?: boolean;
-  showDot?: boolean;
 }
 
 /**

public/app/AppWrapper.tsx

@@ -25,7 +25,6 @@ import { LiveConnectionWarning } from './features/live/LiveConnectionWarning';
 import { ExtensionRegistriesProvider } from './features/plugins/extensions/ExtensionRegistriesContext';
 import { pluginExtensionRegistries } from './features/plugins/extensions/registry/setup';
 import { PerconaBootstrapper } from './percona/shared/components/PerconaBootstrapper';
-import PerconaTourProvider from './percona/tour/TourProvider';
 import { ExperimentalSplitPaneRouterWrapper, RouterWrapper } from './routes/RoutesWrapper';
 
 interface AppWrapperProps {
@@ -128,24 +127,22 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
                   actions={[]}
                   options={{ enableHistory: true, callbacks: { onSelectAction: commandPaletteActionSelected } }}
                 >
-                  <PerconaTourProvider>
-                    <GlobalStyles />
-                    <MaybeTimeRangeProvider>
-                      <SidecarContext_EXPERIMENTAL.Provider value={sidecarServiceSingleton_EXPERIMENTAL}>
-                        <ExtensionRegistriesProvider registries={pluginExtensionRegistries}>
-                          <div className="grafana-app">
-                            {config.featureToggles.appSidecar ? (
-                              <ExperimentalSplitPaneRouterWrapper {...routerWrapperProps} />
-                            ) : (
-                              <RouterWrapper {...routerWrapperProps} />
-                            )}
-                            <LiveConnectionWarning />
-                            <PortalContainer />
-                          </div>
-                        </ExtensionRegistriesProvider>
-                      </SidecarContext_EXPERIMENTAL.Provider>
-                    </MaybeTimeRangeProvider>
-                  </PerconaTourProvider>
+                  <GlobalStyles />
+                  <MaybeTimeRangeProvider>
+                    <SidecarContext_EXPERIMENTAL.Provider value={sidecarServiceSingleton_EXPERIMENTAL}>
+                      <ExtensionRegistriesProvider registries={pluginExtensionRegistries}>
+                        <div className="grafana-app">
+                          {config.featureToggles.appSidecar ? (
+                            <ExperimentalSplitPaneRouterWrapper {...routerWrapperProps} />
+                          ) : (
+                            <RouterWrapper {...routerWrapperProps} />
+                          )}
+                          <LiveConnectionWarning />
+                          <PortalContainer />
+                        </div>
+                      </ExtensionRegistriesProvider>
+                    </SidecarContext_EXPERIMENTAL.Provider>
+                  </MaybeTimeRangeProvider>
                 </KBarProvider>
               </CacheProvider>
             </ThemeProvider>

public/app/core/components/AppChrome/AppChromeMenu.tsx

@@ -2,7 +2,6 @@ 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 { useRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
@@ -28,15 +27,12 @@ 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: !isTourOpen,
+      isDismissable: true,
       isOpen: true,
       onClose,
-      isKeyboardDismissDisabled: !!isTourOpen,
+      isKeyboardDismissDisabled: false,
       shouldCloseOnInteractOutside: (element) => {
         // don't close when interacting with a select menu inside the mega menu
         // e.g. for the org switcher

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

@@ -20,8 +20,7 @@ import { MegaMenuItem } from './MegaMenuItem';
 import { usePinnedItems } from './hooks';
 import { enrichWithInteractionTracking, findByUrl, getActiveItem } from './utils';
 
-// @PERCONA - increase menu width to fit PMM name
-export const MENU_WIDTH = '350px';
+export const MENU_WIDTH = '300px';
 
 export interface Props extends DOMAttributes {
   onClose: () => void;

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

@@ -7,7 +7,6 @@ import { useLocalStorage } from 'react-use';
 import { FeatureState, GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data';
 import { useStyles2, Text, IconButton, Icon, Stack, FeatureBadge } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
-import { Dot } from 'app/percona/shared/components/Elements/Dot';
 
 import { Indent } from '../../Indent/Indent';
 
@@ -88,11 +87,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick, onPin, isPi
       >
         {level !== 0 && <Indent level={level === MAX_DEPTH ? level - 1 : level} spacing={3} />}
         {level === MAX_DEPTH && <div className={styles.itemConnector} />}
-        <div
-          // @PERCONA
-          aria-label={link.text}
-          className={styles.collapsibleSectionWrapper}
-        >
+        <div className={styles.collapsibleSectionWrapper}>
           <MegaMenuItemText
             isActive={isActive}
             onClick={() => {
@@ -107,30 +102,11 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick, onPin, isPi
             <div
               className={cx(styles.labelWrapper, {
                 [styles.hasActiveChild]: hasActiveChild,
-                // @PERCONA - show icons for inner items
-                [styles.labelWrapperWithIcon]: Boolean(level <= 1 && link.icon),
+                [styles.labelWrapperWithIcon]: Boolean(level === 0 && iconElement),
               })}
             >
-              {/* @PERCONA - show icons for inner items */}
-              {level <= 1 && link.icon && (
-                <FeatureHighlightWrapper>
-                  <>
-                    <Icon
-                      className={cx(styles.icon, level > 0 && styles.deepIcon)}
-                      name={toIconName(link.icon) ?? 'link'}
-                      size={level === 0 ? 'lg' : 'md'}
-                    />
-                    {/* @PERCONA */}
-                    {!!link.showDot && <Dot left={23} top={0} />}
-                  </>
-                </FeatureHighlightWrapper>
-              )}
-              {/* @PERCONA */}
-              <div className={styles.relativeText}>
-                <Text truncate>{link.text}</Text>
-                {/* @PERCONA */}
-                {!!link.showDot && !link.icon && <Dot right={-8} top={2} />}
-              </div>
+              {level === 0 && iconElement && <FeatureHighlightWrapper>{iconElement}</FeatureHighlightWrapper>}
+              <Text truncate>{link.text}</Text>
               {link.isNew && <FeatureBadge featureState={FeatureState.new} />}
             </div>
           </MegaMenuItemText>
@@ -250,14 +226,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     fontStyle: 'italic',
     padding: theme.spacing(1, 1.5, 1, 7),
   }),
-  // @PERCONA
-  relativeText: css({
-    position: 'relative',
-  }),
-  // @PERCONA
-  deepIcon: css({
-    marginRight: theme.spacing(-1.5),
-  }),
 });
 
 function linkHasChildren(link: NavModelItem): link is NavModelItem & { children: NavModelItem[] } {

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

@@ -7,7 +7,6 @@ import { config } from '@grafana/runtime';
 import { Icon, IconButton, Link, useTheme2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
-import { useLinkWithVariables } from 'app/percona/shared/helpers/navigation';
 
 export interface Props {
   children: React.ReactNode;
@@ -23,8 +22,6 @@ export function MegaMenuItemText({ children, isActive, onClick, target, url, onP
   const theme = useTheme2();
   const styles = getStyles(theme, isActive);
   const LinkComponent = !target && url.startsWith('/') ? Link : 'a';
-  // @PERCONA
-  const urlWithVariables = useLinkWithVariables(url);
 
   const linkContent = (
     <div className={styles.linkContent}>
@@ -47,7 +44,7 @@ export function MegaMenuItemText({ children, isActive, onClick, target, url, onP
       <LinkComponent
         data-testid={selectors.components.NavMenu.item}
         className={styles.container}
-        href={urlWithVariables}
+        href={url}
         target={target}
         onClick={onClick}
         {...(isActive && { 'aria-current': 'page' })}
@@ -59,7 +56,7 @@ export function MegaMenuItemText({ children, isActive, onClick, target, url, onP
           name="bookmark"
           className={'pin-icon'}
           iconType={isPinned ? 'solid' : 'default'}
-          onClick={() => onPin(urlWithVariables)}
+          onClick={() => onPin(url)}
           aria-label={
             isPinned
               ? t('navigation.item.remove-bookmark', 'Remove from Bookmarks')

public/app/core/components/AppChrome/News/NewsDrawer.tsx

@@ -4,6 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { IconButton, Drawer, useStyles2, Text } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
+import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants';
 
 import { NewsWrapper } from './NewsWrapper';
 
@@ -20,15 +21,14 @@ export function NewsContainer({ onClose }: NewsContainerProps) {
       title={
         <div className={styles.title}>
           <Text element="h2">{t('news.title', 'Latest from the blog')}</Text>
-          {/* @PERCONA - point to percona blog */}
           <a
-            href="https://www.percona.com/blog/"
+            href="https://grafana.com/blog/"
             target="_blank"
             rel="noreferrer"
-            title="Go to Percona blog"
+            title="Go to Grafana labs blog"
             className={styles.grot}
           >
-            <img src="public/img/percona-logo.svg" alt="Percona logo" />
+            <img src="public/img/grot-news.svg" alt="Grot reading news" />
           </a>
           <div className={styles.actions}>
             <IconButton
@@ -44,8 +44,7 @@ export function NewsContainer({ onClose }: NewsContainerProps) {
       onClose={onClose}
       size="md"
     >
-      {/* @PERCONA */}
-      <NewsWrapper feedUrl="/percona-blog/feed" />
+      <NewsWrapper feedUrl={DEFAULT_FEED_URL} />
     </Drawer>
   );
 }

public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.messages.ts

@@ -11,7 +11,4 @@ export const Messages = {
   backup: 'Back up your critical data with zero-downtime and minimal performance impact.',
   moreInfo: 'For more information, please check out the ',
   pmmOnlineHelp: 'PMM online help',
-  skip: 'Skip',
-  checkLater: 'Check later',
-  startTour: 'Start tour',
 };