Bring back scripts evaluation in TextPanel (#26413)

package.json

@@ -225,6 +225,7 @@
     "core-js": "3.6.4",
     "d3": "5.15.0",
     "d3-scale-chromatic": "1.5.0",
+    "dangerously-set-html-content": "1.0.6",
     "emotion": "10.0.27",
     "eventemitter3": "4.0.0",
     "fast-text-encoding": "^1.0.0",

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

@@ -8,8 +8,10 @@ import config from 'app/core/config';
 import { TextOptions } from './types';
 import { stylesFactory } from '@grafana/ui';
 import { css, cx } from 'emotion';
+import DangerouslySetHtmlContent from 'dangerously-set-html-content';
 
 interface Props extends PanelProps<TextOptions> {}
+
 interface State {
   html: string;
 }
@@ -78,8 +80,7 @@ export class TextPanel extends PureComponent<Props, State> {
   render() {
     const { html } = this.state;
     const styles = getStyles();
-
-    return <div className={cx('markdown-html', styles.content)} dangerouslySetInnerHTML={{ __html: html }} />;
+    return <DangerouslySetHtmlContent html={html} className={cx('markdown-html', styles.content)} />;
   }
 }
 

public/app/types/dangerously-set-html-content.d.ts

+declare module 'dangerously-set-html-content' {
+  import React from 'react';
+
+  interface DangerouslySetHtmlContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    html: string;
+  }
+
+  class DangerouslySetHtmlContent extends React.Component<DangerouslySetHtmlContentProps, any> {}
+
+  export = DangerouslySetHtmlContent;
+}

yarn.lock

@@ -10909,6 +10909,11 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
+dangerously-set-html-content@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/dangerously-set-html-content/-/dangerously-set-html-content-1.0.6.tgz#3f4017215f821ba3ff46fa9d745036b708d4378c"
+  integrity sha512-rZ9cjrVHpFLCzm/rF2ZTGIg24DfQ+E3DBtQ0+OacIVndNewl7+SZvn4n403il4xirZQwpwUJudn/USK8qm4fuQ==
+
 dargs@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"