feat: add main datetime column to dataset editor (#17739)

* feat: add main dttm col to dataset editor

* Add tests

superset-frontend/spec/fixtures/mockDatasource.js

@@ -167,6 +167,7 @@ export default {
     column_types: [0, 1, 2],
     id,
     granularity_sqla: [['ds', 'ds']],
+    main_dttm_col: 'ds',
     name: 'birth_names',
     owners: [{ first_name: 'joe', last_name: 'man', id: 1 }],
     database: {

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -156,7 +156,9 @@ CollectionTabTitle.propTypes = {
 
 function ColumnCollectionTable({
   columns,
-  onChange,
+  datasource,
+  onColumnsChange,
+  onDatasourceChange,
   editableColumnName,
   showExpression,
   allowAddItem,
@@ -166,8 +168,22 @@ function ColumnCollectionTable({
   return (
     <CollectionTable
       collection={columns}
-      tableColumns={['column_name', 'type', 'is_dttm', 'filterable', 'groupby']}
-      sortColumns={['column_name', 'type', 'is_dttm', 'filterable', 'groupby']}
+      tableColumns={[
+        'column_name',
+        'type',
+        'is_dttm',
+        'main_dttm_col',
+        'filterable',
+        'groupby',
+      ]}
+      sortColumns={[
+        'column_name',
+        'type',
+        'is_dttm',
+        'main_dttm_col',
+        'filterable',
+        'groupby',
+      ]}
       allowDeletes
       allowAddItem={allowAddItem}
       itemGenerator={itemGenerator}
@@ -284,9 +300,10 @@ function ColumnCollectionTable({
         type: t('Data type'),
         groupby: t('Is dimension'),
         is_dttm: t('Is temporal'),
+        main_dttm_col: t('Default datetime'),
         filterable: t('Is filterable'),
       }}
-      onChange={onChange}
+      onChange={onColumnsChange}
       itemRenderers={{
         column_name: (v, onItemChange, _, record) =>
           editableColumnName ? (
@@ -310,6 +327,25 @@ function ColumnCollectionTable({
               {v}
             </StyledLabelWrapper>
           ),
+        main_dttm_col: (value, _onItemChange, _label, record) => {
+          const checked = datasource.main_dttm_col === record.column_name;
+          const disabled = !columns.find(
+            column => column.column_name === record.column_name,
+          ).is_dttm;
+          return (
+            <Radio
+              data-test={`radio-default-dttm-${record.column_name}`}
+              checked={checked}
+              disabled={disabled}
+              onChange={() =>
+                onDatasourceChange({
+                  ...datasource,
+                  main_dttm_col: record.column_name,
+                })
+              }
+            />
+          );
+        },
         type: d => (d ? <Label>{d}</Label> : null),
         is_dttm: checkboxGenerator,
         filterable: checkboxGenerator,
@@ -320,7 +356,9 @@ function ColumnCollectionTable({
 }
 ColumnCollectionTable.propTypes = {
   columns: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
+  datasource: PropTypes.object.isRequired,
+  onColumnsChange: PropTypes.func.isRequired,
+  onDatasourceChange: PropTypes.func.isRequired,
   editableColumnName: PropTypes.bool,
   showExpression: PropTypes.bool,
   allowAddItem: PropTypes.bool,
@@ -1227,9 +1265,11 @@ class DatasourceEditor extends React.PureComponent {
               <ColumnCollectionTable
                 className="columns-table"
                 columns={this.state.databaseColumns}
-                onChange={databaseColumns =>
+                datasource={datasource}
+                onColumnsChange={databaseColumns =>
                   this.setColumns({ databaseColumns })
                 }
+                onDatasourceChange={this.onDatasourceChange}
               />
               {this.state.metadataLoading && <Loading />}
             </div>
@@ -1245,9 +1285,11 @@ class DatasourceEditor extends React.PureComponent {
           >
             <ColumnCollectionTable
               columns={this.state.calculatedColumns}
-              onChange={calculatedColumns =>
+              onColumnsChange={calculatedColumns =>
                 this.setColumns({ calculatedColumns })
               }
+              onDatasourceChange={this.onDatasourceChange}
+              datasource={datasource}
               editableColumnName
               showExpression
               allowAddItem

superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx

@@ -230,4 +230,30 @@ describe('DatasourceEditor RTL', () => {
     userEvent.type(certificationDetails, 'I am typing something new');
     expect(certificationDetails.value).toEqual('I am typing something new');
   });
+  it('shows the default datetime column', async () => {
+    render(<DatasourceEditor {...props} />, { useRedux: true });
+    const metricButton = screen.getByTestId('collection-tab-Columns');
+    userEvent.click(metricButton);
+
+    const dsDefaultDatetimeRadio = screen.getByTestId('radio-default-dttm-ds');
+    expect(dsDefaultDatetimeRadio).toBeChecked();
+
+    const genderDefaultDatetimeRadio = screen.getByTestId(
+      'radio-default-dttm-gender',
+    );
+    expect(genderDefaultDatetimeRadio).not.toBeChecked();
+  });
+  it('allows choosing only temporal columns as the default datetime', async () => {
+    render(<DatasourceEditor {...props} />, { useRedux: true });
+    const metricButton = screen.getByTestId('collection-tab-Columns');
+    userEvent.click(metricButton);
+
+    const dsDefaultDatetimeRadio = screen.getByTestId('radio-default-dttm-ds');
+    expect(dsDefaultDatetimeRadio).toBeEnabled();
+
+    const genderDefaultDatetimeRadio = screen.getByTestId(
+      'radio-default-dttm-gender',
+    );
+    expect(genderDefaultDatetimeRadio).toBeDisabled();
+  });
 });

superset/examples/configs/datasets/examples/cleaned_sales_data.yaml

@@ -15,7 +15,7 @@
 # specific language governing permissions and limitations
 # under the License.
 table_name: cleaned_sales_data
-main_dttm_col: OrderDate
+main_dttm_col: order_date
 description: null
 default_endpoint: null
 offset: 0