feat: support warning_markdown on metrics (#1011)

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/MetricOption.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styled, Metric } from '@superset-ui/core';
+import { styled, Metric, SafeMarkdown } from '@superset-ui/core';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import { ColumnTypeLabel } from './ColumnTypeLabel';
 import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
@@ -54,6 +54,9 @@ export function MetricOption({
   ) : (
     verbose
   );
+
+  const warningMarkdown = metric.warning_markdown || metric.warning_text;
+
   return (
     <FlexRowContainer className="metric-option">
       {showType && <ColumnTypeLabel type="expression" />}
@@ -81,11 +84,11 @@ export function MetricOption({
           label={`expr-${metric.metric_name}`}
         />
       )}
-      {metric.warning_text && (
+      {warningMarkdown && (
         <InfoTooltipWithTrigger
-          className="text-danger"
+          className="text-warning"
           icon="warning"
-          tooltip={metric.warning_text}
+          tooltip={<SafeMarkdown source={warningMarkdown} />}
           label={`warn-${metric.metric_name}`}
         />
       )}

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/package.json

@@ -55,6 +55,7 @@
     "lodash": "^4.17.11",
     "pretty-ms": "^7.0.0",
     "react-error-boundary": "^1.2.5",
+    "react-markdown": "^4.3.1",
     "reselect": "^4.0.0",
     "rison": "^0.1.1",
     "seedrandom": "^3.0.5",

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/components/SafeMarkdown.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactMarkdown, { MarkdownAbstractSyntaxTree } from 'react-markdown';
+// @ts-ignore no types available
+import htmlParser from 'react-markdown/plugins/html-parser';
+
+import { FeatureFlag, isFeatureEnabled } from '../utils';
+
+interface SafeMarkdownProps {
+  source: string;
+}
+
+function isSafeMarkup(node: MarkdownAbstractSyntaxTree) {
+  return node.type === 'html' && node.value
+    ? /href="(javascript|vbscript|file):.*"/gim.test(node.value) === false
+    : true;
+}
+
+function SafeMarkdown({ source }: SafeMarkdownProps) {
+  return (
+    <ReactMarkdown
+      source={source}
+      escapeHtml={isFeatureEnabled(FeatureFlag.ESCAPE_MARKDOWN_HTML)}
+      skipHtml={!isFeatureEnabled(FeatureFlag.DISPLAY_MARKDOWN_HTML)}
+      allowNode={isSafeMarkup}
+      astPlugins={[
+        htmlParser({
+          isValidNode: (node: MarkdownAbstractSyntaxTree) => node.type !== 'script',
+        }),
+      ]}
+    />
+  );
+}
+
+export default SafeMarkdown;

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/components/index.ts

@@ -0,0 +1 @@
+export { default as SafeMarkdown } from './SafeMarkdown';

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/index.ts

@@ -31,3 +31,4 @@ export * from './style';
 export * from './validator';
 export * from './chart';
 export * from './chart-composition';
+export * from './components';

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/query/types/Metric.ts

@@ -61,6 +61,7 @@ export interface Metric {
   description?: Maybe<string>;
   is_certified?: boolean;
   verbose_name?: string;
+  warning_markdown?: Maybe<string>;
   warning_text?: Maybe<string>;
 }