Sanitized nav bar links to remove angular interpolation

packages/grafana-data/src/text/index.ts

@@ -1,11 +1,12 @@
 export * from './string';
 export * from './markdown';
 export * from './text';
-import { escapeHtml, hasAnsiCodes, sanitize, sanitizeUrl } from './sanitize';
+import { escapeHtml, hasAnsiCodes, sanitize, sanitizeUrl, sanitizeAngularInterpolation } from './sanitize';
 
 export const textUtil = {
   escapeHtml,
   hasAnsiCodes,
   sanitize,
   sanitizeUrl,
+  sanitizeAngularInterpolation,
 };

packages/grafana-data/src/text/sanitize.ts

@@ -38,3 +38,7 @@ export function hasAnsiCodes(input: string): boolean {
 export function escapeHtml(str: string): string {
   return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
+
+export function sanitizeAngularInterpolation(url: string): string {
+  return url.replace('{{', '%7B%7B').replace('}}', '%7D%7D');
+}

public/app/core/components/NavBar/NavBarItem.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaTheme2, NavModelItem } from '@grafana/data';
+import { GrafanaTheme2, NavModelItem, textUtil } from '@grafana/data';
 import { Link, useTheme2 } from '@grafana/ui';
 import NavBarDropdown from './NavBarDropdown';
 
@@ -38,13 +38,14 @@ const NavBarItem = ({
       <span className={styles.icon}>{children}</span>
     </button>
   );
+  const sanitizedUrl = textUtil.sanitizeAngularInterpolation(url ?? '');
 
   if (url) {
     element =
-      !target && url.startsWith('/') ? (
+      !target && sanitizedUrl.startsWith('/') ? (
         <Link
           className={styles.element}
-          href={url}
+          href={sanitizedUrl}
           target={target}
           aria-label={label}
           onClick={onClick}
@@ -53,7 +54,7 @@ const NavBarItem = ({
           <span className={styles.icon}>{children}</span>
         </Link>
       ) : (
-        <a href={url} target={target} className={styles.element} onClick={onClick} aria-label={label}>
+        <a href={sanitizedUrl} target={target} className={styles.element} onClick={onClick} aria-label={label}>
           <span className={styles.icon}>{children}</span>
         </a>
       );
@@ -66,7 +67,7 @@ const NavBarItem = ({
         <NavBarDropdown
           headerTarget={target}
           headerText={label}
-          headerUrl={url}
+          headerUrl={sanitizedUrl}
           items={menuItems}
           onHeaderClick={onClick}
           reverseDirection={reverseMenuDirection}