[TSVB] fix tooltip on annotations with 's are not displayed correctly (…

…#102892) * [TSVB] tooltip on annotations with 's are not displayed correctly Closes: #102631 * 'handlebars/dist/handlebars' -> 'handlebars'
elastic · Jun 23, 2021 · 12895d8 · 12895d8
1 parent fa5216f
commit 12895d8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/...lic/application/components/lib/reorder.js → ...lic/application/components/lib/reorder.ts b/...lic/application/components/lib/reorder.js → ...lic/application/components/lib/reorder.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-export const reorder = (list, startIndex, endIndex) => {
+export const reorder = (list: unknown[], startIndex: number, endIndex: number) => {
   const result = Array.from(list);
   const [removed] = result.splice(startIndex, 1);
   result.splice(endIndex, 0, removed);

diff --git a/...ation/components/lib/replace_vars.test.js → ...ation/components/lib/replace_vars.test.ts b/...ation/components/lib/replace_vars.test.js → ...ation/components/lib/replace_vars.test.ts
diff --git a/...pplication/components/lib/replace_vars.js → ...pplication/components/lib/replace_vars.ts b/...pplication/components/lib/replace_vars.js → ...pplication/components/lib/replace_vars.ts
@@ -6,20 +6,30 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
-import handlebars from 'handlebars/dist/handlebars';
-import { emptyLabel } from '../../../../common/empty_label';
+import handlebars from 'handlebars';
 import { i18n } from '@kbn/i18n';
+import { emptyLabel } from '../../../../common/empty_label';
+
+type CompileOptions = Parameters<typeof handlebars.compile>[1];
 
-export function replaceVars(str, args = {}, vars = {}) {
+export function replaceVars(
+  str: string,
+  args: Record<string, unknown> = {},
+  vars: Record<string, unknown> = {},
+  compileOptions: Partial<CompileOptions> = {}
+) {
   try {
-    // we need add '[]' for emptyLabel because this value contains special characters. (https://handlebarsjs.com/guide/expressions.html#literal-segments)
+    /** we need add '[]' for emptyLabel because this value contains special characters.
+     * @see (https://handlebarsjs.com/guide/expressions.html#literal-segments) **/
     const template = handlebars.compile(str.split(emptyLabel).join(`[${emptyLabel}]`), {
       strict: true,
       knownHelpersOnly: true,
+      ...compileOptions,
+    });
+    const string = template({
+      ...vars,
+      args,
     });
-
-    const string = template(_.assign({}, vars, { args }));
 
     return string;
   } catch (e) {

diff --git a/src/plugins/vis_type_timeseries/public/application/components/lib/tick_formatter.js b/src/plugins/vis_type_timeseries/public/application/components/lib/tick_formatter.js
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import handlebars from 'handlebars/dist/handlebars';
 import { isNumber } from 'lodash';
+import handlebars from 'handlebars';
 import { isEmptyValue, DISPLAY_EMPTY_VALUE } from '../../../../common/last_value_utils';
 import { inputFormats, outputFormats, isDuration } from '../lib/durations';
 import { getFieldFormats } from '../../../services';

diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -51,7 +51,9 @@ class TimeseriesVisualization extends Component {
   };
 
   applyDocTo = (template) => (doc) => {
-    const vars = replaceVars(template, null, doc);
+    const vars = replaceVars(template, null, doc, {
+      noEscape: true,
+    });
 
     if (vars instanceof Error) {
       this.showToastNotification = vars.error.caused_by;