Navigation: Enable new navigation by default (#48447)

conf/defaults.ini

@@ -1152,6 +1152,9 @@ commandPalette = true
 # Use dynamic labels in CloudWatch datasource
 cloudWatchDynamicLabels = false
 
+# New expandable navigation
+newNavigation = true
+
 # feature1 = true
 # feature2 = false
 

e2e/various-suite/trace-view-scrolling.spec.ts

@@ -26,7 +26,7 @@ describe('Trace view', () => {
     e2e.components.TraceViewer.spanBar()
       .its('length')
       .then((oldLength) => {
-        e2e.pages.Explore.General.scrollBar().scrollTo('center');
+        e2e.pages.Explore.General.scrollView().children('.scrollbar-view').scrollTo('center');
 
         // After scrolling we should load more spans
         e2e.components.TraceViewer.spanBar().its('length').should('be.gt', oldLength);

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -183,7 +183,7 @@ export const Pages = {
       container: 'data-testid Explore',
       graph: 'Explore Graph',
       table: 'Explore Table',
-      scrollBar: () => '.scrollbar-view',
+      scrollView: 'data-testid explorer scroll view',
     },
   },
   SoloPanel: {

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -12,6 +12,7 @@ export type ScrollbarPosition = positionValues;
 
 interface Props {
   className?: string;
+  testId?: string;
   autoHide?: boolean;
   autoHideTimeout?: number;
   autoHeightMax?: string;
@@ -33,6 +34,7 @@ export const CustomScrollbar: FC<Props> = ({
   autoHideTimeout = 200,
   setScrollTop,
   className,
+  testId,
   autoHeightMin = '0',
   autoHeightMax = '100%',
   hideTracksWhenNotNeeded = false,
@@ -118,6 +120,7 @@ export const CustomScrollbar: FC<Props> = ({
 
   return (
     <Scrollbars
+      data-testid={testId}
       ref={ref}
       className={classNames(styles.customScrollbar, className)}
       onScrollStop={onScrollStop}

public/app/core/components/NavBar/Next/NavBarNext.tsx

@@ -93,17 +93,17 @@ export const NavBarNext = React.memo(() => {
 
             <NavBarMenuPortalContainer />
 
-            <ul className={styles.itemList}>
+            <NavBarItemWithoutMenu
-              <NavBarItemWithoutMenu
+              elClassName={styles.grafanaLogoInner}
-                elClassName={styles.grafanaLogoInner}
+              label="Home"
-                label="Home"
+              className={styles.grafanaLogo}
-                className={styles.grafanaLogo}
+              url={homeItem.url}
-                url={homeItem.url}
+            >
-              >
+              <Branding.MenuLogo />
-                <Branding.MenuLogo />
+            </NavBarItemWithoutMenu>
-              </NavBarItemWithoutMenu>
 
-              <NavBarScrollContainer>
+            <NavBarScrollContainer>
+              <ul className={styles.itemList}>
                 <NavBarItem className={styles.search} isActive={activeItem === searchItem} link={searchItem}>
                   <Icon name="search" size="xl" />
                 </NavBarItem>
@@ -130,21 +130,21 @@ export const NavBarNext = React.memo(() => {
                       {link.img && <img src={link.img} alt={`${link.text} logo`} />}
                     </NavBarItem>
                   ))}
-              </NavBarScrollContainer>
 
-              {configItems.map((link, index) => (
+                {configItems.map((link, index) => (
-                <NavBarItem
+                  <NavBarItem
-                  key={`${link.id}-${index}`}
+                    key={`${link.id}-${index}`}
-                  isActive={isMatchOrChildMatch(link, activeItem)}
+                    isActive={isMatchOrChildMatch(link, activeItem)}
-                  reverseMenuDirection
+                    reverseMenuDirection
-                  link={link}
+                    link={link}
-                  className={cx({ [styles.verticalSpacer]: index === 0 })}
+                    className={cx({ [styles.verticalSpacer]: index === 0 })}
-                >
+                  >
-                  {link.icon && <Icon name={link.icon as IconName} size="xl" />}
+                    {link.icon && <Icon name={link.icon as IconName} size="xl" />}
-                  {link.img && <img src={link.img} alt={`${link.text} logo`} />}
+                    {link.img && <img src={link.img} alt={`${link.text} logo`} />}
-                </NavBarItem>
+                  </NavBarItem>
-              ))}
+                ))}
-            </ul>
+              </ul>
+            </NavBarScrollContainer>
           </FocusScope>
         </NavBarContext.Provider>
       </nav>
@@ -210,9 +210,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
-    '> *': {
-      height: theme.spacing(6),
-    },
 
     [theme.breakpoints.down('md')]: {
       visibility: 'hidden',
@@ -222,7 +219,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
     alignItems: 'stretch',
     display: 'flex',
     flexShrink: 0,
+    height: theme.spacing(6),
     justifyContent: 'stretch',
+
+    [theme.breakpoints.down('md')]: {
+      visibility: 'hidden',
+    },
   }),
   grafanaLogoInner: css({
     alignItems: 'center',

public/app/core/components/NavBar/Next/NavBarScrollContainer.tsx

@@ -77,6 +77,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     bottom: 0,
   }),
   scrollContent: css({
+    flex: 1,
     position: 'relative',
   }),
   // override the scroll container position so that the scroll indicators

public/app/features/explore/Explore.tsx

@@ -353,6 +353,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
 
     return (
       <CustomScrollbar
+        testId={selectors.pages.Explore.General.scrollView}
         autoHeightMin={'100%'}
         scrollRefCallback={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
       >