Fix the bug in navbar's active item when the root url include a subpath (#51767) (#52159)

(cherry picked from commit 7c5ba889a4)

Co-authored-by: Kian Eliasi <kian.elbo@gmail.com>

public/app/core/components/NavBar/utils.test.ts

@@ -1,6 +1,6 @@
 import { Location } from 'history';
 
-import { NavModelItem } from '@grafana/data';
+import { locationUtil, NavModelItem } from '@grafana/data';
 import { ContextSrv, setContextSrv } from 'app/core/services/context_srv';
 
 import { updateConfig } from '../../config';
@@ -166,6 +166,10 @@ describe('getActiveItem', () => {
       text: 'Item with query param',
       url: '/itemWithQueryParam?foo=bar',
     },
+    {
+      text: 'Item after subpath',
+      url: '/subUrl/itemAfterSubpath',
+    },
     {
       text: 'Item with children',
       url: '/itemWithChildren',
@@ -193,6 +197,13 @@ describe('getActiveItem', () => {
       url: '/d/moreSpecificDashboard',
     },
   ];
+  beforeEach(() => {
+    locationUtil.initialize({
+      config: { appSubUrl: '/subUrl' } as any,
+      getVariablesUrlParams: () => ({}),
+      getTimeRangeForUrl: () => ({ from: 'now-7d', to: 'now' }),
+    });
+  });
 
   it('returns an exact match at the top level', () => {
     const mockPathName = '/item';
@@ -202,6 +213,14 @@ describe('getActiveItem', () => {
     });
   });
 
+  it('returns an exact match ignoring root subpath', () => {
+    const mockPathName = '/itemAfterSubpath';
+    expect(getActiveItem(mockNavTree, mockPathName)).toEqual({
+      text: 'Item after subpath',
+      url: '/subUrl/itemAfterSubpath',
+    });
+  });
+
   it('returns an exact match ignoring query params', () => {
     const mockPathName = '/itemWithQueryParam?bar=baz';
     expect(getActiveItem(mockNavTree, mockPathName)).toEqual({

public/app/core/components/NavBar/utils.ts

@@ -1,6 +1,6 @@
 import { Location } from 'history';
 
-import { NavModelItem, NavSection } from '@grafana/data';
+import { locationUtil, NavModelItem, NavSection } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { getConfig } from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -120,7 +120,8 @@ export const getActiveItem = (
   const dashboardLinkMatch = '/dashboards';
 
   for (const link of navTree) {
-    const linkPathname = stripQueryParams(link.url);
+    const linkWithoutParams = stripQueryParams(link.url);
+    const linkPathname = locationUtil.stripBaseFromUrl(linkWithoutParams);
     if (linkPathname) {
       if (linkPathname === pathname) {
         // exact match