From 5dabb55b3955e0335740ac920b71ad987979c5ec Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Tue, 3 May 2022 15:28:40 +0100
Subject: [PATCH] Navigation: Enable new navigation by default (#48447)

---
 conf/defaults.ini                             |  3 +
 .../trace-view-scrolling.spec.ts              |  2 +-
 .../src/selectors/pages.ts                    |  2 +-
 .../CustomScrollbar/CustomScrollbar.tsx       |  3 +
 .../components/NavBar/Next/NavBarNext.tsx     | 56 ++++++++++---------
 .../NavBar/Next/NavBarScrollContainer.tsx     |  1 +
 public/app/features/explore/Explore.tsx       |  1 +
 7 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/conf/defaults.ini b/conf/defaults.ini
index ff30a4d640a..a36fdede73c 100644
--- a/conf/defaults.ini
+++ b/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
 
diff --git a/e2e/various-suite/trace-view-scrolling.spec.ts b/e2e/various-suite/trace-view-scrolling.spec.ts
index 69a8bb191f8..3342281afe5 100644
--- a/e2e/various-suite/trace-view-scrolling.spec.ts
+++ b/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);
diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts
index 6ac5d7fbe6e..6dff1d14cac 100644
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/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: {
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index a5091495894..f860dccebd0 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/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}
diff --git a/public/app/core/components/NavBar/Next/NavBarNext.tsx b/public/app/core/components/NavBar/Next/NavBarNext.tsx
index a7a3b60d5dd..aaf0bd73699 100644
--- a/public/app/core/components/NavBar/Next/NavBarNext.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarNext.tsx
@@ -93,17 +93,17 @@ export const NavBarNext = React.memo(() => {
 
             <NavBarMenuPortalContainer />
 
-            <ul className={styles.itemList}>
-              <NavBarItemWithoutMenu
-                elClassName={styles.grafanaLogoInner}
-                label="Home"
-                className={styles.grafanaLogo}
-                url={homeItem.url}
-              >
-                <Branding.MenuLogo />
-              </NavBarItemWithoutMenu>
+            <NavBarItemWithoutMenu
+              elClassName={styles.grafanaLogoInner}
+              label="Home"
+              className={styles.grafanaLogo}
+              url={homeItem.url}
+            >
+              <Branding.MenuLogo />
+            </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) => (
-                <NavBarItem
-                  key={`${link.id}-${index}`}
-                  isActive={isMatchOrChildMatch(link, activeItem)}
-                  reverseMenuDirection
-                  link={link}
-                  className={cx({ [styles.verticalSpacer]: index === 0 })}
-                >
-                  {link.icon && <Icon name={link.icon as IconName} size="xl" />}
-                  {link.img && <img src={link.img} alt={`${link.text} logo`} />}
-                </NavBarItem>
-              ))}
-            </ul>
+                {configItems.map((link, index) => (
+                  <NavBarItem
+                    key={`${link.id}-${index}`}
+                    isActive={isMatchOrChildMatch(link, activeItem)}
+                    reverseMenuDirection
+                    link={link}
+                    className={cx({ [styles.verticalSpacer]: index === 0 })}
+                  >
+                    {link.icon && <Icon name={link.icon as IconName} size="xl" />}
+                    {link.img && <img src={link.img} alt={`${link.text} logo`} />}
+                  </NavBarItem>
+                ))}
+              </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',
diff --git a/public/app/core/components/NavBar/Next/NavBarScrollContainer.tsx b/public/app/core/components/NavBar/Next/NavBarScrollContainer.tsx
index 91cc70fb680..a1d14bb2c9b 100644
--- a/public/app/core/components/NavBar/Next/NavBarScrollContainer.tsx
+++ b/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
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 319d3801189..26f65b7eaf8 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/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)}
       >