Migrating unique Table controls (#9388)

CONTRIBUTING.md

@@ -961,10 +961,8 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz
 
 | Field                     | Type            | Notes                       |
 | ------------------------- | --------------- | --------------------------- |
-| `include_time`            | _boolean_       | The **Include Time** widget |
 | `metrics`                 | _array(string)_ | See Query section           |
 | `order_asc`               | -               | See Query section           |
-| `percent_metrics`         | -               | See Query section           |
 | `row_limit`               | -               | See Query section           |
 | `timeseries_limit_metric` | -               | See Query section           |
 
@@ -1086,7 +1084,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | Field                           | Type  | Notes |
 | ------------------------------- | ----- | ----- |
 | `add_to_dash`                   | _N/A_ |       |
-| `align_pn`                      | _N/A_ |       |
 | `all_columns_y`                 | _N/A_ |       |
 | `annotation_layers`             | _N/A_ |       |
 | `autozoom`                      | _N/A_ |       |
@@ -1095,7 +1092,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `clustering_radius`             | _N/A_ |       |
 | `code`                          | _N/A_ |       |
 | `collapsed_fieldsets`           | _N/A_ |       |
-| `color_pn`                      | _N/A_ |       |
 | `column_collection`             | _N/A_ |       |
 | `comparison type`               | _N/A_ |       |
 | `contribution`                  | _N/A_ |       |
@@ -1125,7 +1121,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `grid_size`                     | _N/A_ |       |
 | `horizon_color_scale`           | _N/A_ |       |
 | `import_time`                   | _N/A_ |       |
-| `include_search`                | _N/A_ |       |
 | `include_series`                | _N/A_ |       |
 | `instant_filtering`             | _N/A_ |       |
 | `js_agg_function`               | _N/A_ |       |
@@ -1159,7 +1154,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `num_period_compare`            | _N/A_ |       |
 | `order_bars`                    | _N/A_ |       |
 | `order_desc`                    | _N/A_ |       |
-| `page_length`                   | _N/A_ |       |
 | `pandas_aggfunc`                | _N/A_ |       |
 | `partition_limit`               | _N/A_ |       |
 | `partition_threshold`           | _N/A_ |       |
@@ -1210,7 +1204,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `stroked`                       | _N/A_ |       |
 | `subheader`                     | _N/A_ |       |
 | `table_filter`                  | _N/A_ |       |
-| `table_timestamp_format`        | _N/A_ |       |
 | `time_compare`                  | _N/A_ |       |
 | `time_series_option`            | _N/A_ |       |
 | `timed_refresh_immune_slices`   | _N/A_ |       |

superset-frontend/src/explore/controlPanels/Table.js

@@ -17,6 +17,9 @@
  * under the License.
  */
 import { t } from '@superset-ui/translation';
+import * as v from '../validators';
+import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import { formatSelectOptions } from '../../modules/utils';
 
 export default {
   controlPanelSections: [
@@ -27,16 +30,71 @@ export default {
       controlSetRows: [
         ['groupby'],
         ['metrics'],
-        ['percent_metrics'],
+        [
+          {
+            name: 'percent_metrics',
+            config: {
+              type: 'MetricsControl',
+              multi: true,
+              mapStateToProps: state => {
+                const datasource = state.datasource;
+                return {
+                  columns: datasource ? datasource.columns : [],
+                  savedMetrics: datasource ? datasource.metrics : [],
+                  datasourceType: datasource && datasource.type,
+                };
+              },
+              default: [],
+              label: t('Percentage Metrics'),
+              validators: [],
+              description: t(
+                'Metrics for which percentage of total are to be displayed',
+              ),
+            },
+          },
+        ],
         ['timeseries_limit_metric', 'row_limit'],
-        ['include_time', 'order_desc'],
+        [
+          {
+            name: 'include_time',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Include Time'),
+              description: t(
+                'Whether to include the time granularity as defined in the time section',
+              ),
+              default: false,
+            },
+          },
+          '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]],
+      controlSetRows: [
+        ['all_columns'],
+        [
+          {
+            name: 'order_by_cols',
+            config: {
+              type: 'SelectControl',
+              multi: true,
+              label: t('Ordering'),
+              default: [],
+              description: t('One or many metrics to display'),
+              mapStateToProps: state => ({
+                choices: state.datasource
+                  ? state.datasource.order_by_choices
+                  : [],
+              }),
+            },
+          },
+        ],
+        ['row_limit', null],
+      ],
     },
     {
       label: t('Query'),
@@ -47,10 +105,84 @@ export default {
       label: t('Options'),
       expanded: true,
       controlSetRows: [
-        ['table_timestamp_format'],
+        [
-        ['page_length', null],
+          {
-        ['include_search', 'table_filter'],
+            name: 'table_timestamp_format',
-        ['align_pn', 'color_pn'],
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Table Timestamp Format'),
+              default: '%Y-%m-%d %H:%M:%S',
+              renderTrigger: true,
+              validators: [v.nonEmpty],
+              clearable: false,
+              choices: D3_TIME_FORMAT_OPTIONS,
+              description: t('Timestamp Format'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'page_length',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              renderTrigger: true,
+              label: t('Page Length'),
+              default: 0,
+              choices: formatSelectOptions([
+                0,
+                10,
+                25,
+                40,
+                50,
+                75,
+                100,
+                150,
+                200,
+              ]),
+              description: t('Rows per page, 0 means no pagination'),
+            },
+          },
+          null,
+        ],
+        [
+          {
+            name: 'include_search',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Search Box'),
+              renderTrigger: true,
+              default: false,
+              description: t('Whether to include a client-side search box'),
+            },
+          },
+          'table_filter',
+        ],
+        [
+          {
+            name: 'align_pn',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Align +/-'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'Whether to align the background chart for +/- values',
+              ),
+            },
+          },
+          {
+            name: 'color_pn',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Color +/-'),
+              renderTrigger: true,
+              default: true,
+              description: t('Whether to color +/- values'),
+            },
+          },
+        ],
       ],
     },
   ],

superset-frontend/src/explore/controls.jsx

@@ -257,15 +257,6 @@ export const controls = {
     description: t('The type of visualization to display'),
   },
 
-  percent_metrics: {
-    ...metrics,
-    multi: true,
-    default: [],
-    label: t('Percentage Metrics'),
-    validators: [],
-    description: t('Metrics for which percentage of total are to be displayed'),
-  },
-
   y_axis_bounds: {
     type: 'BoundsControl',
     label: t('Y Axis Bounds'),
@@ -279,16 +270,6 @@ export const controls = {
     ),
   },
 
-  order_by_cols: {
-    type: 'SelectControl',
-    multi: true,
-    label: t('Ordering'),
-    default: [],
-    description: t('One or many metrics to display'),
-    mapStateToProps: state => ({
-      choices: state.datasource ? state.datasource.order_by_choices : [],
-    }),
-  },
   color_picker: {
     label: t('Fixed Color'),
     description: t('Use this to define a static color for all circles'),
@@ -415,15 +396,6 @@ export const controls = {
     ),
   },
 
-  include_time: {
-    type: 'CheckboxControl',
-    label: t('Include Time'),
-    description: t(
-      'Whether to include the time granularity as defined in the time section',
-    ),
-    default: false,
-  },
-
   autozoom: {
     type: 'CheckboxControl',
     label: t('Auto Zoom'),
@@ -1115,18 +1087,6 @@ export const controls = {
     description: t('Suffix to apply after the percentage display'),
   },
 
-  table_timestamp_format: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('Table Timestamp Format'),
-    default: '%Y-%m-%d %H:%M:%S',
-    renderTrigger: true,
-    validators: [v.nonEmpty],
-    clearable: false,
-    choices: D3_TIME_FORMAT_OPTIONS,
-    description: t('Timestamp Format'),
-  },
-
   series_height: {
     type: 'SelectControl',
     renderTrigger: true,
@@ -1146,16 +1106,6 @@ export const controls = {
     description: t('Pixel height of each series'),
   },
 
-  page_length: {
-    type: 'SelectControl',
-    freeForm: true,
-    renderTrigger: true,
-    label: t('Page Length'),
-    default: 0,
-    choices: formatSelectOptions([0, 10, 25, 40, 50, 75, 100, 150, 200]),
-    description: t('Rows per page, 0 means no pagination'),
-  },
-
   x_axis_format: {
     type: 'SelectControl',
     freeForm: true,
@@ -1436,14 +1386,6 @@ export const controls = {
     description: t('Whether to display the interactive data table'),
   },
 
-  include_search: {
-    type: 'CheckboxControl',
-    label: t('Search Box'),
-    renderTrigger: true,
-    default: false,
-    description: t('Whether to include a client-side search box'),
-  },
-
   table_filter: {
     type: 'CheckboxControl',
     label: t('Emit Filter Events'),
@@ -1452,22 +1394,6 @@ export const controls = {
     description: t('Whether to apply filter when items are clicked'),
   },
 
-  align_pn: {
-    type: 'CheckboxControl',
-    label: t('Align +/-'),
-    renderTrigger: true,
-    default: false,
-    description: t('Whether to align the background chart for +/- values'),
-  },
-
-  color_pn: {
-    type: 'CheckboxControl',
-    label: t('Color +/-'),
-    renderTrigger: true,
-    default: true,
-    description: t('Whether to color +/- values'),
-  },
-
   show_legend: {
     type: 'CheckboxControl',
     label: t('Legend'),