feat: support multiple columns with time grain in Table Chart (#21547)

superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts

@@ -17,9 +17,13 @@
  * under the License.
  */
 import {
+  AdhocColumn,
   buildQueryContext,
   ensureIsArray,
+  FeatureFlag,
   getMetricLabel,
+  isFeatureEnabled,
+  isPhysicalColumn,
   QueryMode,
   QueryObject,
   removeDuplicates,
@@ -63,7 +67,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
   }
 
   return buildQueryContext(formDataCopy, baseQueryObject => {
-    let { metrics, orderby = [] } = baseQueryObject;
+    let { metrics, orderby = [], columns = [] } = baseQueryObject;
     let postProcessing: PostProcessingRule[] = [];
 
     if (queryMode === QueryMode.aggregate) {
@@ -95,6 +99,24 @@ const buildQuery: BuildQuery<TableChartFormData> = (
           },
         ];
       }
+
+      columns = columns.map(col => {
+        if (
+          isPhysicalColumn(col) &&
+          formData.time_grain_sqla &&
+          isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) &&
+          formData?.datetime_columns_lookup?.[col]
+        ) {
+          return {
+            timeGrain: formData.time_grain_sqla,
+            columnType: 'BASE_AXIS',
+            sqlExpression: col,
+            label: col,
+            expressionType: 'SQL',
+          } as AdhocColumn;
+        }
+        return col;
+      });
     }
 
     const moreProps: Partial<QueryObject> = {};
@@ -108,6 +130,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
 
     let queryObject = {
       ...baseQueryObject,
+      columns,
       orderby,
       metrics,
       post_processing: postProcessing,

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -23,7 +23,9 @@ import {
   ensureIsArray,
   FeatureFlag,
   GenericDataType,
+  isAdhocColumn,
   isFeatureEnabled,
+  isPhysicalColumn,
   QueryFormColumn,
   QueryMode,
   smartDateFormatter,
@@ -145,7 +147,7 @@ const percentMetricsControl: typeof sharedControls.metrics = {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
-    sections.legacyTimeseriesTime,
+    sections.genericTime,
     {
       label: t('Query'),
       expanded: true,
@@ -186,6 +188,39 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && isAggMode
+            ? {
+                name: 'time_grain_sqla',
+                config: {
+                  ...sharedControls.time_grain_sqla,
+                  visibility: ({ controls }) => {
+                    const dttmLookup = Object.fromEntries(
+                      ensureIsArray(controls?.groupby?.options).map(option => [
+                        option.column_name,
+                        option.is_dttm,
+                      ]),
+                    );
+
+                    return ensureIsArray(controls?.groupby.value)
+                      .map(selection => {
+                        if (isAdhocColumn(selection)) {
+                          return true;
+                        }
+                        if (isPhysicalColumn(selection)) {
+                          return !!dttmLookup[selection];
+                        }
+                        return false;
+                      })
+                      .some(Boolean);
+                  },
+                },
+              }
+            : null,
+          isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && isAggMode
+            ? 'datetime_columns_lookup'
+            : null,
+        ],
         [
           {
             name: 'metrics',