[datasource editor] Only one click target for edit action (#8495)

superset/assets/src/explore/components/controls/DatasourceControl.css

@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+#datasource_menu {
+    border-radius: 2px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+#datasource_menu .caret {
+    position: relative;
+    padding-right: 8px;
+    margin-left: 4px;
+    color: #fff;
+    top: -8px;
+}
+
+#datasource_menu + ul {
+    margin-top: 26px;
+}

superset/assets/src/explore/components/controls/DatasourceControl.jsx

@@ -36,6 +36,8 @@ import ColumnOption from '../../../components/ColumnOption';
 import MetricOption from '../../../components/MetricOption';
 import DatasourceModal from '../../../datasource/DatasourceModal';
 import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';
+import TooltipWrapper from '../../../components/TooltipWrapper';
+import './DatasourceControl.css';
 
 const propTypes = {
   onChange: PropTypes.func,
@@ -115,56 +117,45 @@ class DatasourceControl extends React.PureComponent {
   }
 
   render() {
-    const { menuExpanded, showChangeDatasourceModal, showEditDatasourceModal } = this.state;
+    const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
     const { datasource, onChange, onDatasourceSave, value } = this.props;
     return (
       <div>
         <ControlHeader {...this.props} />
         <div className="btn-group label-dropdown">
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id={'error-tooltip'}>{t('Click to change the datasource')}</Tooltip>
-            }
-          >
-            <div className="btn-group">
-              <Label onClick={this.toggleChangeDatasourceModal} className="label-btn-label">
-                {datasource.name}
-              </Label>
-            </div>
-          </OverlayTrigger>
-          <DropdownButton
-            noCaret
-            title={
-              <span>
-                <i className={`float-right expander fa fa-angle-${menuExpanded ? 'up' : 'down'}`} />
-              </span>}
-            className="label label-btn m-r-5"
-            bsSize="sm"
-            id="datasource_menu"
+          <TooltipWrapper
+            label="change-datasource"
+            tooltip={t('Click to change the datasource')}
           >
-            <MenuItem
-              eventKey="3"
-              onClick={this.toggleChangeDatasourceModal}
+            <DropdownButton
+              title={datasource.name}
+              className="label label-default label-btn m-r-5"
+              bsSize="sm"
+              id="datasource_menu"
             >
-              {t('Change Datasource')}
-            </MenuItem>
-            {datasource.type === 'table' &&
               <MenuItem
                 eventKey="3"
-                href={`/superset/sqllab?datasourceKey=${value}`}
-                target="_blank"
-                rel="noopener noreferrer"
+                onClick={this.toggleChangeDatasourceModal}
               >
-                {t('Explore in SQL Lab')}
-              </MenuItem>}
-            <MenuItem
-              eventKey="3"
-              onClick={this.toggleEditDatasourceModal}
-            >
-              {t('Edit Datasource')}
-            </MenuItem>
-          </DropdownButton>
+                {t('Change Datasource')}
+              </MenuItem>
+              {datasource.type === 'table' &&
+                <MenuItem
+                  eventKey="3"
+                  href={`/superset/sqllab?datasourceKey=${value}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('Explore in SQL Lab')}
+                </MenuItem>}
+              <MenuItem
+                eventKey="3"
+                onClick={this.toggleEditDatasourceModal}
+              >
+                {t('Edit Datasource')}
+              </MenuItem>
+            </DropdownButton>
+          </TooltipWrapper>
           <OverlayTrigger
             placement="right"
             overlay={