fix(plugin-chart-handlebars): fix overflow, debounce and control reset (#19879)

* fix(plugin-chart-handlebars): fix overflow

* add debounce, fix reset controls

* fix deps

* remove redundant code

* improve examples

* add last missing resetOnHides

* fix test

* use isPlainObject

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/columns.tsx

@@ -31,7 +31,7 @@ import {
 import React from 'react';
 import { getQueryMode, isRawMode } from './shared';
 
-export const allColumns: typeof sharedControls.groupby = {
+const allColumns: typeof sharedControls.groupby = {
   type: 'SelectControl',
   label: t('Columns'),
   description: t('Columns to display'),
@@ -52,6 +52,7 @@ export const allColumns: typeof sharedControls.groupby = {
         : [],
   }),
   visibility: isRawMode,
+  resetOnHide: false,
 };
 
 const dndAllColumns: typeof sharedControls.groupby = {
@@ -75,6 +76,7 @@ const dndAllColumns: typeof sharedControls.groupby = {
     return newState;
   },
   visibility: isRawMode,
+  resetOnHide: false,
 };
 
 export const allColumnsControlSetItem: ControlSetItem = {

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/groupBy.tsx

@@ -28,6 +28,7 @@ export const groupByControlSetItem: ControlSetItem = {
   name: 'groupby',
   override: {
     visibility: isAggMode,
+    resetOnHide: false,
     mapStateToProps: (state: ControlPanelState, controlState: ControlState) => {
       const { controls } = state;
       const originalMapStateToProps = sharedControls?.groupby?.mapStateToProps;
@@ -37,7 +38,6 @@ export const groupByControlSetItem: ControlSetItem = {
         controls.percent_metrics?.value,
         controlState.value,
       ]);
-
       return newState;
     },
     rerender: ['metrics', 'percent_metrics'],

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx

@@ -25,6 +25,7 @@ import { t, validateNonEmpty } from '@superset-ui/core';
 import React from 'react';
 import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
 import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+import { debounceFunc } from '../../consts';
 
 interface HandlebarsCustomControlProps {
   value: string;
@@ -37,9 +38,6 @@ const HandlebarsTemplateControl = (
     props?.value ? props?.value : props?.default ? props?.default : '',
   );
 
-  const updateConfig = (source: string) => {
-    props.onChange(source);
-  };
   return (
     <div>
       <ControlHeader>{props.label}</ControlHeader>
@@ -47,7 +45,7 @@ const HandlebarsTemplateControl = (
         theme="dark"
         value={val}
         onChange={source => {
-          updateConfig(source || '');
+          debounceFunc(props.onChange, source || '');
         }}
       />
     </div>
@@ -61,11 +59,11 @@ export const handlebarsTemplateControlSetItem: ControlSetItem = {
     type: HandlebarsTemplateControl,
     label: t('Handlebars Template'),
     description: t('A handlebars template that is applied to the data'),
-    default: `<ul class="data_list">
-      {{#each data}}
-        <li>{{this}}</li>
-      {{/each}}
-    </ul>`,
+    default: `<ul class="data-list">
+  {{#each data}}
+    <li>{{stringify this}}</li>
+  {{/each}}
+</ul>`,
     isInt: false,
     renderTrigger: true,
 

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/includeTime.ts

@@ -30,5 +30,6 @@ export const includeTimeControlSetItem: ControlSetItem = {
     ),
     default: false,
     visibility: isAggMode,
+    resetOnHide: false,
   },
 };

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/limits.ts

@@ -34,5 +34,6 @@ export const timeSeriesLimitMetricControlSetItem: ControlSetItem = {
   name: 'timeseries_limit_metric',
   override: {
     visibility: isAggMode,
+    resetOnHide: false,
   },
 };

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/metrics.tsx

@@ -33,6 +33,7 @@ const percentMetrics: typeof sharedControls.metrics = {
   ),
   multi: true,
   visibility: isAggMode,
+  resetOnHide: false,
   mapStateToProps: ({ datasource, controls }, controlState) => ({
     columns: datasource?.columns || [],
     savedMetrics: datasource?.metrics || [],
@@ -86,6 +87,7 @@ export const metricsControlSetItem: ControlSetItem = {
       ]),
     }),
     rerender: ['groupby', 'percent_metrics'],
+    resetOnHide: false,
   },
 };
 
@@ -99,5 +101,6 @@ export const showTotalsControlSetItem: ControlSetItem = {
       'Show total aggregations of selected metrics. Note that row limit does not apply to the result.',
     ),
     visibility: isAggMode,
+    resetOnHide: false,
   },
 };

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/orderBy.tsx

@@ -32,6 +32,7 @@ export const orderByControlSetItem: ControlSetItem = {
       choices: datasource?.order_by_choices || [],
     }),
     visibility: isRawMode,
+    resetOnHide: false,
   },
 };
 
@@ -43,5 +44,6 @@ export const orderDescendingControlSetItem: ControlSetItem = {
     default: true,
     description: t('Whether to sort descending or ascending'),
     visibility: isAggMode,
+    resetOnHide: false,
   },
 };

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx

@@ -25,6 +25,7 @@ import { t } from '@superset-ui/core';
 import React from 'react';
 import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
 import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+import { debounceFunc } from '../../consts';
 
 interface StyleCustomControlProps {
   value: string;
@@ -35,9 +36,6 @@ const StyleControl = (props: CustomControlConfig<StyleCustomControlProps>) => {
     props?.value ? props?.value : props?.default ? props?.default : '',
   );
 
-  const updateConfig = (source: string) => {
-    props.onChange(source);
-  };
   return (
     <div>
       <ControlHeader>{props.label}</ControlHeader>
@@ -46,7 +44,7 @@ const StyleControl = (props: CustomControlConfig<StyleCustomControlProps>) => {
         mode="css"
         value={val}
         onChange={source => {
-          updateConfig(source || '');
+          debounceFunc(props.onChange, source || '');
         }}
       />
     </div>
@@ -60,7 +58,11 @@ export const styleControlSetItem: ControlSetItem = {
     type: StyleControl,
     label: t('CSS Styles'),
     description: t('CSS applied to the chart'),
-    default: '',
+    default: `/*
+.data-list {
+  background-color: yellow;
+}
+*/`,
     isInt: false,
     renderTrigger: true,