DashboardLinks: Support variable expression in to tooltip - Issue #30409 (#30569)

* add compile variable in tooltip link

* test(link_srv): introduce getAnchorInfo test

* test(link_srv): introduce tests for getLinkUrl

* test(link_srv): refer to anchorInfo.url rather than hardcode expected

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx

@@ -56,7 +56,7 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
 
         return (
           <div key={key} className="gf-form" aria-label={selectors.components.DashboardLinks.container}>
-            {link.tooltip ? <Tooltip content={link.tooltip}>{linkElement}</Tooltip> : linkElement}
+            {link.tooltip ? <Tooltip content={linkInfo.tooltip}>{linkElement}</Tooltip> : linkElement}
           </div>
         );
       })}

public/app/features/panel/panellinks/link_srv.ts

@@ -286,6 +286,7 @@ export class LinkSrv implements LinkService {
     const info: any = {};
     info.href = this.getLinkUrl(link);
     info.title = this.templateSrv.replace(link.title || '');
+    info.tooltip = this.templateSrv.replace(link.tooltip || '');
     return info;
   }
 

public/app/features/panel/panellinks/specs/link_srv.test.ts

@@ -1,9 +1,12 @@
 import { FieldType, locationUtil, toDataFrame, VariableOrigin } from '@grafana/data';
-
+import { setTemplateSrv } from '@grafana/runtime';
 import { getDataFrameVars, LinkSrv } from '../link_srv';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
+import { variableAdapters } from 'app/features/variables/adapters';
+import { createQueryVariableAdapter } from 'app/features/variables/query/adapter';
 import { updateConfig } from '../../../../core/config';
+import { initTemplateSrv } from '../../../../../test/helpers/initTemplateSrv';
 
 jest.mock('app/core/core', () => ({
   appEvents: {
@@ -13,6 +16,7 @@ jest.mock('app/core/core', () => ({
 
 describe('linkSrv', () => {
   let linkSrv: LinkSrv;
+  let templateSrv: TemplateSrv;
 
   function initLinkSrv() {
     const rootScope = {
@@ -40,14 +44,27 @@ describe('linkSrv', () => {
     timeSrv.init(_dashboard);
     timeSrv.setTime({ from: 'now-1h', to: 'now' });
     _dashboard.refresh = false;
+    templateSrv = initTemplateSrv([
+      { type: 'query', name: 'home', current: { value: '127.0.0.1' } },
+      { type: 'query', name: 'server1', current: { value: '192.168.0.100' } },
+    ]);
 
-    linkSrv = new LinkSrv(new TemplateSrv(), timeSrv);
+    setTemplateSrv(templateSrv);
+
+    linkSrv = new LinkSrv(templateSrv, timeSrv);
   }
 
+  beforeAll(() => {
+    variableAdapters.register(createQueryVariableAdapter());
+  });
+
   beforeEach(() => {
     initLinkSrv();
+
+    jest.resetAllMocks();
   });
 
+  describe('getDataLinkUIModel', () => {
     describe('built in variables', () => {
       it('should not trim white space from data links', () => {
         expect(
@@ -138,6 +155,76 @@ describe('linkSrv', () => {
         }
       );
     });
+  });
+
+  describe('getAnchorInfo', () => {
+    it('returns variable values for variable names in link.href and link.tooltip', () => {
+      jest.spyOn(linkSrv, 'getLinkUrl');
+      jest.spyOn(templateSrv, 'replace');
+
+      expect(linkSrv.getLinkUrl).toBeCalledTimes(0);
+      expect(templateSrv.replace).toBeCalledTimes(0);
+
+      const link = linkSrv.getAnchorInfo({
+        type: 'link',
+        icon: 'dashboard',
+        tags: [],
+        url: '/graph?home=$home',
+        title: 'Visit home',
+        tooltip: 'Visit ${home:raw}',
+      });
+
+      expect(linkSrv.getLinkUrl).toBeCalledTimes(1);
+      expect(templateSrv.replace).toBeCalledTimes(3);
+      expect(link).toStrictEqual({ href: '/graph?home=127.0.0.1', title: 'Visit home', tooltip: 'Visit 127.0.0.1' });
+    });
+  });
+
+  describe('getLinkUrl', () => {
+    it('converts link urls', () => {
+      const linkUrl = linkSrv.getLinkUrl({
+        url: '/graph',
+      });
+      const linkUrlWithVar = linkSrv.getLinkUrl({
+        url: '/graph?home=$home',
+      });
+
+      expect(linkUrl).toBe('/graph');
+      expect(linkUrlWithVar).toBe('/graph?home=127.0.0.1');
+    });
+
+    it('appends current dashboard time range if keepTime is true', () => {
+      const anchorInfoKeepTime = linkSrv.getLinkUrl({
+        keepTime: true,
+        url: '/graph',
+      });
+
+      expect(anchorInfoKeepTime).toBe('/graph?from=now-1h&to=now');
+    });
+
+    it('adds all variables to the url if includeVars is true', () => {
+      const anchorInfoIncludeVars = linkSrv.getLinkUrl({
+        includeVars: true,
+        url: '/graph',
+      });
+
+      expect(anchorInfoIncludeVars).toBe('/graph?var-home=127.0.0.1&var-server1=192.168.0.100');
+    });
+
+    it('respects config disableSanitizeHtml', () => {
+      const anchorInfo = {
+        url: 'javascript:alert(document.domain)',
+      };
+
+      expect(linkSrv.getLinkUrl(anchorInfo)).toBe('about:blank');
+
+      updateConfig({
+        disableSanitizeHtml: true,
+      });
+
+      expect(linkSrv.getLinkUrl(anchorInfo)).toBe(anchorInfo.url);
+    });
+  });
 });
 
 describe('getDataFrameVars', () => {