fix: Allow empty CSS in Handlebars (#22422)

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>
 );

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,