diff --git a/superset/assets/javascripts/SqlLab/components/DatabaseSelect.jsx b/superset/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
deleted file mode 100644
index 49cbba0159b8..000000000000
--- a/superset/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-const $ = window.$ = require('jquery');
-import React from 'react';
-import Select from 'react-select';
-
-const propTypes = {
- onChange: React.PropTypes.func,
- actions: React.PropTypes.object,
- databaseId: React.PropTypes.number,
- valueRenderer: React.PropTypes.func,
-};
-
-class DatabaseSelect extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- databaseLoading: false,
- databaseOptions: [],
- };
- }
- componentDidMount() {
- this.fetchDatabaseOptions();
- }
- changeDb(db) {
- this.props.onChange(db);
- }
- fetchDatabaseOptions() {
- this.setState({ databaseLoading: true });
- const url = '/databaseasync/api/read?_flt_0_expose_in_sqllab=1';
- $.get(url, (data) => {
- const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
- this.setState({ databaseOptions: options, databaseLoading: false });
- this.props.actions.setDatabases(data.result);
- if (data.result.length === 0) {
- this.props.actions.addAlert({
- bsStyle: 'danger',
- msg: "It seems you don't have access to any database",
- });
- }
- });
- }
- render() {
- return (
-
-
-
- );
- }
-}
-
-DatabaseSelect.propTypes = propTypes;
-
-export default DatabaseSelect;
diff --git a/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx b/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
index de33febf8d83..8acd6c360737 100644
--- a/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
+++ b/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
@@ -3,10 +3,10 @@ import React from 'react';
import { Button } from 'react-bootstrap';
import Select from 'react-select';
import QueryTable from './QueryTable';
-import DatabaseSelect from './DatabaseSelect';
import { now, epochTimeXHoursAgo,
epochTimeXDaysAgo, epochTimeXYearsAgo } from '../../modules/dates';
import { STATUS_OPTIONS, TIME_OPTIONS } from '../constants';
+import AsyncSelect from '../../components/AsyncSelect';
const propTypes = {
actions: React.PropTypes.object.isRequired,
@@ -28,9 +28,6 @@ class QuerySearch extends React.PureComponent {
queriesLoading: true,
};
}
- componentWillMount() {
- this.fetchUsers();
- }
componentDidMount() {
this.refreshQueries();
}
@@ -89,18 +86,23 @@ class QuerySearch extends React.PureComponent {
changeSearch(event) {
this.setState({ searchText: event.target.value });
}
- fetchUsers() {
- this.setState({ userLoading: true });
- const url = '/users/api/read';
- $.getJSON(url, (data, status) => {
- if (status === 'success') {
- const options = [];
- for (let i = 0; i < data.pks.length; i++) {
- options.push({ value: data.pks[i], label: data.result[i].username });
- }
- this.setState({ userOptions: options, userLoading: false });
- }
- });
+ userMutator(data) {
+ const options = [];
+ for (let i = 0; i < data.pks.length; i++) {
+ options.push({ value: data.pks[i], label: data.result[i].username });
+ }
+ return options;
+ }
+ dbMutator(data) {
+ const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
+ this.props.actions.setDatabases(data.result);
+ if (data.result.length === 0) {
+ this.props.actions.addAlert({
+ bsStyle: 'danger',
+ msg: "It seems you don't have access to any database",
+ });
+ }
+ return options;
}
refreshQueries() {
this.setState({ queriesLoading: true });
@@ -125,21 +127,19 @@ class QuerySearch extends React.PureComponent {