[superset] branch master updated: fix: Allow empty CSS in Handlebars (#22422)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new bb318cb137 fix: Allow empty CSS in Handlebars (#22422)
bb318cb137 is described below

commit bb318cb137acd27009ddbe63ba4f8e0c37b754ca
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Wed Dec 14 18:41:06 2022 -0500

    fix: Allow empty CSS in Handlebars (#22422)
---
 .../src/components/ControlHeader/controlHeader.tsx |  4 +--
 .../src/plugin/controls/style.tsx                  | 33 ++++++++++++++--------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/components/ControlHeader/controlHeader.tsx b/superset-frontend/plugins/plugin-chart-handlebars/src/components/ControlHeader/controlHeader.tsx
index 2dac822f8f..460b56f196 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/components/ControlHeader/controlHeader.tsx
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/components/ControlHeader/controlHeader.tsx
@@ -26,8 +26,6 @@ export const ControlHeader = ({
   children,
 }: ControlHeaderProps): JSX.Element => (
   <div className="ControlHeader">
-    <div className="pull-left">
-      <span role="button">{children}</span>
-    </div>
+    <div className="pull-left">{children}</div>
   </div>
 );
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx
index d3776e7782..f89a1a6679 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx
@@ -20,8 +20,9 @@ import {
   ControlSetItem,
   CustomControlConfig,
   sharedControls,
+  InfoTooltipWithTrigger,
 } from '@superset-ui/chart-controls';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
 import React from 'react';
 import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
 import { ControlHeader } from '../../components/ControlHeader/controlHeader';
@@ -32,17 +33,32 @@ interface StyleCustomControlProps {
 }
 
 const StyleControl = (props: CustomControlConfig<StyleCustomControlProps>) => {
-  const val = String(
-    props?.value ? props?.value : props?.default ? props?.default : '',
-  );
+  const theme = useTheme();
+
+  const defaultValue = props?.value
+    ? undefined
+    : `/*
+  .data-list {
+    background-color: yellow;
+  }
+*/`;
 
   return (
     <div>
-      <ControlHeader>{props.label}</ControlHeader>
+      <ControlHeader>
+        <div>
+          {props.label}
+          <InfoTooltipWithTrigger
+            iconsStyle={{ marginLeft: theme.gridUnit }}
+            tooltip={t('You need to configure HTML sanitization to use CSS')}
+          />
+        </div>
+      </ControlHeader>
       <CodeEditor
         theme="dark"
         mode="css"
-        value={val}
+        value={props.value}
+        defaultValue={defaultValue}
         onChange={source => {
           debounceFunc(props.onChange, source || '');
         }}
@@ -58,11 +74,6 @@ export const styleControlSetItem: ControlSetItem = {
     type: StyleControl,
     label: t('CSS Styles'),
     description: t('CSS applied to the chart'),
-    default: `/*
-.data-list {
-  background-color: yellow;
-}
-*/`,
     isInt: false,
     renderTrigger: true,