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 ( - + /> ); } } 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} ); } - renderDatabaseSelect() { + renderSelectRow(select, refreshBtn) { return ( + + {select} + {refreshBtn} + + ); + } + renderDatabaseSelect() { + return this.renderSelectRow( -
-
- ( +
+ {t('Schema:')} {o.label} +
+ )} + isLoading={this.state.schemaLoading} + autosize={false} + onChange={this.changeSchema} + />, + this.onDatabaseChange({ id: this.props.dbId }, true)} + tooltipContent={t('Force refresh schema list')} + />, + )}
); } @@ -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 ? ( + ); return (
-
-
- {this.props.schema ? ( - - )} -
-
- this.changeSchema({ value: this.props.schema }, true)} - tooltipContent={t('force refresh table list')} - /> -
-
+ {this.renderSelectRow( + select, + this.changeSchema({ value: this.props.schema }, true)} + tooltipContent={t('Force refresh table list')} + />)}
); } renderSeeTableLabel() { @@ -318,21 +317,22 @@ export default class TableSelector extends React.PureComponent {
); } render() { - if (this.props.horizontal) { - return ( -
- {this.renderDatabaseSelect()} - {this.renderSchema()} - {this.renderTable()} -
); - } return ( -
-
{this.renderDatabaseSelect()}
-
{this.renderSchema()}
- {this.props.sqlLabMode && this.renderSeeTableLabel()} -
{this.renderTable()}
-
); +
+ {this.props.horizontal ? +
+ {this.renderDatabaseSelect()} + {this.renderSchema()} + {this.renderTable()} +
: +
+
{this.renderDatabaseSelect()}
+
{this.renderSchema()}
+ {this.props.sqlLabMode && this.renderSeeTableLabel()} +
{this.renderTable()}
+
} +
+ ); } } TableSelector.propTypes = propTypes;