From f92bc0994df80086dc4882bc2bedced81cef1c5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Sun, 9 Aug 2020 21:38:22 -0700 Subject: [PATCH] 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 --- .../global-variables-and-interpolation.json | 4 +-- e2e/suite1/specs/dashboard-templating.spec.ts | 2 +- package.json | 4 +-- packages/grafana-data/src/text/markdown.ts | 1 - public/app/plugins/panel/text/TextPanel.tsx | 33 +++++++------------ .../text/textPanelMigrationHandler.test.ts | 5 +-- .../panel/text/textPanelMigrationHandler.ts | 3 +- public/app/plugins/panel/text/types.ts | 2 +- yarn.lock | 16 ++++----- 9 files changed, 31 insertions(+), 39 deletions(-) diff --git a/devenv/dev-dashboards/feature-templating/global-variables-and-interpolation.json b/devenv/dev-dashboards/feature-templating/global-variables-and-interpolation.json index fda32faa78c..acd403af6ac 100644 --- a/devenv/dev-dashboards/feature-templating/global-variables-and-interpolation.json +++ b/devenv/dev-dashboards/feature-templating/global-variables-and-interpolation.json @@ -34,7 +34,7 @@ }, "id": 11, "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" }, "pluginVersion": "7.1.0", @@ -106,5 +106,5 @@ "timezone": "", "title": "Global variables and interpolation", "uid": "HYaGDGIMk", - "version": 3 + "version": 5 } diff --git a/e2e/suite1/specs/dashboard-templating.spec.ts b/e2e/suite1/specs/dashboard-templating.spec.ts index 2297dfa35e8..134fecd5e15 100644 --- a/e2e/suite1/specs/dashboard-templating.spec.ts +++ b/e2e/suite1/specs/dashboard-templating.spec.ts @@ -26,7 +26,7 @@ e2e.scenario({ `Server:pipe = A'A"A|BB\\B|CCC`, `Server:distributed = A'A"A,Server=BB\\B,Server=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:percentencode = %7BA%27A%22A%2CBB%5CB%2CCCC%7D`, `Server:singlequote = 'A\\'A"A','BB\\B','CCC'`, diff --git a/package.json b/package.json index 580406a26d6..ac2af117843 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@types/jquery": "3.3.38", "@types/lodash": "4.14.149", "@types/lru-cache": "^5.1.0", - "@types/marked": "0.6.5", + "@types/marked": "1.1.0", "@types/moment-timezone": "0.5.13", "@types/mousetrap": "1.6.3", "@types/node": "13.7.0", @@ -239,7 +239,7 @@ "jsurl": "^0.1.5", "lodash": "4.17.19", "lru-cache": "^5.1.1", - "marked": "0.6.2", + "marked": "1.1.1", "md5": "^2.2.1", "memoize-one": "5.1.1", "moment": "2.24.0", diff --git a/packages/grafana-data/src/text/markdown.ts b/packages/grafana-data/src/text/markdown.ts index 04650a2090d..f3c8d2f8981 100644 --- a/packages/grafana-data/src/text/markdown.ts +++ b/packages/grafana-data/src/text/markdown.ts @@ -4,7 +4,6 @@ const defaultMarkedOptions: MarkedOptions = { renderer: new marked.Renderer(), pedantic: false, gfm: true, - tables: true, sanitize: true, smartLists: true, smartypants: false, diff --git a/public/app/plugins/panel/text/TextPanel.tsx b/public/app/plugins/panel/text/TextPanel.tsx index f655012cfcf..1f8bd6b3a54 100644 --- a/public/app/plugins/panel/text/TextPanel.tsx +++ b/public/app/plugins/panel/text/TextPanel.tsx @@ -6,7 +6,7 @@ import { PanelProps, renderMarkdown, textUtil } from '@grafana/data'; import config from 'app/core/config'; // Types import { TextOptions } from './types'; -import { stylesFactory, CustomScrollbar } from '@grafana/ui'; +import { CustomScrollbar, stylesFactory } from '@grafana/ui'; import { css, cx } from 'emotion'; import DangerouslySetHtmlContent from 'dangerously-set-html-content'; @@ -39,25 +39,19 @@ export class TextPanel extends PureComponent { } prepareHTML(html: string): string { - const { replaceVariables } = this.props; - - html = replaceVariables(html, {}, 'html'); - - return config.disableSanitizeHtml ? html : textUtil.sanitize(html); - } - - prepareText(content: string): string { - return this.prepareHTML( - content - .replace(/&/g, '&') - .replace(/>/g, '>') - .replace(/') - ); + return this.interpolateAndSanitizeString(html); } prepareMarkdown(content: string): string { - return this.prepareHTML(renderMarkdown(content)); + return renderMarkdown(this.interpolateAndSanitizeString(content)); + } + + interpolateAndSanitizeString(content: string): string { + const { replaceVariables } = this.props; + + content = replaceVariables(content, {}, 'html'); + + return config.disableSanitizeHtml ? content : textUtil.sanitize(content); } processContent(options: TextOptions): string { @@ -70,11 +64,8 @@ export class TextPanel extends PureComponent { if (mode === 'markdown') { return this.prepareMarkdown(content); } - if (mode === 'html') { - return this.prepareHTML(content); - } - return this.prepareText(content); + return this.prepareHTML(content); } render() { diff --git a/public/app/plugins/panel/text/textPanelMigrationHandler.test.ts b/public/app/plugins/panel/text/textPanelMigrationHandler.test.ts index 45a084dd970..e61c01178c2 100644 --- a/public/app/plugins/panel/text/textPanelMigrationHandler.test.ts +++ b/public/app/plugins/panel/text/textPanelMigrationHandler.test.ts @@ -1,5 +1,5 @@ import { textPanelMigrationHandler } from './textPanelMigrationHandler'; -import { TextOptions } from './types'; +import { TextMode, TextOptions } from './types'; import { FieldConfigSource, PanelModel } from '@grafana/data'; describe('textPanelMigrationHandler', () => { @@ -43,6 +43,7 @@ describe('textPanelMigrationHandler', () => { describe('when invoked and previous version was using text mode', () => { it('then should switch to markdown', () => { + const mode = ('text' as unknown) as TextMode; const panel: PanelModel = { id: 1, fieldConfig: ({} as unknown) as FieldConfigSource, @@ -51,7 +52,7 @@ describe('textPanelMigrationHandler', () => { For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/) `, - mode: 'text', + mode, }, }; diff --git a/public/app/plugins/panel/text/textPanelMigrationHandler.ts b/public/app/plugins/panel/text/textPanelMigrationHandler.ts index aaf5393550c..eb30abd086f 100644 --- a/public/app/plugins/panel/text/textPanelMigrationHandler.ts +++ b/public/app/plugins/panel/text/textPanelMigrationHandler.ts @@ -11,7 +11,8 @@ export const textPanelMigrationHandler = (panel: PanelModel): Parti 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' }; } diff --git a/public/app/plugins/panel/text/types.ts b/public/app/plugins/panel/text/types.ts index e977316ed12..baff16c3534 100644 --- a/public/app/plugins/panel/text/types.ts +++ b/public/app/plugins/panel/text/types.ts @@ -1,4 +1,4 @@ -export type TextMode = 'html' | 'markdown' | 'text'; +export type TextMode = 'html' | 'markdown'; export interface TextOptions { mode: TextMode; content: string; diff --git a/yarn.lock b/yarn.lock index deb75e05efd..349dafb19b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6185,10 +6185,10 @@ resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.0.tgz#57f228f2b80c046b4a1bd5cac031f81f207f4f03" 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": 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" 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: version "0.3.19"