fix: fix nvd3 and histogram regressions and migrate control panels to TS (#875)

* chore: add types to all control panels

* move nvd3 shared section to individual viz

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/src/controlPanel.ts

@@ -16,15 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { t, legacyValidateInteger } from '@superset-ui/core';
 import {
-  t,
+  ControlPanelConfig,
-  legacyValidateInteger,
-  D3_TIME_FORMAT_OPTIONS,
   D3_FORMAT_DOCS,
-} from '@superset-ui/core';
+  D3_TIME_FORMAT_OPTIONS,
-import { formatSelectOptions, sections } from '@superset-ui/chart-controls';
+  formatSelectOptions,
+  sections,
+} from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -177,3 +178,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/controlPanel.ts

@@ -17,9 +17,9 @@
  * under the License.
  */
 import { t, validateNonEmpty } from '@superset-ui/core';
-import { sections } from '@superset-ui/chart-controls';
+import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -55,3 +55,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.ts

@@ -18,8 +18,9 @@
  */
 import { t, validateNonEmpty } from '@superset-ui/core';
 import {
-  formatSelectOptions,
   columnChoices,
+  ControlPanelConfig,
+  formatSelectOptions,
   formatSelectOptionsForRange,
   sections,
 } from '@superset-ui/chart-controls';
@@ -31,7 +32,7 @@ const sortAxisChoices = [
   ['value_desc', t('Metric descending')],
 ];
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -261,3 +262,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts

@@ -17,15 +17,20 @@
  * under the License.
  */
 import { t, validateNonEmpty } from '@superset-ui/core';
-import { formatSelectOptions, columnChoices, sections } from '@superset-ui/chart-controls';
+import {
+  ControlPanelConfig,
+  columnChoices,
+  formatSelectOptions,
+  sections,
+} from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
+    sections.legacyRegularTime,
     {
       label: t('Query'),
       expanded: true,
       controlSetRows: [
-        sections.legacyRegularTime,
         [
           {
             name: 'all_columns_x',
@@ -102,3 +107,4 @@ export default {
     },
   ],
 };
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-horizon/src/controlPanel.ts

@@ -17,9 +17,9 @@
  * under the License.
  */
 import { t } from '@superset-ui/core';
-import { formatSelectOptions, sections } from '@superset-ui/chart-controls';
+import { ControlPanelConfig, formatSelectOptions, sections } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -92,3 +92,5 @@ export default {
     },
   ],
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts

@@ -17,9 +17,14 @@
  * under the License.
  */
 import { t } from '@superset-ui/core';
-import { formatSelectOptions, columnChoices, sections } from '@superset-ui/chart-controls';
+import {
+  columnChoices,
+  ControlPanelConfig,
+  formatSelectOptions,
+  sections,
+} from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -99,9 +104,13 @@ export default {
                   'Either a numerical column or `Auto`, which scales the point based ' +
                   'on the largest cluster',
               ),
-              mapStateToProps: state => ({
+              mapStateToProps: state => {
-                choices: formatSelectOptions(['Auto']).concat(columnChoices(state.datasource)),
+                const datasourceChoices = columnChoices(state.datasource);
-              }),
+                const choices: [string, string][] = formatSelectOptions(['Auto']);
+                return {
+                  choices: choices.concat(datasourceChoices),
+                };
+              },
             },
           },
         ],
@@ -292,3 +301,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-partition/src/OptionDescription.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { ColumnMeta, InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
 const propTypes = {
   option: PropTypes.object.isRequired,
@@ -28,7 +28,7 @@ const propTypes = {
 
 // This component provides a general tooltip for options
 // in a SelectControl
-export default function OptionDescription({ option }) {
+export default function OptionDescription({ option }: { option: ColumnMeta }) {
   return (
     <span>
       <span className="m-r-5 option-label">{option.label}</span>

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx

@@ -19,15 +19,17 @@
 import React from 'react';
 import { t, validateNonEmpty } from '@superset-ui/core';
 import {
-  formatSelectOptions,
+  ColumnMeta,
-  D3_TIME_FORMAT_OPTIONS,
+  ControlPanelConfig,
   D3_FORMAT_DOCS,
   D3_FORMAT_OPTIONS,
+  D3_TIME_FORMAT_OPTIONS,
+  formatSelectOptions,
   sections,
 } from '@superset-ui/chart-controls';
 import OptionDescription from './OptionDescription';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -116,8 +118,8 @@ export default {
                   description: t('Use the Advanced Analytics options below'),
                 },
               ],
-              optionRenderer: op => <OptionDescription option={op} />,
+              optionRenderer: (op: ColumnMeta) => <OptionDescription option={op} />,
-              valueRenderer: op => <OptionDescription option={op} />,
+              valueRenderer: (op: ColumnMeta) => <OptionDescription option={op} />,
               description: t('Settings for time series'),
             },
           },
@@ -355,3 +357,5 @@ export default {
     },
   ],
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/controlPanel.ts

@@ -18,14 +18,15 @@
  */
 import { t } from '@superset-ui/core';
 import {
-  D3_FORMAT_OPTIONS,
+  ControlPanelConfig,
-  D3_FORMAT_DOCS,
   formatSelectOptions,
+  D3_FORMAT_DOCS,
+  D3_FORMAT_OPTIONS,
   D3_TIME_FORMAT_OPTIONS,
   sections,
 } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
     {
@@ -135,3 +136,5 @@ export default {
     columns: { includeTime: true },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx

@@ -19,14 +19,15 @@
 import React from 'react';
 import { t } from '@superset-ui/core';
 import {
+  ControlPanelConfig,
   formatSelectOptions,
-  D3_TIME_FORMAT_OPTIONS,
   D3_FORMAT_DOCS,
   D3_FORMAT_OPTIONS,
+  D3_TIME_FORMAT_OPTIONS,
   sections,
 } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
     {
@@ -251,3 +252,5 @@ export default {
     },
   ],
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-sankey-loop/src/controlPanel.ts

@@ -17,9 +17,9 @@
  * under the License.
  */
 import { t } from '@superset-ui/core';
-import { sections } from '@superset-ui/chart-controls';
+import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -40,3 +40,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-treemap/src/controlPanel.ts

@@ -16,10 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, D3_FORMAT_OPTIONS, D3_FORMAT_DOCS } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
-import { sections } from '@superset-ui/chart-controls';
+import {
+  ControlPanelConfig,
+  D3_FORMAT_OPTIONS,
+  D3_FORMAT_DOCS,
+  sections,
+} from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -69,3 +74,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts

@@ -17,9 +17,9 @@
  * under the License.
  */
 import { t } from '@superset-ui/core';
-import { formatSelectOptions, sections } from '@superset-ui/chart-controls';
+import { ControlPanelConfig, formatSelectOptions, sections } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -107,3 +107,5 @@ export default {
     },
   },
 };
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Area/controlPanel.ts

@@ -36,6 +36,7 @@ import {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
+    sections.legacyTimeseriesTime,
     timeSeriesSection[0],
     {
       label: t('Chart Options'),

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bar/controlPanel.ts

@@ -42,6 +42,7 @@ import {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
+    sections.legacyTimeseriesTime,
     timeSeriesSection[0],
     {
       label: t('Chart Options'),

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Compare/controlPanel.ts

@@ -34,6 +34,7 @@ import {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
+    sections.legacyTimeseriesTime,
     timeSeriesSection[0],
     {
       label: t('Chart Options'),

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Line/controlPanel.ts

@@ -39,6 +39,7 @@ import {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
+    sections.legacyTimeseriesTime,
     timeSeriesSection[0],
     {
       label: t('Chart Options'),

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx

@@ -27,7 +27,6 @@ import {
   D3_TIME_FORMAT_OPTIONS,
   D3_FORMAT_DOCS,
   D3_FORMAT_OPTIONS,
-  sections,
 } from '@superset-ui/chart-controls';
 
 /*
@@ -305,7 +304,6 @@ export const yAxisLabel: CustomControlItem = {
 };
 
 export const timeSeriesSection: ControlPanelSectionConfig[] = [
-  sections.legacyTimeseriesTime,
   {
     label: t('Query'),
     expanded: true,