feat: read control panel configs from registry (#8173)

* feat: read control panel configs from registry

* fix: order imports

* fix: remove index.js and get items on-the-fly, remove extraOverrides

* fix: lint

* fix: unit tests

* fix: unit tests

* fix: lint

* fix: unit tests

superset/assets/spec/javascripts/explore/components/ControlPanelsContainer_spec.jsx

@@ -18,39 +18,91 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
+import { t } from '@superset-ui/translation';
 import { defaultControls } from 'src/explore/store';
 import { getFormDataFromControls } from 'src/explore/controlUtils';
 import { ControlPanelsContainer } from 'src/explore/components/ControlPanelsContainer';
 import ControlPanelSection from 'src/explore/components/ControlPanelSection';
 import * as featureFlags from 'src/featureFlags';
 
-const defaultProps = {
-  datasource_type: 'table',
-  actions: {},
-  controls: defaultControls,
-  form_data: getFormDataFromControls(defaultControls),
-  isDatasourceMetaLoading: false,
-  exploreState: {},
-};
-
 describe('ControlPanelsContainer', () => {
   let wrapper;
   let scopedFilterOn = false;
   const isFeatureEnabledMock = jest.spyOn(featureFlags, 'isFeatureEnabled')
       .mockImplementation(() => scopedFilterOn);
 
+  beforeAll(() => {
+    getChartControlPanelRegistry().registerValue('table', {
+      controlPanelSections: [
+        {
+          label: t('GROUP BY'),
+          description: t('Use this section if you want a query that aggregates'),
+          expanded: true,
+          controlSetRows: [
+            ['groupby'],
+            ['metrics'],
+            ['percent_metrics'],
+            ['timeseries_limit_metric', 'row_limit'],
+            ['include_time', 'order_desc'],
+          ],
+        },
+        {
+          label: t('NOT GROUPED BY'),
+          description: t('Use this section if you want to query atomic rows'),
+          expanded: true,
+          controlSetRows: [
+            ['all_columns'],
+            ['order_by_cols'],
+            ['row_limit', null],
+          ],
+        },
+        {
+          label: t('Query'),
+          expanded: true,
+          controlSetRows: [
+            ['adhoc_filters'],
+          ],
+        },
+        {
+          label: t('Options'),
+          expanded: true,
+          controlSetRows: [
+            ['table_timestamp_format'],
+            ['page_length', null],
+            ['include_search', 'table_filter'],
+            ['align_pn', 'color_pn'],
+          ],
+        },
+      ],
+    });
+  });
+
   afterAll(() => {
+    getChartControlPanelRegistry().remove('table');
     isFeatureEnabledMock.mockRestore();
   });
 
+  function getDefaultProps() {
+    return {
+      datasource_type: 'table',
+      actions: {},
+      controls: defaultControls,
+      // Note: default viz_type is table
+      form_data: getFormDataFromControls(defaultControls),
+      isDatasourceMetaLoading: false,
+      exploreState: {},
+    };
+  }
+
   it('renders ControlPanelSections', () => {
-    wrapper = shallow(<ControlPanelsContainer {...defaultProps} />);
+    wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
     expect(wrapper.find(ControlPanelSection)).toHaveLength(6);
   });
 
   it('renders filter panel when SCOPED_FILTER flag is on', () => {
     scopedFilterOn = true;
-    wrapper = shallow(<ControlPanelsContainer {...defaultProps} />);
+    wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
     expect(wrapper.find(ControlPanelSection)).toHaveLength(7);
   });
 });

superset/assets/spec/javascripts/explore/controlUtils_spec.jsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
 import { t } from '@superset-ui/translation';
 import {
   getControlConfig,
@@ -36,27 +37,73 @@ describe('controlUtils', () => {
     },
   };
 
+  beforeAll(() => {
+    getChartControlPanelRegistry().registerValue('test-chart', {
+      requiresTime: true,
+      controlPanelSections: [
+        {
+          label: t('Chart Options'),
+          expanded: true,
+          controlSetRows: [
+            ['color_scheme', {
+              name: 'rose_area_proportion',
+              config: {
+                type: 'CheckboxControl',
+                label: t('Use Area Proportions'),
+                description: t(
+                  'Check if the Rose Chart should use segment area instead of ' +
+                  'segment radius for proportioning',
+                ),
+                default: false,
+                renderTrigger: true,
+              },
+            }],
+          ],
+        },
+      ],
+    }).registerValue('test-chart-override', {
+      requiresTime: true,
+      controlPanelSections: [
+        {
+          label: t('Chart Options'),
+          expanded: true,
+          controlSetRows: [
+            ['color_scheme'],
+          ],
+        },
+      ],
+      controlOverrides: {
+        color_scheme: {
+          label: t('My beautiful colors'),
+        },
+      },
+    });
+  });
+
+  afterAll(() => {
+    getChartControlPanelRegistry()
+      .remove('test-chart')
+      .remove('test-chart-override');
+  });
+
   describe('getControlConfig', () => {
     it('returns a valid spatial controlConfig', () => {
-      const spatialControl = getControlConfig('spatial', 'deck_grid');
-      expect(spatialControl.type).toEqual('SpatialControl');
-      expect(spatialControl.validators).toHaveLength(1);
+      const spatialControl = getControlConfig('color_scheme', 'test-chart');
+      expect(spatialControl.type).toEqual('ColorSchemeControl');
     });
 
     it('overrides according to vizType', () => {
-      let control = getControlConfig('metric', 'line');
-      expect(control.type).toEqual('MetricsControl');
-      expect(control.validators).toHaveLength(1);
+      let control = getControlConfig('color_scheme', 'test-chart');
+      expect(control.label).toEqual('Color Scheme');
 
       // deck_polygon overrides and removes validators
-      control = getControlConfig('metric', 'deck_polygon');
-      expect(control.type).toEqual('MetricsControl');
-      expect(control.validators).toHaveLength(0);
+      control = getControlConfig('color_scheme', 'test-chart-override');
+      expect(control.label).toEqual('My beautiful colors');
     });
 
     it('returns correct control config when control config is defined ' +
       'in the control panel definition', () => {
-        const roseAreaProportionControlConfig = getControlConfig('rose_area_proportion', 'rose');
+        const roseAreaProportionControlConfig = getControlConfig('rose_area_proportion', 'test-chart');
         expect(roseAreaProportionControlConfig).toEqual({
           type: 'CheckboxControl',
           label: t('Use Area Proportions'),

superset/assets/spec/javascripts/explore/store_spec.jsx

@@ -16,9 +16,25 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
 import { applyDefaultFormData } from '../../../src/explore/store';
 
 describe('store', () => {
+  beforeAll(() => {
+    getChartControlPanelRegistry().registerValue('test-chart', {
+      controlPanelSections: [
+        {
+          label: 'Test section',
+          expanded: true,
+          controlSetRows: [['row_limit']],
+        },
+      ],
+    });
+  });
+
+  afterAll(() => {
+    getChartControlPanelRegistry().remove('test-chart');
+  });
 
   describe('applyDefaultFormData', () => {
 
@@ -29,7 +45,7 @@ describe('store', () => {
     it('applies default to formData if the key is missing', () => {
       const inputFormData = {
         datasource: '11_table',
-        viz_type: 'table',
+        viz_type: 'test-chart',
       };
       let outputFormData = applyDefaultFormData(inputFormData);
       expect(outputFormData.row_limit).toEqual(10000);
@@ -45,7 +61,7 @@ describe('store', () => {
     it('keeps null if key is defined with null', () => {
       const inputFormData = {
         datasource: '11_table',
-        viz_type: 'table',
+        viz_type: 'test-chart',
         row_limit: null,
       };
       const outputFormData = applyDefaultFormData(inputFormData);