From 713b0ae4f4b3ccb41fa4977b5e8d1ab8ff0a4110 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 1 Feb 2019 12:01:30 -0800
Subject: [PATCH] [cosmetic] TableSelector use <i> instead of <Button> for
 refresh (#6783)

* [cosmetic] TableSelector use <i> instead of <Button> for refresh

* Add ASF licenses

* css hover

* missing license

* remove license header
---
 .../assets/src/components/RefreshLabel.jsx    |  35 +---
 .../assets/src/components/RefreshLabel.less   |  27 ++++
 .../assets/src/components/TableSelector.css   |  24 +++
 .../assets/src/components/TableSelector.jsx   | 150 +++++++++---------
 4 files changed, 132 insertions(+), 104 deletions(-)
 create mode 100644 superset/assets/src/components/RefreshLabel.less
 create mode 100644 superset/assets/src/components/TableSelector.css

diff --git a/superset/assets/src/components/RefreshLabel.jsx b/superset/assets/src/components/RefreshLabel.jsx
index cd5a6e00f..855dc6696 100644
--- a/superset/assets/src/components/RefreshLabel.jsx
+++ b/superset/assets/src/components/RefreshLabel.jsx
@@ -18,49 +18,26 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
 import TooltipWrapper from './TooltipWrapper';
 
+import './RefreshLabel.less';
+
 const propTypes = {
   onClick: PropTypes.func,
-  className: PropTypes.string,
   tooltipContent: PropTypes.string.isRequired,
 };
 
 class RefreshLabel extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hovered: false,
-    };
-  }
-
-  mouseOver() {
-    this.setState({ hovered: true });
-  }
-
-  mouseOut() {
-    this.setState({ hovered: false });
-  }
-
   render() {
-    const labelStyle = this.state.hovered ? 'primary' : 'default';
-    const tooltip = 'Click to ' + this.props.tooltipContent;
     return (
       <TooltipWrapper
-        tooltip={tooltip}
+        tooltip={this.props.tooltipContent}
         label="cache-desc"
       >
-        <Label
-          className={this.props.className}
-          bsStyle={labelStyle}
-          style={{ fontSize: '13px', marginRight: '5px', cursor: 'pointer' }}
+        <i
+          className="RefreshLabel fa fa-refresh pointer"
           onClick={this.props.onClick}
-          onMouseOver={this.mouseOver.bind(this)}
-          onMouseOut={this.mouseOut.bind(this)}
-        >
-          <i className="fa fa-refresh" />
-        </Label>
+        />
       </TooltipWrapper>);
   }
 }
diff --git a/superset/assets/src/components/RefreshLabel.less b/superset/assets/src/components/RefreshLabel.less
new file mode 100644
index 000000000..3bf895b1c
--- /dev/null
+++ b/superset/assets/src/components/RefreshLabel.less
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+@import "../../stylesheets/less/cosmo/variables.less";
+
+.RefreshLabel:hover {
+  color: @brand-primary;
+}
+
+.RefreshLabel {
+  color: @gray-light;
+}
diff --git a/superset/assets/src/components/TableSelector.css b/superset/assets/src/components/TableSelector.css
new file mode 100644
index 000000000..b4636de36
--- /dev/null
+++ b/superset/assets/src/components/TableSelector.css
@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+.TableSelector .fa-refresh {
+  padding-top: 7px
+}
+.TableSelector .refresh-col {
+  padding-left: 0px;
+}
diff --git a/superset/assets/src/components/TableSelector.jsx b/superset/assets/src/components/TableSelector.jsx
index 6a0c4016b..9031d1a2c 100644
--- a/superset/assets/src/components/TableSelector.jsx
+++ b/superset/assets/src/components/TableSelector.jsx
@@ -20,12 +20,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
-import { ControlLabel, Col, Label } from 'react-bootstrap';
+import { ControlLabel, Col, Label, Row } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 
 import AsyncSelect from './AsyncSelect';
 import RefreshLabel from './RefreshLabel';
+import './TableSelector.css';
 
 const propTypes = {
   dbId: PropTypes.number.isRequired,
@@ -196,8 +197,16 @@ export default class TableSelector extends React.PureComponent {
         {db.database_name}
       </span>);
   }
-  renderDatabaseSelect() {
+  renderSelectRow(select, refreshBtn) {
     return (
+      <Row>
+        <Col md={11}>{select}</Col>
+        <Col md={1} className="refresh-col">{refreshBtn}</Col>
+      </Row>
+    );
+  }
+  renderDatabaseSelect() {
+    return this.renderSelectRow(
       <AsyncSelect
         dataEndpoint={
           '/databaseasync/api/' +
@@ -225,30 +234,26 @@ export default class TableSelector extends React.PureComponent {
   renderSchema() {
     return (
       <div className="m-t-5">
-        <div className="row">
-          <div className="col-md-11 col-xs-11 p-r-2">
-            <Select
-              name="select-schema"
-              placeholder={t('Select a schema (%s)', this.state.schemaOptions.length)}
-              options={this.state.schemaOptions}
-              value={this.props.schema}
-              valueRenderer={o => (
-                <div>
-                  <span className="text-muted">{t('Schema:')}</span> {o.label}
-                </div>
-              )}
-              isLoading={this.state.schemaLoading}
-              autosize={false}
-              onChange={this.changeSchema}
-            />
-          </div>
-          <div className="col-md-1 col-xs-1 p-l-0 p-t-8">
-            <RefreshLabel
-              onClick={() => this.onDatabaseChange({ id: this.props.dbId }, true)}
-              tooltipContent={t('force refresh schema list')}
-            />
-          </div>
-        </div>
+        {this.renderSelectRow(
+          <Select
+            name="select-schema"
+            placeholder={t('Select a schema (%s)', this.state.schemaOptions.length)}
+            options={this.state.schemaOptions}
+            value={this.props.schema}
+            valueRenderer={o => (
+              <div>
+                <span className="text-muted">{t('Schema:')}</span> {o.label}
+              </div>
+            )}
+            isLoading={this.state.schemaLoading}
+            autosize={false}
+            onChange={this.changeSchema}
+          />,
+          <RefreshLabel
+            onClick={() => this.onDatabaseChange({ id: this.props.dbId }, true)}
+            tooltipContent={t('Force refresh schema list')}
+          />,
+        )}
       </div>
     );
   }
@@ -262,43 +267,37 @@ export default class TableSelector extends React.PureComponent {
       tableSelectDisabled = true;
     }
     const options = this.addOptionIfMissing(this.state.tableOptions, this.state.tableName);
+    const select = this.props.schema ? (
+      <Select
+        name="select-table"
+        ref="selectTable"
+        isLoading={this.state.tableLoading}
+        placeholder={t('Select table or type table name')}
+        autosize={false}
+        onChange={this.changeTable}
+        filterOptions={this.state.filterOptions}
+        options={options}
+        value={this.state.tableName}
+      />) : (
+        <Select
+          async
+          name="async-select-table"
+          ref="selectTable"
+          placeholder={tableSelectPlaceholder}
+          disabled={tableSelectDisabled}
+          autosize={false}
+          onChange={this.changeTable}
+          value={this.state.tableName}
+          loadOptions={this.getTableNamesBySubStr}
+        />);
     return (
       <div className="m-t-5">
-        <div className="row">
-          <div className="col-md-11 col-xs-11 p-r-2">
-            {this.props.schema ? (
-              <Select
-                name="select-table"
-                ref="selectTable"
-                isLoading={this.state.tableLoading}
-                placeholder={t('Select table or type table name')}
-                autosize={false}
-                onChange={this.changeTable}
-                filterOptions={this.state.filterOptions}
-                options={options}
-                value={this.state.tableName}
-              />
-            ) : (
-              <Select
-                async
-                name="async-select-table"
-                ref="selectTable"
-                placeholder={tableSelectPlaceholder}
-                disabled={tableSelectDisabled}
-                autosize={false}
-                onChange={this.changeTable}
-                value={this.state.tableName}
-                loadOptions={this.getTableNamesBySubStr}
-              />
-            )}
-          </div>
-          <div className="col-md-1 col-xs-1 p-l-0 p-t-8">
-            <RefreshLabel
-              onClick={() => this.changeSchema({ value: this.props.schema }, true)}
-              tooltipContent={t('force refresh table list')}
-            />
-          </div>
-        </div>
+        {this.renderSelectRow(
+          select,
+          <RefreshLabel
+            onClick={() => this.changeSchema({ value: this.props.schema }, true)}
+            tooltipContent={t('Force refresh table list')}
+          />)}
       </div>);
   }
   renderSeeTableLabel() {
@@ -318,21 +317,22 @@ export default class TableSelector extends React.PureComponent {
       </div>);
   }
   render() {
-    if (this.props.horizontal) {
-      return (
-        <div>
-          <Col md={4}>{this.renderDatabaseSelect()}</Col>
-          <Col md={4}>{this.renderSchema()}</Col>
-          <Col md={4}>{this.renderTable()}</Col>
-        </div>);
-    }
     return (
-      <div>
-        <div>{this.renderDatabaseSelect()}</div>
-        <div className="m-t-5">{this.renderSchema()}</div>
-        {this.props.sqlLabMode && this.renderSeeTableLabel()}
-        <div className="m-t-5">{this.renderTable()}</div>
-      </div>);
+      <div className="TableSelector">
+        {this.props.horizontal ?
+          <div>
+            <Col md={4}>{this.renderDatabaseSelect()}</Col>
+            <Col md={4}>{this.renderSchema()}</Col>
+            <Col md={4}>{this.renderTable()}</Col>
+          </div> :
+          <div>
+            <div>{this.renderDatabaseSelect()}</div>
+            <div className="m-t-5">{this.renderSchema()}</div>
+            {this.props.sqlLabMode && this.renderSeeTableLabel()}
+            <div className="m-t-5">{this.renderTable()}</div>
+          </div>}
+      </div>
+    );
   }
 }
 TableSelector.propTypes = propTypes;