TextPanel: Fixes issue when interpolation of variables stops working (#26847)

* TextPanel: Fixes issue when interpolation of variables stops working

* Tests: fixes broken typing in test

* Tests: updates e2e dashboard to html so we get the raw strings

* Tests: reverted back to markdown and fixed a bug

devenv/dev-dashboards/feature-templating/global-variables-and-interpolation.json

@@ -34,7 +34,7 @@
       },
       },
       "id": 11,
       "id": 11,
       "options": {
       "options": {
-        "content": "## Global variables\n\n* `__dashboard` = ${__dashboard}\n* `__dashboard.name` = ${__dashboard.name}\n* `__dashboard.uid` = ${__dashboard.uid}\n* `__org.name` = ${__org.name}\n* `__org.id` = ${__org.id}\n* `__user.id` = ${__user.id}\n* `__user.login` = ${__user.login}\n         \n## Formats\n\n* `Server:raw` = ${Server:raw}\n* `Server:regex` = ${Server:regex}\n* `Server:lucene` = ${Server:lucene}\n* `Server:glob` = ${Server:glob}\n* `Server:pipe` = ${Server:pipe}\n* `Server:distributed` = ${Server:distributed}\n* `Server:csv` = ${Server:csv}\n* `Server:html` = ${Server:html}\n* `Server:json` = ${Server:json}\n* `Server:percentencode` = ${Server:percentencode}\n* `Server:singlequote` = ${Server:singlequote}\n* `Server:doublequote` = ${Server:doublequote}\n* `Server:sqlstring` = ${Server:sqlstring}\n* `Server:date` = ${Server:date}\n\n",
+        "content": "## Global variables\n\n* `__dashboard` = `${__dashboard}`\n* `__dashboard.name` = `${__dashboard.name}`\n* `__dashboard.uid` = `${__dashboard.uid}`\n* `__org.name` = `${__org.name}`\n* `__org.id` = `${__org.id}`\n* `__user.id` = `${__user.id}`\n* `__user.login` = `${__user.login}`\n         \n## Formats\n\n* `Server:raw` = `${Server:raw}`\n* `Server:regex` = `${Server:regex}`\n* `Server:lucene` = `${Server:lucene}`\n* `Server:glob` = `${Server:glob}`\n* `Server:pipe` = `${Server:pipe}`\n* `Server:distributed` = `${Server:distributed}`\n* `Server:csv` = `${Server:csv}`\n* `Server:html` = `${Server:html}`\n* `Server:json` = `${Server:json}`\n* `Server:percentencode` = `${Server:percentencode}`\n* `Server:singlequote` = `${Server:singlequote}`\n* `Server:doublequote` = `${Server:doublequote}`\n* `Server:sqlstring` = `${Server:sqlstring}`\n* `Server:date` = `${Server:date}`\n\n",
         "mode": "markdown"
         "mode": "markdown"
       },
       },
       "pluginVersion": "7.1.0",
       "pluginVersion": "7.1.0",
@@ -106,5 +106,5 @@
   "timezone": "",
   "timezone": "",
   "title": "Global variables and interpolation",
   "title": "Global variables and interpolation",
   "uid": "HYaGDGIMk",
   "uid": "HYaGDGIMk",
-  "version": 3
+  "version": 5
 }
 }

e2e/suite1/specs/dashboard-templating.spec.ts

@@ -26,7 +26,7 @@ e2e.scenario({
       `Server:pipe = A'A"A|BB\\B|CCC`,
       `Server:pipe = A'A"A|BB\\B|CCC`,
       `Server:distributed = A'A"A,Server=BB\\B,Server=CCC`,
       `Server:distributed = A'A"A,Server=BB\\B,Server=CCC`,
       `Server:csv = A'A"A,BB\\B,CCC`,
       `Server:csv = A'A"A,BB\\B,CCC`,
-      `Server:html = A'A"A, BB\\B, CCC`,
+      `Server:html = A'A"A, BB\\B, CCC`,
       `Server:json = ["A'A\\"A","BB\\\\B","CCC"]`,
       `Server:json = ["A'A\\"A","BB\\\\B","CCC"]`,
       `Server:percentencode = %7BA%27A%22A%2CBB%5CB%2CCCC%7D`,
       `Server:percentencode = %7BA%27A%22A%2CBB%5CB%2CCCC%7D`,
       `Server:singlequote = 'A\\'A"A','BB\\B','CCC'`,
       `Server:singlequote = 'A\\'A"A','BB\\B','CCC'`,

package.json

@@ -88,7 +88,7 @@
     "@types/jquery": "3.3.38",
     "@types/jquery": "3.3.38",
     "@types/lodash": "4.14.149",
     "@types/lodash": "4.14.149",
     "@types/lru-cache": "^5.1.0",
     "@types/lru-cache": "^5.1.0",
-    "@types/marked": "0.6.5",
+    "@types/marked": "1.1.0",
     "@types/moment-timezone": "0.5.13",
     "@types/moment-timezone": "0.5.13",
     "@types/mousetrap": "1.6.3",
     "@types/mousetrap": "1.6.3",
     "@types/node": "13.7.0",
     "@types/node": "13.7.0",
@@ -239,7 +239,7 @@
     "jsurl": "^0.1.5",
     "jsurl": "^0.1.5",
     "lodash": "4.17.19",
     "lodash": "4.17.19",
     "lru-cache": "^5.1.1",
     "lru-cache": "^5.1.1",
-    "marked": "0.6.2",
+    "marked": "1.1.1",
     "md5": "^2.2.1",
     "md5": "^2.2.1",
     "memoize-one": "5.1.1",
     "memoize-one": "5.1.1",
     "moment": "2.24.0",
     "moment": "2.24.0",

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

@@ -4,7 +4,6 @@ const defaultMarkedOptions: MarkedOptions = {
   renderer: new marked.Renderer(),
   renderer: new marked.Renderer(),
   pedantic: false,
   pedantic: false,
   gfm: true,
   gfm: true,
-  tables: true,
   sanitize: true,
   sanitize: true,
   smartLists: true,
   smartLists: true,
   smartypants: false,
   smartypants: false,

public/app/plugins/panel/text/TextPanel.tsx

@@ -6,7 +6,7 @@ import { PanelProps, renderMarkdown, textUtil } from '@grafana/data';
 import config from 'app/core/config';
 import config from 'app/core/config';
 // Types
 // Types
 import { TextOptions } from './types';
 import { TextOptions } from './types';
-import { stylesFactory, CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, stylesFactory } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
 import DangerouslySetHtmlContent from 'dangerously-set-html-content';
 import DangerouslySetHtmlContent from 'dangerously-set-html-content';
 
 
@@ -39,25 +39,19 @@ export class TextPanel extends PureComponent<Props, State> {
   }
   }
 
 
   prepareHTML(html: string): string {
   prepareHTML(html: string): string {
-    const { replaceVariables } = this.props;
-
-    html = replaceVariables(html, {}, 'html');
-
-    return config.disableSanitizeHtml ? html : textUtil.sanitize(html);
+    return this.interpolateAndSanitizeString(html);
   }
   }
 
 
-  prepareText(content: string): string {
-    return this.prepareHTML(
-      content
-        .replace(/&/g, '&amp;')
-        .replace(/>/g, '&gt;')
-        .replace(/</g, '&lt;')
-        .replace(/\n/g, '<br/>')
-    );
+  prepareMarkdown(content: string): string {
+    return renderMarkdown(this.interpolateAndSanitizeString(content));
   }
   }
 
 
-  prepareMarkdown(content: string): string {
-    return this.prepareHTML(renderMarkdown(content));
+  interpolateAndSanitizeString(content: string): string {
+    const { replaceVariables } = this.props;
+
+    content = replaceVariables(content, {}, 'html');
+
+    return config.disableSanitizeHtml ? content : textUtil.sanitize(content);
   }
   }
 
 
   processContent(options: TextOptions): string {
   processContent(options: TextOptions): string {
@@ -70,11 +64,8 @@ export class TextPanel extends PureComponent<Props, State> {
     if (mode === 'markdown') {
     if (mode === 'markdown') {
       return this.prepareMarkdown(content);
       return this.prepareMarkdown(content);
     }
     }
-    if (mode === 'html') {
-      return this.prepareHTML(content);
-    }
 
 
-    return this.prepareText(content);
+    return this.prepareHTML(content);
   }
   }
 
 
   render() {
   render() {

public/app/plugins/panel/text/textPanelMigrationHandler.test.ts

 import { textPanelMigrationHandler } from './textPanelMigrationHandler';
 import { textPanelMigrationHandler } from './textPanelMigrationHandler';
-import { TextOptions } from './types';
+import { TextMode, TextOptions } from './types';
 import { FieldConfigSource, PanelModel } from '@grafana/data';
 import { FieldConfigSource, PanelModel } from '@grafana/data';
 
 
 describe('textPanelMigrationHandler', () => {
 describe('textPanelMigrationHandler', () => {
@@ -43,6 +43,7 @@ describe('textPanelMigrationHandler', () => {
 
 
   describe('when invoked and previous version was using text mode', () => {
   describe('when invoked and previous version was using text mode', () => {
     it('then should switch to markdown', () => {
     it('then should switch to markdown', () => {
+      const mode = ('text' as unknown) as TextMode;
       const panel: PanelModel<TextOptions> = {
       const panel: PanelModel<TextOptions> = {
         id: 1,
         id: 1,
         fieldConfig: ({} as unknown) as FieldConfigSource,
         fieldConfig: ({} as unknown) as FieldConfigSource,
@@ -51,7 +52,7 @@ describe('textPanelMigrationHandler', () => {
 
 
         For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)
         For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)
       `,
       `,
-          mode: 'text',
+          mode,
         },
         },
       };
       };
 
 

public/app/plugins/panel/text/textPanelMigrationHandler.ts

@@ -11,7 +11,8 @@ export const textPanelMigrationHandler = (panel: PanelModel<TextOptions>): Parti
     return { content, mode };
     return { content, mode };
   }
   }
 
 
-  if (panel.options.mode === 'text') {
+  // The 'text' mode has been removed so we need to update any panels still using it to markdown
+  if (panel.options.mode !== 'html' && panel.options.mode !== 'markdown') {
     return { content: panel.options.content, mode: 'markdown' };
     return { content: panel.options.content, mode: 'markdown' };
   }
   }
 
 

public/app/plugins/panel/text/types.ts

-export type TextMode = 'html' | 'markdown' | 'text';
+export type TextMode = 'html' | 'markdown';
 export interface TextOptions {
 export interface TextOptions {
   mode: TextMode;
   mode: TextMode;
   content: string;
   content: string;

yarn.lock

@@ -6185,10 +6185,10 @@
   resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.0.tgz#57f228f2b80c046b4a1bd5cac031f81f207f4f03"
   resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.0.tgz#57f228f2b80c046b4a1bd5cac031f81f207f4f03"
   integrity sha512-RaE0B+14ToE4l6UqdarKPnXwVDuigfFv+5j9Dze/Nqr23yyuqdNvzcZi3xB+3Agvi5R4EOgAksfv3lXX4vBt9w==
   integrity sha512-RaE0B+14ToE4l6UqdarKPnXwVDuigfFv+5j9Dze/Nqr23yyuqdNvzcZi3xB+3Agvi5R4EOgAksfv3lXX4vBt9w==
 
 
-"@types/marked@0.6.5":
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.6.5.tgz#3cf2a56ef615dad24aaf99784ef90a9eba4e29d8"
-  integrity sha512-6kBKf64aVfx93UJrcyEZ+OBM5nGv4RLsI6sR1Ar34bpgvGVRoyTgpxn4ZmtxOM5aDTAaaznYuYUH8bUX3Nk3YA==
+"@types/marked@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.1.0.tgz#53509b5f127e0c05c19176fcf1d743a41e00ff19"
+  integrity sha512-j8XXj6/l9kFvCwMyVqozznqpd/nk80krrW+QiIJN60Uu9gX5Pvn4/qPJ2YngQrR3QREPwmrE1f9/EWKVTFzoEw==
 
 
 "@types/md5@^2.1.33":
 "@types/md5@^2.1.33":
   version "2.1.33"
   version "2.1.33"
@@ -17773,10 +17773,10 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     prop-types "^15.6.2"
     unquote "^1.1.0"
     unquote "^1.1.0"
 
 
-marked@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.2.tgz#c574be8b545a8b48641456ca1dbe0e37b6dccc1a"
-  integrity sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==
+marked@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-1.1.1.tgz#e5d61b69842210d5df57b05856e0c91572703e6a"
+  integrity sha512-mJzT8D2yPxoPh7h0UXkB+dBj4FykPJ2OIfxAWeIHrvoHDkFxukV/29QxoFQoPM6RLEwhIFdJpmKBlqVM3s2ZIw==
 
 
 marked@^0.3.12:
 marked@^0.3.12:
   version "0.3.19"
   version "0.3.19"