fix(explore): edit datasource does not update control states (#10284)

superset-frontend/src/explore/components/controls/DatasourceControl.jsx

@@ -38,9 +38,11 @@ import TooltipWrapper from '../../../components/TooltipWrapper';
 import './DatasourceControl.less';
 
 const propTypes = {
+  actions: PropTypes.object.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.string,
   datasource: PropTypes.object.isRequired,
+  isEditable: PropTypes.bool,
   onDatasourceSave: PropTypes.func,
 };
 
@@ -48,6 +50,7 @@ const defaultProps = {
   onChange: () => {},
   onDatasourceSave: null,
   value: null,
+  isEditable: true,
 };
 
 class DatasourceControl extends React.PureComponent {
@@ -58,6 +61,7 @@ class DatasourceControl extends React.PureComponent {
       showChangeDatasourceModal: false,
       menuExpanded: false,
     };
+    this.onDatasourceSave = this.onDatasourceSave.bind(this);
     this.toggleChangeDatasourceModal = this.toggleChangeDatasourceModal.bind(
       this,
     );
@@ -66,6 +70,13 @@ class DatasourceControl extends React.PureComponent {
     this.renderDatasource = this.renderDatasource.bind(this);
   }
 
+  onDatasourceSave(datasource) {
+    this.props.actions.setDatasource(datasource);
+    if (this.props.onDatasourceSave) {
+      this.props.onDatasourceSave(datasource);
+    }
+  }
+
   toggleShowDatasource() {
     this.setState(({ showDatasource }) => ({
       showDatasource: !showDatasource,
@@ -120,7 +131,7 @@ class DatasourceControl extends React.PureComponent {
 
   render() {
     const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
-    const { datasource, onChange, onDatasourceSave, value } = this.props;
+    const { datasource, onChange, value } = this.props;
     return (
       <div>
         <ControlHeader {...this.props} />
@@ -128,6 +139,7 @@ class DatasourceControl extends React.PureComponent {
           <TooltipWrapper
             label="change-datasource"
             tooltip={t('Click to change the datasource')}
+            trigger={['hover']}
           >
             <DropdownButton
               title={datasource.name}
@@ -148,7 +160,7 @@ class DatasourceControl extends React.PureComponent {
                   {t('Explore in SQL Lab')}
                 </MenuItem>
               )}
-              {!!this.props.onDatasourceSave && (
+              {this.props.isEditable && (
                 <MenuItem eventKey="3" onClick={this.toggleEditDatasourceModal}>
                   {t('Edit Datasource')}
                 </MenuItem>
@@ -179,11 +191,11 @@ class DatasourceControl extends React.PureComponent {
         <DatasourceModal
           datasource={datasource}
           show={showEditDatasourceModal}
-          onDatasourceSave={onDatasourceSave}
+          onDatasourceSave={this.onDatasourceSave}
           onHide={this.toggleEditDatasourceModal}
         />
         <ChangeDatasourceModal
-          onDatasourceSave={onDatasourceSave}
+          onDatasourceSave={this.onDatasourceSave}
           onHide={this.toggleChangeDatasourceModal}
           show={showChangeDatasourceModal}
           onChange={onChange}