feat: auto sync table columns when change dataset (#15887)

* feat: auto sync dataset metadata when change dataset

* diablo sync button when edit mode

* handle undefine schema

* fix py UT

* fix FE UT

* improve test coverage

* fix UT

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -358,6 +358,9 @@ class DatasourceEditor extends React.PureComponent {
     this.onChangeEditMode = this.onChangeEditMode.bind(this);
     this.onDatasourcePropChange = this.onDatasourcePropChange.bind(this);
     this.onDatasourceChange = this.onDatasourceChange.bind(this);
+    this.tableChangeAndSyncMetadata = this.tableChangeAndSyncMetadata.bind(
+      this,
+    );
     this.syncMetadata = this.syncMetadata.bind(this);
     this.setColumns = this.setColumns.bind(this);
     this.validateAndChange = this.validateAndChange.bind(this);
@@ -387,8 +390,8 @@ class DatasourceEditor extends React.PureComponent {
     this.setState(prevState => ({ isEditMode: !prevState.isEditMode }));
   }
 
-  onDatasourceChange(datasource) {
-    this.setState({ datasource }, this.validateAndChange);
+  onDatasourceChange(datasource, callback) {
+    this.setState({ datasource }, callback);
   }
 
   onDatasourcePropChange(attr, value) {
@@ -397,7 +400,9 @@ class DatasourceEditor extends React.PureComponent {
       prevState => ({
         datasource: { ...prevState.datasource, [attr]: value },
       }),
-      this.onDatasourceChange(datasource),
+      attr === 'table_name'
+        ? this.onDatasourceChange(datasource, this.tableChangeAndSyncMetadata)
+        : this.onDatasourceChange(datasource, this.validateAndChange),
     );
   }
 
@@ -414,6 +419,13 @@ class DatasourceEditor extends React.PureComponent {
     this.validate(this.onChange);
   }
 
+  tableChangeAndSyncMetadata() {
+    this.validate(() => {
+      this.syncMetadata();
+      this.onChange();
+    });
+  }
+
   updateColumns(cols) {
     const { databaseColumns } = this.state;
     const databaseColumnNames = cols.map(col => col.name);
@@ -473,9 +485,11 @@ class DatasourceEditor extends React.PureComponent {
 
   syncMetadata() {
     const { datasource } = this.state;
-    const endpoint = `/datasource/external_metadata/${
+    const endpoint = `/datasource/external_metadata_by_name/${
       datasource.type || datasource.datasource_type
-    }/${datasource.id}/`;
+    }/${datasource.database.database_name}/${datasource.schema}/${
+      datasource.table_name
+    }/`;
     this.setState({ metadataLoading: true });
 
     SupersetClient.get({ endpoint })
@@ -1081,6 +1095,7 @@ class DatasourceEditor extends React.PureComponent {
                     buttonStyle="tertiary"
                     onClick={this.syncMetadata}
                     className="sync-from-source"
+                    disabled={this.state.isEditMode}
                   >
                     <i className="fa fa-database" />{' '}
                     {t('Sync columns from source')}