From bb318cb137acd27009ddbe63ba4f8e0c37b754ca Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Wed, 14 Dec 2022 18:41:06 -0500
Subject: [PATCH] fix: Allow empty CSS in Handlebars (#22422)

---
 .../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 2dac822f8f2b..460b56f19691 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 d3776e77827d..f89a1a6679e1 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,