feat: Add controlGroups to formData (#9740)

superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx

@@ -23,7 +23,9 @@ import { t } from '@superset-ui/translation';
 import {
   getControlConfig,
   getControlState,
+  getFormDataFromControls,
   applyMapStateToPropsToControl,
+  getAllControlsState,
 } from '../../../src/explore/controlUtils';
 import ColumnOption from '../../../src/components/ColumnOption';
 
@@ -107,6 +109,7 @@ describe('controlUtils', () => {
                   name: 'all_columns',
                   config: {
                     type: 'SelectControl',
+                    controlGroup: 'columns',
                     multi: true,
                     label: t('Columns'),
                     default: [],
@@ -246,4 +249,12 @@ describe('controlUtils', () => {
       expect(control.validationErrors).toEqual(['cannot be empty']);
     });
   });
+
+  describe('controlGroup', () => {
+    it('in formData', () => {
+      const controlsState = getAllControlsState('table', 'table', {}, {});
+      const formData = getFormDataFromControls(controlsState);
+      expect(formData.controlGroups).toEqual({ all_columns: 'columns' });
+    });
+  });
 });

superset-frontend/src/explore/controlUtils.js

@@ -22,8 +22,13 @@ import * as SECTIONS from './controlPanels/sections';
 
 export function getFormDataFromControls(controlsState) {
   const formData = {};
+  formData.controlGroups = {};
   Object.keys(controlsState).forEach(controlName => {
-    formData[controlName] = controlsState[controlName].value;
+    const control = controlsState[controlName];
+    formData[controlName] = control.value;
+    if (control.hasOwnProperty('controlGroup')) {
+      formData.controlGroups[controlName] = control.controlGroup;
+    }
   });
   return formData;
 }

superset-frontend/src/explore/controls.jsx

@@ -125,6 +125,7 @@ const timeColumnOption = {
 
 const groupByControl = {
   type: 'SelectControl',
+  controlGroup: 'groupby',
   multi: true,
   freeForm: true,
   label: t('Group by'),
@@ -156,6 +157,7 @@ const groupByControl = {
 
 const metrics = {
   type: 'MetricsControl',
+  controlGroup: 'metrics',
   multi: true,
   label: t('Metrics'),
   validators: [validateNonEmpty],